CODEWITHSUNDEEP
javascriptperformancegoogle-chrome-devtools
Aessandro
Aessandro

Reputation: 5761

Load CSS after "DOMContentLoaded" with ChromeDev Tool

I want to load the css after the blue line in the dev tool (basically to avoid block rendering for the content)

To do that I am using the following script: (https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example)

   <script>
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'css/app.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
    </script>

at the bottom of my page in dev tool, I can see that the app.css is loaded after the blue line however when I check the website at google speed insight it tells me that my app.css is still block rendering.

How is that possible?

Upvotes: 1

Views: 365

Answers (1)

Siraj Hussain
Siraj Hussain

Reputation: 874

You should wait for DOM contents to get load. Try this:

 document.addEventListener("DOMContentLoaded", function(event) {
   //Dom full loaded.
 });

Upvotes: 1

Related Questions