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

Question

Jusqu'à récemment, mon site (www.heatexchangers.ca) obtenait un score de 98 % sur Google Page Speed. Il y avait quelques éléments auxquels je ne pouvais rien faire, comme la chaîne de requête des polices Web. J'en étais très heureux, 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 % pour la vitesse de la page et je reçois cette suggestion :

• Éliminez les JavaScript et CSS externes qui bloquent le rendu dans le contenu au-dessus du pli.

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

Qu'est-ce que le contenu "Above the Fold" ? S'il s'agit de quelques styles tels que la police, la couleur d'arrière-plan, etc., alors je pense qu'il n'est pas nécessaire de l'inclure en ligne. Je n'ai pas réussi à trouver une liste de ce que c'est exactement.

Answer 1

En effet, Google a récemment modifié l'outil de vitesse des pages pour mieux refléter un web de plus en plus mobile. Les réseaux de données mobiles présentent des caractéristiques de performance différentes de celles des réseaux câblés ou wifi. Vous devez donc prendre des mesures différentes pour les optimiser.

L'expression "Above-the-Fold" (ATF) désigne simplement la valeur du premier écran, c'est-à-dire 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 donc peut-être généraliser et trouver des options communes viables, peut-être une pour les smartphones, une pour les tablettes et une pour les ordinateurs de bureau plus grands.

Quant au CSS dont ils parlent, il s'agit en fait de tout le CSS nécessaire pour styliser entièrement le contenu affiché par l'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 pendant qu'elle se charge. Lorsqu'elle sera suffisamment similaire, ils considéreront que c'est le moment où le contenu ATF est chargé.

Il s'agit d'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é d'offrir aux utilisateurs quelque chose à faire dès la première seconde. Le fait de placer le CSS du contenu de l'ATF directement dans le HTML s'explique par les recherches menées sur les performances des données mobiles, qui montrent que si le CSS n'est pas présent, il ne sera pas chargé suffisamment tôt pour être dans la première seconde.

Ils fournissent également des liens vers des outils qui peuvent être en mesure d'automatiser certaines de ces opérations. Je ne les ai pas essayés et c'est à vous de voir.

Answer 2

Google page insights vous dira clairement combien de % de css référant le contenu au-dessus du pli est chargé trop tard et la page aurait pu être rendue plus tôt. Vous pouvez alors 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 l'expression "au-dessus du pli". https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Answer 3

Le contenu superposé est la partie de la page Web qui est visible dans la fenêtre du navigateur lors du premier chargement de la page. Google souhaite que le CSS en ligne soit extrait de votre fichier CSS principal et injecté dans la balise head, ce qui permet de charger en premier tout ce que vous voyez en premier.

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

Answer 4

Il s'agit de js bloquant le rendu, tels que les codes d'analyse ou de suivi. C'est pourquoi ils suggèrent de placer ces scripts "à charger 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.

Answer 5

Il existe un bookmarklet pratique pour identifier ces règles css au-dessus du pli à l'adresse suivante

https://gist.github.com/PaulKinlan/6284142

Vous pouvez ensuite charger le reste du css par paresseux avec JavaScript. J'en ai parlé brièvement ici .