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