Faster Responsive Websites

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

Transcript

1. View Slide

2. FASTER
   RESPONSIVE
   WEBSITES
   

   View Slide

3. This talk is not about
   How to build a rocket-ship
   with Javascript
   

   View Slide

4. This talk is about
   Techniques to make our
   websites faster
   

   View Slide

5. THE PROBLEM
   

   View Slide

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/
   

   View Slide

7. View Slide

8. “Today the average
   website is 1.7MB
   httparchive.org/interesting.php
   

   View Slide

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
   

   View Slide

10. View Slide

11. View Slide

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/
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. LET’S START WITH A
    PAGE BUDGET
    

    View Slide

17. View Slide

18. Example:
    Less than 3 seconds
    to see something.
    

    View Slide

19. Example:
    Not bigger than 1MB.
    

    View Slide

20. Example:
    No more than 20 requests.
    

    View Slide

21. Now try to stick to it.
    (good luck!)
    

    View Slide

22. USING ONLINE TOOLS SUCH AS
    WEBPAGETEST.ORG
    

    View Slide

23. View Slide

24. View Slide

25. Coffee image
    

    View Slide

26. View Slide

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/
    

    View Slide

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/
    

    View Slide

29. Filmstrip
    

    View Slide

30. OLD-SCHOOL IS STILL COOL
    PROGRESSIVE ENHANCEMENT
    

    View Slide

31. View Slide

32. – Jake Archibald
    “All your users are non-JS
    while they're downloading
    your JS.
    https://twitter.com/jaffathecake/status/207096228339658752
    

    View Slide

33. Twitter.com dropped initial
    page load to 1/5th
    by moving rendering to server.
    https://blog.twitter.com/2012/improving-performance-twittercom
    

    View Slide

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/
    

    View Slide

35. View Slide

36. http://www.flickr.com/photos/not-so-much/2819702177/
    

    View Slide

37. TV
    FRIDGE CAR
    

    View Slide

38. MOBILE-LAST
    

    View Slide

39. Breakpoints are
    enhancements
    

    View Slide

40. MOBILE-FIRST
    

    View Slide

41. DELAY LOAD OF
    SECONDARY CONTENT
    

    View Slide

42. Core content
    Secondary
    Secondary
    

    View Slide

43. Core content
    Secondary
    Secondary
    

    View Slide

44. Core content
    Secondary
    Secondary
    

    View Slide

45. var deferred = $.get("/partial");
    !
    deferred.done(function (html) {
    $wrapper.html(html);
    });
    

    View Slide

46. Real life example:
    Press Jack - article
    nav / next article
    

    View Slide

47. Lazy load
    images
    

    View Slide

48. View Slide

49. https://github.com/
    sakabako/scrollMonitor
    

    View Slide

50. var watcher = scrollMonitor.create(context, offset);
    !
    watcher.enterViewport(loadImages);
    

    View Slide

51. 
    

    View Slide

52. 
    

    View Slide

53. OPTIMISING
    RESPONSIVE IMAGES
    

    View Slide

54. Biggest performance hit
    69% of mobile web traffic
    

    View Slide

55. Serve images in the
    correct sizes. Please.
    

    View Slide

56. CSS background images
    

    View Slide

57. .thing {
    background-image: url('images/small.png');
    }
    !
    @media (min-width: 30em) {
    .thing {
    background-image: url('images/medium.png');
    }
    }
    

    View Slide

58. Note:
    Not for content images
    

    View Slide

59. Proposed
    spec
    

    View Slide

60. 
    
    
    
    
    

    View Slide

61. http://ericportis.com/posts/2014/srcset-sizes/
    

    View Slide

62. 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
    

    View Slide

63. http://responsiveimages.org
    

    View Slide

64. View Slide

65. https://github.com/
    scottjehl/picturefill
    Version 2.0
    

    View Slide

66. front-end & back-end
    Javascript
    

    View Slide

67. 
    

    View Slide

68. var imageWidth = image.offsetWidth * window.devicePixelRatio;
    !
    var src = “http://hej.se/image.jpg?w=“ + imageWidth;
    !
    image.setAttribute("src", src);
    

    View Slide

69. Check browser for size and capabilities
    

    View Slide

70. Check browser for size and capabilities
    Request CDN
    

    View Slide

71. Do we have this image?
    Check browser for size and capabilities
    Request CDN
    

    View Slide

72. Return the image
    Do we have this image?
    Check browser for size and capabilities
    Request CDN
    

    View Slide

73. Prepare the image
    Return the image
    Do we have this image?
    Check browser for size and capabilities
    Request CDN
    

    View Slide

74. Prepare the image
    Return the image
    Return the image
    Do we have this image?
    Check browser for size and capabilities
    Request CDN
    

    View Slide

75. View Slide

76. THE AWESOMENESS OF
    SCALE VECTOR GRAPHICS
    

    View Slide

77. View Slide

78. SVG
    4KB
    uncompressed
    PNG
    10KB
    uncompressed
    

    View Slide

79. And it’s only
    markup text
    

    View Slide

80. Summary
    !
    !
    !
    !
    !
    

    View Slide

81. Summary
    Be aware. Set a "budget".
    !
    !
    !
    

    View Slide

82. Summary
    Be aware. Set a "budget".
    Progressive Enhancement is still cool.
    !
    !
    !
    !
    

    View Slide

83. Summary
    Be aware. Set a "budget".
    Progressive Enhancement is still cool.
    Prioritise loading of content with JS.
    !
    !
    !
    !
    

    View Slide

84. Summary
    Be aware. Set a "budget".
    Progressive Enhancement is still cool.
    Prioritise loading of content with JS.
    Images are the biggest hit.
    !
    !
    !
    

    View Slide

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.
    !
    !
    

    View Slide

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.
    !
    !
    

    View Slide

87. Think and prioritise
    performance
    from day one.
    

    View Slide

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/
    

    View Slide

89. There are techniques
    

    View Slide

90. We need to care more
    

    View Slide

91. View Slide

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

    View Slide