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:

      
document.getElementById('stylesCss').rel='stylesheet'
      
    

So the whole code will be

      
<script type="text/javascript">
   document.addEventListener("DOMContentLoaded", function(event) { 
      // load css styles after the page loaded
      document.getElementById('stylesCss').rel='stylesheet'
   });
</script>
    
    

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: