London Web Performance March

Responive and Fast - Michael Gooding and Ellen van Keulen

slides available on speaker deck

  • Display cost = bytes per pixel
  • Images are a big offender, no images can half the load time of a page
  • Responsive images can save on average 70% of our image weight (image weight being 2/3rd page weight usually)
  • Srcset, picture element, and client hints are available to us in various browsers
  • For picture element, take a look at Scott Jehl’s PictureFill
  • display:none; images are still downloaded, even though they’re not displayed
  • Use js to add src for images that might be hidden on certain sizes
  • Be careful with JS added images, can’t be found with pre-parsers
  • Consider lazy loading images that are significantly below “the fold” in product listing pages etc
  • What worked for one site may not work for another site
  • Look at Paul Kinlan’s Chrome Bookmarklet for analysing critical CSS (video demo)
  • Unused JavaScript (like image gallery stuff) - don’t load it
  • Conditionally load the JS you need using JS
  • SPOF-O-Matic to disable certain scrips to see what effects they have on load
  • DOM Monster plugin can give hints on markup bloat
  • You can use UA sniffing to implement RESS and reduce the page load (personally I wouldn’t advise it though)
  • Consider alternative formats to “just JPEG” for images. Picture element can help
  • Bonus: Adjust image quality based on network conditions
  • Aim to get your RWD site on mobile to be as light as a typical m. site
  • Free Responiveonsive and Fast eBook

  • Incoming network information API could be useful