Comment accélérer votre site WordPress gratuitement

Euh, WordPress, je ne sais pas comment te dire ça mais… TU ES TROP LENT !

J'utilise WordPress tous les jours depuis plus de 7 ans maintenant et j'adore ça, mais parfois j'ai l'impression de pousser un éléphant dans les escaliers en essayant de charger rapidement les pages .

Qui peut le blâmer, vraiment ? WordPress est un système de gestion de contenu puissant , mais nous le chargeons avec des plugins, des images, des scripts, achetons un hébergement bon marché et nous nous demandons ensuite pourquoi il faut une éternité pour le charger .

Mais, WordPress, il y a de l'espoir ! En proposant un audit de vitesse infaillible, j'ai appris à accélérer WordPress sans dépenser une fortune en hébergement ou en plugins.

En fait, j'ai dépensé 0 $ et mon site est passé d'un chargement en presque 10 secondes à moins d'une seconde . C'est 10 fois plus rapide , et j'utilisais déjà du cache et des CDN avant de commencer.

Avant de:

Près de 10 secondes pour charger complètement la page.

Après:

La page se charge maintenant en moins de 1 seconde.

Plutôt cool, hein ? !

Vous voulez accélérer votre site WordPress comme je l'ai fait ? Je vais vous guider à travers chaque étape que j'ai suivie pour accélérer le chargement de WordPress .

Vous n'avez pas besoin d'acheter de plugins de vitesse WordPress

Contrairement à tous les autres tutoriels de vitesse WordPress que j'ai trouvés en ligne, j'ai mené cette expérience sans dépenser un seul dollar parce que a) je veux que les résultats soient utiles à quiconque possède un site WordPress, et b) je suis bon marché. Aussi c) J'ai vu des sites WordPress qui dépensent une tonne pour l'hébergement finissent TOUJOURS lentement, donc ce n'est pas un problème rapide à résoudre.

Bien sûr, certaines de mes astuces de vitesse peuvent être réalisées avec des plugins premium comme perfmatters et WP Rocket, mais si vous avez un peu de temps et de patience, vous pouvez obtenir les mêmes résultats gratuitement avec quelques plugins gratuits et un peu d'édition de code.

Pourquoi la vitesse de WordPress est-elle importante ?

La vitesse de WordPress est importante car votre site Web sera utilisé par de vraies personnes et les gens préfèrent utiliser des sites Web qui se chargent rapidement . Pas vous ?

Un site WordPress rapide vous donnera un avantage concurrentiel sur d'autres sites Web plus lents, car les gens voudront l'utiliser. Et Google pourrait également le remarquer.

Ah oui, le référencement. WordPress est un excellent point de départ pour le référencement sur n'importe quel site Web, mais la vitesse joue un rôle important dans le succès des moteurs de recherche organiques . Dans les projets sur lesquels j'ai travaillé, l'amélioration de la vitesse du site a entraîné une réduction du taux de rebond et d'autres mesures qui sont corrélées à des classements plus solides.

Depuis 2018, Google utilise la vitesse des pages comme facteur de classement officiel pour les recherches mobiles, ce qui signifie désormais toutes les recherches puisqu'ils utilisent l'indexation mobile d'abord depuis 2019. Google commencera également à utiliser sa référence de vitesse Core Web Vitals pour classer les sites dans le proche avenir.

Si vous pensez que payer pour le trafic vers votre site Web à partir des publicités Facebook ou Google signifie que vous pouvez vous en sortir avec un site à chargement lent, détrompez-vous. Vous payez pour des clics susceptibles de rebondir !

Que vous utilisiez WordPress ou tout autre CMS (système de gestion de contenu), vous devriez toujours essayer de rendre votre site Web aussi rapide que possible . Même une réduction de quelques millisecondes de vos temps de chargement peut entraîner d'énormes gains en termes de trafic et de conversions, en particulier sur mobile.

Pour résumer, voici les avantages d'un site WordPress plus rapide :

• meilleure UX (expérience utilisateur)
• taux de rebond plus faible
• SEO (optimisation pour les moteurs de recherche)
• optimisé pour la recherche mobile et vocale
• gagnez du temps chaque fois que vous utilisez le tableau de bord d'administration pour mettre à jour votre site Web !

Comment effectuer un test de vitesse WordPress

Avant de commencer à acheter des plugins de réparation rapide, vous devez regarder sous le capot de votre site Web WordPress pour savoir ce qui le rend si lent et effectuer un audit de la vitesse du site .

Dans le passé, j'ai utilisé des outils tels que Google Page Speed ​​Insights et Pingdom pour tester la vitesse de mes sites Web WordPress. Bien que ces outils conviennent pour un aperçu de base des performances de votre site, pour obtenir des informations plus exploitables, nous aurons besoin d'un plus gros bateau. Ou, au moins, WebPageTest.

Pour une raison étrange, la plupart des gens utilisent leur page d'accueil pour tester la vitesse de leur site Web. À moins que votre page d'accueil ne soit votre page de destination principale, ne vous embêtez pas. Je vous recommande d' effectuer un test sur votre ou vos types de page les plus importants (pour moi, un article de blog) pour obtenir des résultats représentatifs.

Comment utiliser WebPageTest pour tester les performances de WordPress

WebPageTest vous permet de sélectionner plusieurs variables avant d'exécuter un test. La configuration de test avancée standard convient à la plupart des sites, mais je change l'emplacement de test à New York et le navigateur à Chrome, pour mieux s'aligner sur mes utilisateurs (consultez Google Analytics pour trouver les appareils/emplacements de vos utilisateurs).

Soyez patient - le test prendra quelques minutes. Il est temps de prendre un café ou de consulter vos e-mails !

J'ai effectué le test sur un long article de blog avec beaucoup d'images (un article sur le SEO de crypto-monnaie).

En standard, WebPageTest exécutera 3 tests de charge différents de votre page, l'un après l'autre. Je me concentre sur le test First Run car il représente les performances d'une page pour les nouveaux visiteurs (la plupart de mon public). Les exécutions suivantes montreront comment votre page fonctionne lorsqu'un navigateur a déjà visité votre page - bon pour vérifier dans quelle mesure les navigateurs mettent en cache vos actifs et important si votre site Web a beaucoup de pages vues par visiteur (en particulier pour le commerce électronique).

Voici le tableau des données de vitesse que vous verrez une fois le test terminé :

Nous sommes intéressés par quelques mesures clés de la vitesse du site :

Temps de chargement - le temps total qu'il faut pour que la page se charge complètement jusqu'à l'état Document terminé .

Mon temps de chargement est de 9,933 secondes – autrement dit vraiment lent. Moins de 2,5 secondes est recommandé.

Premier octet - également connu sous le nom de TTFB (Time to First Byte), le temps qu'il faut avant que le premier octet de données ne soit transféré.

Mon TTFB est de 3,371 secondes. C'est vraiment, vraiment lent. Il devrait être inférieur à 500 ms (une demi-seconde), mais Google recommande 200 ms comme idéal. Ouais.

Octets entrants – Lorsque la page est entièrement chargée/document complet, « Octets entrants » correspond à la taille totale de la page Web.

Mon article de blog pesait 2 532 Ko, soit environ 2,5 Mo au stade du document complet. C'est assez volumineux, j'aimerais qu'il fasse moins de 1 Mo.

Requêtes – le nombre total de requêtes http(s). Les requêtes de document complet correspondent au nombre de requêtes nécessaires pour charger entièrement tout le contenu de votre page Web, et les requêtes entièrement chargées correspondent au nombre total de requêtes, provenant à la fois de votre domaine et de tiers (des éléments tels que les scripts Google Analytics).

Ma page a fait 47 requêtes et 232 lorsqu'elle est complètement chargée. Pas étonnant que ce soit lent ! Plus le nombre de requêtes est faible (généralement), plus la page se chargera rapidement.

En cliquant sur l'onglet "Domaines", vous verrez quelques statistiques supplémentaires :

Répartition du contenu par domaine – Le nombre de requêtes et d'octets de chaque domaine.

Vous pouvez voir que la majorité des requêtes provenaient de Google Analytics et qu'environ 0,5 Mo de données provenaient de scripts externes.

Cliquez sur l'onglet "Répartition du contenu" pour en savoir plus :

Répartition du contenu par type - le nombre de requêtes d'octets de chaque type MIME ( Multipurpose Internet Mail Extensions ).

Ma page est très riche en images - les images représentent 158 ​​requêtes et une taille de 2,5 Mo. Mais il y a aussi beaucoup de java. Cela me dit que réduire la taille/le chargement des images et combiner/supprimer JavaScript aidera la page à se charger plus rapidement.

Dans l'onglet "Résumé", vous pouvez trouver la vue en cascade - la partie la plus importante de l'audit de vitesse .

Vue en cascade - montre l'ordre dans lequel les demandes ont été effectuées sur la page et combien de temps elles ont pris pour se charger.

Chaque élément de la vue en cascade représente une demande. La couleur de chaque barre vous donne son type MIME (image, javascript etc), et la longueur de la barre indique combien de temps il a fallu pour charger . Le temps de chargement en millisecondes est également affiché.

La ligne verticale bleue continue représente l'étape "Document terminé" - le moment où le contenu de la page est entièrement chargé mais où des scripts supplémentaires (comme des analyses) peuvent encore être chargés en arrière-plan.

Concentrez-vous sur les requêtes qui arrivent avant la ligne bleue - réduire le temps de chargement de ces requêtes rendra la page utilisable plus rapidement. Cliquez sur n'importe quelle demande pour afficher plus de détails. Commencez par les requêtes qui se chargent avant la ligne bleue et prennent beaucoup de temps (les barres les plus larges). La vue détaillée vous permettra de savoir d'où vient la demande.

Maintenant que vous avez toutes ces données sur le chargement de votre site Web, il est temps d'approfondir les détails et de commencer à apporter des modifications à WordPress pour accélérer les choses.

Le mythe du trop grand nombre de plugins

Si vous avez lu l'un de ces articles sur "comment accélérer WordPress", vous saurez que les gens disent qu'avoir trop de plugins ralentira votre site WordPress, et vous devez supprimer des plugins pour l'accélérer à nouveau .

C'est tout simplement faux.

Les plugins ne ralentissent pas toujours votre site WordPress. Un site avec 1 plugin ne sera pas toujours plus rapide qu'un site avec 25 plugins. J'ai augmenté le nombre de plugins sur ce site et l'ai rendu 10 fois plus rapide.

Les plugins (et les thèmes) mal codés ou qui utilisent beaucoup de puissance de serveur ou de requêtes MySQL peuvent ralentir votre site WordPress, et c'est pourquoi l'exécution d'un test de vitesse de site approfondi avec WebPageTest vous permettra de savoir si des plugins vous alourdissent.

Plugins à éviter

Certains plugins populaires sont connus pour ralentir les sites WordPress (surtout si vous utilisez un hébergement mutualisé bon marché). Ceux à surveiller sont les plugins de publications connexes, les plugins de publication de statistiques et les plugins de sauvegarde sur site. Les plugins qui doivent continuellement analyser votre site, comme Broken Link Checker, sont également largement condamnés.

Vous pouvez tirer une leçon des hébergeurs WordPress optimisés : s'ils interdisent carrément les plugins en raison de leur impact négatif sur les performances du site Web, vous ne voudrez probablement pas les utiliser vous-même.

Voici une liste de tous les plugins interdits des principaux hébergeurs Web : WP Engine, Kinsta et Hostgator.

Si vous avez des plugins gourmands en énergie qui vous ralentissent, vous pourrez peut-être passer à un autre plugin pour obtenir le même résultat, ou utiliser un service tiers pour le remplacer. Par exemple, au lieu d'utiliser le plug-in Broken Link Checker, vous pouvez analyser votre site à la recherche de liens brisés à l'aide de Screaming Frog.

Gains rapides : supprimez les plugins et les scripts dont vous n'avez pas besoin

La chose la plus simple, la moins chère et la plus rapide que l'on puisse faire pour accélérer n'importe quel site Web WordPress est de supprimer les plugins et les scripts qui ajoutent beaucoup d'octets ou de requêtes à la page.

D'après mon audit de vitesse ci-dessus, j'ai pu voir que le plugin de commentaire Disqus augmente considérablement le temps de chargement de mon site .

Testez l'impact de vos plugins en les désactivant, puis en testant à nouveau le temps de chargement, la taille en octets et le nombre de requêtes de votre site.

Voici l'impact de Disqus sur mon site :

Avant (en utilisant Disqus):

Après avoir supprimé le plugin Disqus :

Vous pouvez voir qu'en supprimant Disqus, j'ai gagné 2 secondes sur le temps de chargement de ma page et réduit le nombre et la taille des requêtes.

Les scripts peuvent également ralentir WordPress , par exemple les scripts Google Analytics et les scripts Google Fonts. Vous pouvez voir quels scripts sont chargés sur votre site WordPress dans la vue cascade sur WebPageTest.

Les polices Google sont chargées tôt, avant l'étape Document terminé, donc les supprimer contribuera à rendre votre site plus rapide. J'utilise actuellement Montserrat (une police Google), mais j'ai vu dans la vue Cascade que ma page chargeait également le script pour Lora, que je n'utilise plus. La suppression du script Google Font inutile réduira de 330 ms le temps de chargement de ma page. Chaque petit geste compte !

Comment optimiser la taille des images et les méthodes de chargement

Pour la plupart des sites WordPress, les images seront parmi les fichiers les plus volumineux à charger sur chaque page.

Il y a quelques choses que vous devez faire pour optimiser les images sur WordPress afin qu'elles se chargent le plus rapidement possible :

1. Compressez les images pour les rendre aussi petites (en octets) que possible

Plus une image est petite (en octets), plus elle se chargera rapidement. Si vous téléchargez des images sur WordPress, redimensionnez-les avant de les télécharger afin qu'elles ne soient pas plus grandes que ce dont vous avez besoin. Convertissez les images PNG en JPEG pour obtenir une meilleure compression.

Si vous avez une bibliothèque d'images existante, utilisez un plugin d'image comme Smush (gratuit) pour compresser les images existantes et les nouvelles lors du téléchargement. J'utilise Smush depuis des années, donc mes images sont déjà assez petites - pas beaucoup de place pour l'amélioration pour moi, mais ça vaut le coup si vous ne l'êtes pas déjà.

Récemment, je suis passé à l'utilisation de ShortPixel pour compresser les images et les servir au format WebP. Les fichiers WebP sont 25 à 34 % plus petits que les images JPEG comparables et sont recommandés par Google. Voici un tutoriel sur l'utilisation des images WebP avec WordPress.

ShortPixel vous offre 100 crédits d'image gratuitement chaque mois, ce qui suffira à la plupart des petits sites Web pour démarrer. Si vous avez une grande bibliothèque d'images existante ou téléchargez beaucoup de contenu, vous pouvez acheter des crédits d'image supplémentaires à bas prix. Le plugin WordPress ShortPixel vous aidera à tout configurer.

2. Images de chargement paresseux sur de longues pages

Le chargement différé est un processus consistant à différer le chargement d'une image jusqu'à ce qu'un utilisateur fasse défiler la page.

Par exemple, mon article de blog SEO Cryptocurrency contient 23 images. Ces images ont une taille combinée de 2,5 Mo. C'est une longue page (plus de 3000 mots), il faut donc un certain temps au lecteur pour atteindre les images plus bas dans la page. Mais, surtout, l'utilisateur doit attendre que toutes les images soient chargées avant de lire quoi que ce soit .

Quelle perte de temps!

Au lieu de faire attendre les utilisateurs que toutes les images se chargent, le chargement différé vous permet de charger d'autres éléments de page avant les images sous le pli (la partie invisible de la page). Lorsque l'utilisateur fait défiler, les images se chargent et apparaissent.

Pour configurer le chargement différé, j'ai installé le plugin BJ Lazy Load (gratuit), qui utilise JavaScript pour différer le chargement des images. Oui, c'est un script supplémentaire pour votre site WordPress, mais cela en vaut la peine car les images représentent une grande partie de la taille de la page.

Voici la rapidité avec laquelle mon article de blog a été chargé avec le chargement paresseux activé :

Remarque : Si vous utilisez le chargement paresseux, les heures Document complet et Entièrement chargé ne prendront pas en compte les images plus bas sur la page.

Avant d'utiliser le chargement paresseux, la page prenait près de 10 secondes à se charger - le chargement paresseux rendait mon site 2 fois plus rapide .

Vous pouvez voir pourquoi en regardant la répartition du contenu dans WebPageTest :

Avec le chargement différé actif, le nombre de demandes d'images passe de 158 à 134. La taille de l'image passe de 2 523 665 octets (2,5 Mo) à seulement 116 319 octets (0,12 Mo).

Le plugin BJ Lazy Load a ajouté du JavaScript supplémentaire et d'autres scripts au site, mais ceux-ci ne semblent pas affecter les temps de chargement.

Vous pouvez également charger paresseusement des images en utilisant le plugin gratuit Autoptimize, qui effectuera également un tas d'autres optimisations de vitesse décrites dans cet article. Accédez à Tableau de bord > Paramètres > Optimisation automatique > Images et cochez l'option « Charger des images paresseuses » .

Ne comptez pas exclusivement sur le chargement paresseux utilisant JavaScript pour optimiser la vitesse, car si les utilisateurs bloquent Java, ils ne recevront pas de chargement paresseux ; assurez-vous que vos images sont également compressées pour un maximum d'avantages.

Une chose importante à retenir : vous pouvez également ajouter des classes d'images pour vous assurer que les images essentielles sont chargées immédiatement (comme tout ce qui se trouve au-dessus du pli). Configurez simplement une balise comme "not-lazy =" 1 "dans BJ Lazy Load et ajoutez-la à n'importe quelle image pour ignorer le chargement paresseux. L'optimisation automatique vous permet d'ajouter des exclusions de chargement différé.

Remarque : WordPress travaille sur l'ajout du chargement paresseux au cœur de WordPress, ce qui signifie qu'il peut être utilisé sans code ni plugins supplémentaires à l'avenir.

Ne présumez pas qu'un CDN accélérera le chargement de vos images

J'ai lu beaucoup de conseils sur la vitesse de WordPress, et la plupart d'entre eux recommandent d'obtenir un service CDN payant comme KeyCDN (que j'ai testé) ou StackPath (anciennement MaxCDN) pour héberger vos images pour vous.

Lorsque vous utilisez un CDN d'image, les requêtes effectuées lors du chargement de votre page Web proviendront d'une URL telle que cdn.yourdomainname.com/image-name au lieu de yourdomainname.com/image-name . Cela signifie que la demande provient d'un serveur différent du reste du contenu de votre site Web, mais cela ne signifie pas qu'elle sera plus rapide.

Par exemple, regardez les temps de chargement d'une page aléatoire sur le site WordPress WPBeginner :

Les images du CDN (il utilise MaxCDN) prennent beaucoup de temps à charger, et elles ne sont même pas volumineuses. Le volet de détails ci-dessus montre une image de 9,3 Ko prenant près de trois quarts de seconde à charger. C'est le rythme de la paresse !

Un CDN ne fera pas toujours charger vos images rapidement. Une bonne compression d'image et un chargement paresseux sont des moyens beaucoup plus fiables pour accélérer le chargement des pages.

Charger JavaScript de manière asynchrone

Bien que les scripts puissent ralentir nos sites, nous avons également besoin d'eux et de leurs fonctionnalités. J'aime utiliser Google Analytics, par exemple, donc je ne veux pas le supprimer juste pour rendre mon site plus rapide. Mais il existe un moyen d'accélérer le chargement d'Analytics et d'autres scripts : le chargement asynchrone .

JavaScript asynchrone charge plusieurs scripts en même temps - l'opposé du chargement synchrone, qui signifie charger les scripts dans l'ordre, un à la fois.

En chargeant tous vos scripts en même temps, ils devraient se charger beaucoup plus rapidement car il n'y a pas de temps d'attente. C'est particulièrement le cas si votre site WordPress appelle javascript à partir d'un certain nombre de sources externes différentes, comme Google Analytics ou Google Fonts.

Si vous avez effectué un test de vitesse de site Web sur Google Page Speed ​​Insights, vous saurez probablement que vous devez « éliminer le JavaScript bloquant le rendu ».

La suppression de JavaScript bloquant le rendu permettra au contenu de la page au-dessus de la ligne de flottaison (comme les images et le texte) de se charger sans attendre JavaScript. Si votre site WordPress a besoin de JavaScript pour se charger avant de pouvoir fonctionner, alors JavaScript bloquant le rendu est acceptable. Mais, si, comme moi, votre site Web n'utilise que JavaScript pour des fonctionnalités supplémentaires, alors le blocage de Java bloquant le rendu est un excellent moyen d'accélérer votre site Web.

J'ai utilisé le plugin gratuit Async JavaScript pour optimiser facilement mon JavaScript. Sélectionnez le paramètre rapide « Appliquer asynchrone » :

Pour des points de vitesse supplémentaires, vous pouvez également remplacer votre code de suivi Google Analytics par la version asynchrone, qui, selon Google, contribuera à accélérer votre site :

L'extrait de code de suivi asynchrone alternatif ci-dessous ajoute la prise en charge du préchargement, ce qui améliorera légèrement les performances des navigateurs modernes.

 <!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date ;
ga('créer', ' UA-XXXXX-Y ', 'auto');
ga('envoyer', 'page vue');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- Arrêter Google Analytics -->

Activer la compression gzip

La compression Gzip est une méthode de compression sans perte qui réduit les fichiers et les aide à se charger plus rapidement en raison de leur petite taille.

Le texte, HTML, JavaScript et CSS peuvent tous être compressés à l'aide de la compression gzip.

Vous pouvez utiliser divers plugins WordPress pour appliquer la compression gzip. Des services comme CloudFlare peuvent également le faire pour vous. Dans la mesure du possible, j'aime appliquer la compression directement sur le serveur .

Si votre pack d'hébergement vous donne accès à cPanel, vous pouvez ajouter la compression gzip directement sur votre serveur. Accédez à l'icône "Optimiser le site Web" sur la page d'accueil de cPanel. Sélectionnez "Compresser tout le contenu" et cliquez sur "Mettre à jour les paramètres".

Pour vérifier si la compression gzip est active sur votre site Web, exécutez un test simple.

Supprimer les chaînes de requête

Certains fichiers CSS ont un numéro de version à la fin, comme "css/screen.min.css?ver=1.7" . Le bit après le "?" signifie que le fichier ne sera pas mis en cache, il se chargera donc sur chaque page. Cela signifie que les temps de chargement resteront ralentis, même si un utilisateur visite plusieurs pages de votre site Web.

L'ajout de ce code à la fin du fichier functions.php de votre thème WordPress supprimera la chaîne de requête. Vous pouvez le faire via le gestionnaire de fichiers dans cPanel ou via un client FTP comme FileZilla.

 /** Supprimer les chaînes de requête

fonction rb_remove_script_version( $src ){
$parts = éclater( '?', $src );
retourne $parties[0] ;
}
add_filter( 'script_loader_src', 'rb_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', 'rb_remove_script_version', 15, 1 );

Merci, 99robots, pour ce bout de code.

Remarque : faites toujours une sauvegarde avant de jouer avec les fichiers système !

Augmenter la mémoire WordPress

WordPress a une limite de mémoire par défaut de 32 Mo, ce qui peut limiter votre site.

Ajoutez le code suivant à votre fichier wp-config.php .

 /** Augmenter la mémoire WordPress

définir( 'WP_MEMORY_LIMIT', '128M' );

Vous pouvez utiliser ce plugin gratuit pour vérifier la quantité de mémoire utilisée par votre site WordPress.

Ajouter la prélecture DNS

DNS est un serveur de noms de domaine. Alors que nous connaissons les domaines (alias sites Web) par leurs noms de mots, comme Google.com, les ordinateurs connaissent les domaines sous forme de numéros appelés adresses IP (par exemple 12.345.678) Afin de récupérer des ressources à partir d'un domaine, une recherche DNS doit se produire, ce qui traduit le nom du mot à une adresse IP. Cela prend du temps.

La prélecture DNS tente de résoudre la recherche de domaine et de traduire le nom du mot en une adresse IP avant que les liens ne soient cliqués ou que les ressources ne soient chargées.

L'ajout de la prélecture DNS pour les scripts courants sur votre site WordPress, comme Google Analytics ou les polices, réduira de quelques millisecondes vos temps de chargement.

Exécutez un test sur WebPageTest et voyez quelles ressources externes vous devez prérécupérer.

Ajoutez ce code au fichier functions.php dans votre thème WordPress

 //* Ajout de la prélecture DNS

function dns_prefetching() {echo ' ';}add_action('wp_head', 'dns_prefetching', 0);

Accédez à l'onglet "Domaines" sur WebPageTest pour savoir quels domaines externes prérécupérer.

Tirez parti de la mise en cache du navigateur

Chaque fois qu'un navigateur (par exemple Chrome, Firefox, etc.) charge une page Web, il doit télécharger chaque fichier (comme HTML, CSS, JavaScript, images, etc.) sur la page. Sans mise en cache du navigateur, si une personne revisite la même page Web en une heure, elle téléchargera à nouveau tous les actifs de la page.

La mise en cache du navigateur stocke les actifs du site Web dans le navigateur de l'utilisateur pendant une période définie, ce qui devrait accélérer le chargement des pages lorsqu'il continue à naviguer.

Ajoutez le code ci-dessous à votre fichier .htaccess pour tirer parti de la mise en cache du navigateur.

 ## Commencer la mise en cache du navigateur ##

ExpireActif 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 text/css "accès 1 mois"
ExpiresByType text/html "accès 1 mois"
Application/pdf ExpiresByType "accès 1 mois"
ExpiresByType text/x-javascript "accès 1 mois"
Application ExpiresByType/x-shockwave-flash "accès 1 mois"
ExpiresByType image/x-icon "accès 1 an"
ExpiresDefault "accès 1 mois"

Fin LEVERAGE BROWSER CACHING ##

Utilisez la mise en cache et les CDN pour un chargement plus rapide

La mise en cache est une méthode de stockage de données rapide qui stocke les versions HTML des pages de votre site Web dans la RAM d'un serveur afin qu'elles puissent être rapidement servies aux visiteurs.

Sans mise en cache, chaque fois qu'un visiteur accède à une page de votre site Web, le serveur doit créer une nouvelle version HTML, ce qui prend du temps.

La bonne nouvelle est qu'il existe de nombreux plugins de mise en cache WordPress gratuits pour vous aider.

J'utilise WP Super Cache, car il a été créé par Automattic, la société derrière WordPress.

Un CDN (réseau de diffusion de contenu) est un réseau de serveurs dans différents emplacements mondiaux qui stockent des versions de votre site Web. Lorsqu'un visiteur accède à une page de votre site Web, il l'obtient à partir de l'emplacement CDN le plus proche, qui sera probablement plus proche que l'emplacement de votre serveur physique. Les CDN réduisent également la charge sur votre serveur en stockant des versions des images de votre site Web et des fichiers volumineux pour une récupération rapide.

Sans CDN, votre serveur n'est basé qu'à un seul endroit et les données doivent être chargées et transférées de ce serveur au visiteur à chaque fois.

Il existe de nombreux CDN, comme KeyCDN, StackPath (anciennement MaxCDN) et Cloudflare. Je recommande d'utiliser Cloudflare si vous débutez avec les CDN car il est gratuit et facile à configurer.

Corriger les requêtes interrompues

La vue Cascade sur WebPageTest mettra en surbrillance (en jaune) toutes les erreurs de requête ou les redirections. Ceux-ci sont donnés à l'aide de codes d'état http standard (comme 301, 404, etc.) et vous aideront à détecter les problèmes.

Recherchez d'abord les erreurs 404 . Mon site essayait de charger une image manquante dans le cadre du thème. Je l'ai supprimé et j'ai gagné quelques millisecondes sur mon temps de chargement. Facile.

Désactivez les fonctionnalités de WordPress que vous n'utilisez pas

WordPress est un CMS très puissant et polyvalent, utilisé sur de nombreux types de sites Web différents. Il est probable que votre propre site Web n'utilise pas certaines des fonctionnalités de WordPress, mais il les charge toujours toutes.

Voici quelques fonctionnalités WordPress couramment sous-utilisées que vous pouvez envisager de désactiver :

• Émojis
• API REST
• Lien RSD
• Dashicons
• jQuery Migrer
• Lien court
• XML-RPC
• API de pulsation

Vous pouvez utiliser Clearfy (plugin gratuit) pour supprimer facilement les ballonnements WordPress inutiles de votre site.

Charger les scripts/plugins uniquement sur des pages spécifiques

WordPress essaiera de charger tous les plugins et scripts que vous avez sur chaque page de votre site Web. Mais vous ne les utilisez probablement pas tous sur chaque page. Un exemple courant de ceci est les plugins de formulaire de contact - si vous utilisez un formulaire de contact, c'est probablement uniquement sur votre page de contact, mais le script du plugin sera chargé sur chaque page, gaspillant des ressources.

Et bien sûr, assez ironiquement, il existe un plugin pour vous aider avec votre problème de surcharge de plugin !

Optimiser la base de données MySQL

Que vous utilisiez MySQL ou MariaDB comme base de données WordPress, vous devez l'optimiser pour maintenir des vitesses de chargement de site Web rapides. Chaque fois que vous effectuez une action sur votre site WordPress, un enregistrement de base de données est stocké. Ça peut devenir gros !

Optimisez votre base de données WordPress pour éliminer les ballonnements tels que :

• anciennes révisions de poste
• tables de plugin supprimées
• messages, pages et commentaires mis à la corbeille

Si vous utilisez un tableau de bord de gestion WordPress comme ManageWP (gratuit), vous pouvez optimiser votre base de données WordPress en un seul clic. Vous pouvez également utiliser un plugin d'optimisation de base de données gratuit comme WP DB Manager ou nettoyer via phpMyAdmin dans cPanel ou depuis l'hébergeur de votre site Web.

Comment savoir si votre thème WordPress est lent

Tous les thèmes WordPress ne sont pas créés égaux.

En fonction de la qualité de leur codage et de leur optimisation pour la vitesse, votre thème WordPress peut être assez rapide ou vous entraîner vers le bas. Si vous voulez en savoir plus, lisez notre test complet des thèmes WordPress les plus rapides.

Vous pouvez le savoir en consultant les résultats de l'audit de vitesse de WebPageTest.

Regardez la vue en cascade et cliquez sur les résultats avant la ligne bleue continue Document complet qui semble être en retard (les éléments les plus lents auront des barres plus longues). Examinez les URL – tout ce qui commence par /wp-content/themes/theme-name-here est un fichier de thème.

J'ai trouvé un fichier de thème ennuyeux qui causait plus d'une seconde de retard. Il s'agit d'une image .png de texture d'arrière-plan manquante du thème Eleven40. Pour être juste envers Genesis, j'ai eu le thème il y a des années et je l'ai modifié depuis, donc je pense que le mauvais codage est le mien, pas jusqu'au thème enfant. En tout cas, ça me ralentit. Je pourrais regarder le thème de mon code et faire quelques ajustements, ou je pourrais essayer de passer à un nouveau thème (voir la comparaison de vitesse de thème ci-dessous). Pour résoudre le problème, j'ai regardé la feuille de style style.css du thème et j'ai trouvé le fichier .png problématique et j'ai changé le code pour qu'il récupère la couleur blanche d'une commande CSS à la place.

Ce simple correctif CSS a rendu le chargement de WordPress encore plus rapide, et j'ai obtenu un temps de chargement inférieur à 1 seconde !

Au final, je suis passé au thème GeneratePress, qui est le thème le plus rapide que j'ai pu trouver (voir ci-dessous pourquoi !).

Test de vitesse Thèmes WordPress populaires

Dans un esprit d'expérimentation, j'ai testé 10 thèmes populaires pour voir si je pouvais obtenir des améliorations de vitesse. Vous pouvez lire les résultats complets ici.

TL;DR : GeneratePress Premium est le thème WordPress le plus rapide que vous puissiez acheter actuellement. Et j'ai depuis déplacé ce site Web vers GeneratePress.

Voici un test de vitesse mis à jour afin que vous puissiez voir à quelle vitesse il est. Les résultats sont pour ma page d'examen perfmatters :

Cela représente un temps de chargement total inférieur à 1 seconde et un score de vitesse mobile de 91/100 sur PageSpeed ​​Insights.

La page passe également le test Core Web Vitals de Google sur ordinateur :

Comment repérer les problèmes d'hébergement lents

Tous les problèmes de vitesse du site WordPress ne peuvent pas être améliorés comme par magie en changeant d'hôte ou en passant à un pack d'hébergement plus rapide, mais vous pouvez utiliser WebPageTest pour identifier exactement à quel point votre hébergement vous ralentit.

Essayez d'héberger un simple fichier index.html et vérifiez les temps de chargement. Si vous ne pouvez pas obtenir un TTFB rapide sur une simple page html, votre hébergement vous ralentit waaaaay.

J'ai téléchargé une simple page HTML, avec des images, et j'ai obtenu un TTFB de 0,221 seconde , ce qui est bon pour un hébergement bon marché ! Donc mon hébergeur n'est pas lent, mais mon site WordPress l'est bien sûr ! Maintenant, je sais qu'il ne sert à rien de dépenser plus d'argent pour l'hébergement tant que je n'ai pas optimisé WordPress.

Depuis, j'ai déplacé mon site WordPress vers Cloudways, qui me coûte 10 $/mois mais offre des vitesses fantastiques. J'obtiens maintenant un TTFB de 0,092 seconde , ce qui est très rapide. Vous pouvez lire mon avis sur Cloudways pour plus d'informations.

Plugins de vitesse WordPress

Après avoir passé des années à rechercher des améliorations de la vitesse de WordPress et des méthodes de test avec mes sites Web, j'ai découvert que le plugin perfmatters (revue ici) fait une grande partie du travail pour vous. Pour moins de 25 $, c'est une solution rapide sans prise de tête.

Il y a aussi WP Rocket (revue ici), qui fera un excellent travail pour accélérer votre site WordPress.

De plus, si vous n'êtes pas intéressé à modifier vous-même les paramètres du serveur et de cPanel, vous pouvez également utiliser un hébergement WordPress géré comme Kinsta et leur sous-traiter le travail. Cela vous coûtera beaucoup plus cher qu'un hébergement bon marché, mais au moins vous pouvez l'oublier et le laisser aux experts.

Personnellement, j'aime faire le travail moi-même, et je pense qu'il est important de comprendre ce qui ralentit un site WordPress. That said, I do recommend using third party services to clients, less tech-savvy WordPress users or those who value their time.

If you want a quick fix to a slow WordPress website, I recommend using the following plugins and services:

• Questions de performance
• WP Rocket

I've also heard good things about Nitropack, but I haven't tested it out yet.