More Weight Doesn't Mean More Wait

Scott Jehl takes Wired.com and decreases perceived performance by more that 9 seconds. What is brilliant about this is he doesn’t even look at optimising assets on the page. The images are still the same, the JS/CSS is still the same. What he does instead is change the way in which it loads… making it load the more important visual elements first and therefore allows users to see the content faster. This is what he does, 

  • Extract and Inline “Critical” CSS
  • Load full StyleSheets asynchronously (cached for return visits) 
  • Load all JavaScript asynchronously (yes, ads too!) 
  • Load fonts asynchronously and apply them in a progressive manner (fallback first) 
  • Style fallback fonts to match custom font sizes

 Formerly, much of the focus in web performance was concerned with optimizing assets like images and fonts, which does make for a shorter overall page load time. But today there are techniques we can use in addition to file optimization that have an arguably larger impact on how soon our users can see and use the content we’re delivering.

An excerpt from More Weight Doesn't Mean More Wait

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.