Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Faster Responsive Websites

Faster Responsive Websites

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

D34efae5a5bdbb00ce3b300c78cf359a?s=128

14islands

May 07, 2014
Tweet

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