#ASKTHEINDUSTRY 09: My competitors’ sites are slow as hell, how can I exploit this fact and get in the top 5%?
Sometimes hitting your performance budget is just a matter of best practices, other times it requires a little bit more of.. dancing.
I have been traveling a lot on the underground lately. I’ve had the pleasure to browse news sites on a flaky 3G connection, and it has been.. fun. Sometimes it takes all the journey to just go past the initial blank screen.
Sometimes it takes all the journey to just go past the initial blank screen.
Your highest priority in the delivery process should be to serve HTML that’s ready to begin rendering immediately upon arrival in the browser. Unfortunately, that’s not the way sites typically work.
The good news is it doesn’t need to be this way. It is conceptually pretty simple to achieve a great First Paint for most sites, thus I figured I would compile a checklist of the optimizations that almost no one is deploying, but that make the real difference.
- Embed the most basic styles for your Above The Fold (ATF) content in the <head> of your document. I highly suggest to try criticalCSS to automate this step.
- Move all your <script> tags to the end of the body. While you’re at it, drop in a defer attribute as well.
- Load asynchronously all the styles that you haven’t embedded in the <head> via JavaScript. You can read more here about this technique.
- Optimize Web Font loading: pick the technique from The Bible that is most convenient for your case.
- If you absolutely need to include big images in your ATF, consider inlining them for an optimal experience. You can learn how to do this here.
There you go. It may not be easy to introduce these steps in your process, but if you manage to, I promise you’ll get far ahead anyone else.
This piece is part of the #ASKTHEINDUSTRY project, a series of daily conversations with the Web Dev industry. You ask, I’ll answer, or find someone who can.
