Messages: 162

Enregistré le: 21 Juil 2004

Message le Jeu Oct 12, 2017 12:07

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
Haut
11 Réponses
Messages: 8547

Enregistré le: 14 Mai 2003

Message le Jeu Oct 12, 2017 12:21

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
Haut
Messages: 162

Enregistré le: 21 Juil 2004

Message le Jeu Oct 12, 2017 13:31

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
Haut
Messages: 162

Enregistré le: 21 Juil 2004

Message le Jeu Oct 12, 2017 13:52

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> ?
Haut
Messages: 8547

Enregistré le: 14 Mai 2003

Message le Jeu Oct 12, 2017 13:53

poeme a écrit:ne dit rien....

Avec quel doctype ?
Haut
Messages: 162

Enregistré le: 21 Juil 2004

Message le Jeu Oct 12, 2017 15:37

<!doctype html>
Haut
Messages: 8547

Enregistré le: 14 Mai 2003

Message le Jeu Oct 12, 2017 16:21

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
Haut
Messages: 162

Enregistré le: 21 Juil 2004

Message le Jeu Oct 12, 2017 19:13

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?
Haut
Messages: 8547

Enregistré le: 14 Mai 2003

Message le Jeu Oct 12, 2017 22:01

Je respecte les normes w3c, pas ce que Google me dit.
Haut
Messages: 503

Enregistré le: 23 Fév 2013

Message le Ven Oct 13, 2017 9:04

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.
Haut
Messages: 162

Enregistré le: 21 Juil 2004

Message le Sam Oct 14, 2017 14:20

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
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Dim Oct 15, 2017 11:38

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.
Haut