How to preload your CSS and why you should
So you’re trying to make your website load quicker, and you’ve done everything you know to quicken the page load time. But there are still some problems and you keep getting an issue with render blocking when you run the page through Google Page Speed tools.
What can you do to make things load quicker?
What is preload?
Preload essentially tells the browser that there’s this file that you need to load, but you don’t want to load it just yet. Instead, you just want it there while the rest of the page loads first. Then at some point you’re going to call it like a normal call to an external stylesheet.
How to preload your CSS
That’s it, right? Well not quite.
<script> var usedLaterScript = document.createElement('script'); usedLaterScript.src = 'used-later.js'; document.body.appendChild(usedLaterScript); </script>
Why should you do this?
Now, why should you go through all this trouble? Well the answer is speed. Speed is what we’re after. How can we make cool and informative websites but keep them loading fast?
Preloading your CSS (and other external resources) helps the page load quicker. When you’re using preload, you’re moving the CSS load to after the window.load event, meaning the rest of the page can load as well as the CSS.
This change might not be noticeable on small websites with small stylesheets. But with bigger stylesheets and websites, and modern web applications, this change can really help accelerate the page load speed. And that means everything these days.
So try it and see what happens. I think you’ll be happy with the results.