Search code examples
jquerycssrender-blocking

Load CSS only when template is completely done rendering

I had a link to boostrap stylesheet cdn that was causing some render blocking issues which was performing my site performance according to Google Page Speed Insights. I solved this by only taking the required above the fold bootstrap css and putting it in a 'critic_bootstrap.css' file. When the page is completely rendered, I do want to load that bootstrap CDN anyway for all the other styles that are not above the fold. How can I accomplish this ? I tried appending it to the head of my document in a jquery document.ready function, but it seemed to still cause PSI render blocking issues like it was till being loaded before the page was being rendered.

Solution

  • Try this:

    $(document).ready(function(){
   $('head').append('<link rel="stylesheet" type="text/css" href="bootstrap.css">');
}