Bonjour à tous,
Dans cet article, nous allons retourner encore une fois dans le « cambouis« . Comme vous le savez peut-être, je reste développeur web via des petits projets personnels et professionnels dans mes temps libres !
Et pour ces projets, j’utilise très fréquemment, le CMS WordPress.
J’y développe des thèmes et des plugins pour répondre aux besoins de mes « clients ».
Et je vais vous présenter, par problématique, les plugins WordPress que j’utilise pour les créations que je réalise et le pourquoi de cette utilisation.
Je vais commencer par le premier point, le plus important : la rapidité d’affichage du site.
Les plugins pour améliorer la « rapidité du site ».
Pour tout site, la problématique la plus importante est la rapidité d’affichage du site.
Or, pour avoir un site-web attirant et qui donne envie aux internautes de rester dessus, il est nécessaire de mettre en place : des images, des vidéos, des effets de transitions et du contenu interactif …
Généralement, ces contenus sont lourds, ce qui donne des ralentissements lors des chargements des pages…
Aujourd’hui, un développeur doit penser à chaque fois qu’il a plusieurs types d’internautes :
- Les internautes sur ordinateur fixe avec une connexion internet satisfaisante.
Ces internautes ont, grâce à leur connexion internet stable et à leur matériel (ordinateur) un affichage optimal. Les images lourdes et les contenus lourds ne posent pas de problèmes majeurs pour eux. Ils peuvent attendre jusqu’à 10 secondes pour un chargement d’une page.
- Les internautes sur smartphone avec une connexion internet satisfaisante.
Ces internautes ont, grâce à leur connexion internet stable, un affichage rapide. Cependant, un utilisateur avec un téléphone portable cherche à accéder aux contenus des sites et non pas tout ce qu’il y’a « autour » du contenu. Ils n’acceptent pas que le chargement d’une page prenne plus de 15 à 20 secondes par page. Il faut être rapide et efficace sans pour autant dégradé l’expérience du site.
- Les internautes sur smartphone avec une connexion internet insatisfaisante.
Ces internautes ont la pire combinaison possible. Ils veulent accéder à votre site, mais ces derniers n’ont pas la connexion internet nécessaire pour l’afficher correctement… (Réseau Edge ou 3G ou instable).
Il faut aussi comprendre le fonctionnement serveur-client d’un site-web classique (PHP et BDD), pour comprendre qu’il existe deux temps de chargement pour chaque page web :
- Le temps chargement serveur et le temps chargement client.
Pour répondre à cette problématique, voici les plugins WordPress que j’utilise et que je recommande.
W3 Total Cache
Il est difficile de passer à côté de ce plugin aujourd’hui.
Ce plugin WordPress permet :
- De réduire le temps chargement serveur en créant des pages statiques de vos pages sur votre serveur. C’est à dire qu’au lieu de solliciter votre serveur PHP et votre base de donnée à chaque visite d’internaute, le plugin génère un fichier HTML statique pour chaque page. Ces fichiers HTML (pages statiques) sont ensuite communiqué aux internautes qui eux… ne voient aucune différences.Ce qui permet : Un très grand gain puisque le serveur PHP et votre base de donnée sont ainsi beaucoup moins sollicité.
- De réduire le temps de chargement des fichiers Javascript, des fichiers CSS et de la page HTML en les « minimisant ».
Les fichiers qui composent les pages web sont interprétés par des programmes et non par des êtres humains. Ils sont rédigés par des humains mais interprété par des machines. Pour réduire la lourdeur de ces fichiers, le plugin pratique une « minimisation de ces fichiers ». Cela les rends presque illisible pour un humain, mais parfaitement lisible pour un programme. Ce qui permet : Un gain supplémentaire puisque les fichiers sont ainsi « nettoyer » pour les rendre les plus léger possible. - D’utiliser le cache navigateur pour l’ensemble des fichiers images, JavaScript et CSS et d’activer la compression HTTP.
- Etc … l’ensemble des fonctionnalités sont présentés ici : https://fr.wordpress.org/plugins/w3-total-cache/
C’est un « must-have ». Il est gratuit, fort utile et complet.
C’est obligatoire et c’est surtout très important pour un site très fréquenté !
EWWW Image Optimizer
Un site internet est très souvent accompagné d’un nombre incroyable d’image. Il est très important de comprendre que chaque fichier image présent sur un site, vont être chargé par chaque internaute. Et que tant que les images ne sont pas tous chargés, le chargement de la page continue … sans afficher quoi que ce soit.
Il est très important d’optimiser les images (PNG et JPG) en les compressant au maximum sans perte de qualité.
Ce plugin le fait à merveille par défaut !
BJ Lazy Load
Une fois que les images sont compressées au maximum … il faut prendre en considération qu’une page très chargée en images … prendra quand même beaucoup de temps à se charger. Pour pallier à ce problème, il existe CE plugin.
Le principe est simple :
L’image n’est pas affichée, tant que l’utilisateur ne se « rapproche pas » de l’image.
C’est à dire qu’une image est chargée uniquement quand l’ascenseur (scroll) est proche de l’objet image.
Ce qui fait que le chargement des images est faite après le chargement de la page en fonction de l’action de l’utilisateur.
Ce plugin va sauver beaucoup de site de la lenteur.
Si vous êtes développeurs de thème WordPress : imposez ce plugin dans vos templates et utilisez-le dans votre programmation.
AMP & Accelerated Mobile Pages
Pour répondre aux très petites connexions, pour les internautes qui veulent aller à l’essentiel, Google et les grands sites ont mis en place AMP. Cela permet d’avoir un site très light et donc très rapide à se charger.
J’ai mis en places ces deux plugins sur ce site uniquement.
Pour accéder à cette fonctionnalité, il suffit d’ajouter « /amp/ » à l’URL d’une page, article du site.
Pour juger par vous-même : https://paul-fsm.net/amp/
Ce n’est pas indispensable, mais cela peut être vraiment pratique pour les petites connexions.
Voilà, c’était mon premier article sur le sujet des plugins WordPress sur la thématique : rapidité de votre site internet.
N’hésitez pas à poster vos commentaires et vos avis sur le sujet dans les commentaires.
0 Commentaire(s)