place du css pour google insight

poeme · 12 Octobre 2017

bonjour

je ne sais pas trop ou poster ce message, mais la vitesse de chargement des pages faisant partie du referencement google, peut etre ici
google insight me dit ceci

Votre page contient 1 ressources CSS qui bloquent l'affichage de votre page, et donc le retardent.
Aucune partie du contenu situé au-dessus de la ligne de flottaison sur votre page n'a pu être affichée avant que le chargement des ressources suivantes n'ait été terminé. Essayez de différer le chargement des ressources qui bloquent votre page, de les charger de manière asynchrone, ou d'intégrer les parties essentielles de ces ressources directement dans le code HTML.

et comme reponse ceci

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">

peut-on vraiment incorporer le fichier css apres la balise </html> au lieu de le mettre dans le head?
ai-je bien compris?
est-ce que que vous faites?
merci

spout · 12 Octobre 2017

C'est non valide w3c.

Ça fait un moment que la doc le dit mais je pense à une traduction pas mise à jour parce que:
FR: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=fr
EN: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=en

poeme · 12 Octobre 2017

merci spout
effectivement la page anglaise ne dit pas la meme chose
je trouvais ca tres etonnant
je pense que le mieux surtout qd le css n'est pas trop volumineux est d'ignorer cet avertissement insight

poeme · 12 Octobre 2017

par contre si on fait

<link rel="stylesheet" type="text/css" href="small.css">
</body>

ou meme

<link rel="stylesheet" type="text/css" href="small.css">
</html>

https://validator.w3.org ne dit rien.... ca vous arrive de mettre <link rel="stylesheet" juste avant </body>ou entre </body> et </html> ?

spout · 12 Octobre 2017

poeme a dit:
ne dit rien....

Avec quel doctype ?

poeme · 12 Octobre 2017

<!doctype html>

spout · 12 Octobre 2017

Donc HTML5, donc le validateur a mal vérifié ça parce que c'est pas censé être là:
https://www.w3.org/TR/html5/document-metadata.html#the-link-element

poeme · 12 Octobre 2017

oui j'imagine
pour ta part tu t'occupe de ce probleme de css au dessus de la ligne de flottaison avec google insight ou tu laisses tomber?

spout · 12 Octobre 2017

Je respecte les normes w3c, pas ce que Google me dit.

rick38 · 13 Octobre 2017

C'est clairement une erreur la page française.

Ils parlent de mettre ceci :

<style>
.blue{color:blue;}
</style>

au lieu d'utiliser un fichier externe, pour ce qui concerne ce qui est au-dessus de la ligne de flottaison, et un chargement asynchrone pour le reste.
C'est tellement compliqué à mettre en oeuvre que je ne l'ai personnellement jamais fait.

poeme · 14 Octobre 2017

erreur je ne sais pas, en tous cas google semble preconiser de mettre une partie du css dans une balise style
perso je n'y comprend rien d'où l'objet de ma question
et ma reponse comme toi va etre de laisser tomber

ortolojf · 15 Octobre 2017

Pardon Monsieur

D'après Google, il faudrait mettre en inline le css dédié au haut de la page, et puis charger le reste dans un fichier css déclenché en bas de page.

Ceci, pour que le contenu visuel soit interprétable rapidement par les browsers.

J'ai fait celà pour mon site ( et même le fichier css chargé en mode Javascript ), mais bien que le chargement soit optimisé, j'ai encore du 300 à 600 ms/page d'après GA.

Et le même message de Google.

Respectueusement.