Mobile Web Performance

http://estelle.github.io/viewsource

Don't Break the Mobile Web

Web View

Fast to ....

Load
Render
Respond
Understand

Beautiful
Useful
Eco-friendly

mypcwallpaper.com

Mobile Web Performance

Current Ecosystem
Performance Concerns
Issues and Solutions

Mobile Ecosystem

Top Devices of 2016

Top 10 best selliing smart phones in the world according to Monster News
Phone	Cost	RAM	ROM	CPU
Samsung GALAXY S7	$670	4 GB	32 - 64 GB	1.6 GHz
Apple iPhone 6s	$600	1 GB	32 - 128 GB	1.8 GHz
LG G5	$550	4 GB	32 GB	2.5 GHz
Huawei Nexus 6P	$550	3 GB	32 - 128 GB	2.0 GHz
Samsung Galaxy Note 5	$700	4 GB	32 - 64 GB	2.1 GHz
Sony Xperia	$600	2 GB	16 GB	1.5 - 2.0 GHz
Samsung Galaxy S6	$785	3 GB	32 - 128 GB	2.1 GHz
LG Nexus 5X	$580	2 GB	32 GB	1.8 GHz
Moto X Pure Edition	$299	3 GB	16 - 64 GB	1.8 - 2.5 GHz
Xiaomi Redmi Note 3	$172	2 - 3 GB	16 - 32 GB	2 X 1.8 GHz

Emerging Markets

Wireless Coverage in Emerging Markets

Top Devices: Indonesia

Top 10 best selliing smart phones in Indonesia - info
Phone	Cost	RAM	ROM	CPU
Nokia Asha 200	$27	32 MB	10 - 64 MB	FF
Nokia Asha 210	$27	32 MB	64 MB	FF
Nokia X2-01	$9	64 MB	55 MB	FF
Nokia C3-00	$45	64 MB	55 MB	FF
TECNO P5	$42	512 MB	4 GB	1.0 GHz
Nokia Asha 205	$27		64 MB	FF
Nokia Asha 201		10 - 32 MB	64 MB	FF
TECNO M3	$41	512 MB	4 GB	1.0 GHz
Infinix Hot Note X551	$142	1 GB	16 GB	1.4 GHz
Infinix Hot 2 X510	$112	1 - 2 GB	16 GB	1.3 GHz

FF = Feature Phone
Java with WAP 2.0/xHTML.
Opera/UC Browser

Browser shares available memory

Running Services
Other	73MB Avail: 255MB + 182MB in 21
Calendar		8.4MB
Process:com.htc.bgp
	ObexService	31:52:14
	Started by application: Touch to stop
AT&T Navigator		8.4MB
Process: com.telnav.app.android.congular
	ResoucePreLoader	Restarting
	Started by application: Touch to stop
AT&T Spots		2.4MB
Process: com.matchboxmobile.wasp
	WispService	31:52:14
	Started by application: Touch to stop
Media		4.1MB
Process: android.process.media
	DownloadService	31:52:14
	Started by application: Touch to stop
PVWmdrmService		2.2MB
Process: com.pv.wmdrmservice
	PVWmdrmService	31:52:14
	Started by application: Touch to stop

Device Features

RAM, GPU, Device size, and NFC support have been steadily increasing over the years.

Via OpenSignal

Dev Environments ≠ Mobile Experience

Battery

Dual Core? Battery!

Weight: 143g
Dimension: 138.3 x 67.1 x 7.1mm
OS: iOS 9 (upgrades to iOS 10)
Screen size: 4.7-inch
Resolution: 750 x 1334
CPU: Apple A9 (1.85 GHz dual-core)
RAM: 2GB
Storage: 16*/32/64/128GB
Battery: 1715mAh
Rear camera: 12MP
Front camera: 5MP

Open in separate window

Device Considerations - Phones aren't Laptops

Very powerful browsers
Less powerful CPUs
Not plugged In
Metered data
Tiny Screens
Different Interactions
(Touch / Keyboard / Mouse)

Battery
Latency
Memory
Responsiveness

Mobile Performance Concerns

Just because no one uses your mobile site, doesn't mean you don't need to improve it. Maybe no one uses it because the experience is awful.
— Dawn Parzych (@dparzych) March 18, 2016

I remember when 3G was primary mobile speed. It was slow but still worked, so why now when my phone says 3G it becomes completely useless.
— Stephen Gundee (@StephenGundee) March 23, 2016

November 2010 - Top 1,000

In 2010, content was Images=372kb, HTML=31kb, Stylesheets=24kb, Scripts=103kb, Fonts=1kb, and Other=17kb for a total of 626kb

November 2017 - Top 1,000

7 years later, in November 2017, content is Images=1531kb, HTML=71kb, Stylesheets=77kb, Scripts=613kb, Fonts=101kb, Video=1257 and Other=1kb for a total of 3,658 kb

2017 v 2010

584%

Open in separate window

Youtube Feathers:
Regular: 58 requests/1200 kB
Feathers: 14 requests/100 kB

Web Performance

Download: # of resources: images, fonts, HTML, scripts, and CSS loaded
Parse: File size of above resources
Execute: Parsing & Painting
Perceived Performance: User perception of load speed and reaction time.(study)

Issues and Solutions

Knowns

# of HTTP Requests
# of Bytes
Images, Animations, Interactions
Squishiness
Responsiveness

Unknowns

Network (latency, bandwidth)
Hardware (processing power)
Browser (blocking, features)

While we control how we build the site, we don't have control over ...

What's involved in a page load?

HTTP request
DNS lookup
TCP Connect
HTTP request sent
Server Magic
Server Sends response
Browser receives/parses response
Resources fetched from Cache
Parse & Execute Scripts
Render Site

Stylesheets are blocking
Scripts are blocking.
Each request: go back to DNS lookup or HTTP Request

Latency

whether tethered or on work wifi, when you need to make a DNS request, it's a simple request from browser to DNS server, back to browser, to the host computer

Latency

On mobile, the request goes from your device to the tower, to the phone company to the dns server, back to the phone company, back to the tower then to your phone. A second round trip is then needed to get the actual content

Latency"Last Mile"

CDN
Connection Setup
- TCP Handshake
- SSL/TLS Handshake
BBR Congestion Control
Dynamic Packet Recovery (DPR)

RAIL

Four phases of interaction: end-user’s perception

Response to Input touch_app
Animation & Scrolling directions_run
Idle alarm
Page Load cached

Video: How Users Perceive the Speed of The Web (2015): Paul Irish / Google

Navigation Timing API metrics

6s. 29s. 37s.

Screenshot of WebPageTest waterfall chart showing light colors in a load reflect time to first byte

TTFB = Latency + Server Time
Limit # of handshakes & bandwidth req

In Our Control

# of HTTP Requests
# of Bytes
Images, Animations, Interactions
Squishiness
Responsiveness

Out of Our Control

Network (latency, bandwidth)
Hardware (processing power)
Browser (blocking, features)

Open in separate window

Better Performance

TTFB = Latency + Server Time
Limit # of handshakes & bandwidth req

Tools & Rules

YSlow
PageSpeed
WebPageTest
Developer Tools
Lighthouse

Minimize Requests
Reduce DNS lookups
Avoid Redirects
Cache Headers
Only load needed resources
Minimize size & optimize media
Put CSS in the <head>
Put JS at the bottom
Don't scale images in HTML
Concatenate, Minify, Refactor
Don't block the UI thread
Use HTTP/2
Use a CDN
Use SSL
~~Use AMP~~
Offer Progressive Web Apps
Develop Mobile first
Minimize the number of DOM nodes
Avoid reflows and repaints
Use the right input type
Configure the viewport
Make the site squishy
Ensure legibility
Serve the right size images
Effective content strategy
Create a performance budget and stick to it
etc.

Lighthouse

https://developers.google.com/web/tools/lighthouse/

Progressive Web App (PWA checklist)
Performance
Accessibility (Google Intro)
Best Practices

Open in separate window

#1: Configure the Viewport

<meta name="viewport"
   content="width=device-width, ...">

width	width of device's virtual viewport.
device-width	width of the device's screen.
height	height of device's virtual viewport
device-height	height of the device's screen.
initial-scale	Initial zoom on page visit. default 1.0.
minimum-scale	If user scalable, as small as it can zoom on the page.
maximum-scale	If user scalable, maximum amount visitor can zoom on the page.
user-scalable	Can the web zoom in and out. Values are yes or no.

One line of code....

Don't be a jerk like GMail

<meta name="viewport" 
  content="initial-scale=1.0, 
           maximum-scale=1.0, 
           minimum-scale=1.0, 
           user-scalable=no, 
           width=device-width">

#2 Optimize all Images

GZip
Remove Image Metadata
Resize Images
Optimize Images
Use the Right Image Format
Reduce the Number of Images
Leverage CSS

#2 Optimize all Images

GZip
Minify and GZip SVG and font files. In that order. See tips for optimising SVG delivery.
Remove Image Metadata
Metadata adds bytes and can be a security risk by exposing geographical data. You can Strip EXIF metadata from multiple images at a time.

#2 Optimize all Images

Resize Images
Serve the smallest image file for the screen size and resolution.
- Serve scaled images.
  Resizing images means downloading unneeded pixels and take longer to decode and paint.
- <picture> element and srcset attribute
- Old browsers? load small background images in CSS Internet Explorer, consider using Picturefill or JS-free Clown Car Technique.

Right Size Your Images: Unneeded pixels

240 x 240 = 57,600
200 x 200 = 40,000
            17,600

440 x 440 = 193,600
400 x 400 = 160,000
             33,600

640 x 640 = 409,600
600 x 600 = 360,000
             49,000

840 x 840 = 705,600
800 x 800 = 640,000
             65,600

CloudFour: image breakpoints

Scaling can be slow....

Scaled: 1,850 milliseconds

Right-sized: 625 milliseconds

blue = CPU used to decode
green = FPS (more is better)
purple = rendering PhysicsOfFast

#2, sect. 3, part B
`<picture>, <source> & srcset`

<picture>
  <source srcset="large.jpg" 
          media="(min-width: 1000px)">
  <source srcset="small.jpg" 
          media="(min-width: 500px)">
  <img src="default.jpg"
       srcset="highresolution.jpg 2x" 
       alt="do not forget the alt">
</picture>

#2 Optimize all Images

Optimize Images
- Compressed without noticeably degrading quality.
- Image compression: ImageOptim, ImageAlpha, TinyPNG, PhotoShop, etc.
- JPEG Image compression automation? (see SmartVision).

#2 Optimize all Images

Use the Right Image Format
Image types include SVG, GIF, JPEG, PNG, and WebP.
- GIF: <= 256 color pallette, need transparency and/prlow quality animation
- SVG: scalable, animatable, unlimited color pallette
- PNG: > 256 colors if transparency needed.
- JPEG: raster images
- WebP: Animation, transparency, great resolution, small file size. Blink only.
- JPEG-XR: For Edge

Smallest file size

Browser	Optimal image format
Chrome	WebP
IE 9+ / Edge	JPEG-XR
Opera	WebP
Safari	JPEG-2000

You don't have to change the file extension.

Reduce the Number of Images
- Sprites
- Just fewer images
Leverage CSS
- Image Masking. (article)
- CSS Effects: gradients, borders, rounded corners, shadows, etc.
- Sprites: especially without HTTP/2
- CSS Filters
- Media Queries serve hi-res images to hi-res devices
- Animation: steps() as alternative to animated gifs.
- Leave out prefixed property/values

Open in separate window

#3: Optimize Video

Omit videos
Compression
Optimize source order
Remove muted audio

November 1, 2017

In November 2017, content is Images=1531kb, HTML=71kb, Stylesheets=77kb, Scripts=613kb, Fonts=101kb, Video=1257 and Other=1kb for a total of 3,658 kb

November 1, 2015

In July 2015, content is Images=1348kb, HTML=55kb, Stylesheets=68kb, Scripts=344kb, Fonts=102kb, Video=204 and Other=4kb for a total of 2135 kb

#3.1 Omit the video

<video .... id="hero-video">

Do you really need a hero video? On a mobile device?

#hero-video {  display: none;  }
@media screen and (min-width: 640px) {
  #hero-video {  display: inherit;  }
}

navigator.connection.effectiveType

#3.3: Optimize Source order

Order from smallest to largest*

<video width="400" height="300" controls="controls">
  <!-- WebM: 10 MB -->
  <source src="video.webm" type="video/webm" />
  <!-- MPEG-4/H.264: 12 MB -->
  <source src="video.mp4" type="video/mp4" />
  <!-- Ogg/Theora: 13 MB -->
  <source src="video.ogv" type="video/ogv" />
</video>

* check for quality consistency

#3.4 Remove audio that is muted

<video autoplay="" loop="" muted="true" id="hero-video">
  <source src="web_banner.webm" 
          type='video/webm; codecs="vp8, vorbis"'>
  <source src="web_banner.mp4" type="video/mp4">
</video>

ffmpeg -i original.mp4 -an -c:v copy audiofree.mp4

-an: Disable audio recording in output.

#4: Everything Else

Code Order

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="UTF-8">
   <title>Titles are good for SEO</title>
   <link rel="stylesheet" href="prettyWhenItLoads.css"/>
 </head>
 <body>
   <!-- lots of good content -->
   <script src="dontBlockHTMLandCSS.js" async defer></script>
 </body>
</html>

JavaScript

Render cost: JS (and CSS and images)
JS (download, parsing & executing)
Dynamic JS: ⬆ rendering cost (can't be cached).
AJAX: waking up the radio communications
All scripts loaded and parsed (even if not used)
Reduce JS to only what is needed
Don't let 3rd party scripts be your SPOF
Are libraries really necessary?
- Include only functions used by page to reduce energy use.
- Goal of most libraries is equalize across browsers
  (not necessry in mobile space)
- Libraries simplify web development, but increase energy use.
- You don't need a framework for that

Battery Consumption

CPU Drains the battery. Avoid using it!

Avoid Reflows & Repaints
Minimize JavaScript (size and activity)
Avoid JavaScript Animations (requestAnimationFrame())
Avoid WebGL (or otherwise warming up the phone)
Let the radio idle
Implement what you learn today

Let your device take long, long breaks!

JavaScript in Pink

The effect of RDD...

Screenshot of WebPageTest waterfall showing a 2 second DOM content loaded event

Minimize the DOM

Minimize number of nodes
- Uses up memory & time
- Measures each node for each repaint
Cache DOM lookups
- Store them!
Minimize DOM manipulations
- Batch DOM queries & DOM manipulations separately

More nodes = more expensive!

Squishy ≠ Responsive

Disney Went "Mobile"

	Wide / Desktop	Narrow / Mobile
Requests	77	123
Assets	3752kB	3344kB
Load	10.62s	34.10s
DOMContentLoaded	9.74s	30.94s
	desktop stats	mobile stats

HTTPS

So, here's the deal:
Browsers made a decision to refuse to enable any new advanced speed features, moving forward, for unencrypted websites.
— failed meme (@SwiftOnSecurity) March 29, 2017