0

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.

TJB
  • 3,706
  • 9
  • 51
  • 102
  • Technically, All CSS needs to be rendered before loading the content of page because that's how browser knows how to style what elem – ahmednawazbutt Feb 28 '18 at 04:27
  • I guess you're right hah. If I add the who bootstrap CDN at the bottom of the html element, will it render after the above the fold content has been rendered ? – TJB Feb 28 '18 at 04:30
  • 1
    Try this link: https://stackoverflow.com/questions/30752482/fetch-css-file-after-page-loads?lq=1 – Kannan K Feb 28 '18 at 04:30
  • 1
    @KannanK gave a better suggestion. good job dude! – ahmednawazbutt Feb 28 '18 at 04:35
  • Yeah, tried the solution from your link KannanK and it pumped up the page speed ! – TJB Feb 28 '18 at 04:42

3 Answers3

1

Use 

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

On top of this, if you want to disable FOUC for good, add 

body {
  overflow:hidden;
}

to your above the fold CSS and override it in your async CSS with 

body {
  overflow:auto;
}

The above is just a summary. If you're interested here's a full post about the method: Modern Asynchronous CSS Loading, also containing a polyfill for non-supporting browsers.

This may not look like a big improvement over other approaches, but one advantage that rel="preload" brings is that supporting browsers will start downloading the file earlier than they would with say, a stylesheet with a non-matching media value.

Also read Preloading content. Support for rel="preload" is limited to Chrome, Opera and Safari but more will follow (notably Firefox v59). Also, where it's not supported it doesn't mean it doesn't work. It only means there's no improvement over using a non-existent rel type.

tao
  • 82,996
  • 16
  • 114
  • 150
1

Try this:

$(document).ready(function(){
   $('head').append('<link rel="stylesheet" type="text/css" href="bootstrap.css">');
}
Kannan K
  • 4,411
  • 1
  • 11
  • 25
1

Try to load the css at $(window).load() instead of $(document).ready().

for an instance:

  $(window).load(function() {
          $('head').append('<link rel="stylesheet" href="common.css" type="text/css" />');
    });
indar
  • 90
  • 1
  • 10