1 of 17

Designing for Performance

Matt Busche

Developer at Nationwide Insurance

@mrbusche

bit.ly/DSMWebGeeksMatt

2 of 17

Responsive Design

  • Watches, phones, e-readers, tablets, laptops, monitors, TVs, projectors
  • Two orientations for most

3 of 17

Responsive Design

  • 333M smartphones sold Q3 2015
  • 6.2 visits on 2.6 devices

4 of 17

Load Times

  • Average page size is 2253KB
    • 63.52% Images (1431 KB)
    • 16.07% Scripts (362)
    • 8.26% Video (186)
    • 5.37% Fonts (121)
    • 3.42% CSS (77)
    • 2.97% HTML (67)
    • .18 % Other (4)

​

5 of 17

Why do we care?

  • 80% of worldwide users are on 3G or worse
  • 60% of US users are on 3G or worse

​

6 of 17

​

Decreasing Image Load Time

  • PNG - decrease # of colors
  • JPEG - better encoding
  • TinyPNG/TinyJPG
  • ImageOptim (mac)
  • banner 191.5KB -> 82.5KB

7 of 17

​

Decreasing Image Load Time

  • svg
  • vector based graphics
  • Supports bitmaps
  • Well supported 96.69%
  • Can fallback using Modernizr

8 of 17

​

Decreasing Image Load Time

9 of 17

Grunticon

  • Grunt task
  • Upload folder of svg images
  • Generates pngs and css
  • svg data uri
  • png data uri
  • png images
  • Web based

10 of 17

Decreasing css load time

  • Minify files
  • Concat files
  • gzip

11 of 17

Pros and cons of one css file

  • only one http request
  • may send more than you need
  • css is redundant; gzip is great

12 of 17

Decreasing js load time

  • minify files
  • reduce # of files (concat)
  • minify/gzip better with one file

13 of 17

Decreasing js load time

  • obfuscation

14 of 17

Load time using basic tips

  • 60% savings on images, JS, CSS
  • Average page size is 1126KB
  • 50.83% Images (572 KB)
  • 12.86% Scripts (145)
  • 16.52% Video (186)
  • 10.75 Fonts (121)
  • 2.74% CSS (31)
  • 5.95% HTML (67)
  • .36 % Other (4)
  • Excludes gzip savings

15 of 17

Perceived Performance

  • Short attention span
  • Detecting above the fold css
  • There is no fold
  • Lazy load content

​

16 of 17

Progressive Enhancement

  • Not just older browsers
  • Network behavior
  • Many people still on 3G and 2G/Edge
  • Content Blockers iOS9

​

17 of 17

HTTP/2

  • Improved Performance - transferred in binary (no translating)
  • Multiplexing - multiple concurrently open streams
  • Prioritization - determined by the browser
  • Compression - headers are redundant

​