I read Google’s page optimization articles to speed up download and came across an interesting example here: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example

<html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div> </body> </html> <link rel="stylesheet" href="small.css">

<link> assigned for the <html>

What is it? A typo or so ok?

  • By the way, I see another code on this page. - Nick Volynkin ♦
  • 2
    normal code. The text will appear instantly, so that it does not blink color, add a separate class on top. and all kinds of shadows appear later - eri
  • Read about the critical path of rendering web pages, critical css - Music Sergey
  • Take a close look at the markup - mJeevas
  • one
    Most likely the problem is with the translation, if you open the English version, there is another text and another example. It is also worth noting that the localized versions are dated 2014, and the English version is 2016. Well, if you look at the actual markup in the browser, you will notice that the link tag was inserted inside the body - Grundy

2 answers 2

This is not bad advice. The link meta tag, especially with a bulk css file, placed where it should be (in the head section) postpones the render of the page until the full load of css. In the example code, 2 things are done: 1. The head contains inline-css. This technique is called the critical path css and allows you to display the first 1000 pixels of a page correctly or almost correctly. 2. Delays loading the full style file almost to the end of the page render. The second point is yes, it does not correspond to the specification, but this can be easily corrected by replacing it with a simple js-code, which adds a link with full css tag to the head section.

    In the English version of this article, apparently a newer one, a very different example is displayed:

     <html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div> <noscript id="deferred-styles"> <link rel="stylesheet" type="text/css" href="small.css"/> </noscript> <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> </body> </html>