Cette règle se déclenche lorsque les analyses PageSpeed Insights indiquent que des allers-retours réseau supplémentaires sont nécessaires pour afficher le contenu au-dessus de la ligne de flottaison de la page.
Présentation
Si la quantité de données requise dépasse la fenêtre de congestion initiale (généralement 14,6 Ko compressés), des allers-retours supplémentaires seront nécessaires entre votre serveur et le navigateur de l'utilisateur. Pour les internautes qui utilisent des réseaux dont le temps de réponse est élevé, comme les réseaux mobiles, cela peut ralentir considérablement la vitesse de chargement des pages.
Recommandations
Pour accélérer le chargement des pages, limitez la taille des données (code HTML, images, feuilles de calcul CSS, script JavaScript) nécessaires à l'affichage du contenu au-dessus de la ligne de flottaison de votre page. Pour ce faire, vous disposez de plusieurs options :- Structurez votre code HTML de manière à charger en premier le contenu essentiel au-dessus de la ligne de flottaison
- Réduire la quantité de données utilisées par vos ressources
Structurez votre code HTML de manière à charger d'abord le contenu essentiel, au-dessus de la ligne de flottaison
Chargez d'abord le contenu principal de votre page. Structurez votre page de sorte que la réponse initiale de votre serveur envoie les données nécessaires pour afficher immédiatement la partie critique de la page et différer le reste. Par conséquent, vous devrez peut-être diviser votre CSS en deux parties: une partie intégrée qui est chargée de styliser la partie située au-dessus de la ligne de flottaison du contenu et la partie qui peut être différée.
Les exemples suivants permettent de comprendre comment restructurer un site pour en accélérer le chargement :Consider the following examples of how a site could be restructured to load faster:
- Si vous avez indiqué dans votre code HTML de charger des widgets tiers avant le contenu principal, modifiez-en l'ordre afin que le contenu principal soit chargé en premier.
- Si votre site est présenté sur deux colonnes avec une barre latérale de navigation et un article, mais que la barre latérale est chargée avant l'article, modifiez votre code HTML de sorte que l'article soit chargé en premier.
Réduisez la quantité de données utilisées par vos ressources.
Une fois que votre site a été remanié pour qu'il s'adapte bien à plusieurs appareils et qu'il commence par charger le contenu essentiel, utilisez les techniques suivantes pour réduire la quantité de données nécessaire pour afficher votre page :- Réduisez la taille des ressources : il est possible de réduire la taille des ressources HTML, CSS et JavaScript en supprimant les espaces blancs et les commentaires inutiles. Vos ressources peuvent être optimisées davantage grâce à des outils permettant de renommer les variables qui s'y trouvent.
- Envisagez d'utiliser des feuilles de style CSS plutôt que des images dans la mesure du possible.
- Activer la compression
Commentaires
Cette page vous a-t-elle été utile ?