Andy Hume: The Anatomy of a Responsive Page Load
Anthony Hume was speaking about responsive page load times at Responsive Conf, these are my notes from his talk.
Before you do anything else get these right:
content-encoding: gzipCache-Control: max-age=[far future]
Nothing else is as important as these.
Page load time
- Content
- Enhancement
- Leftovers (the user doesn't care about - analytics, advertising)
After HTML and CSS loads then the page is still usable. Then load in enhancements via JS on DOMReady. Once that's all done then load the analytics onLoad.
Scripts are loaded asynchronously. Written in via JS for older browsers - modern browsers support the async attribute. Not using JS insertion or async would mean all browsers would download the JS but modern browsers would load faster. If we can put the JS detection to the server we could conditionally insert the tag with async - RESS.
Webfonts can have serious performance implications - see talk from earlier today about this. Treat fonts as a progressive enhacements. Need to cut the mustard, need to support WOFF, need local storage for caching. When all of these are available and we have the font in the cache (base64 encoded in JSON) we write the CSS to the page. Why use local storage? The browser's cache isn't very reliable, especially on mobile. Next generation of app cache should improve situation.
Responsive images. Media queries are the biggest distraction in responsive design. Small, modular, reusable components are being used standalone. Viewport is irrelevant. Web Components are the future in this area. Use data attribues to specify responsive images as an enhancement - not for core images.
Responsive performance - performance is important for all web pages, there's nothing specific about responsive design. Responsive design is a collection of best practices that we should be doing anyway. Need to play up the inherent abilities of the web.