Mobile Web Performance

maddesigns | Sven Wolfermann
Desknots Berlin Meetup, 17.10.2012

Introducing me

Sven Wolfermann,
35 - Frontend Freelancer from Berlin
Berlin Web Performance Group organizer
writes articles for the tech magazines
like T3N, PHP-Magazin, Screengui.de
Twitter: @maddesigns
Web: http://maddesigns.de

Why is performance on mobile even more important?

mobile network is much more slower than the wired network
mobile CPU is slower
mobile browsers are less performant
mobile context/usecase is different

Rendering

browser rendering on smartphones is usually 20%-60% slower
on older devices 200%-500% slower

Device limitations

Battery
Latency
Memory

Phones aren't Laptops

Mobile Browser Fragmentation

too many different implementations (webkit ≠ webkit)
older browsers are not capable of all modern features
can't update
rarely documented

impossible to optimize for all browsers/devices

Latency

DNS / HTTP Requests

Each host is a different lookup

Latency

Latency from Hamburg – Munich – Hamburg

time waste only through latency:

via DSL + WLAN: 33 ms + 20 ms + 5 ms = 58 ms

via UMTS: 33 ms + 175 ms = 208 ms

Reduce Requests

older desktop browser load

Concatenate Files

<script src="foo+bar+baz.js"></script>

2 Requests less

Yellow: Time for Requests. Blue: Download of file.

mobile Network

several parallel request are possible, but some older Android devices have max-connection limits per domain
on mobile every request is expensive, use as few requests as possible
for mobile too – concatenate and compress CSS & JS files!
and better: for index page write CSS & JavaScript direct into <head> and on followed pages via <link> and <script src> for caching
much better: use HTML5 localStorage for CSS & JavaScript

Use CSS3 whereever you can

border-radius
linear-gradient
box-shadow

no images needed

Tutorial [DE]

Benefits

Fewer HTTP Requests
Updatable
Scalable
Transitionable
Animatable
Fewer DOM Nodes

be careful with CSS3

large radial gradients

be careful with CSS3

large radial gradients

Keep gradients small
Requires CPU to create
Stored in memory
Memory: Radial > Linear
Images often render faster than gradients

but CSS gradients were painted onload, images are external resources

be careful with CSS3

Web Fonts
Box Shadow (inset)
Text Indent
background-size: cover

Recalculating / Repainting the UI

box-shadow: inset

Not rendered as static bitmap
Evaluated each repaint

background-size: cover

calculated to fit in container

be careful!

Estelle Weyl - Mobile Web Performance

Images

use the right format!

use PNG over GIF
PNG8 with limited colors
PNG24 for alpha transparency
additionally crush PNGs!
=> Mac: http://pngmini.com/
=> PC: http://psydk.org/PngOptimizer

Alpha Transparency in PNG-8 Images Without Using Fireworks

JPG for pictures! -> JPEGmini

http://www.jpegmini.com/

Retina JPGs

left: JPEG, 500x508, quality=60, size=87802
right: JPEG, 1000x1015, quality=15, size=83150 (file size -5%)

http://retinafy.me/jpgs/

SVG


SVG	7,57 KB	51,50 KB	4,50 KB

PNG 200px	6,50 KB	11,10 KB	4,18 KB
PNG 400px	11,80 KB	27,60 KB	8,32 KB
PNG 800px	18,50 KB	72,70 KB	14,80 KB

bold = PNG smaller than SVG

Great WPO Slides from @derSchepp [DE]

CSS Sprites

combine small images or icons into a larger image
positioned with CSS background-position

CSS Sprite [DE]

Data URI

HTML

<img src="logo-maddesigns.png" alt="Logo maddesigns">

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE...">

CSS

<style>
  .logo { background-image: url("logo-maddesigns.png") }
</style>

<style>
  .logo { background-image: url("data:image/png;base64,iVBORw...")}
</style>

http://en.wikipedia.org/wiki/Data_URI_scheme

Data URI

great for small images that can't use as CSS sprites
must appear only once
reduce HTTP-Requests

Drawbacks

not cacheble (cacheble in external CSS files)
IE8+ (IE8 Data-URI limitation < 24kb)

Caching

use Expires Header

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css                 "access plus 1 week"
ExpiresByType application/javascript   "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/gif                "access plus 1 month"
ExpiresByType image/jpeg               "access plus 1 month"
ExpiresByType image/png                "access plus 1 month"
</IfModule>

or other way round

<IfModule mod_expires.c>
  ExpiresActive on

  ExpiresDefault                          "access plus 1 month"

  ExpiresByType text/html                 "access plus 0 seconds"
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"
  ExpiresByType text/cache-manifest       "access plus 0 seconds"
</IfModule>

GZIPing

<IfModule mod_deflate.c>
  <FilesMatch "\.(js|css)$">
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

Resposive Images
could be another full session, so just a quick overview...

Responsive Images Service – ReSRC.it

http://www.resrc.it/

Resposive Images – a looooooong story

<picture> element

<picture alt="angry pirate">
  <source src=hires.png media="min-width:800px">
  <source src=midres.png media="min-width:480px">
  <source src=lores.png>
  <!-- fallback for browsers without support -->
  <img src=midres.png alt="angry pirate">
</picture>

srcset

<img src="face-600-200-at-1.jpg" alt=""
     srcset="face-600-200-at-1.jpg 600w 200h 1x,
             face-600-200-at-2.jpg 600w 200h 2x,
             face-icon.png 200w 200h">

New CSS Image Set

available prefixed in iOS6, Safari 6 and Chrome 21

adressing HiDPI Screens

background-image: -webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x);

Mobile Web Performance

Introducing me

Performance History (in short)

13 Performance Rules by Yahoo -> Yslow

Google Page Speed

Yslow Rules (classic)