Comment accélérer le chargement de votre site Web WordPress à l'aide de plugins

Publié: 2015-06-26

Avoir un joli site Web avec beaucoup de contenu de qualité est important si vous voulez capter l'attention des lecteurs. Malheureusement, si votre page se charge trop lentement, les lecteurs risquent de ne jamais voir votre contenu. Pourquoi? Vous n'avez que quelques secondes pour capter leur attention et les empêcher de passer au site suivant. Les lecteurs ne veulent pas attendre que votre contenu se charge. Plus l'attente est longue, plus vous risquez de les perdre.

Pour cette raison, il est extrêmement important d'optimiser la vitesse de chargement de votre page. Il existe plusieurs bons outils en ligne pour vous aider à mesurer votre vitesse et à résoudre les problèmes. L'un des outils les plus populaires est Google PageSpeed Insights.

Informations sur la vitesse de la page

Google PageSpeed Insights est un outil en ligne gratuit qui teste la vitesse de chargement de n'importe quel site Web, identifie les problèmes, les hiérarchise et donne des suggestions pour résoudre ces problèmes.

Pour cet article, j'utilise mon propre site qui utilise Divi d'Elegant Themes comme blog de base. Je montre ce qui doit être corrigé, les suggestions faites par l'outil et comment je les ai corrigées. Le score donne des résultats pour les mobiles et les ordinateurs de bureau. Je me concentre sur le bureau. Certains des problèmes mobiles seront résolus en cours de route.

La plupart de ces problèmes seront résolus en utilisant des plugins. Lorsque vous choisissez un plugin, restez fidèle aux plugins qui ont été mis à jour récemment et qui ont une bonne réputation. De nombreux plugins résoudront plus d'un problème.

Un mot d'avertissement - certains plugins ne fonctionnent pas bien avec les autres car ils essaient tous les deux de faire le même travail. Cela pourrait avoir un effet différent de ce que vous voulez. Je vous recommande de les essayer sur un site de test avant de les utiliser sur votre site principal. Pas seulement les plugins eux-mêmes mais aussi les combinaisons de plugins. Avant d'essayer des plugins sur votre site en ligne, assurez-vous d'avoir une sauvegarde récente.

Mon score

Mon score est un terrible 46 . La première chose à remarquer est qu'il y a trois sections différentes dans les résultats :

Devrait être corrigé (2 éléments)
Envisagez de réparer (6 articles)
Réussi (2 éléments)

Chaque section se développe pour montrer quels sont les problèmes et ils donnent des conseils sur la façon de les résoudre. J'ai trouvé qu'il était préférable de commencer par le premier élément et d'aller dans l'ordre. Les résoudre dans l'ordre résoudra également d'autres problèmes de la liste.

Remarque - j'ai même eu quelques échecs en cours de route. Je les ai inclus afin que vous puissiez être au courant des problèmes possibles.

Devrait réparer

J'ai deux éléments qui nécessitent une attention immédiate :

Activer la compression
Éliminer JavaScript et CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison

Activer la compression

Mon problème le plus important est que je n'utilise pas de compression. Cela montre que je peux réduire la taille de mon transfert de fichiers de 79 %. Cela peut être fait en utilisant gzip ou deflate.

Booster de score de performance WP

Ce plugin gratuit a une compression gzip et résoudra plusieurs autres problèmes tels que les problèmes CSS et JavaScript en supprimant les chaînes de requête, en ajoutant l'en-tête varie: accept-encoding et la mise en cache expire. Je l'ai choisi car il a un 4,7/5 avec plus de 10 000 installations actives. Il a été développé pour accélérer le chargement des pages et améliorer les tests de score des pages.

Cela m'a donné un score de 78 avec un message pour réduire le temps de réponse du serveur. Cela a beaucoup à voir avec mon plan d'hébergement. Je résous ce problème en déplaçant mon site Web vers un nouveau plan d'hébergement. Cela dépasse le cadre de cet article.

Une chose intéressante à ce sujet est qu'il a résolu certains des problèmes majeurs avec le problème suivant : Éliminer le JavaScript et le CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison. Ce problème a maintenant été déplacé vers Considérer la résolution. Il a également complètement corrigé la mise en cache du navigateur de levier. Le site passe maintenant 4 règles alors qu'avant il n'en passait que 2.

Réduire le temps de réponse du serveur

La chose étrange à ce sujet est que le temps de réponse du serveur est passé de 0,96 à 1,4. Réduire le temps de réponse du serveur faisait désormais partie de la section À corriger. Cela a nécessité un plugin de mise en cache.

Cache total W3

W3 Total Cache est de loin le plugin le plus populaire pour accélérer les performances du serveur de votre site Web. Il compte près d'un million d'installations actives et une note de 4,4/5. Il optimise votre site grâce à la mise en cache. Vous pouvez choisir les différentes options de mise en cache individuellement. Ils incluent la page, la base de données, l'objet et le navigateur. Il mettra en cache les futurs en-têtes d'expiration et les balises d'entité, les flux et les résultats de recherche. Il a également des fonctionnalités pour minifier votre JS, CSS et HTML. Il accélérera votre score Google PageSpeed au moins 10 fois lorsqu'il sera entièrement configuré.

Je l'ai essayé avec toutes les fonctionnalités de mise en cache activées. Cela a porté mon score à 86 . Pour la première fois, mon site est maintenant dans le vert et tous les problèmes que j'ai rencontrés étaient sous Considérer la fixation. Il passe maintenant 5 règles, y compris le temps de réponse du serveur qui dit maintenant "le serveur a répondu rapidement".

Envisagez de réparer

Lorsque j'ai exécuté le test pour la première fois, cette section avait plus de problèmes que lorsque j'y suis finalement arrivé. Beaucoup de ces problèmes ont été résolus lorsque j'ai résolu les problèmes dans la zone À résoudre.

Les problèmes inclus à l'origine :

Tirez parti de la mise en cache du navigateur
Temps de réponse du serveur
Minifier JavaScript
Optimiser les images
Minifier le CSS
Réduire le HTML

Voici un aperçu des problèmes actuels.

Éliminer le Javascript et le CSS bloquant le rendu dans le contenu au-dessus du pli

JavaScript et CSS peuvent ralentir le chargement de la page en plaçant trop de charge sur le navigateur. Ils doivent se charger avant que quoi que ce soit d'autre au-dessus du pli puisse se charger.

Il existe plusieurs façons de le réparer :

Différer le chargement
Charger de manière asynchrone
Inlinez-les directement dans le HTML

Voici les plugins que j'ai utilisés pour résoudre ce problème.

Optimisation automatique

Ce plugin va minifier (supprimer tout formatage inutile et réduire la taille du fichier et le charger sur le navigateur) et compresser votre JavaScript, CSS et HTML. Il ajoutera des en-têtes d'expiration et les mettra en cache. Il déplacera vos styles vers l'en-tête de page et les scripts vers le pied de page. En utilisant les paramètres avancés, vous pouvez l'ajuster à vos besoins spécifiques.

Cela résoudra également quelques problèmes tels que la minification de JS et CSS dans la liste.

Au début, j'ai juste activé les paramètres de base pour HTML, JS et CSS. Cela a porté mon score à 88 et réduit les problèmes à 3 ressources CSS. L'un a été créé par le plugin lui-même et les deux autres sont des polices Google. Il passe maintenant 7 règles. Il a résolu Minify CSS et Minify HTML.

Mieux minifier WordPress

L'objectif principal de ce plugin est de minifier votre CSS et JS, mais il a également une fonctionnalité intéressante qui vous permet de déplacer vos fichiers vers le pied de page ou d'autres emplacements (c'est pourquoi je l'ai choisi). Il utilise un système de mise en file d'attente pour améliorer la compatibilité avec les navigateurs, les plugins et les thèmes.

Lorsque je l'ai installé, tous les paramètres de mise en page de mon thème ont été supprimés et tous mes menus, images, liens, etc. sont apparus à l'extrême gauche de l'écran. Heureusement, le formatage est revenu lorsque je l'ai désinstallé. C'était peut-être quelque chose dans les paramètres qui devait être ajusté. Je suis sûr que c'est un bon plugin car il a plus de 60 000 installations actives et une note de 4,4/5. J'ai seulement inclus celui-ci comme un avertissement qu'il pourrait ne pas fonctionner comme vous en avez besoin sans une certaine configuration.

Comme mon score était de 88 et que je connaissais les 3 problèmes, j'ai décidé de passer au problème suivant.

Optimiser les images

La taille de l'image joue un rôle important dans la vitesse de chargement des pages. Parfois, vous pouvez utiliser une taille d'image beaucoup plus petite et une qualité inférieure sans trop de différence visuelle lorsqu'elle est visualisée sur le Web. Cela accélère non seulement le temps de chargement et utilise moins de bande passante, mais accélère également le temps de sauvegarde et réduit l'espace de stockage sur votre serveur.

Optimiseur d'image EWWW

Ce plugin optimisera automatiquement vos images au fur et à mesure que vous les téléchargerez et convertira vos images au format qui produit la plus petite taille. Il optimisera également les images que vous avez déjà téléchargées. Vous pouvez également l'avoir pour appliquer des réductions avec perte pour les images PNG et JPG.

Lorsque je l'ai installé, il y avait plusieurs fichiers qu'il voulait que je localise et installe. Je pense que ce plugin fonctionnerait très bien avec tous les fichiers installés, mais j'ai décidé d'en trouver un qui fonctionnait immédiatement.

WP Smush

Ce plugin réduira la taille du fichier des images sans réduire la qualité. Il le fait en supprimant les informations cachées. Il analysera vos fichiers et vous dira combien d'images doivent être écrasées. Vous pouvez les écraser en vrac.

La version gratuite n'écrase rien de plus de 1 Mo et n'écrase que 50 à la fois. Pour plus que cela, vous aurez besoin de WP Smush Pro, qui écrasera des images jusqu'à 32 Mo sans limite de nombre à la fois. Il fait une sauvegarde des originaux si vous en avez besoin. Les prix commencent à 19 $ par mois.

J'avais 114 images à écraser. 8 de ces images pesaient plus de 1 Mo. J'ai décidé de les réparer à la main. Il a écrasé 98 images et réduit la taille du fichier de 4,79 Mo (8,82 %).

Cela a porté mon score à 90 . Google Insights a identifié 5 images qu'il n'aimait pas, mais aucune ne dépassait 1 Mo. Ils allaient de 0,7 Ko à 17 Ko.

Optimisation des images à la main

Vous pouvez optimiser les images à la main en redimensionnant, en réduisant la qualité et en modifiant le format. L'un de mes outils préférés et les plus utilisés pour gérer les images est Paint.NET. Il s'agit d'une application gratuite d'édition d'images et de photos pour Windows qui possède de nombreuses fonctionnalités pour réduire la taille du fichier. Quel est votre favori?

Minimiser JavaScript, CSS et HTML

Je pensais avoir corrigé ça...

Alors que je travaillais sur les autres problèmes, j'ai vu que le seul message à minifier était pour JavaScript. Une fois que j'ai optimisé mes images, les trois problèmes sont revenus. Je suis revenu sur mes pas pour comprendre ce qui s'était passé.

En essayant Better WordPress Minify puis en le désactivant, mes messages pour minifier CSS et HTML sont revenus. Mon score est tombé à 88 et j'étais maintenant de retour à avoir 5 règles passées. J'ai activé les fonctionnalités de minification de W3 Total Cache et il a maintenant résolu tous les problèmes de minification. J'avais maintenant un score de 88 et ça passait 8 règles. En outre, il y avait six fichiers au-dessus du pli. Je savais que j'en avais résolu quelques-uns, donc j'ai dû changer quelque chose.

J'ai fait quelques dépannages et j'ai découvert que j'avais désactivé l'optimisation automatique lorsque j'avais eu le problème avec Better WordPress Minify plus tôt. J'ai réactivé Autoptimize, désactivé minify de W3 Total Cache et vidé le cache (étape très importante !). J'ai maintenant récupéré mon score de 90 et le site a passé 8 règles. Il était de retour à trois fichiers CSS au-dessus du pli et un message pour optimiser les images.

Sur la base de mon expérience passée, j'ai décidé de ne pas perdre de temps sur ces fichiers. Je pense que Google déteste les images de toutes tailles (peu importe leur taille, je reçois toujours un message pour réduire la taille) et passer d'un PageScore de 46 à 90 est une victoire dans mon livre. J'ai appris à la dure à m'arrêter pendant que tu es devant.

Score final

Ma note finale était de 90/100. Les plugins que j'ai utilisés pour obtenir ce score sont :

Optimisation automatique (toutes les fonctionnalités activées)
W3 Total Cache (uniquement les fonctionnalités de mise en cache des pages activées)
WP Performance Score Booster (toutes les fonctionnalités activées)
WP Smush (édition gratuite)

Pour mémoire, le score mobile est passé de 36 à 78. Pour y remédier je devrais optimiser mes images et fichiers pour mobile.

Dernières pensées

Vos visiteurs, Google et les autres moteurs de recherche détestent les sites Web qui se chargent lentement. En utilisant Google PageSpeed Insights, vous pouvez savoir exactement quels sont les problèmes et obtenir des conseils sur la façon de les résoudre. Une poignée de plugins gratuits est tout ce dont vous avez besoin pour passer d'un site lent que Google déteste à un site rapide que Google adore. Faites juste attention en expérimentant - certains plugins ne fonctionnent pas bien avec d'autres.

J'aimerais vous entendre. Avez-vous optimisé votre site Web WordPress à l'aide de Google PageSpeed Insights ? Votre expérience ressemble-t-elle à la mienne ? Avez-vous utilisé différents plugins pour résoudre les problèmes ? J'aimerais entendre parler de votre expérience dans les commentaires.