Web Performance für den mobilen Endanwender Web Performance für den mobilen Endanwender

by Andreas Lorer

Content:

Motivation

Motivation

Smartphone usage in germany

Motivation

„73% of mobile users said they've encountered a site that was too slow to load” — Akamai.com

Motivation

„As a product manager you should know that speed is feature number one” — Larry Page, Google 2010
„We surveyed 3000 users about 17 key product drivers. They rated speed 2nd most important only after easy to find content.” — Patrick Hamann, The Guardian 2014

Motivation

Effect of slow loading times

The Project

Project

Performance optimizing: andreaslorer.de

Project

Performance optimizing: andreaslorer.de


Why 1000 ms?

The Human Perception

Human Perception

Basics

Basics: Perceived Performance

Basics: Perceived Performance

Basics: Above the fold

„Elements above the fold were seen more than elements below the fold: the 100 pixels just above the fold were viewed 102% more than the 100 pixels just below the fold.” — Amy Schade 2015
Above the fold

Basics: Touch Event

<meta name="viewport" content="user-scalable=no">

Basics: Networks

Most time is spend on the network

Time on Network
Time on Network

Basics: Definitions

„describes the network duration between sending a package from A and receiving it on B”
„is the duration a package needs in the network to get from A to B and back.”

Basics: Mobile Networks

Generation Data rate Latency
2G 100 - 400 Kbit/s 300 - 1000 ms
3G 0,5 - 5 Mbit/s 100 - 500 ms
4G 1 - 50 Mbit/s < 100 ms
„Mitte 2013 konnten 70% der deutschen Haushalte über LTE verfügen. E-Plus startete mit LTE im März 2014.” — Bundesnetzagentur 2014

Basics: TCP - Three Way Handshake

TCP - Three way handshake

Basics: TCP - Slow Start

TCP - Three way handshake

Basics: Mobile Networks

Fetching a 40 Kilobyte file

fetching 40kB

Basics: Mobile Networks

Theoretical approach:

1000 ms Budget

Basics: Mobile Networks

HTTP Components

Http Components

Critical rendering path

Critical rendering path

Consinsts of 3 parts:

= Critical rendering path

Rendering

The browser rendering process:

Browser Render

Rendering Path


<!DOCTYPE html>
<meta charset="utf-8">
<title>Web Performance for mobile users</title>

<link href="assets/styles.css" rel="stylesheet" />
<script src="assets/script.js"></script>

<p> Hello world! </p>

Rendering Path


<!DOCTYPE html>
<meta charset="utf-8">
<title>Web Performance for mobile users</title>

<link href="assets/styles.css" rel="stylesheet" />
<script src="assets/script.js"></script>

<p> Hello world! </p>
Rendering Path

Critical rendering path

Critical rendering path

Critical rendering path

Analytics of the waterfall

Critical rendering path

Analytics of the waterfall

Critical rendering path

Analytics of the waterfall

Tools

Tools:

Tools: Speedcurve

Speedcurve

Tools: Webpagetest

Uses real devices:

Webpagetest

Optimizing

Optimizing: Reducing site weight

Optimizing: Respsonsive Images

Polyfill ¹: Picturefill


01  <link rel="stylesheet" href="picturefill.min.js">
02
03  <picture id="hero-image">
04      <!-- Large devices -->
05      <source srcset="someImg_lg.jpg" media="(min-width: 1367px)">
06      <!-- Medium devices -->
07      <source srcset="someImg_md.jpg" media="(min-width: 768px)">
08      <!-- Small devices -->
09      <source srcset="someImg_xs.jpg" media="(min-width: 300px)">
10      <!-- Fallback -->
11      <img srcset="fallback.jpg" alt="Some alt text">
12  </picture>
¹ Ein Polyfill [...] ist ein - meist in Javascript geschriebender - Code-Baustein, der in älteren Browsern eine neuere, von diesen nicht unterstützte Funktion mittels eines Workarounds nachrüsten soll. Beispielsweise sind Features von HTML5 in älteren Browsern nicht verfügbar. Webseiten können diese Funktionen trotzdem verwenden, wenn sie ein entsprechendes Polyfill mitliefern. — [Wikipedia 2015]

Best Practices

Best Practices

Results

Results

Measure throughout the project via google-spreadsheets

Results

Results

powered by - CSSS