PageSpeed Insights : Load css files after the closing

Question

Google Page insight tells us to optimize CSS file like this :

Vous pouvez alors incorporer le code CSS essentiel comme ceci :

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

source : https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

enter image description here

The French link is https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=fr

I’ve never seen such a thing : Integrate css files after the closing </html> tag.

I’t’s not only in the documentation. It also modify the result of PageSpeed Insights score. I have 100% if i insert css file at the end.

Is it valid HTML ?

Huangism · Accepted Answer

To answer your question, it is NOT valid to put the link tag outside of the html tag

Use https://validator.w3.org/#validate_by_input+with_options and see for yourself. Just paste the code in

Line 11, Column 40: Stray start tag link.

Then you get

Line 11, Column 40: Cannot recover after last error. Any further errors will be ignored.

I don't know why that recommendation is even there but it should be removed. Maybe google is just playing a joke on the french? Maybe the page have not been updated. You can probably contact them and ask why if you really want but I would not do this on any of my pages

PageSpeed Insights : Load css files after the closing </html>

Tags:

html

css

optimization

Sébastien Gicquel

1 Answers

Huangism

Recent Activity

Donate For Us