There is a standard task - to optimize the loading of CSS.

There is a snare ( /static/CACHE/css/1f37a94c2ab5.css) and there are a couple of fonts that are loaded from the outside.

With fonts, I decided this:

 <noscript id="deferred-styles"> <link type="text/css" rel="stylesheet" href="{% static 'css/pe-icon-7-stroke.css' %}"> <link type="text/css" rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"> <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico" > <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700"> </noscript>

and this script:

 <script> var loadDeferredStyles = function() { var addStylesNode = document.getElementById("deferred-styles"); var replacement = document.createElement("div"); replacement.innerHTML = addStylesNode.textContent; document.body.appendChild(replacement) addStylesNode.parentElement.removeChild(addStylesNode); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); else window.addEventListener('load', loadDeferredStyles); </script>

But this did not solve the problem. PageSpeed ​​Insights swears at the file, because it is not processed by this script.

But if I shove and shrink CSS in <noscript></noscript> , then all CSS connections will be cursed, and there is an obvious problem with drawing styles - first a white html page without styles is loaded, and then the drawing takes place.

Tell me how to solve it correctly?

Thank you in advance.

1 answer 1

Thanks to the hint @Andrey Fedorov managed to solve the problem, though partially, as follows:

  1. Here I got a so-called. critical-path-css.
  2. Next, following the instructions and common sense, placed it inside the tags <head></head>
  3. 1f37a94c2ab5.css placed all his css, including a fairly weighty 1f37a94c2ab5.css , in front of
  4. Placed the script I specified in the question above the tags <noscript></noscript>

PS Also, on the website, by the link there is a ready-made script where you need to insert a link to * .css so that everything works as it should.

PPS Now swears at the same minified file, but only on the desktop. On the mobile, everything is fine.