Qu’est-ce qu’un «contenu au-dessus du pli» dans Google Pagespeed?

Jusqu’à récemment, mon site (www.heatexchangers.ca) avait obtenu 98% sur Google Page Speed. Il y avait quelques choses auxquelles je ne pouvais rien faire, comme la chaîne de requête des fonts Web. J’étais très content de cela car cela représentait tout ce que je pouvais faire.

Récemment, Google a ajouté quelque chose qui affecte le score de vitesse de la page et je n’ai plus que 89% sur la vitesse de la page et je reçois cette suggestion:

  • Éliminez les scripts JavaScript et CSS bloquant les contenus externes au-dessus du niveau du contenu.

La suggestion de résoudre cela semble impliquer de parcourir tous mes fichiers .css et .js et de les séparer et de les append en ligne à mon fichier HTML. Cela me cause une certaine confusion car j’avais l’impression que nous devions garder autant de JS et de CSS que possible du HTML.

Quel est exactement le contenu “Above the Fold”? S’il s’agit de quelques styles tels que la police, la couleur de fond, etc. alors je peux voir que ce n’est peut-être pas une affaire trop importante pour inclure en ligne. Je n’ai pas pu trouver une liste exacte de ce que c’est.

    C’est parce que Google a récemment modifié l’outil de vitesse de la 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 du réseau filaire ou du wifi, vous devez donc faire différentes choses pour les optimiser.

    Au-dessus du pli (ATF) est simplement la première valeur de l’écran – tout ce dont vous n’avez pas besoin de faire défiler pour voir. Évidemment, cela varie en fonction du périphérique et de son orientation. Il peut donc être nécessaire de généraliser et peut-être de trouver des options communes viables, par exemple, une pour les smartphones, une pour les tablettes et une pour les grands ordinateurs de bureau.

    En ce qui concerne les CSS dont ils parlent, ils ont vraiment l’intention de tous les CSS nécessaires pour personnaliser complètement 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 de son chargement. est chargé.

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

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

    L’accent est mis sur l’obtention de quelque chose à faire par les utilisateurs dans la première seconde. Le raisonnement qui sous-tend l’introduction directe du CSS pour le contenu ATF dans le code HTML reflète leurs recherches 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 pouvant en automatiser une partie. Je ne les ai pas essayés et YMMV.

    google page insights vous indiquera clairement combien de% de CSS faisant référence au contenu au-dessus du pli est en train d’être chargé trop tard et que la page aurait pu être rendue plus tôt. Que vous pourriez 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

    Ils font référence au blocage de rendu tel que le code analytique ou le code de suivi, raison pour laquelle ils suggèrent de placer ces scripts “charger-moi avant tout” dans le pied de page car ils seront chargés une fois que le site sera affiché.