Faster Responsive Websites

Talk from the JavaScript meetup 7th of May in Reykjavík, Iceland

Transcript

2. FASTER RESPONSIVE WEBSITES
3. This talk is not about How to build a rocket-ship with Javascript
4. This talk is about Techniques to make our websites faster
5. THE PROBLEM
6. “75% of mobile users will leave the site if it takes more than 5 seconds to load. http://www.digitalmall.us/1150/smartphone-users-frustrated-with-mobile-web-experience/
8. “Today the average website is 1.7MB httparchive.org/interesting.php
9. http://httparchive.org/interesting.php?a=All&l=Oct%201%202013&s=Top1000 AVG. SITE 0 1 2 <1mb 2011 1.5mb 2013 2mb 2015 AVG. SITE 0 1 2 AVG. SITE 0 1 2
12. “87% of mobile users expect sites to load at least as fast, or faster than on their desktop. http://www.strangeloopnetworks.com/web-performance-infographics/
16. LET’S START WITH A PAGE BUDGET
18. Example: Less than 3 seconds to see something.
19. Example: Not bigger than 1MB.
20. Example: No more than 20 requests.
21. Now try to stick to it. (good luck!)
22. USING ONLINE TOOLS SUCH AS WEBPAGETEST.ORG
25. Coffee image
27. – Paul Lewis “The Speed Index is the average time at which visible parts of the page are displayed. http://aerotwist.com/blog/my-performance-audit-workflow/
28. – Paul Lewis “Paul Irish has, in the past, recommended a goal of less than 1,000. http://aerotwist.com/blog/my-performance-audit-workflow/
29. Filmstrip
30. OLD-SCHOOL IS STILL COOL PROGRESSIVE ENHANCEMENT
32. – Jake Archibald “All your users are non-JS while they're downloading your JS. https://twitter.com/jaffathecake/status/207096228339658752
33. Twitter.com dropped initial page load to 1/5th by moving rendering to server. https://blog.twitter.com/2012/improving-performance-twittercom
34. Airbnb experimented serving real HTML instead of JS and it felt 5x quicker. http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product/
36. http://www.flickr.com/photos/not-so-much/2819702177/
37. TV FRIDGE CAR
38. MOBILE-LAST
39. Breakpoints are enhancements
40. MOBILE-FIRST
41. DELAY LOAD OF SECONDARY CONTENT
42. Core content Secondary Secondary
43. Core content Secondary Secondary
44. Core content Secondary Secondary
45. var deferred = $.get("/partial"); ! deferred.done(function (html) { $wrapper.html(html); });
46. Real life example: Press Jack - article nav / next article
47. Lazy load images
49. https://github.com/ sakabako/scrollMonitor
50. var watcher = scrollMonitor.create(context, offset); ! watcher.enterViewport(loadImages);
51. <img data—lazy-src="http://path/to/image.jpg" />
52. <img src="http://path/to/image.jpg" />
53. OPTIMISING RESPONSIVE IMAGES
54. Biggest performance hit 69% of mobile web traffic
55. Serve images in the correct sizes. Please.
56. CSS background images
57. .thing { background-image: url('images/small.png'); } ! @media (min-width: 30em) { .thing { background-image: url('images/medium.png'); } }
58. Note: Not for content images
59. Proposed <picture> spec
60. <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>
61. http://ericportis.com/posts/2014/srcset-sizes/
62. <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" /> Available images and their width Breakpoints in CSS and image width relative to the viewport
63. http://responsiveimages.org
65. https://github.com/ scottjehl/picturefill Version 2.0
66. front-end & back-end Javascript
67. <img data-src="http://path/to/image.jpg" />
68. var imageWidth = image.offsetWidth * window.devicePixelRatio; ! var src = “http://hej.se/image.jpg?w=“ + imageWidth; ! image.setAttribute("src", src);
69. Check browser for size and capabilities
70. Check browser for size and capabilities Request CDN
71. Do we have this image? Check browser for size and capabilities Request CDN
72. Return the image Do we have this image? Check browser for size and capabilities Request CDN
73. Prepare the image Return the image Do we have this image? Check browser for size and capabilities Request CDN
74. Prepare the image Return the image Return the image Do we have this image? Check browser for size and capabilities Request CDN
76. THE AWESOMENESS OF SCALE VECTOR GRAPHICS
78. SVG 4KB uncompressed PNG 10KB uncompressed
79. And it’s only markup text
80. Summary ! ! ! ! !
81. Summary Be aware. Set a "budget". ! ! !
82. Summary Be aware. Set a "budget". Progressive Enhancement is still cool. ! ! ! !
83. Summary Be aware. Set a "budget". Progressive Enhancement is still cool. Prioritise loading of content with JS. ! ! ! !
84. Summary Be aware. Set a "budget". Progressive Enhancement is still cool. Prioritise loading of content with JS. Images are the biggest hit. ! ! !
85. Summary Be aware. Set a "budget". Progressive Enhancement is still cool Prioritise loading of content with JS. Images are the biggest hit. SVGs are awesome. ! !
86. Summary Be aware. Set a "budget". Progressive Enhancement is still cool Prioritise loading of content with JS. Images are the biggest hit. SVGs are awesome. ! !
87. Think and prioritise performance from day one.
88. “Measure. Treat performance as a core part of your site’s quality and don’t ship without understanding and accepting it’s performance. http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
89. There are techniques
90. We need to care more
92. Takk
    ! ! http://twitter.com/14islands
    ! http://facebook.com/14islands