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.
<head>of your document. I highly suggest to try criticalCSS to automate this step.
<script>tags to the end of the body. While you’re at it, drop in a defer attribute as well.
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.