Qu'est-ce que le «contenu au-dessus du pli» dans Google Pagespeed?

132

Jusqu'à récemment, mon site (www.heatexchangers.ca) a obtenu 98% sur Google Page Speed. Je ne pouvais rien faire pour plusieurs choses, telles que la chaîne de requête des polices Web. J'étais très content car cela représentait tout ce que je pouvais faire.

Récemment, Google a ajouté quelque chose d'autre qui affecte le score de vitesse de la page et je n'obtiens plus que 89% de vitesse de page et j'obtiens cette suggestion:

Éliminez le JavaScript et CSS bloquant le rendu externe dans le contenu au-dessus de la ligne de flottaison.

La suggestion de résoudre ce problème semble impliquer de parcourir tous mes fichiers .css et .js et d'en séparer certaines parties et de les ajouter en ligne à mon html. Cela me cause une certaine confusion car j'avais l'impression que nous devons garder autant de JS et de CSS que possible hors du HTML.

Qu'est-ce que le contenu «Above the Fold» exactement? S'il s'agit de quelques styles tels que la police, la couleur d'arrière-plan, etc. alors je peux voir que ce n'est peut-être pas trop gros pour l'inclure en ligne. Je n'ai pas été en mesure de trouver une liste de ce que c'est exactement.

— Glipt
source

49

Le «pli» est l'endroit où se trouve le bas de l'écran lors du chargement de la page. Lorsque vous arrivez sur un site Web, tout contenu que vous voyez immédiatement sans défilement est «au-dessus du pli». Tout ce que vous devez faire défiler vers le bas pour le voir «sous le pli».

— CaribouCode

21

Au-dessus du pli est un terme généralement utilisé pour les journaux, c'est-à-dire le contenu ci-dessus où le papier est plié horizontalement. Habituellement, pour la conception Web, il s'agit du premier 600px ~ environ (discutable en fonction de la personne à qui vous demandez). Cela ne fait pas référence aux styles (polices, arrière-plans, etc.), mais au contenu et au type de js qui pourraient bloquer le rendu dans ce contenu. Je doute que Google suggère d'utiliser des styles en ligne, pouvez-vous réellement publier les suggestions qui vous ont été faites?

— Christian

@Coop Pourquoi ne pas simplement faire une réponse au lieu d'un commentaire?

— Kolob Canyon

113

En effet, Google a récemment modifié l'outil de vitesse de page pour mieux refléter un Web de plus en plus mobile. Les réseaux de données mobiles ont des caractéristiques de performances différentes de celles des réseaux filaires ou wifi, vous devez donc faire différentes choses pour les optimiser.

Au-dessus du pli (ATF) est tout simplement la valeur du premier écran - tout ce que vous n'avez pas besoin de faire défiler pour voir. Évidemment, cela varie en fonction de l'appareil et de son orientation, vous devrez peut-être généraliser et peut-être trouver des options communes réalisables, peut-être une ciblant les smartphones, une pour les tablettes et une pour les ordinateurs de bureau plus grands.

En ce qui concerne le CSS dont ils parlent, ils ont vraiment l'intention de tout le CSS nécessaire pour styliser pleinement le contenu affiché ATF. Pour déterminer le temps de chargement de votre contenu ATF, ils vont prendre une capture d'écran de la version finale et la comparer visuellement à la page au fur et à mesure qu'elle se charge et quand elle se ressemble suffisamment, ils considéreront que le point où le contenu ATF est chargé.

Ceci est une présentation vidéo de Google sur ce sujet:

http://www.youtube.com/watch?v=YV1nKLWoARQ

L'accent est mis sur la nécessité pour les utilisateurs de faire quelque chose dans la première seconde. Le raisonnement derrière l'intégration du CSS pour le contenu ATF directement dans le HTML reflète leur recherche sur les performances des données mobiles, montrant que si le CSS n'est pas là, il ne sera pas chargé assez tôt pour être dans la première seconde.

Ils fournissent également des liens vers des outils capables d'automatiser une partie de cela. Je ne les ai pas essayés et YMMV.

— Joshua Coady
source

@Joshua, j'ai fait quelque chose pour le <noscript> ... </noscript> "Éliminer le JavaScript bloquant le rendu et le CSS dans le contenu au-dessus du pli". Mais ne réfléchissez qu'aux mobiles. Pas dans le bureau. pour cette url winni.in/cake-delivery-in-bangalore

— V SH

2

google page insights vous dira clairement combien de% de css faisant référence au contenu au-dessus du pli est chargé trop tard et la page aurait pu être rendue plus tôt. Ensuite, vous pouvez déplacer des parties de css pour obtenir un résultat vert. je peux le faire pour vous: goo.gl/GsRxNc

un lien de Google décrivant «au-dessus du pli» https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

— NoWomenNoCry
source

Pouvez-vous clarifier ce que signifient les pourcentages? Supposons que PageSpeed rapporte que 55% du contenu au-dessus de la ligne de flottaison peut être rendu sans attendre le chargement des feuilles de style externes. Ce qui signifie que 45% du contenu au-dessus du pli sont stylisés avec des règles issues de feuilles de style externes. Mais ce n'est pas le cas .

— x-yuri

0

Le contenu au-dessus du pli est la partie de la page Web qui est visible dans une fenêtre de navigateur lors du premier chargement de la page. Google veut voir le CSS en ligne extrait de votre fichier CSS principal et injecté dans la balise head, permettant à tout ce que vous voyez en premier d'être chargé en premier.

source - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first .

— Emily Katie
source

-1

Ils font référence à des js bloquant le rendu, tels que les analyses ou le code de suivi, c'est pourquoi ils suggèrent de placer ces scripts "chargez-moi avant tout le reste" dans le pied de page car ils seront ensuite chargés une fois que l'utilisateur aura le site à l'écran.

— CowboyWillie
source

C'est correct. Ils doivent être différés ou chargés de manière asynchrone, ou déplacés vers le pied de page / avant la balise de fermeture </body>, car ils ne sont pas cruciaux pour la page. Le code crucial, tel que le style de la page principale ou Bootstrap, doit être chargé en haut de la page ou vous rencontrerez FOUC (Flash Of Unstyled Content), donc la seule chose que l'on puisse faire à propos de ces composants cruciaux est de les minimiser et de les fusionner en moins de fichiers, pour réduire le blocage du rendu. Ce commentaire soutient le commentaire de CowboyWillie qui est injustement rejeté.

— Tahi Reu