time_read63mn de lecture

Google PageSpeed Insights : guide complet 2023

27 juillet 2023

Google PageSpeed Insights : guide complet 2023

Google PageSpeed Insights est l’outil de test de performances le plus utilisé en ligne. Les développeurs et les webmasters s’en servent pour avoir des données d’analyse de leurs sites web. Cet outil propulsé par Google est gratuit et fournit un score après analyse de votre site. Ce score est accompagné de recommandations, lesquelles, lorsqu’elles sont mises en œuvre, peuvent vous aider à optimiser votre site et le rendre plus rapide.

Mais beaucoup de mythes entourent Google PageSpeed Insights. Pour la majorité des propriétaires de sites, atteindre le score de 100/100 est l’objectif ultime. Pourtant, la réalité en pratique est tout autre. Les recommandations faites par cet outil sont plutôt la partie la plus importante du rapport où il faut concentrer les efforts. Découvrez dans cet article comment vous pouvez utiliser Google PageSpeed Insights à bon escient.

Ce que vous devez savoir sur Google PageSpeed Insights

Gardez à l’esprit que Google PageSpeed Insights est avant tout un outil de test de performance. Le principe d’utilisation est tout simple. Vous vous rendez sur la page d’accueil de PageSpeed Insights, vous indiquez l’URL de votre site. Ensuite, lorsque vous lancez l’analyse, des résultats sur la performance de votre site sont affichés après quelques secondes.Google PageSpeed InsightsTout commence par l’affichage d’un score. Ce score est établi sur base de plusieurs critères de performances.Score de performanceLe score est analysé selon trois intervalles :

  • Il est critique lorsqu’il se situe dans l’intervalle de 0 à 49 ;
  • Le score est passable quand il est situé entre 50 et 89 ;
  • Enfin, s’il se situe entre 90 et 100, vous êtes dans les bonnes performances.

Ces chiffres sont livrés dans le but unique d’orientation : des recommandations seront suggérées par l’outil selon votre score. Ce qui permet d’optimiser davantage votre site.recommandations de Google PageSpeed InsightsVous devez ainsi analyser chaque recommandation et faire ce qu’il y a de mieux. Nous reviendrons sur ce point plus loin dans cet article.

Depuis 2018, Google PageSpeed Insights se sert de Lighthouse pour fournir le rapport de performance des pages web. Lighthouse est un module open source et gratuit à l’utilisation. Il établit un audit basé sur plusieurs paramètres.LighthouseIl peut être exécuté dans le Chrome DevTools à partir d’une ligne de commande ou comme un module Node.

Comme pour Google PageSpeed Insights, il suffit de renseigner l’URL du site et Lighthouse exécute un audit et affiche ensuite le rapport de performances. Vous pouvez donc faire une évaluation complète de votre site avec cet outil de mesure de Google.outil de mesure/LighthouseLes audits sont axés sur les performances, l’accessibilité du site et le référencement… ⁣resultats de performance/Lighthouse

Le mythe autour du score 100/100 de Google PageSpeed Insights

Vous ne devez pas être obsédé par la recherche du score 100/100 de Google PageSpeed Insights. Tout d’abord, ce score est établi pour des raisons d’orientation. Il correspond à la satisfaction d’un certain nombre de critères connus dans l’optimisation SEO de sites web. Lorsque, vous n’êtes pas dans ces critères, des recommandations seront alors suggérées par Google PageSpeed Insights. Et, c’est sur ces recommandations que vous devez concentrer vos efforts.

Mais vous devez noter aussi que ce score ne couvre pas tous les aspects de performances de votre site. Il n’est pas d’ailleurs rare que vous trouviez des informations supplémentaires en utilisant d’autres outils d’analyse tels que Pingdom, GTmetrix ou encore sur WebPageTest.

Sur WebPageTest par exemple, vous pouvez analyser les performances de votre site à partir de différentes régions du monde. Ce qui se révèle intéressant si vous ciblez un public large.WebPageTestLes résultats fournis sont également une manière de vous orienter sur la santé actuelle de votre site.resultats de WebPageTest

Idéalement, vous devez chercher à ajuster les recommandations apportées afin d’optimiser davantage votre site. La vitesse réelle de chargement de votre site doit passer avant tout. C’est ce qui compte vraiment, car la vitesse de chargement peut impacter votre positionnement dans les SERPs. Un site lent augmente le taux de rebond. Et cela peut pousser les robots de Google à renvoyer votre site dans le fond des résultats organiques.

Savoir analyser et utiliser les résultats de Google PageSpeed Insights

À la fin de l’analyse sur Google PageSpeed Insights, vous avez un score qui traduit les performances de votre site à l’état actuel. Même si ce score a une connotation dorénavant théorique, il oriente les propriétaires de sites sur d’éventuels problèmes d’optimisation qu’il faut ajuster.

Ce qui compte en pratique, c’est la vitesse avec laquelle, les visiteurs accèdent à votre site.

Les rapports d’analyse de Google PageSpeed Insights sont constitués de deux scores. Le premier traduit les performances de votre site sur les appareils mobiles.

performance sur mobilesVous avez en bas du score, les séquences qui montrent l’affichage progressif de votre page sur les téléphones mobiles. Le deuxième score traduit les performances de votre site quand il s’affiche sur les ordinateurs.performances sur l'ordinateurLe plus souvent, le score de performance sur le bureau est supérieur à celui sur les appareils mobiles.

Étant donné que plus de 85 % d’internautes accèdent à l’internet à partir des téléphones mobiles, vous devez garder un œil vigilant sur le score de performances sur les mobiles. Il est par ailleurs évident qu’un site qui se charge rapidement sur téléphone le soit beaucoup plus sur ordinateur.

Cela étant, l’application de recommandations fournies par Google PageSpeed Insights peut vous aider à avoir un site très rapide au chargement. Ainsi, il est d’une évidence que Google se sert de PageSpeed Insights pour le classement de sites. Donc, utiliser cet outil de performance pour analyser votre site peut vous donner une idée assez indicative sur votre classement, d’autant plus que la vitesse de chargement d’un site est un facteur de classement dans les résultats organiques.

Google PageSpeed Insights et recommandations : 23 pratiques pour améliorer les performances

Vous venez de voir dans la partie précédente ce qui est Google PageSpeed Insights et comment analyser le score de performance de votre site.

1.Dimensionner correctement les images

dimensionner correctement les imagesLes images sont un contenu visuel très capital pour les éditeurs de sites. Elles sont utilisées dans le but d’illustrer les contenus. Ce qui facilite la compréhension du lecteur sur le sujet traité dans la publication.

Elles constituent le plus souvent l’essentiel du poids d’une page web. Ainsi, lorsque ces dernières ne sont pas optimales, elles peuvent tirer vers le bas les performances de votre site. WordPress a une configuration d’images optimales que vous pouvez modifier depuis les paramètres de votre site.

Lors de la création de contenus, il est possible d’utiliser le CSS afin de redimensionner correctement les images. Il suffit de déterminer une hauteur et une largeur, dans les conditions requises en éditant le code source (HTML) de la publication.

Pour cela, vous aurez besoin d’ajouter l’attribut « width » pour la largeur suivi d’une valeur numérique en px. Ensuite, pour la hauteur, vous devez utiliser l’attribut « height ».

img { width : 200px; height : 200px; }

Dans la configuration ci-dessus, nous avons attribué une largeur et une hauteur toutes de 200 px aux images téléchargées. Ce processus est pratique et WordPress devra suivre ces consignes lors de l’affichage de l’image sur la page.

Cependant, cette manière de redimensionner les images peut devenir beaucoup plus frustrante si vous avez un tas d’images à insérer dans votre publication. Ainsi, si vous avez pris soin de télécharger des images déjà redimensionnées, vous pouvez réduire ce travail. Les outils gratuits en ligne comme iLoveIMG peuvent vous aider à redimensionner correctement vos images sans perdre la qualité.

2. Éliminer les ressources qui bloquent le rendu de la page

Éliminer les ressources bloquant le rendu d’une page est une des recommandations courantes de PageSpeed Insights.éliminer les ressources qui bloquent le rendu de la pageCes ressources sont principalement le JavaScript et le CSS. Le code JavaScript joue plusieurs fonctionnalités sur les pages web. Il entre essentiellement dans le caractère interactif d’une page web et un internaute.

Celui-ci permet aussi de créer des effets spéciaux sur les pages web dynamiques, le défilement, le flash et intervient dans le partage de contenus sur les réseaux sociaux… Le CSS pour sa part intervient dans le contrôle de l’apparence et le style d’une page web, ses couleurs, sa police, etc.

Lorsque vous souhaitez accroître les performances de votre site, l’idéal n’est pas de retirer ces ressources. Il existe plutôt des méthodes qui sont recommandées afin que le JavaScript ou le CSS ne bloquent le rendu de la page.

  • Différer l’analyse de JavaScript sur la page web. Cette technique consiste à télécharger tous les scripts JavaScripts lors de l’analyse HTML, mais de les exécuter qu’une fois l’analyse HTML terminée. Il existe plusieurs méthodes en ligne pour implémenter cette technique sur votre site. Cependant, la méthode la plus facile consiste à se servir d’un plugin. Parmi les extensions que vous pouvez utiliser, il y a entre autres Async JavaScript et WP Rocket.
  • Vous pouvez aussi implémenter JavaScript directement dans le fichier HTML. Cependant, cette méthode reste d’application que pour les sites de petite taille. Pour cela, vous pouvez utiliser le plugin Autoptimize.

3. Utiliser les images au format de nouvelle générationdiffuser les images aux formats de nouvelle génération

Habituellement, les formats d’images les plus couramment utilisés sont le PNG et JPEG. Il existe actuellement de nouveaux formats d’images qui se chargent beaucoup plus rapidement. Ces images de nouvelle génération sont AVIF et WebF. Si les images PNG et JPEG existent sur votre site, PageSpeed Insights vous donnera une recommandation de les convertir.

Si les images PNG et JPEG sont en grand nombre sur votre site, vous pouvez les convertir automatiquement en utilisant un plugin de conversion. Vous avez notamment Imagify qui peut servir quant à ce. Vous pouvez utiliser également le plugin Smush pour la conversion WebP.

4. Ajouter les attributs Width et Height spécifiques à vos imagesajouter les attributs Width et Height

Ajouter des attributs Width et Height à vos images spécifiques, n’a rien de compliqué. Ces deux concepts traduisent respectivement la largeur et la hauteur des images. Tout ce que vous avez à faire est de déterminer les images aux formats corrects et requis. Et c’est en utilisant ces deux attributs que vous y arriverez.

La mesure sur laquelle, vous devez agir le plus est la largeur. Des images avec une largeur de plus de 700px constituent une charge pour les navigateurs les plus courants. Vous pouvez ajouter manuellement ces attributs en éditant le code HTML de la page. De cette façon, vous allez éviter le décalage de la mise en page et réduire le temps de rendu de la page.

5. Mise en cache des éléments statiques

diffuser les elements statiques par la mise en cache

Les applications web notamment WordPress ont besoin de ressources dynamiques mais aussi statiques pour fonctionner correctement. Les propriétaires de sites appliquent le cache pour accélérer la livraison de contenus d’une page web.

La mise en cache de ressources statiques peut aider à accélérer la vitesse de votre site. Après l’analyse, PageSpeed vous indique le nombre de ressources statiques trouvées et qui nécessitent la mise en cache. Si vous utilisez WordPress, il existe un nombre assez important des plugins pour exécuter le cache sur votre site.

Trucs et astuces


Accélérez la vitesse de votre site avec LWS Fastest Cache, inclus dans tous les hébergements web LWS !

6. Éviter les chaînes de requêtes critiques

éviter les chaines de requetesUne autre recommandation la plus courante de PageSpeed Insights est la suppression de chaînes de requêtes critiques. Les scripts JavaScript et CSS sont les ressources qui entraînent le plus souvent les chaînes de requêtes critiques. Ils sont liés au processus appelé chemin de rendu critique (CRP). Ces deux derniers bloquent souvent le rendu de la page jusqu’à ce que leur téléchargement soit terminé.

Lorsque vous avez ce problème sur votre site, PageSpeed Insights vous donne également la recommandation pour les éviter. Le rapport inclut également la taille pour chaque chaîne.

Pour trouver la solution à ce problème, vous pouvez passer par les pratiques suivantes :

  • Minifier les ressources JavaScript et CSS. Ce qui peut aider à réduire leur taille et accélérer leur chargement au moment où elles sont demandées. La minification du JS et CSS passe par l’utilisation de certaines plugins WordPress de performances. Il s’agit notamment de WP Rocket, WP Fastest Cache… Ces plugins peuvent vous aider aussi à détecter d’autres ressources inutiles et les supprimer.
  • Éliminer les ressources qui bloquent le rendu de la page.
  • Vous pouvez aussi activer le chargement différé de ces ressources.

Toutefois, vous devez garder à l’esprit qu’il n’existe pas des règles fixant le nombre de chaînes de requêtes au-dessus duquel vous pouvez agir. Cette recommandation intervient juste dans le but de vous aider à éliminer ces éléments qui peuvent nuire inutilement à vos performances.

7. Réduire le nombre de requêtes et la taille de transfert

Si les navigateurs doivent exécuter beaucoup de requêtes afin de rendre visible vos pages web, cela peut augmenter la consommation des ressources sur votre serveur.

réduire le nombre de requetes et la taille de transfertPour optimiser davantage votre site, PageSpeed Insights identifient les requêtes nécessitant beaucoup de ressources ainsi que leur taille de transfert. Sur l’image ci-dessus, la police de caractères montre un pic. Pour aider à résoudre le problème, Google recommande de créer un budget de performances.

Ce budget doit définir un certain nombre de règles auxquels vous devez vous conformer pour économiser vos ressources. Il n’existe pas donc, à proprement parler d’une valeur limite. Pour vous donner une idée, le budget de performance peut consister à établir :

  • La taille et le type de police de caractères dont vous avez besoin sur votre site
  • La taille maximale d’images sur votre site
  • Établir une limite sur le nombre de ressources externes dont vous avez également besoin
  • Le volume maximum de scripts (JS, CSS…) à diffuser

8. Minifier CSS

Les fichiers de styles peuvent également constituer un problème de performance lorsqu’ils ont un poids élevé.minifier CSSLa réduction de la taille de ces ressources s’impose comme une des recommandations pour accélérer le chargement de vos pages. Pour y répondre, vous devez minifier les ressources CSS, les compresser ou les concaténer.

9. Minifier le JavaScript

Comme pour les fichiers CSS, avoir des fichiers JavaScript de taille élevée peut ralentir vos performances. Vous devez donc travailler pour leur compression, et leur minification.minifier JavaScriptAinsi, pour faire la minification de vos scripts JavaScript, vous devez utiliser les plugins de cache. WP Rocket, Autoptimize, WP Fastest Cache peuvent vous aider à compresser et minifier facilement vos fichiers JavaScript.

10. Réduire les ressources CSS inutilisées

Les ressources CSS inutilisées constituent une charge inutile pour votre réseau. Lorsque ces derniers figurent sur votre site, PageSpeed Insights vous recommandera également de les réduire.reduire les ressources CSS inutilisésEn supprimant ces fichiers non utilisés, vous ne garderez que ceux qui concourent au rendu de la page web.

Dans le même contexte, vous devez garder un œil vigilant sur certains plugins et thèmes qui peuvent nuire à vos performances avec des scripts CSS inutiles. Pour cela, un outil comme Chrome DevTools peut vous aider à localiser ces ressources superflues dans l’arborescence de votre site. Une fois que vous avez identifié ces éléments inutiles, vous pouvez agir en retirant ou désactivant les plugins ou les thèmes coupables.

Alternativement, vous pouvez différer leur chargement afin de ne pas bloquer le rendu de la page. Vous pouvez aussi mettre ces ressources tierces en ligne afin de réduire le temps affecté à leur chargement.

11. Réduire les fichiers JavaScript inutilisés

De la même manière que les fichiers CSS, vous pouvez vous retrouver avec des ressources JavaScript inutiles.

réduire les fichiers JavaScripts inutilisésLa encore, Chrome DevTools peut vous aider à identifier ces scripts superflus. Vous devez ainsi, réduire le nombre de plugins qui sont à l’origine de ces éléments inutiles à partir de l’analyse de vos URLs. De cette façon, vous ne pouvez conserver que les extensions nécessaires à l’affichage de la page.

La deuxième solution consiste à différer leur chargement afin de réduire le volume d’octets nécessaire à l’activité réseau.

12. Encoder les images efficacement

Comme vous le savez, les images constituent l’essentiel du poids des pages web. Lorsque vous utilisez des images d’un poids élevé, cela peut nécessiter beaucoup de données mobiles pour leur chargement par les navigateurs.encoder les imagesLa solution consiste à compresser vos images sans sacrifier leur qualité. La solution pour les sites fonctionnels est l’utilisation d’un plugin de compression d’images. Sur WordPress, vous avez le choix des modules populaires et gratuits à l’utilisation comme Imagify ou encore Smush.

En dehors de cette compression, vous pouvez aussi envisager d’utiliser les images aux formats de la prochaine génération (WebP, AVIF…) ou mettre en place le chargement paresseux (Lazy Loading).

13. Activer la compression de textes

La compression de textes est en rapport avec la compression GZIP. Cette pratique est aussi recommandée lorsque vous désirez accroître les performances de votre site.compression GZIPLes navigateurs actuels prennent en charge la compression GZIP. C’est ainsi que la plupart d’hébergeurs actuels (LWS, y compris) ont configuré la compression GZIP sur les serveurs d’hébergement. Vous n’avez donc pas à intervenir manuellement pour cette configuration. Mais si vous êtes sur les serveurs d’hébergement où la compression GZIP n’est pas activée, vous pouvez l’activer manuellement.

Sur WordPress, le plugin WP Rocket ou encore W3 Total Cache ont tous une fonctionnalité permettant d’activer la compression GZIP.

Vous pouvez aussi activer la compression GZIP manuellement en modifiant le fichier .htaccess de votre site. Si vous êtes sur un serveur Apache, vous devez ajouter les lignes de codes suivantes :

# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Vous devez ajouter ce code après la ligne End du fichier .htaccess.

En revanche, si vous êtes sur un serveur Nginx, le code d’activation ressemble à ceci :

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plin text/css text/javascript application/javascript application/x-javascript;

Vous pouvez envisager cette méthode manuelle seulement si vous savez ce que vous faites. La méthode d’activation de la compression GZIP reste donc celle qui est recommandée lorsque vous débutez dans WordPress.

14. Le temps de réponse initial du serveur

La notion du temps de réponse initial du serveur correspond à la durée écoulée lorsqu’une requête est envoyée au serveur par un navigateur et l’obtention de la réponse.réponse intiale du serveurPlusieurs facteurs peuvent influencer le temps de réception de premier octet. Il s’agit notamment d’ :

  • Un nombre élevé de plugins sur votre site
  • Des thèmes et des plugins non optimisés
  • Mauvaise configuration du serveur (serveurs moins performants)
  • Non utilisation d’un réseau de diffusion de contenus (CDN)

En agissant sur ces éléments, vous pouvez booster vos performances.

15. Éviter des redirections multiples

Dans l’écosystème web, les redirections signifient qu’une page pointe vers un autre. Le plus souvent, les redirections sont mises en place pour corriger les problèmes de pages d’erreur 404.éviter les redirections multiplesLorsque vous n’avez pas bien configuré vos redirections, le risque est de créer des boucles de redirections interminables. Ce qui peut également constituer un ralentissement dans la livraison du contenu de la page.

16. Précharger les demandes clés

Cette recommandation implique le téléchargement des ressources tierces dont fait appel un navigateur pour afficher une page web sur votre serveur d’hébergement. Cette technique permet ainsi de réduire le nombre de requêtes que le navigateur doit adresser à votre serveur pour livrer la page. Pour cela, vous devez modifier le fichier header.php de votre thème en y ajoutant le code :

<link rel=“preload” href=“example.com”>

Referez-vous aux rapports de Google PageSpeed Insights pour identifier les ressources critiques à ajouter. De cette façon, elles seront utilisées pour le chargement futur de la page.

17. Utiliser les formats vidéo pour le contenu animé

Les GIFs sont un type de contenu visuel que les éditeurs de contenus peuvent utiliser pour illustrer leurs textes. Ces images animées peuvent être déployées dans des objectifs variés. Cependant, il s’est révélé que ce type de contenu visuel, de plus en plus en vogue, entraîne des problèmes de performances.utiliser les vidéos pour les contenus animésCes images animées sont simplement lourdes lors de leur téléchargement dans les navigateurs. C’est ainsi Google recommande de le remplacer par des vidéos. Vous devez utiliser les vidéos au format MPEG/WebP si vous souhaitez continuer à utiliser les animations. En revanche, les vidéos PNG/WebP doivent remplacer les images GIF. Les vidéos MP4 sont également un format compatible avec la majorité de navigateurs modernes.

18. Éviter d’utiliser l’ancien code JavaScript

éviter d'utiliser l'ancien code JavaScript

Une autre mesure pour réduire la consommation inutile de vos données est de se débarrasser des anciens codes JavaScript. Les scripts concernés ici sont les « polyfill ou shim » et les attributs « transform ».

Ces deux scripts sont utilisés par les anciens navigateurs pour prendre en charge les nouvelles fonctionnalités HTML, CSS et JavaScript afin de livrer une page web complète. Les navigateurs modernes n’ont cependant pas besoin de ces ressources, qui constituent parfois une source de baisse de performance de votre site.

Vous devez donc adopter une stratégie d’utilisation de JavaScript modernes.

19. Éviter d’énormes charges utiles au réseau

éviter des charges utiles au reseauSi votre page d’accueil contient beaucoup de contenus, il peut prendre du temps au chargement. Ainsi :

  • Si vous avez beaucoup d’articles sur une même page, essayez d’en lister une dizaine en segmentant vos pages d’archives.
  • Les articles ne doivent pas être affichés au complet depuis la page d’accueil ou celle listant les articles. Vous devez utiliser plutôt des extraits brefs en ajoutant la balise « suite » par exemple.
  • Si vous avez une tonne de commentaires sur votre site, vous pouvez utiliser un plugin de chargement différé.

Cette mesure épargne aux visiteurs la charge de télécharger une page bourrée de contenus. Vous pouvez également personnaliser la longueur de l’extrait WordPress sur la page qui liste vos articles, afin d’améliorer la vitesse de chargement de votre page.

20. Éviter une taille excessive de DOM

Le concept DOM (Document Objet Model) traduit l’interface de programmation qui représente une page HTML, permettant d’accéder aux éléments de cette page et les modifier avec le langage JavaScript.éviter la taille excessive de DOMAvec le DOM, vous pouvez modifier le style d’un élément, créer ou supprimer les éléments d’une page, récupérer les informations des utilisateurs dans un formulaire… Lorsque vous excédez en taille avec le DOM, vous pouvez avoir des pages qui sollicitent trop de mémoire lors du chargement. D’où, vous devez le réduire.

Voici quelques bonnes pratiques pour réduire la taille de DOM :

  • Segmenter les grandes pages en plusieurs pages
  • Configurer le chargement paresseux d’images (Lazy Load)
  • Réduire le nombre de plugins utilisés
  • Supprimer les éléments inutiles dans les fichiers du thème

21. Réduire la durée d’exécution de JavaScript

réduire la durée d'execution de JavaScriptComme vous le savez, le JavaScript est une des ressources qui bloquent le rendu d’une page web avant son exécution. Lorsque la durée d’exécution est élevée, cela peut ralentir la livraison de la page. Vous devez donc identifier les scripts qui nécessitent un temps long de chargement.scripts à minifier Ensuite, vous devez les minifier, les compiler et retirer ceux qui sont inutiles à l’aide de plugins tels que WP Rocket, Autoptimize.

22. Différer le chargement des images hors écran

differer le chargement des images hors écranLes images sont également des contenus qui peuvent retarder l’affichage d’une page web. En activant le chargement différé, l’image ne sera visible que si le visiteur défile la partie. C’est le processus appelé Lazy Loading. Pour activer du Lazy Load sur WordPress, vous pouvez utiliser des extensions tels que Lazy Load, ou a3 Lazy Load

23. Éviter les tâches longues dans le thread principal

réduire le travail dans le thread principalLe thread principal traduit en des termes simples, le fil conducteur d’une page web. Il s’agit d’un processus d’analyse du code HTML, de la construction de l’arborescence DOM et la livraison d’une page lisible par les utilisateurs.

Le fil conducteur est exécuté par le navigateur de l’internaute. Au cours de ce processus, toute ressource interférant et bloquant le rendu, entraîne le blocage du fil conducteur. Il en résulte une page web non interactive et un véritable problème de performance. Les premiers scripts coupables sont souvent le JavaScript et le CSS.

C’est dans cette cadre que Google Page Speed Insights vous recommande quelques mesures pour corriger ce problème :

  • Différer le JavaScript
  • Minifier le JavaScript et le CSS
  • Supprimer les scripts CSS et JavaScript non utilisés

Toutes nos félicitations d’être arrivé jusqu’ici avec votre lecture ! 🤗 Google PageSpeed Insights est un outil qui peut vous aider à améliorer les performances de votre site à travers ses recommandations. Lorsque vous analysez votre site sur PageSpeed Insights, concentrez-vous sur les recommandations et trouvez les solutions correspondantes aux problèmes établies. C’est de cette façon que vous allez booster les performances de votre site.

Plus d'informations


Vous avez besoin d’aide pour optimiser votre site web ? Consultez nos tutoriels pour créer un site web performant !

Vous avez des remarques vis-à-vis de cet article ou souhaitez obtenir plus d’informations ? Contactez-nous en commentaires !

Avatar de l'auteur

Auteur de l'article

Joseph

Je suis Joseph, expert en hébergement web et noms de domaine chez LWS 🌐. J'adore partager mes astuces et mon expérience pour vous aider à briller sur le web ! Suivez-moi pour des conseils pratiques et fun 😊.

Il y a 272 jours

note article

4.8/5 (146 votes)

Commentaires (0)
Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

White Book for other Category

Hébergement Web LWS - 3 mois offerts

Hébergement Web Starter LWS GRATUIT pendant 3 mois ! 🚀

Cette offre exclusive comprend tout ce dont vous avez besoin pour créer votre site web GRATUITEMENT : Hébergement 250Go SSD, 5 sites webs hébergeables, WordPress et autres CMS en 1 clic, support réactif 7J/7, serveurs en France...