Faster Responsive Websites

Transcript

1. None

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/
7. None

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
10. None
11. None

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/
13. None
14. None
15. None

16. LET’S START WITH A PAGE BUDGET

17. None

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

23. None
24. None

25. Coffee image

26. None

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

31. None

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/
35. None

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

48. None

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

64. None

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
75. None

76. THE AWESOMENESS OF SCALE VECTOR GRAPHICS

77. None

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

91. None

92. Takk
    ! ! http://twitter.com/14islands
    ! http://facebook.com/14islands