fbpx

Comment accélérer votre site WordPress en quelque minutes

Tout le monde sait que la vitesse des pages est importante. C’est un facteur de classement confirmé par Google sur les ordinateurs de bureau et les téléphones portables, qui a un impact sur l’expérience de l’utilisateur et peut avoir un effet direct sur vos résultats. Mais la lenteur des sites WordPress est un problème courant.

Étape 1. Supprimer les plugins non utilisés

À moins que vous n’ayez un tout nouveau site web WordPress, il y a de fortes chances que vous ayez installé un tas de plugins que vous n’utilisez pas depuis des années. Certains d’entre eux peuvent avoir un impact sur la vitesse des pages, il vaut donc la peine de désactiver et de désinstaller tout ce dont vous n’avez pas besoin comme point de départ.

Soyez juste prudent lorsque vous faites cela. Si vous n’êtes pas sûr que quelque chose soit nécessaire, laissez-le là.

Étape 2. Changer de fournisseur DNS pour le Cloudflare

Les sites web sont des fichiers sur des disques durs (serveurs) connectés à l’internet. Et chaque appareil connecté à l’internet a une adresse IP (par exemple, 123.123.12.1).

Comme les adresses IP sont difficiles à mémoriser, les noms de domaine sont mis en correspondance avec les adresses IP à l’aide du DNS, qui signifie Domain Name System (système de noms de domaine). On peut considérer ce système comme le répertoire du web. Lorsque vous tapez un domaine dans votre navigateur, une recherche DNS se produit pour trouver l’adresse IP du serveur.

Mais voici le problème : la plupart des gens utilisent les DNS gratuits fournis par leur registrar, ce qui est généralement lent.

Si c’est votre cas, passez à un fournisseur de DNS plus rapide comme Cloudflare.

Pour ce faire, créez un compte Cloudflare gratuit. Cliquez sur « Ajouter un site », entrez votre nom de domaine et cliquez sur le bouton.

Sélectionnez le plan gratuit, puis cliquez sur « Confirmer le plan ».

Cloudflare vous donnera désormais la possibilité de revoir vos paramètres DNS avant de continuer. S’il n’y a pas d’avertissement, il est généralement prudent de continuer.

Il ne vous reste plus qu’à échanger vos nameservers avec ceux de cloudflare. La manière dont vous procédez varie selon les bureaux d’enregistrement, alors n’hésitez pas à demander leur assistance si vous ne savez pas comment procéder.

Étape 3. Installez un plugin de mise en cache

La mise en cache est un processus qui stocke temporairement les fichiers afin qu’ils puissent être livrés aux visiteurs plus efficacement.

Il existe deux types principaux:

Mise en cache du navigateur: enregistre les fichiers « courants » tels que les logos sur le disque dur des utilisateurs afin qu’ils n’aient pas à les télécharger à nouveau lors de visites répétées.

Mise en cache du serveur: enregistre une version entièrement construite et «statique» d’une page sur le serveur afin qu’elle n’ait pas à être reconstruite chaque fois qu’un nouveau visiteur la demande.

WP Rocket simplifie l’activation de la mise en cache. Achetez, installez et activez-le. La mise en cache de base (serveur et navigateur) est activée par défaut. Si votre site est réactif, accédez aux paramètres de cache et cochez la case pour activer également la mise en cache pour les appareils mobiles.

Étape 4. Réduisez votre code

La minification supprime les espaces et les commentaires du code pour réduire la taille des fichiers. Et des fichiers plus petits entraînent des temps de chargement plus rapides.

Si vous utilisez WPRocket, cochez les cases pour réduire les CSS et JavaScript dans les paramètres.

Si vous n’utilisez pas WPRocket, installez et activez Autoptimize et faites de même.

Sachez simplement que vous devez toujours tester comment cela affecte votre site Web avant de le déployer en direct. La réduction peut souvent conduire à un code cassé, en particulier en ce qui concerne Javascript.

Étape 5. Combinez les fichiers CSS et JavaScript

La plupart des sites Web WordPress incluent plusieurs fichiers CSS et JavaScripts. Certains sont destinés aux thèmes, d’autres aux plugins et vous pouvez également en avoir des personnalisés.

La combinaison de ces fichiers peut accélérer les choses, mais cela dépend de la configuration de votre serveur.

Avec HTTP / 1.1, les fichiers CSS et JavaScript se chargent consécutivement. Cela signifie qu’un fichier doit se charger complètement avant que le suivant puisse commencer à se charger.

Avec HTTP / 2, les fichiers se chargent simultanément. Cela signifie que plusieurs fichiers CSS et JavaScript peuvent commencer à se charger en même temps.

Si votre serveur utilise HTTP / 1.1, la combinaison de fichiers accélère les choses car moins de fichiers doivent être chargés. S’il utilise HTTP / 2, la combinaison de fichiers ne fera pas nécessairement beaucoup de différence car les fichiers peuvent de toute façon se charger en même temps.

Pour voir quelle version votre site utilise, connectez votre domaine au Key CDN’s tester.

Si HTTP / 2 n’est pas pris en charge, il vaut la peine de combiner les fichiers CSS et JavaScript.

Pour ce faire dans WPRocket, cochez les cases «Combiner les fichiers JavaScript» et «Combiner les fichiers CSS» dans les paramètres.

Si vous utilisez Autoptimize, il existe deux cases à cocher pour «agréger» les fichiers. Sachez simplement que ceux-ci peuvent parfois «casser» des éléments sur votre site. Il vaut donc la peine de vérifier que tout est toujours identique et fonctionne de la même manière une fois activé. Et n’oubliez pas de vider le cache au préalable et de vérifier les modifications dans une fenêtre de navigation privée. Sinon, les modifications risquent de ne pas être reflétées dans ce que vous voyez.

Étape 6. Éliminez les ressources bloquant le rendu

Le rendu est le processus de transformation du code en une page Web visible.

Le mot clé est «visible», car une page Web n’a pas toujours besoin de se charger complètement avant d’être visible.

Pour cette raison, il est logique de donner la priorité au chargement des ressources pour le contenu «au-dessus de la ligne de flottaison».

Pour ce faire, vous pouvez reporter à plus tard le chargement des fichiers CSS et JavaScript non critiques nécessaires pour le contenu «sous le pli». Pour ce faire dans WPRocket, cochez les cases « Charger JavaScript différé » et « Optimiser le chargement du CSS ».

Si vous n’utilisez pas WPRocket, vous aurez besoin de deux plugins: Autoptimize et Async JavaScript.

Dans les paramètres d’Autoptimize, cochez la case « Inline and Defer CSS ». Ensuite, dans les paramètres de Async JavaScript, cliquez sur «Activer JavaScript Async.

Si vous avez déjà vu le problème «éliminer les ressources bloquant le rendu» dans PageSpeed Insights, cela résoudra généralement ce problème.

Étape 7. Différer le chargement des Images et des vidéos

Le chargement différé améliore la vitesse de la page en différant le chargement des images et des vidéos jusqu’à ce qu’elles soient visibles à l’écran. Si vous utilisez WordPress 5.5+, le chargement différé des images est activé par défaut, mais pas pour la vidéo.

Si vous utilisez WPRocket, résolvez ce problème en cochant la case « Activer sur les iframes et les vidéos » sous les paramètres MEDIA.

Si vous n’utilisez pas WPRocket, le plugin gratuit Lazy Load for Videos fait à peu près la même chose.

Étape 8. Optimiser les polices Google

De nombreux thèmes utilisent des polices Google, et ces polices doivent être téléchargées à partir du serveur de Google chaque fois que quelqu’un visite votre site Web. Cela peut prendre du temps car votre serveur doit effectuer des requêtes HTTP, télécharger un fichier CSS, puis télécharger la police à partir de l’emplacement référencé dans la feuille de style. Et il doit le faire pour chaque police de la page.

Si vous utilisez WPRocket, il optimise automatiquement les requêtes Google Fonts. Sinon, Swap Google Fonts Display est un bon point de départ.

Étape 9. Activer le préchargement

Le préchargement vous permet de définir les ressources essentielles, afin que les navigateurs connaissent la priorité des fichiers à charger.

Par exemple, disons que votre code ressemble à ceci:

<html> 
<head> 
<script type=”text/javascript” src=”somefile.js”></script>
<link rel=”stylesheet” href=”/style.css”>
</head>
<body>
Content
</body>
</html> 

Sur la base de ce code, le fichier JavaScript devrait être chargé en premier en raison de la hiérarchie. Ce n’est pas idéal car le fichier CSS est certainement plus critique que le code JavaScript.

Le moyen le plus simple de résoudre ce problème est d’ajouter une autre ligne de code, comme ceci:

<link rel="preload" href="/style.css" as="style">

Cela indique aux navigateurs de donner la priorité au fichier CSS par rapport au fichier JavaScript, quelle que soit la hiérarchie.

Vous pouvez ajouter manuellement des attributs de préchargement en modifiant le code, mais cela peut devenir compliqué et déroutant à moins que vous ne sachiez ce que vous faites. Il est beaucoup plus facile d’installer simplement WPRocket, qui le fait automatiquement dès l’installation

Étape 10. Utilisez un CDN

Les réseaux de diffusion de contenu (CDN) sont des groupes de serveurs répartis dans le monde entier. Chacun de ces éléments stocke une copie de votre site Web afin que les utilisateurs se connectent plus rapidement lorsqu’ils demandent des pages Web.

Par exemple, supposons que le serveur de votre hébergeur Web se trouve au Royaume-Uni. Si quelqu’un visite votre site depuis les États-Unis et que vous n’utilisez pas de CDN, la connexion entre son appareil et votre serveur sera lente. Si quelqu’un vient des États-Unis et que vous utilisez un CDN, son appareil se connectera au serveur le plus proche, ce qui accélérera la connexion.

Il existe de nombreux fournisseurs CDN, il vous suffit donc d’en choisir un, de l’activer dans WPRocket et de saisir le CNAME.

Étape 11. Optimisez vos images

Le chargement différé résout de nombreux problèmes liés aux images, mais il ne fait rien pour aider les images qui se chargent au-dessus du pli. Plus ils sont gros, plus ils auront un impact négatif sur les temps de chargement.

Pour résoudre ce problème, compressez vos images avec un plugin comme Shortpixel. Installez-le, activez-le, accédez aux paramètres, entrez votre clé API, cliquez sur « Enregistrer et accéder au processus en masse, puis sur » Redémarrer l’optimisation « .

Si vous trouvez que ceux-ci sont de qualité trop faible, dirigez-vous vers les paramètres et changez le type de compression en brillant ou sans perte.

Conclusion

Tout ce qui précède a bien fonctionné pour mon site, ainsi que pour d’autres sites. Cependant, il est important de se rappeler que chaque configuration WordPress est différente. Vous pouvez avoir plus de plugins, un thème plus maladroit, un hébergement plus lent ou plus de scripts de suivi tiers, qui ralentissent  votre site Web.

Si la vitesse de votre page peut encore faire l’objet d’améliorations après avoir effectué ces optimisations, il est probable que vous ayez besoin d’un travail personnalisé sur votre site. Il vaut donc la peine d’embaucher un développeur ou un expert en vitesse de page pour examiner les choses de plus près.

Vous avez un commentaire concernant cet article? Envoyez-moi un ping sur Twitter.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

fr_FRFrançais
Retour haut de page

Recevez les derniers articles du blog dans votre boite mail

Abonnez-vous à notre newsletter

Vous trouverez comment nous utilisons vos données sur notre politique de confidentialité.

2 Partages
Tweetez
Partagez1
Partagez
Enregistrer1