overview how to make responsive websites fast again #perfmatters

1. RESPONSIVE AND FAST
( )Sven Wo fermann @maddesigns

2. PERFORMANCE

3. MOTO.OAKLEY.COM
85.4MB page weight
471 HTTP requests
2 minutes 45 seconds
until loading screen replaced with content
4 minutes 10 seconds until onLoad event
http://hawksworx.com/blog/oakleys-monster-page-of-baubles/

4. 85.4 MB,
471 REQUESTS!
THIS IS NOT RWD!

5. MOTO.OAKLEY.COM FAIL
ok, ok, Oak ey does it better now:
JUST 14.2MB, 291 request (more than 70MB ess)

6. with mobi e user-agent?
6.7MB, 114 requests :/
http://hawksworx.com/b og/oak eys-moto-diet/

8. This particu ar page weighs in at 8-9 megabytes inc uding a of its
assets and advertising […] starts rendering a er about 10.5s
http://www.fi amentgroup.com/ ab/weight-wait.htm

9. ” RWD may make your pages ook better on a variety of devices,
but it doesn’t automatica y make your pages oad better on a
variety of devices.
It’s a about imp ementation. “

11. M dot or RWD. Which is faster?
In conc usion, these findings show that RWD sites can indeed
compete with m dot sites in terms of oad time!
http://bigqueri.es/t/m-dot-or-rwd-which-is-faster/296

12. ”B ame the imp ementation, not the technique“
Tim Kad ec

13. OUR PAGES ARE FAT!
56kb HTML
63kb CSS
97kb Fonts
227kb Videos
329kb Scripts
1.310kb Images
~ 2 MB total
http://httparchive.org

15. DAVE RUPERT RWD-TESTS
Media queries are responsib e for ~12% (2.8kb) of my CSS weight.
For every 8 ines of CSS I write, one more is needed to make it
responsive.
In Conc usion: Expect RWD to add ~10%
It appears that RWD has added 4.8kb (~2%) to my tota page
weight. — http://daverupert.com/2014/07/rwd-b oat/

16. 85% of mobi e users expect pages to oad as fast or faster than
they oad on the desktop.
Kiss Metrics

17. WHEN DO YOU THINK ABOUT
PERFORMANCE IN YOUR PROJECT?

18. Path to Performance by Katie Kovalcin

19. Path to Performance by Katie Kovalcin

20. PERFORMANCE CULTURE
Performance optimization is a process NOT an event.
Performance is a cu tura thing - and starts with design.

21. If you want to “se ” performance,
discuss in sa es, not deve opment.

22. Amazon's ca cu ated that a page oad s ow-down of just one
second cou d cost it $1.6 bi ion in sa es each year.
A 2009 A/B Study
Goog e has ca cu ated that by s owing its search resu ts by just
four tenths of a second
they cou d ose 8 mi ion searches per day.
FastCompany

23. WHAT IS FAST?

24. TIME & USER PERCEPTION
Delay User perception
0–100 ms Instant
100–300 ms Small perceptible delay
300–1000 ms Machine is working
1,000+ ms Likely mental context switch
10,000+ ms Task is abandoned
I ya Grigorik – High-Performance Browser Networking

25. 1000MS

26. BREAKING NEWS AT 1000MS
by Patrick Hamann (about )http://www.theguardian.com
https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-ve ocity-eu-2014

27. DESIGNING FOR PERFORMANCE!
Book by Lara Hogan

28. PERFORMANCE BUDGET

29. PERFORMANCE BUDGET METRICS
http://timkad ec.com/2014/11/performance-budget-metrics/

30. PERFORMANCE BUDGET GOALS
There are a coup e of factors for which a
certain metric or KPI can be e aborated:
page load time
page weight
PSI (page speed index) Score
load time
first paint
speed index
visually complete
number of requests
or “time to first tweet”

31. PERFORMANCE BUDGET EXAMPLE
€500 month y budget
€300 rent
€100 groceries
€100 clothes

32. PERFORMANCE BUDGET EXAMPLE
€400 month y budget
€300 rent
€50 groceries
€50 clothes

33. PERFORMANCE BUDGET EXAMPLE
400kb performance budget
50kb fonts
50kb css
300kb images

34. PERFORMANCE BUDGET EXAMPLE
400kb performance budget
100kb fonts
50kb css
200kb images
50kb javascript

35. YOU CAN’T SPEND
WHAT YOU DON’T HAVE!

36. GOOD PERF BUDGETS
600KB total page weight
20 requests
1000 speed index
1s start render time
Less than 3 seconds to see something on 3G.

37. MAINTAINING A PERFORMANCE GOAL
3 options:
1. Optimize existing feature
2. Remove existing feature
3. Don’t add

38. MEASURING
http://www.webpagetest.org/

39. THE NETWORK WATERFALL

40. WHY IS MY SITE SLOW ON MOBILE?
“We’re on rea LTE now?!“

41. BANDWIDTH VS. LATENCY
Bandwidth
Maximum throughput of a ogica
or physica communication path
Latency
The time from the source sending a packet
to the destination receiving it

42. LATENCY
http://chimera. abs.orei y.com/books/1230000000545/ch01.htm

43. LATENCY ON MOBILE NETWORKS
http://www.aosabook.org/en/posa/mobi e-perf-images/figure1.png

44. BANDWIDTH VS. LATENCY
http://chimera. abs.orei y.com/books/1230000000545/ch01.htm

45. IT DOESN'T MATTER HOW
SMART YOUR PHONE IS,
IF YOUR NETWORK IS DUMB
— Bruce Lawson (@bruce )

46. LATENCY
1. Latency defines the speed of the how the web loads.
2. Mobile’s growth means average latency is going up.
3. Optimizing for latency means optimizing for request count.

47. PREPARE YOUR SITE FOR THE FIRST 14KB
TCP s ow start
http://chimera. abs.orei y.com/books/1230000000545/ch02.htm #SLOW_START

48. PERFORMANCE TIPS

49. CONCATENATE
concatenate useful chunks of CSS & JavaScript
On 3G, a new 10k request equals ~100kb of concatenated
content.
But only concatenate styles and scripts, that are used on
that page

50. MINIFY, COMPRESSION AND SHRINKING
Minify CSS & JavaScript
And GZIP!
Compress Images! (Strip Image Metadata)

51. RESPONSIVE IMAGES

53. BASIC IMAGE PERFORMANCE TIPS:
CSS Sprites (pixel image sprites)
SVG sprites
optimize images (JPEGmini, PNGmini, …)
more advanced WebP, MozJpeg
do not deliver larger files than needed

54. IMAGEOPTIM

55. SVGO GUI

57. APPROPRIATE SIZED IMAGES
http://twitpic.com/c6kbm3/fu

58. to remember – average size of a images ~1.3 MB!

59. WRAP BACKGROUND-IMAGE IN MEDIA QUERIES
/* load only on smaller screens */
@media (max-width: 600px) {
.module {
background-image: url('images/image-max600.png');
}
}
/* load on screens larger than 600px */
@media (min-width: 600px) {
.module {
background-image: url('images/image-min600.png');
}
}
Browsers oad on y matched background-image
-› wrap them in @media query if they
change between different viewports

60. RESPONSIVE IMAGES

61. RESPONSIVE <IMG> WITH SRCSET + SIZES
<img src="https://unsplash.it/16/9"
srcset="https://unsplash.it/960/540 960w,
https://unsplash.it/640/360 640w,
https://unsplash.it/480/270 480w,
https://unsplash.it/320/180 320w"
sizes="(min-width: 1280px) 480px,
(min-width: 1024px) 444px,
(min-width: 640px) 325px,
100vw"
alt="dummy image">
hint for debugging: c ear cache!
for srcset, when a arger image resource is in cache,
a sma er image down oad is not triggered

62. srcset/sizes provides information to browsers
<picture> provides instructions to browsers.

63. <PICTURE>
art direction images and type switching

64. <PICTURE>
<picture>
<source media="(min-width: 650px)" srcset="kitten-large.png">
<source media="(min-width: 465px)" srcset="kitten-medium.png">
<!-- img tag for browsers that don't support picture element -->
<img src="kitten-small.png" alt="a cute kitten">
</picture>
use or for cross browser-supportrespimage picturefi

65. LAZY LOAD RESPONSIVE IMAGES
- lazysizes is a […] lazyloader for images (including
responsive images picture/srcset), iframes, scripts/widgets
and much more.
- my blog about CSS for lazy
loading images (german)
- Responsive Images as a Service
lazysizes
Responsive Images – lazy loading
WURFL Image Tailor (WIT)

66. WEB FONTS

68. FONT LOADING 101
IE Firefox WebKit Blink
Blocking ✗ ✔ ✔ ✔
Timeout - 3s - 3s

69. TIPS FOR USING WEB FONTS
todays most supported web font formats: .ttf, .woff, .woff2
use woff2!
Google Fonts delivers subsetted fonts (only load a subset of a
font file [latin/german/french subset]) to supported browsers
(Chrome)
but in general: host the fonts by yourself, save DNS requests
avoid base64 encoding for faster page rendering
http://www.sitepoint.com/improving-font-performance-subsetting- oca -storage/

71. ICON FONTS - CHOSE CAREFULLY!
Font Awesome is a fu suite of 519 pictographic icons
https://github.com/FortAwesome/Font-Awesome

72. NOT SO AWESOME!

73. FONT AWESOME ON ICOMOON.IO
If you on y use a bunch of icons, strip down the fi es with
icomoon.io

74. ICOMOON
pick your icons

75. ICOMOON
save as font (or SVG) and save Kb!

76. SVG ICONS (SPRITES)
SVG Sprites vs. Icon Fonts

77. using web fonts on y on arger disp ays (“faster connections”)?
@media screen and (min-width: 48em) {
body {
font-family: 'WebFont', Fallback, sans-serif;
}
}

78. PERFORMANCE BUDGET
“Is the extra 135kb worth the aesthetic change?”
“Does the heavier font kit better represent the brand?”

79. THE CRITICAL
RENDERING PATH
The intermediate steps between receiving the HTML, CSS, and
JavaScript bytes and the required processing to turn them into
rendered pixe s

80. INLINING CRITICAL CSS
in ine the most critica CSS & JS to render in this specific
viewport (difficu t with RWD - different viewports)
<head>
<style>
/* inline critical CSS */
</style>
</head>
async who e CSS (with ), maybe use cookies to check
if user has cached version of CSS
oadCSS.js

81. DON'T TRY TO OUTSMART THE
BROWSER!

82. FUTURE OF CRITICAL CSS:
async CSS with re ="pre oad"
<link rel=preload href=/non-block.css as=stylesheet onload=yourLogic() />

83. More Weight Doesn't Mean More Wait
fi amentgroup

84. More Weight Doesn't Mean More Wait
Scott Jeh removed ~8s in oading without removing content

85. HTTP/2
todays performance tips can be wrong with HTTP/2

86. PERFORMANCE IS A REQUIREMENT
NOT AN EXTRA FEATURE

87. THANKS FOR YOUR
ATTENTION!
Sven Wo fermann | maddesigns
Twitter: @maddesigns
Web: maddesigns.de