Qu'est-ce qu'un "contenu au-dessus du pli" dans Google Pagespeed?
Jusqu'à récemment, mon site (www.heatexchangers.ca) affichait un score de 98% sur Google Page Speed. Je ne pouvais rien faire contre un certain nombre de choses, telles que la chaîne de requête des polices Web. J'étais très heureux avec cela 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'ai maintenant que 89% de la vitesse de la page et la suggestion suivante:
- Éliminez le code JavaScript et CSS externe bloquant 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, de séparer certaines de leurs fichiers et de les ajouter en ligne à mon code html. Cela me cause une certaine confusion car j’ai eu l’impression que nous devons garder autant de JS et de CSS que possible en HTML.
Qu'est-ce que le contenu "Au-dessus du pli"? 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 un gros problème d’inclure inline. Je n'ai pas été en mesure de trouver une liste de ce que c'est exactement.
En effet, Google a récemment modifié son outil de traitement de la vitesse des pages pour mieux refléter un Web de plus en plus mobile. Les performances des réseaux de données mobiles sont différentes de celles des réseaux filaires ou wifi. Vous devez donc optimiser différentes choses.
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 trouver des options communes pratiques, notamment une pour les smartphones, une pour les tablettes et une pour les ordinateurs de bureau plus grands.
En ce qui concerne les CSS dont ils parlent, ils ont vraiment l'intention de tous les CSS nécessaires pour styler complètement le contenu affiché au format ATF. Pour déterminer le temps de chargement de votre contenu ATF, ils vont effectuer une capture d’écran de la version finale et la comparer visuellement à la page au moment où elle se charge et quand elle se ressemble suffisamment, ils considéreront le point où le contenu ATF est chargé.
Ceci est une vidéo de présentation de Google sur ce sujet:
http://www.youtube.com/watch?v=YV1nKLWoARQ
L’accent est mis sur l’obtention d’une tâche utile pour les utilisateurs dans la première seconde. Le raisonnement derrière l'insertion directe dans le code CSS du contenu ATF dans le code HTML reflète leurs recherches sur les performances des données mobiles, qui montre que si le code CSS n'existe pas, il ne sera pas chargé suffisamment tôt pour être dans la première seconde.
Ils fournissent également des liens vers des outils susceptibles d'automatiser une partie de ces tâches. Je ne les ai pas essayés et YMMV.
les informations sur les pages Google vous indiqueront clairement combien de% des CSS faisant référence au contenu situé au-dessus du pli sont chargées 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 écologique. 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