10k Tips for a Lighter Page Load
Oh. You were expecting 10,000 tips weren’t you? You won’t find that many tips today. At least not here. But you will find some tips for keeping the initial weight of your progressively enhanced web experience under 10,240 bytes (10kB).
Perhaps you’ve heard of this year’s 10K Apart Competition. Or maybe you are just looking for some tips on how to optimize and measure performance byte–by–byte. Either way, let’s get started.
Start with HTML
Zip it Up
Be Lazy About It
I’m going to quote Wikipedia. Because I’m lazy.
Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. — Wikipedia
Sometimes we consider loading an asset only once the entire HTML document has loaded “lazy–loading”. But unless that asset is needed immediately it isn’t lazy–loaded. Say you allow users to choose from a set of different themes. Perhaps one of which is a high–contrast mode. You could lazy load the stylesheet(s) for these themes by only loading them once their associated theme has been chosen.
Lose the Font
We love web fonts but they are heavy. Not serving a web font will keep your page weight down and your Google PageSpeed score up. So don’t use them (initially).
Choose the Font
Designers like web fonts. Users like web fonts. I like web fonts. You like web fonts. We all like web fonts. So let’s add web fonts optionally and progressively. As demonstrated on markup.tips, a simple web component can be used to give users the option to opt–in to the web font of their choice. Use localStorage to remember their choice so the next time they return, be it next week or next year, the site will be delivered in accordance with their preferences. This is also an accessibility consideration as it gives users the ability to opt into fonts like OpenDyslexic.
Silence Your Sass
Sass is a CSS preprocessor. Over shadowed by the many other amazing things Sass allows you to do is the ability to use silent classes to group commonly used declarations together. Doing so will reduce the number of lines, and thus the weight, of your stylesheets. Discover more on using silent classes with Sass in this post.
With modern browsers gaining more and more market share you might not need jQuery. While the VanillaJS code you write may be less concise than jQuery syntax, freeing yourself of the weight of the jQuery library itself will keep the weight of your enhancement layer down.
Don’t Load Scripts that Won’t Work
Users may be stuck on an old browser for circumstances outside of their control. They could be using corporate machines they aren’t capable of updating or be in a country where modern operating systems and browsers are less accessible. Be considerate of these circumstances by only shipping usable bytes.
The HTML5 <picture> tag offers art direction and bandwidth considerations. You can dictate which image should be displayed based on things like viewport size, pixel density, or even supported image formats. For example, WebP provides superior lossless and lossy compression, but not all browsers support it. You can use the <picture> tag to deliver elements that load less bytes if superior formats are supported. Additionally you can only load high resolution images for screens capable of benefiting from high resolution images.
We’ve covered quite a few tips today. It’s probably time we let you get back to work on your next progressive and light weight addition to the web.