Jonathan SCAPIN

Mes 5 astuces pour alléger votre site WordPress

N’y a-t-il rien de plus frustrant que d’ouvrir un site internet et de constater son extrême lenteur. Nous sommes habitués à de la rapidité, la page doit s’afficher en moins de deux secondes sinon next.

De nombreux éléments peuvent réduire les performances de votre site internet. Vous constatez des lenteurs sur votre site ? Vous êtes au bon endroit, retrouvez ici cinq astuces pour accélérer votre site.

Table des matières

1. Choisissez un thème en fonction de vos besoins

Le choix du thème WordPress est celui qui a le plus d’importance dans la création de son site internet avec cet outil.

C’est pour cela qu’il est en tête de liste de ces cinq astuces pour alléger un site WordPress.
Il faut choisir votre thème en fonction de vos besoins.

Si vous souhaitez faire une landing page ou un site vitrine pour présenter votre entreprise, vous n’avez pas besoin de prendre un thème digne de la NASA.

Si vous avez pour projet de faire un site e-commerce, penchez-vous sur des sites optimisés pour le mobile et le référencement de vos produits.

La seconde option consiste à faire créer son thème par un professionnel. Vous disposerez alors d’un thème personnalisé et optimisé.

2. Utiliser des images aux bonnes dimensions

L’erreur numéro un que je rencontre au quotidien lors des optimisations de site web que je fais, c’est la taille des images.

J’ai longtemps hésité à mettre ce point en top 1 de ces cinq astuces pour alléger un site WordPress, c’est pour dire ci, cela est important.

En règle générale, il n’est pas nécessaire d’importer dans votre site des images de plus de 1200 px de large, sauf pour les bannières. De plus si l’image importée doit être affiché seulement sur une portion de l’écran, là encore il faut réduire son image. 

Par exemple, dans le cas où vous avez un bloc avec 4 images côte à côte, il n’est alors pas nécessaire que leur taille dépasse les 600 px (écran full HD = 1920 px de large / 4 = 480 px).

space rocket luncher
space rocket comparatif

Dans l’exemple ci-dessus, l’image en full HD (1920 px) à gauche et la même en 1200 px à droite.

Le poids est divisé par 3, juste en utilisant la bonne taille.

Il est donc important de définir l’emplacement et la taille des images lors du paquetage de votre site.

À titre personnel, les images/illustrations présentent sur mon site ont une dimension max de 800 px de large.

3. Compresser les images

Autre élément important de l’optimisation des images pour un site plus rapide, est la compression de ses dernières.

Une image Full HD pèse facilement plusieurs Mo et plusieurs dizaines dans le cas d’image 4k. Or ce poids va mettre à mal votre serveur et ralentir votre site.

50 % des sites web sont consultés sur mobile, et environ 30 % sur pc portable, autant vous dire qu’une image 4k n’a que très peu d’intérêt sur ses appareils.

Il reste donc 20 % d’utilisateur qui consulte votre site sur un grand écran, est ce suffisant pour afficher une image Ultra haute définition et ralentir votre site, je ne pense pas.

Et si vous souhaitez absolument leur fournir cette image, il sera plus judicieux d’utiliser des filtres CSS/plugins/autre solution, qui viendront définir une image pour les écrans de petite taille et une image pour les écrans haute définition.
Pour ma part, je suis partisan d’utiliser une image de moindre tailles/qualité sur tout le site et de contrôle la qualité d’affichage sur grand écran, si cela ne gêne pas l’expérience, je conserve une seule image. Si cela est problématique, j’opte pour la solution cité plus haut.
Ainsi nous avons défini notre taille d’image souhaitez, ce qui a déjà diminué son poids, il reste la compression qui va encore réduire son poids grâce à des algorithmes de compression que nous ne détaillerons pas ici.
space rocket luncher
comparatif avec compression

Dans l’exemple ci-dessus, j’ai repris l’image utilisé plus haut.

L’image est en full HD non optimisé à droite, et à gauche l’image est redimensionnée en 800 px et compressé en WebP.

Résultat, le poids est divisé par 10.
Il faut faire quelques essaie avant de trouver le bon ratio qualité/compression, en général je ne descends pas en dessous de 70 % de qualité.
Il est a noté que le nouveau format WebP poussé par Google, permet de compresse une image d’environ 30 % sans perte de qualité.
Le WebP est supporter par tous les navigateurs moderne (seuls les versions 11 et moins d’internet explorer sont encore incompatible), ce qui représente 1 % des utilisateurs. Il ne faut donc pas se priver de l’utilise.

À savoir : Le WebP est supporter par WordPress depuis la version 5.8 sans souci.

Dans un prochain article je vous parlerais de l’application que j’utilise pour redimensionner et optimisé les images de mes sites internet.

Vous ne souhaitez pas attendre, retrouvez une vidéo explicative

→ ici ←

N’hésitez pas à vous inscrire à la newsletter pour ne pas louper cet article.

4. Utiliser du texte au lieu d’image contenant du texte

En 2021, je vois encore trop souvent sur des sites l’utilisation d’images pour afficher du texte.

Ceci est une très mauvaise pratique. 

Pourquoi ? Comme je vous l’ai expliqué précédemment, le poids des images est sans doute ce qui compte le plus sur un site internet.

Quand on sait qu’une image affichant un texte fera facilement 30-40 ko même bien optimisé alors qu’une ligne de texte, elle ne représente que quelques octets.
Pourquoi ne faut-il pas utiliser d'image pour afficher du texte
comparatif texte_image

Sur l’exemple ci-dessus l’image en comportant le texte pèse 61 K octets, tandis que le code qui affiche le même résultat lui ne pèse que 589 octets.

Un K octets vaut 1000 octets. 

Ici notre image pèse donc 61 000 octets soit 100 fois plus que notre texte.

Après optimisation j’ai pu descendre le poids de l’image à 21 K Octets.

Les chiffres parlent d’eux même, l’image est plus de 20 fois plus grosse, même optimisé. 

Je vous laisse imaginé le gain de performance si vous en avez plusieurs sur votre site.

5. Optimiser ses vidéos / animations

Les vidéos ont un rôle important dans l’animation du site internet. Cependant, leur poids est un frein pour avoir des sites performant. Vous avez alors deux solutions.

La première est d’hébergeur votre vidéo sur un serveur spécialisé, bien plus performant que le vôtre, tel que YouTube et ensuite d’intégrer la vidéo sur votre site grave au lien fourni par l’hébergeur.

WordPress propose un module dédié aux vidéos YouTube et vous permettra de personnaliser l’affichage de votre vidéo.

L’autre solution, consiste a utilisé des animations loties, ce format propulsé par Air B&B, utilise des fichiers JSON (fichier texte) afin d’afficher ses animations. Cela crée des fichiers légers qui se chargent rapidement.

Voici un exemple d’animation lotie. D’ailleurs l’animation de ma page d’accueil est une animation lotie.

Si cela ne suffit pas, contactez un professionnel pour optimiser votre site

La dernière solution, est de faire appel à un professionnel pour optimiser son site internet. 

Ils existent de nombreuses raisons qui font que votre site peu être lent.

Même après avoir effectué les 5 astuces vu précédemment dans cet article, votre site pourrait toujours être lent.

Pourquoi ? Car de multiples autres critères rentrent en compte comme l’état de votre BDD (base de donnée) ou encore les versions des technologies utilisées sur votre serveur en passant par la gestion des caches et des compressions.
Ces étapes nécessitent des connaissances afin de pas endommagé son site.
Vous pouvez par exemple demandé un audit de votre site (les audits de performances bruts ne coute pas très cher voir peuvent être gratuit) dans le but d’établir une liste des axes d’optimisations.
N’hésitez pas à demander un devis suite à cet audit, il est parfois préférable de faire une refonte complète de son site plutôt qu’une optimisation (rapport gain de performance / prix).

Le mot de la fin

Nous arrivons à la fin de ces astuces pour rendre votre site WordPress plus rapide.

J’espere que cet article vous a été utile.
N’oubliez pas que les performances de votre site ont de l’importance dans le référencement de ce dernier (SEO) ainsi que sur l’expérience utilisateur.
Il serait dommage de loupé une vente uniquement par ce que son site s’affiche trop lentement et que son visiteur a quitté la page.

Vous avez un doute sur les performances de votre site ? 

Je vous propose un audit gratuit de ce dernier, suivi d’un échange téléphonique de 30 min afin de vous expliquer ce qu’il est intéressant de faire sur votre site.

Laisser un commentaire

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