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 displayedUse 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.siteFree Responiveonsive and Fast eBook
Incoming network information API could be useful