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.
Réponses:
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.
la source
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
la source
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 .
la source
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.
la source