Outil de test de vitesse Pingdom – Comment améliorer les scores Pingdom

Les sites Web à chargement rapide génèrent toujours plus de trafic que les sites lents, ce qui affecte le classement et les performances. Dans cet article, je parlerai de l'outil Pingdom Speed ​​Test, qui peut vous aider à comprendre les problèmes de performances de votre site. L'objectif est de vous amener au point de la vitesse de votre site et comment vous pouvez le rendre plus rapide.

Trop souvent, les utilisateurs interprètent mal les données de l'outil Pingdom Speed ​​Test, au point d'aggraver la vitesse de leur site Web. Rappelez-vous, utilisez toujours tous les outils comme une utilisation guidée car ils ne sont pas précis à 100%.

Qu'est-ce que l'outil de test de vitesse Pingdom et que propose-t-il ?

Pingdom est un outil de test de vitesse Web gratuit et populaire, une solution de surveillance pour vos sites Web, applications et serveurs. Non seulement il surveille la disponibilité, mais également les performances de charge afin que vous puissiez voir comment vos visiteurs perçoivent votre site. Pingdom propose des services tels que la surveillance de la disponibilité, la surveillance de la vitesse des pages, la surveillance des transactions, la surveillance des serveurs et les informations sur les visiteurs (RUM).

Pourquoi est-ce tellement populaire? Eh bien, c'est probablement l'outil le plus simple pour surveiller la vitesse du site Web et les performances des pages. Tous les utilisateurs ne peuvent pas être des experts en performances, c'est donc un bon choix pour l'utilisateur moyen de WordPress.

Voyons comment vous pouvez effectuer un test sur Pingdom. L'utilisation de l'outil de test de vitesse Pingdom n'est pas une grosse affaire - il suffit d'aller sur le site Pingdom, d'entrer votre URL et de sélectionner l' emplacement en fonction de l' emplacement de vos visiteurs. Cliquez ensuite sur le bouton « Démarrer le test » .

L'outil Pingdom Speed ​​Test vous permet de tester votre site Web sur 7 sites de test différents (5 continents) à travers le monde :

• Asie – Japon – Tokyo
• Europe – Allemagne – Francfort
• Europe – Royaume-Uni – Londres
• Amérique du Nord – États-Unis – Washington DC
• Amérique du Nord – États-Unis – San Francisco
• Pacifique – Australie – Sydney
• Amérique du Sud – Brésil – Sao Paulo

Alors, quel emplacement de test de vitesse du site Web Pingdom serait le meilleur pour les tests ? Cela dépend des visiteurs de votre site. Assurez-vous de sélectionner l'emplacement qui est proche de vos visiteurs. Si l'audience de votre site est basée en Europe , vous avez le choix entre 2 options : (Europe – Allemagne – Francfort) ou (Europe – Royaume-Uni – Londres) . Si votre site a des visiteurs du monde entier, testez votre site sur différents emplacements et prenez les mesures appropriées pour l'améliorer.

Comprendre l'analyse en cascade avec l'outil de test de vitesse Pingdom

Une page Web est généralement une combinaison de fichiers HTML, CSS, JavaScript et multimédia , et chacun d'eux génère une demande de rendu sur le serveur. Plus de demandes pourraient être la raison de la lenteur du site. L'outil de test de vitesse Pingdom contient plusieurs sections qui indiquent la notation et des suggestions d'amélioration. Les sections de l'outil de test de vitesse Pingdom sont :

• Résumé de Pingdom
• Améliorer les performances des pages
• Codes de réponse
• Taille du contenu et demandes par type de contenu
• Taille du contenu et demandes par domaine
• Graphique en cascade

Dans cette section, je vais vous expliquer comment vous pouvez effectuer une analyse en cascade, et je vais décomposer chaque section Pingdom et expliquer plus en détail.

Résumé de Pingdom

Lorsque vous exécutez un site Web WordPress via Pingdom, il génère un résultat basé sur une note de performance, la taille de la page, le temps de chargement et les demandes.

Lorsque vous testez votre site plusieurs fois, vous remarquerez que le temps de chargement de votre site change à chaque test, tandis que les autres résultats (note de performance, taille de page et demandes) restent les mêmes. La raison de cet écart de temps de chargement est le cache DNS, le cache CDN, le cache WordPress et les API externes .

Un score Pingdom amélioré dépend de votre application Web et de la configuration du serveur. Il n'est peut-être pas possible d'obtenir des scores à 100 % à tout moment, en particulier lorsque vous exploitez un site Web de commerce électronique, mais il y a toujours place à l'amélioration.

Améliorer les performances des pages

La section Améliorer les performances de la page comprend des notes de performance globales avec des suggestions pour améliorer les performances de votre page. Bien que ces suggestions ne soient pas applicables à tous les sites Web, elles augmentent les chances d'amélioration.

Jetons un coup d'oeil à ces suggestions.

1) Utiliser un réseau de diffusion de contenu (CDN)

La chose la plus importante à utiliser sur votre site WordPress est un CDN (Content Delivery Network). Le CDN fait référence à un groupe de serveurs répartis géographiquement qui fournissent une livraison rapide de contenu Internet. Il s'agit d'un réseau de serveurs répartis dans le monde entier. Le CDN permet le transfert rapide de contenu Web en le rapprochant de l'endroit où se trouvent les utilisateurs.

Si vous êtes un utilisateur de Cloudways, vous pouvez profiter de CloudwaysCDN. Tous les plans d'hébergement Cloudways ont CloudwaysCDN intégré qui peut être activé en quelques clics. Pour en savoir plus, consultez le blog WordPress CDN sur Cloudways.

Jetons un coup d'œil à certains fournisseurs de CDN tiers :

1. CléCDN
2. CDN CloudFlare
3. Amazon CloudFront
4. CDN77

Ici, vous pouvez voir l'analyse comparative du CDN WordPress de trois fournisseurs de CDN populaires largement utilisés.

2) Éviter l'erreur HTTP 404 (non trouvé)

L'erreur Éviter HTTP (404) s'affiche dans la suggestion de l'outil Pingdom Speed ​​Test lorsque la demande n'a pas pu être effectuée avec succès. Un lien rompu, comme lorsque vous attachez manuellement un lien à une image supprimée à l'intérieur de la page, entraîne une erreur 404.

Assurez-vous toujours qu'aucune demande ne sera générée pour des actifs qui n'existent plus.

3) Minimiser les redirections

La suggestion la plus courante de l'outil de test de vitesse Pingdom est de « minimiser les redirections ». Une redirection se produit lorsqu'une page de votre site entraîne le chargement d'une autre page. Cela peut se produire lorsque vous redirigez HTTP vers HTTPS , www vers non-www et que l'URL de la publication mise à jour a changé.

Voici quelques mesures que vous pouvez prendre pour éviter que votre site ne génère trop de redirections :

1. Ne jamais créer de lien vers une page qui contient déjà une redirection, car cela peut entraîner plusieurs redirections.
2. Assurez-vous de supprimer les plugins désactivés/inutilisés qui peuvent entraîner des redirections inutiles.
3. Lors de la création de liens sur votre site, utilisez le bon préfixe HTTP ou HTTPS et vérifiez s'il s'agit de www ou non-www.

Si vous souhaitez en savoir plus sur les redirections, consultez l'article Cloudways sur les redirections WP 301.

4) Ajouter des en-têtes d'expiration

Tous les fichiers du site Web WordPress sont chargés un par un pour un premier visiteur. Les requêtes générées entre votre navigateur Web et votre serveur augmentent le temps de chargement du site Web. Le cache du navigateur enregistre les fichiers du site Web sur l'ordinateur du visiteur. Ainsi, lorsqu'il visite à nouveau le site Web, le site Web se charge à partir du cache du navigateur au lieu du serveur, ce qui accélère le site Web.

Mais comment le navigateur sait-il quel fichier enregistrer et quel fichier charger depuis le serveur, et combien de temps les conserver ? C'est là qu'interviennent les en-têtes Expires. Ce sont des règles qui indiquent aux navigateurs Web s'ils doivent charger les ressources de la page Web à partir du cache du navigateur d'un visiteur ou de votre serveur.

Maintenant, entrons dans la partie pratique. Je vais vous montrer comment ajouter des en-têtes Expires en utilisant deux méthodes différentes.

Ajouter des en-têtes d'expiration à l'aide d'un plugin

Installez un plugin W3 Total Cache. Une fois installé et activé, accédez à WordPress Dashboard > Performance > Browser Cache , puis activez l'option « Set expires header » (Définir l'en-tête d'expiration) et enregistrez les modifications.

Si vous êtes curieux d'en savoir plus sur le plugin W3 Total Cache, consultez l'article Cloudways sur Comment utiliser le plugin WordPress W3 Total Cache pour des sites Web plus rapides.

Ajouter des en-têtes d'expiration à l'aide d'un code

Vous pouvez également ajouter des en-têtes Expires à l'aide de code. Pour cela, déterminez si votre site Web utilise des serveurs Apache ou Nginx. Pour ce faire, lancez votre site Web sur le navigateur, appuyez sur Ctrl + Maj + I pour accéder au réseau du site (vous devrez peut-être actualiser le site une fois), cliquez sur le nom de domaine en haut et accédez à l'en-tête section. Là, vous trouverez le nom de votre serveur.

Pour ajouter des en-têtes Expires à un serveur Apache, accédez à votre fichier .htaccess en utilisant n'importe quel serveur FTP (Filezilla) et le code indiqué en haut de votre fichier .htaccess.

 ## EXPIRE LA MISE EN CACHE DES EN-TÊTES ##
<IfModule mod_expires.c>
ExpireActive le
ExpiresByType image/jpg "accès 1 an"
ExpiresByType image/jpeg "accès 1 an"
ExpiresByType image/gif "accès 1 an"
ExpiresByType image/png "accès 1 an"
ExpiresByType image/svg "accès 1 an"
ExpiresByType text/css "accès 1 mois"
ExpiresByType application/pdf "accès 1 mois"
Application ExpiresByType/javascript "accès 1 mois"
Application ExpiresByType/x-javascript "accès 1 mois"
Application ExpiresByType/x-shockwave-flash "accès 1 mois"
ExpiresByType image/x-icon "accès 1 an"
ExpirePar défaut "accès 3 jours"
</IfModule>
## EXPIRE LA MISE EN CACHE DES EN-TÊTES ##

Chez Cloudways, vous ne pouvez apporter aucune modification au niveau Nginx, mais vous pouvez utiliser les règles Apache et ajouter des en-têtes Expires dans le fichier .htaccess de vos applications. Pour en savoir plus, consultez l'article Cloudways Exploiter la mise en cache du navigateur dans WordPress pour optimiser le temps de chargement des pages.

5) Faire moins de requêtes HTTP

Chaque fois que vous chargez le site Web, un tas de trucs techniques se produisent pour diffuser le contenu sur l'écran de l'utilisateur, y compris une requête HTTP. Alors, qu'est-ce qu'une requête HTTP ? Comment cela affecte-t-il l'expérience utilisateur? Et que pouvez-vous faire pour réduire les requêtes HTTP de votre site Web ?

Lorsqu'une personne visite une page de votre site Web, le navigateur Web de cette personne envoie une requête à votre serveur Web. Votre serveur héberge la page Web qu'ils essaient de voir sur votre site. Pour chaque fichier, un navigateur Web doit faire une requête HTTP distincte . Ainsi, plus votre site Web contient de fichiers, plus le nombre de requêtes HTTP générées par votre navigateur est important. Plus de requêtes HTTP peuvent affecter l'expérience utilisateur de votre site Web.

Voici quelques stratégies générales pour faire moins de requêtes HTTP :

• Supprimez les requêtes HTTP en supprimant les plugins inutiles qui n'ajoutent aucune valeur à votre site, car les plugins chargent généralement leurs propres CSS et JavaScript.
• Combinez les requêtes HTTP en fusionnant plusieurs fichiers CSS en un seul fichier CSS. Le site Web se charge plus rapidement car le navigateur doit faire moins de demandes.
• L'une des meilleures stratégies consiste à remplacer le plugin lourd par des plugins plus légers.
• Bien que les images rendent votre site plus attrayant et ajoutent de la valeur à votre site, supprimez les images inutiles et utilisez toujours les images optimisées (vous pouvez utiliser ShortPixel et WP Compress pour optimiser vos images).
• Utilisez le chargement différé pour les images et les vidéos.

Utilisez ces points pour accélérer votre site WordPress pour de meilleures performances.

6) Compresser les composants avec GZIP

La compression GZIP est une technologie qui réduit le temps de téléchargement des fichiers en compressant les fichiers de données. Tous les navigateurs modernes décompressent automatiquement les fichiers compressés lorsque les données compressées sont reçues par le navigateur. Tous les navigateurs modernes, les logiciels serveur et tous les meilleurs hébergements WordPress prennent en charge la compression GZIP. La compression GZIP peut réduire la taille des fichiers jusqu'à 70 %.

Cloudways est livré avec un plugin Breeze installé, vous pouvez donc obtenir une compression GZIP simplement en installant et en activant le plugin de cache Breeze WordPress.

Voici les plugins recommandés pour la compression GZIP :

• GZIP avec WP Rocket
• GZIP avec WP Super Cache
• GZIP avec W3 Total Cache

W3 Total Cache est un plugin de mise en cache avec une version gratuite. Il vous suffit d'installer et d'activer le plugin, et la compression GZIP sera automatiquement activée sur votre site Web. Allez dans Performances > Paramètres généraux et activez le « Cache du navigateur » . Cliquez sur le bouton « Enregistrer toutes les modifications » après avoir effectué les modifications.

7) Éviter Empty Src ou Href

Les attributs HTML sans valeur définie (aucune information entre les guillemets) sont appelés les attributs « vides » . L'attribut vide de la source (src) et le lien (href) mettent l'accent sur le navigateur pour se connecter même s'il n'y a pas de valeur URI (Uniform Resource Identifier).

Voici quelques exemples de balises vides Source (src) et Link (href) en HTML et JavaScript :

HTML :

 <img src="">
<a href="">

JavaScript :

 var img = nouvelle image();
img.src = "";

Assurez-vous qu'il n'y a pas de balises HTML et JavaScript vierges sur votre site Web. S'il y en a, supprimez-les et maintenez correctement tous vos liens. Deuxièmement, le problème des balises vides concerne les images, alors vérifiez toujours les liens des images lors du téléchargement et de l'utilisation.

8) Mettez JavaScript en bas

Cela signifie que vous chargez d'autres contenus de page avant JavaScript, de sorte qu'un utilisateur avec une connexion Internet lente n'a pas besoin d'attendre le chargement de JavaScript. Lorsque JavaScript est placé en haut, il commence à se charger en premier et affecte l'expérience utilisateur en ralentissant le reste du contenu de la page.

Enregistrez votre fichier JavaScript avec l'extension .js (my-amazing-script.js) et placez ce fichier JS dans votre répertoire de thème (vous pouvez créer un répertoire pour JavaScripts, c'est-à-dire public_html/wp-content/themes/your-theme/assets /js). Après avoir placé votre fichier JavaScript, modifiez le fichier functions.php de votre thème et ajoutez ce code :

 fonction wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('mon-incroyable-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

La fonction utilisée wp_register_script() et elle comprend :

 <?php
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
?>

Définissez le paramètre $in_footer sur true pour ajouter le script dans le pied de page ou en bas d'une page WordPress.

Codes de réponse

La section suivante de l'outil de test de vitesse Pingdom concerne les codes de réponse, également appelés codes d'état HTTP. Cette section vous indique ce qui se passe avec toutes les ressources que vous chargez sur la page. Certains courants sont :

• 200 – Tout va bien
  301 – La ressource demandée a été déplacée définitivement
  404 – La ressource demandée n'a pas été trouvée

Réponses Un code compris entre 200 et 300 convient généralement, mais ceux compris entre 400 et 500 sont généralement appelés erreurs que vous devez corriger.

Taille du contenu et demandes par type de contenu

Cela vous aide à voir les ressources de votre page Web. Les tableaux sont les informations sur la diffusion de votre contenu et vos demandes.

La taille du contenu par type de contenu fournit une liste de tous les actifs de votre site Web regroupés par type de contenu. Ces informations peuvent vous aider à éliminer les erreurs. Partout où vous vous rendez compte que la taille du contenu par type de contenu est supérieure aux attentes, vous pouvez travailler sur cette partie du contenu pour améliorer les performances.

Taille du contenu et demandes par domaine

La section Taille du contenu et demandes par domaine vous permet de voir les services internes et externes avec leurs tailles médianes. Cette section affiche les requêtes générées par le domaine. Il est recommandé de faire moins de requêtes externes car chaque service externe introduit sa propre latence.

En général, il est préférable de minimiser le nombre de requêtes et d'héberger les actifs en un seul endroit, par exemple en les déplaçant vers votre serveur Web ou CDN. FontAwesome ou BootStrap peuvent être considérés comme un exemple. Si vous liez le script de FontAwesome ou BootStrap en externe, téléchargez-le et servez-le directement.

Graphique en cascade

Enfin, nous avons la section des demandes d'outil de test de vitesse Pingdom, qui génère un graphique en cascade. Vous pouvez analyser chaque demande pour voir les problèmes de performances. Cette section contient un graphique en cascade détaillé à code couleur.

L'analyse en cascade de Pingdom montre chaque requête HTTP sur votre site, et elle est utilisée par les développeurs pour comprendre visuellement le chargement du site et identifier les goulots d'étranglement. Concentrez-vous sur les tailles de connexion – les connexions longues et les barres longues bloquent le chargement rapide du site.

Sommaire

En ce qui concerne les outils de test de vitesse de site Web, de nombreux outils sont disponibles sur le marché. Comme vous pouvez le constater, l'outil Pingdom Speed ​​Test fonctionne mieux pour explorer les performances du site Web avec des explications et des suggestions détaillées.

Je vous ai donné des informations détaillées sur le produit. C'est maintenant à votre tour d'utiliser cet outil pour améliorer les performances de votre site Web.