Qu'est-ce qu'une ressource qui empêche le rendu ?
Les ressources bloquant le rendu font référence aux fichiers CSS et JavaScript qui empêchent le rendu de la page tant que le navigateur ne les a pas entièrement téléchargés et traités.
Impact des ressources bloquant le rendu
Ces ressources peuvent avoir un impact significatif sur les Vitesses du Web, en particulier LCP (Maximum Content Painting) et FCP (First Content Painting). LCP mesure le temps nécessaire pour que l'élément le plus important de la page devienne visible, tandis que FCP mesure le temps nécessaire pour que la première partie du contenu devienne visible. Si le temps de blocage total d'un site est trop long, le navigateur prend plus de temps pour télécharger et traiter ces ressources, ce qui se traduit par des temps LCP et FCP plus lents. L'augmentation de la taille du DOM peut également poser problème.
Comment analyser les problèmes de blocage du rendu sur mon site web ?
1. utiliser Google PageSpeed Insights
Il s'agit d'un outil en ligne gratuit qui analyse les performances des pages web sur les ordinateurs de bureau et les appareils mobiles. Il suffit d'entrer l'URL de votre site web et de cliquer sur "analysé"qui vous fournira des mesures de performance (telles que FCP et TTI) et des suggestions d'amélioration.
2. utiliser Chrome DevTools
Chrome DevTools est un outil de développement intégré à Google Chrome qui permet d'analyser et d'optimiser les performances des sites web. En utilisant l'option "couverture du site"et "chutes d'eau"vous pouvez voir quelles sections sont en cours de chargement et d'exécution, ainsi que les sections de code inutilisées.
Comment éliminer les ressources qui bloquent le rendu ?
1. compresser les fichiers CSS et JavaScript
Réduire la taille des fichiers en supprimant les espaces, les commentaires et le code inutile. Les plugins suivants peuvent être utilisés :
2) Mise en œuvre du chargement asynchrone
Le chargement asynchrone permet de charger plusieurs ressources en même temps, ce qui réduit le temps de blocage. Plugin recommandé :
- WP Rocket
- Autoptimiser
- Scripts volants
3. chargement tardif de JavaScript
Retarde le chargement des fichiers JavaScript non critiques jusqu'à ce que la page soit entièrement chargée.
Plugin recommandé :
- WP Rocket
- Perfmatters
4) Optimisation de la diffusion des feuilles de style CSS avec Critical CSS
Chargement en ligne des feuilles de style CSS critiques et chargement différé des feuilles de style CSS non critiques. plugin recommandé :
- WP Rocket
- Autoptimiser
- Scripts volants
- WP Compress
- Nettoyage des actifs
- Perfmatters
5) Éliminer les feuilles de style CSS et JavaScript inutilisées
Suppression du code inutilisé pour réduire la taille du fichier. Plugin recommandé :
- Perfmatters
- WP Rocket
- WP Compress
- Nettoyage des actifs
Comment résoudre les problèmes courants lors de la fixation des ressources bloquant le rendu ?
1. gérer jQuery et WordPress
Évitez de retarder ou de différer le chargement des fichiers jQuery afin d'éviter tout problème sur votre site.
2、Résoudre le problème du contenu non stylisé vacillant (FOUC)
Utilisez les propriétés des médias pour charger les fichiers CSS uniquement lorsque cela est nécessaire ou pour retarder le chargement des fichiers CSS non critiques. Retarder le chargement des images et autres médias pour améliorer les performances.
Contrôler et maintenir la performance
Réalisez régulièrement des audits de performance afin d'identifier et d'optimiser les temps de chargement et les classements SEO. Utilisez des outils tels que GTmetrix ou DebugBear pour surveiller et mettre en œuvre des stratégies d'amélioration continue.
résumés
En testant et en contrôlant régulièrement les performances de votre site web, vous pouvez vous assurer qu'il se charge rapidement sur une variété d'appareils et de navigateurs, ce qui améliore l'expérience de l'utilisateur et le classement dans les moteurs de recherche. L'apprentissage et l'optimisation continus garantissent que votre site web est toujours à son meilleur.
