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

14islands

May 07, 2014
Tweet

More Decks by 14islands

Other Decks in Programming

Transcript

  1. “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/
  2. “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/
  3. – 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/
  4. – Paul Lewis “Paul Irish has, in the past, recommended

    a goal of less than 1,000. http://aerotwist.com/blog/my-performance-audit-workflow/
  5. – Jake Archibald “All your users are non-JS while they're

    downloading your JS. https://twitter.com/jaffathecake/status/207096228339658752
  6. Twitter.com dropped initial page load to 1/5th by moving rendering

    to server. https://blog.twitter.com/2012/improving-performance-twittercom
  7. 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/
  8. .thing { background-image: url('images/small.png'); } ! @media (min-width: 30em) {

    .thing { background-image: url('images/medium.png'); } }
  9. <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
  10. var imageWidth = image.offsetWidth * window.devicePixelRatio; ! var src =

    “http://hej.se/image.jpg?w=“ + imageWidth; ! image.setAttribute("src", src);
  11. Return the image Do we have this image? Check browser

    for size and capabilities Request CDN
  12. Prepare the image Return the image Do we have this

    image? Check browser for size and capabilities Request CDN
  13. Prepare the image Return the image Return the image Do

    we have this image? Check browser for size and capabilities Request CDN
  14. Summary Be aware. Set a "budget". Progressive Enhancement is still

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

    cool. Prioritise loading of content with JS. Images are the biggest hit. ! ! !
  16. 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. ! !
  17. 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. ! !
  18. “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/