Accélérer votre site WordPress

Conseils pour accélérer votre site WordPress

Des études ont démontré que les visiteurs d’un site web ont une capacité d’attention de plus en plus courte. 40 % de vos visiteurs auront déjà quitté votre site après un temps de chargement de 3 secondes ou plus. Amazon a réussi à augmenter son taux de conversion de 2 % en rendant son site web plus rapide d’une seule seconde. Plus votre site web est rapide, mieux c’est.

En suivant ces conseils, vous pourrez, étape par étape, rendre votre site web plus rapide. Commençons par le commencement, c’est-à-dire par des conseils que vous pouvez appliquer en toutes circonstances. Tirez le meilleur parti de votre site web en suivant le plus grand nombre possible de ces conseils.

Gestion de sites web

Supprimez les plugins inutiles

Pourquoi encombrer votre site web de plugins inutiles ? Chaque plugin que vous installez sur votre site web ralentit légèrement son chargement.

Que devez-vous faire : recherchez les plugins inutiles et supprimez-les. Il est important non seulement de les désactiver, mais aussi de les supprimer définitivement.

Utilisez la mise en cache

. La mise en cache vous permet de stocker les données de votre site web à un autre emplacement, ce qui vous garantit un accès plus rapide à ces données. Votre navigateur n’a alors qu’à charger la copie stockée dans le cache. Ce processus est très rapide. Veillez toutefois à ce que le code de votre site web soit correct et exempt d’erreurs, sinon la mise en cache ne vous sera pas d’une grande utilité.

Que devez-vous faire : la mise en cache s’effectue en trois niveaux. Pour les deux premiers niveaux, vous pouvez utiliser W3 Total Cache, WP Rocket ou WP Super Cache.

Utilisez WTTP/2

WTTP/2 accélérera encore davantage le chargement de votre site web via une connexion sécurisée. Pour bénéficier de cette nouvelle technologie, toutes vos pages doivent pouvoir être chargées via une connexion HTTPS sécurisée.

Que devez-vous faire : votre hébergeur doit proposer cette technologie. Chez certains hébergeurs, comme Savvii, le protocole HTTP/2 est déjà activé par défaut. Demandez à votre hébergeur quelle version du protocole HTTP il propose.

Réduisez la taille de votre page

L’objectif est de réduire au maximum la taille de votre page. Une page web moyenne pèse 2,3 Mo. Cela représente une quantité assez importante de données que votre navigateur doit charger pour les utilisateurs qui visitent votre site web pour la première fois.

Que devez-vous faire : les images occupent énormément d’espace. Vous pouvez donc commencer par réduire le nombre d’images sur votre site web et supprimer celles qui ne sont pas nécessaires. De nos jours, la devise « moins il y en a, mieux c’est » s’applique parfaitement. La navigation n’est pas indispensable pour votre site web. Supprimez tout ce qui n’est pas indispensable.

Veillez à ce que la taille de vos cookies soit la plus petite possible

Toutes les informations collectées par vos cookies doivent être transmises à chaque requête. Cela signifie que toutes ces informations doivent être chargées et lues par le navigateur.

Que devez-vous faire : veillez à ce que la taille de votre cookie ne dépasse pas 4 kilo-octets. Cela vous laisse encore beaucoup d’espace. Utilisez le stockage local si vous souhaitez enregistrer des informations concernant un visiteur.

Veillez à maintenir votre logiciel à jour

Comme tous les logiciels, WordPress fait l’objet de mises à jour régulières. Presque chaque mise à jour apporte une légère optimisation du code, ce qui permet à votre site web de se charger plus rapidement. Outre le cœur de WordPress, vous devez également mettre à jour régulièrement vos plugins.

Que devez-vous faire : mettez toujours à jour votre infrastructure dès que possible. Vous bénéficierez ainsi immédiatement des dernières versions de WordPress et des plugins.

Utilisez Google Accelerated Mobile Pages (AMP)

. AMP permet d’accélérer le chargement des pages sur mobile. C’est important, car le mobile prend de plus en plus d’importance. Google stocke toutes vos pages dans son cache. Votre navigateur n’a donc plus qu’à charger la copie présente dans le cache de Google.

Que devez-vous faire ? Il vous suffit d’installer le plugin AMP for WordPress. Une version AMP de votre site web sera alors créée, et ce processus se déroule automatiquement.

Optez pour un hébergement de qualité

Le temps de chargement de votre site web dépend également de l’hébergement que vous avez choisi pour celui-ci. Si vous disposez d’un petit site web, vous pouvez opter pour un hébergement mutualisé. Si votre site web comporte beaucoup de codes complexes ou génère un trafic très important, il est préférable d’utiliser un VPS. Ainsi, toutes les ressources de ce serveur sont exclusivement réservées à votre site web, ce qui lui permet d’offrir de meilleures performances.

Que devez-vous faire : recherchez un bon hébergeur. Assurez-vous que l’hébergeur que vous choisissez propose une large gamme de formules d’hébergement mutualisé et de serveurs privés virtuels (VPS).

Répartissez les commentaires sur plusieurs pages

C’est une bonne chose que de nombreux lecteurs commentent vos articles. Cela signifie que votre contenu est performant et qu’il suscite l’intérêt. Il y a toutefois un inconvénient à avoir beaucoup de commentaires sur vos articles : vos pages doivent charger davantage de données, ce qui signifie que le chargement de la page prendra plus de temps. Pour remédier à cet inconvénient, il suffit de répartir vos commentaires sur plusieurs pages.

Que devez-vous faire : Accédez à votre interface d’administration WordPress. Dans Paramètres -> Commentaires, cochez la case « Répartir les commentaires sur plusieurs pages ». Sélectionnez ensuite le nombre de commentaires que vous souhaitez afficher par page et le mode de tri souhaité.

HTML/CSS/JavaScript

En-tête

Cette section contient des informations importantes destinées à votre navigateur. Ces informations doivent être récupérées en premier lieu pour permettre le chargement de votre page.

Placez toutes les ressources CSS dans la balise

Afin d’accélérer le chargement de votre site web, toutes les ressources CSS doivent être déclarées le plus tôt possible dans le document HTML. Le navigateur détecte alors les balises <> le plus rapidement possible et envoie immédiatement la requête CSS.

Que devez-vous faire : Il vous suffit de modifier l’ordre du code HTML. Placez toutes les informations CSS au début, puis ajoutez le reste du code juste après.

Configurez les en-têtes de mise en cache dans

. Tous les fichiers dotés d’un en-tête de mise en cache indiquent ici pendant combien de temps le navigateur est autorisé à les conserver avant qu’ils ne doivent être téléchargés à nouveau.

Que devez-vous faire : utilisez « Cache-Control: max-age=31536000 » dans la configuration de votre serveur web. Il est important de commencer par faire la distinction entre le contenu statique et le contenu dynamique. Il est préférable de ne pas mettre en cache le contenu dynamique, ou du moins de limiter sa durée de mise en cache.

Évitez les redirections

Un site web comportant des redirections se chargera beaucoup plus lentement qu’un site qui n’en comporte pas. C’est particulièrement vrai pour les sites mobiles.

Que devez-vous faire : essayez d’utiliser une redirection 301 ou 302 au niveau du serveur si vous ne pouvez vraiment pas éviter certaines redirections.

HTML

Vérifiez vos liens

Si votre site web contient des liens qui ne fonctionnent plus, ce qui est détecté à l’aide d’un outil externe, cela nuit à l’expérience utilisateur. Veillez donc à supprimer tous vos liens rompus.

Que devez-vous faire : analysez votre site de temps en temps à l’aide de l’un de ces outils :

ScreamingFrog
Vérification des liens rompus

Configurez des pages d’erreur sur

. Veillez à disposer de pages vers lesquelles les utilisateurs sont redirigés en cas d’erreur : les pages d’erreur.

Que devez-vous faire ? Dans WordPress, le système est configuré de telle sorte que, par défaut, votre visiteur est redirigé vers une page 404 lorsqu’il tente d’accéder à une page introuvable. Vous pouvez personnaliser la mise en page ou le contenu de cette page.

Testez votre site avec des bloqueurs de publicités

Étant donné que de plus en plus de personnes utilisent des bloqueurs de publicités, il est important que votre site web puisse continuer à fonctionner pour les utilisateurs qui en ont un. La navigation doit rester possible, tout le contenu doit rester visible… Votre site web peut devenir plus lent si certains contenus sont bloqués mais continuent d’être chargés en raison d’un script.

Que devez-vous faire : testez votre propre site web en installant un bloqueur de publicités. Vous pourrez ainsi vérifier par vous-même si tout fonctionne correctement.

Réduisez au minimum le code HTML

: moins votre code HTML contient de caractères superflus, plus il se chargera rapidement. Évitez donc les lignes vides, les espaces inutiles, etc.

Que devez-vous faire : vous pouvez utiliser des outils tels que Minifier ou WP Rocket.

N’hébergez pas de vidéos sur votre propre site

. Les vidéos devenant de plus en plus populaires, les entreprises souhaitent en tirer parti en les publiant sur leur site web. Malheureusement, l’hébergement de vidéos consomme beaucoup de bande passante et ralentit votre site web.

Que devez-vous faire ? Il est préférable d’utiliser les plateformes vidéo disponibles. Citons par exemple YouTube, Vimeo ou Dailymotion.

CSS

Une mise en page soignée est essentielle. La mise en forme de votre site web est définie dans vos fichiers CSS. Les sites web comportant souvent de nombreux styles et éléments différents et ne cessant de s’étoffer, la taille des fichiers CSS ne cesse également d’augmenter. Vous pouvez réaliser des gains considérables en optimisant simplement vos fichiers CSS.

Minimisation du CSS

Tout comme pour le HTML, vous pouvez réduire la taille de vos fichiers

CSS

. Votre site web se chargera plus rapidement si vous réduisez la taille de vos fichiers et supprimez les informations superflues.

Que devez-vous faire : demandez-vous si tous les codes présents dans votre CSS doivent être envoyés pour chaque page. Une grande partie du code est superflue ou obsolète. Utilisez ensuite l’outil CSS Compressor. Celui-ci permet de supprimer les derniers morceaux de code superflus.

Utilisez la technique du « tree-shaking »

. Supprimez de votre fichier tout le code superflu qui n’est pas lié à une page. Vous ne conserverez ainsi que les éléments utiles qui s’appliquent à votre page.

Que devez-vous faire : consultez le rapport Chrome Coverage pour connaître le pourcentage de code inutilisé. Si une grande partie du code n’est pas utilisée, vous pouvez recourir à des outils JavaScript tels que PurifyCSS ou uncss. Ces outils vous permettent de supprimer facilement le code superflu.

Utilisez le « critical path rendering »

. Sans mise en page, votre site web se chargera beaucoup plus rapidement. Malheureusement, cette méthode n’est pas conviviale. En raison du CSS, les visiteurs doivent attendre que celui-ci soit chargé. Il n’est pas nécessaire de charger l’intégralité du CSS pour afficher des informations utiles à l’écran. Ainsi, les visiteurs de votre site web peuvent consulter plus rapidement les informations utiles.

Que devez-vous faire : le « Critical Path Rendering » permet de charger en premier lieu les informations que l’utilisateur voit immédiatement et qui se trouvent donc en haut de la page. Utilisez le chargement différé (lazy loading) pour vos images. Veillez également à ce que le CSS moins important pour un utilisateur donné soit chargé ultérieurement grâce au CSS non bloquant. Vous pouvez également utiliser la directive « preload ».

Utilisez la directive « preload »

. Grâce à « preload », les navigateurs chargeront certains éléments à l’avance. Les autres éléments du site web qui en ont besoin seront ensuite chargés sans avoir à attendre que ceux-ci soient disponibles.

Que devez-vous faire : utilisez <preload> dans le lien de référence de votre feuille de style. Ajoutez la fonction <onload> à la feuille de style à laquelle le préchargement est associé, et le navigateur commencera à la charger immédiatement.
Les scripts

JavaScript

sollicitent beaucoup de ressources du serveur. Ils ralentissent donc le temps de chargement. Il existe de nombreuses façons intelligentes d’utiliser JavaScript.

JavaScript non bloquant

Les scripts non essentiels doivent être différés. Ainsi, le navigateur aura moins de travail à effectuer pour afficher la page initiale.

Que devez-vous faire ? Cela varie d’un script à l’autre : ce qui fonctionne et ce qui ne fonctionne pas. Voici quelques conseils :

Utilisez <script defer src=”script.js”></script>dans l’en-tête de votre code HTML. Cela permet de charger le script pendant le chargement de la page, mais de ne l’exécuter qu’une fois ce chargement terminé.
Créez votre propre script dans lequel vous demandez au code de charger le fichier .js une fois que votre page entière est chargée.

Réduisez et regroupez les scripts externes

Veillez à ne faire s’exécuter que les scripts réellement nécessaires au bon fonctionnement de votre site web. Gardez également à l’esprit que tous les scripts ne doivent pas nécessairement être chargés séparément pour fonctionner. Moins il y a de scripts externes en cours d’exécution, plus votre site est rapide.

Que devez-vous faire : copiez plusieurs fichiers dans un seul fichier. Vérifiez la console des outils de développement de votre navigateur pour vous assurer que tout fonctionne correctement.

Images

Ce que beaucoup de gens ont souvent tendance à négliger, mais qui peut pourtant être le facteur le plus déterminant pour la vitesse de chargement : les images. Souvent, elles sont inutilement volumineuses, au format ou au type inadapté, ou encore elles ne se chargent pas correctement.

Les types de fichiers adaptés

Il existe de nombreux types de fichiers d’images. Pour chaque utilisation d’une image, vous devez savoir si c’est le bon. Voici quelques types de fichiers :

GIF : Pour les images en ligne simples, telles que les logos comportant seulement une ou deux couleurs. La transparence est possible.
PNG : Pour les photos ou images simples comportant des dégradés de couleurs. Ces images offrent une meilleure qualité que le format GIF. La transparence est possible.
JPEG : Pour les images et les photos présentant beaucoup de profondeur, d’ombres, de couleurs et de dégradés. La transparence n’est pas possible.
WebP : pris en charge uniquement par Google Chrome. Version améliorée du format JPEG.

Que devez-vous faire : réfléchissez bien avant d’utiliser une image. Déterminez le niveau de transparence dont vous avez besoin, le type d’image, etc.

Chargement différé

Lorsque vous souhaitez charger une image, le navigateur recherche l’emplacement de celle-ci et commence à la charger. Plus il y a d’images, plus le navigateur a de contenu à charger et plus le temps de chargement est long. Même s’il s’agit de 100 photos que l’utilisateur ne verra même pas, celles-ci doivent tout de même être chargées au préalable. Grâce au « lazy loading », une petite image temporaire est d’abord chargée. L’image réelle est stockée dans le cache. Ce n’est que lorsque l’image d’origine doit être affichée que le navigateur la récupère dans le cache. Vous vous assurez ainsi que les images qui ne s’affichent pas à l’écran ne se chargent que lorsque votre visiteur fait défiler la page jusqu’à celles-ci.

Que devez-vous faire :

Infinite Scroll est disponible pour WordPress. En réalité, cette fonctionnalité résout le problème différemment, grâce à la pagination, mais elle produit le même effet
Un « lazyloader » JavaScript offrant une bonne prise en charge des images adaptatives

Utilisez un réseau de diffusion de contenu (CDN)

. Un réseau

de diffusion

de contenu stocke vos images à différents endroits dans le monde. Cela permet aux utilisateurs du monde entier d’accéder rapidement au contenu. Il est particulièrement judicieux d’utiliser un CDN lorsque vous disposez d’images volumineuses, de vidéos ou que vous recevez un trafic important en provenance d’une région spécifique du monde.

Que devez-vous faire :

Choisissez l’un des nombreux CDN
Choisissez les fichiers qui doivent être hébergés par le CDN
Transférez vos fichiers vers le CDN. Pour WordPress, les CDN proposent souvent un plugin.
Déterminez comment vos URL doivent être renommées.
Assurez-vous que vos fichiers sont correctement appelés. Vous pouvez utiliser un plugin WordPress à cet effet
Vérifiez que tout fonctionne comme prévu

Optimisation PHP et des bases de données

PHP

Évitez les copies inutiles de vos variables.

Votre code sera plus lisible si vous utilisez des variables prédéfinies avec des noms plus courts. Cependant, chaque variable ajoutée mobilise de la mémoire serveur qui ne peut alors pas être utilisée pour d’autres processus. Veillez également à n’utiliser chaque variable qu’une seule fois.

N’utilisez pas de points dans une fonction « echo »

Lorsque vous utilisez la fonction « echo » avec des éléments entre parenthèses, PHP concatène les chaînes de caractères avant de les afficher. Cela nuit aux performances. Utilisez des virgules à la place des parenthèses.

N’utilisez pas de doubles virgules dans les chaînes de caractères longues ne contenant pas de variables

Lorsque vous définissez des chaînes de caractères entre guillemets doubles, PHP a besoin de davantage de puissance de calcul pour rechercher les variables éventuelles contenues dans la chaîne. La concaténation de chaînes distinctes fonctionne également avec des guillemets simples. Les chaînes sont ainsi traitées plus rapidement qu’avec des guillemets doubles.

Base de données

Certaines bases de données comptent des milliers de lignes et de colonnes. Il est donc logique qu’une base de données bien optimisée renvoie des résultats plus rapidement, ce qui permet à un site web d’afficher plus vite les informations à l’écran. Voici quelques conseils :

Nettoyez régulièrement votre base de données

Votre base de données peut contenir beaucoup de données regroupées. C’est pourquoi il est important de nettoyer et de réindexer régulièrement votre base de données. Cela permet au serveur d’utiliser moins de puissance de calcul. Cette opération est facile à réaliser avec phpMyAdmin. Sélectionnez toutes vos tables en cliquant sur « Check all », puis cochez « Optimize table » dans laliste « With Selected ».

Fixez une limite au nombre de révisions

Chaque fois que vous modifiez l’un de vos articles, vous générez un surcroît de données inutiles dans votre base de données. Vous n’avez presque jamais besoin de plusieurs versions de vos articles. Pour limiter le nombre de versions, vous pouvez utiliser un plugin ou, mieux encore, modifier votre fichier wp-config.php. Ajoutez la ligne suivante pour limiter le nombre de révisions à trois au maximum.