Load stylesheets in background to increase page speed


Posted on Aug 16, 2020


featured image

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


dev javascript css html
Search
Side Widget
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!