Load stylesheets in background to increase page speed

Reading Time: < 1 minutes

With only two simple steps your pages will load faster, and the most important: using only native JavaScript

The trick will be to use a default tag in rel attribute and modify it once the page loads

Step 1

Include your stylesheets this way

<link id="stylesCss" as="style" rel="preload" href='/stylesheets/style.css' />

Step 2

After the page loads call this piece of code:


So the whole code will be

<script type="text/javascript">
   document.addEventListener("DOMContentLoaded", function(event) { 
      // load css styles after the page loaded

After the page loads the tag will be this:

<link id="stylesCss" as="style" rel="stylesheet" href='/stylesheets/style.css' />

And that’s it. The browser will listen to this action and will load the stylesheets properly. Now your page will load a bit more faster

Of course, you can do this for any other style you have

About the author

Andrés Canavesi
Andrés Canavesi

Software Engineer with 15+ experience in software development, specialized in Salesforce, Java and Node.js.

Related posts

Leave a Reply

%d bloggers like this: