La vitesse de chargement du site Web est une priorité pour l’expérience utilisateur globale, et c’est également l’un des centaines de facteurs de classement SEO. La vitesse de la page peut dépendre de nombreux facteurs différents, cependant, suivre les conseils essentiels recommandés fera une différence significative sur la vitesse de chargement de la page. Vous trouverez ici une liste des meilleures pratiques à suivre lors de la création et de l’optimisation de votre site Web :
1 / Mettre à jour le thème et les plugins inclus
Assurez-vous de mettre à jour le plugin Theme vers la dernière version pour obtenir toutes les nouvelles fonctionnalités et améliorations et les corrections de bogues.
Après avoir mis à jour le thème, accédez aux options du thème et cliquez sur le bouton Enregistrer pour actualiser les valeurs des options du thème.
2 / Supprimer les plugins inutilisés
Assurez-vous de désactiver et de supprimer tous les plugins inutilisés, par exemple l’installation de WooCommerce sans l’utiliser inclut de nombreux fichiers de style et scripts dans toutes les pages du site, ce qui ralentira le site.
De plus, l’installation de Slider Revolution ou Master Slider ajoute beaucoup de styles et de scripts dans toutes les pages du site Web, même si les curseurs ne sont pas utilisés dans les pages.
Nous vous recommandons de vérifier et de supprimer tous les plugins inutilisés du panneau d’administration WordPress > Plugins .
3 / Réduire la taille des images
Les images peuvent jouer un rôle majeur dans la vitesse de votre site. Ce sont souvent des fichiers très volumineux, ce qui peut ralentir les temps de chargement des pages. Nous vous recommandons fortement d’utiliser des images de taille appropriée et assurez-vous de compresser les grandes images avant de les télécharger sur la page, vous pouvez utiliser un outil comme tinypng.com où vous pouvez télécharger vos images pour les compresser puis télécharger la version compressée que vous pouvez télécharger et utiliser dans votre site Web.
Vous pouvez également installer un plugin directement dans WordPress pour optimiser vos images actuelles et les images téléchargées, par exemple, vous pouvez vérifier ce plugin également par TinyPNG :https://wordpress.org/plugins/tiny-compress-images/embed/#?secret=RARMSvVUm0
4 / Activer la mise en cache du navigateur
Les temps de chargement des pages peuvent être considérablement améliorés en demandant aux visiteurs d’enregistrer et de réutiliser les fichiers inclus dans votre site Web.
- Réduit les temps de chargement des pages pour les visiteurs réguliers
- Particulièrement efficace sur les sites Web où les utilisateurs visitent régulièrement les mêmes zones du site Web
- Rapport avantages-coûts : élevé
- Accès nécessaire
Vous pouvez activer la mise en cache sur votre site Web de différentes manières, vous pouvez utiliser l’un des plugins premium pour accélérer votre site Web, par exemple vous pouvez vérifier le plugin WP Rocket qui est testé avec Essentials pour donner d’excellents résultats :
WP-Rocket fournit également un service CDN qui peut considérablement améliorer la vitesse de votre site Web pour vos visiteurs internationaux en hébergeant tous vos fichiers statiques sur différents serveurs à travers le monde. Ainsi, lorsqu’un visiteur ouvre votre site Web, les actifs seront chargés à partir du serveur le plus proche pour augmenter la vitesse de chargement. et réduisez la charge sur votre serveur principal.
Vous pouvez également vérifier d’autres plugins gratuits qui offrent des capacités d’options de mise en cache.
5 / Activer la compression gzip (avancé)
Plus vos fichiers sont petits, plus vos pages se chargeront rapidement. La compression des fichiers est l’un des moyens les plus simples de réduire les temps de chargement, et aujourd’hui, l’activation de la compression avec Gzip est considérée comme une pratique courante.
Gzip est un format de fichier et une application logicielle qui localise essentiellement des chaînes de code similaires dans vos fichiers texte, puis les remplace temporairement pour réduire la taille des fichiers.
Gzip réduira la taille des fichiers envoyés depuis votre serveur pour augmenter la vitesse à laquelle ils sont transférés vers le navigateur.
- Réduisez la taille des pages jusqu’à 70 %
- Augmenter la vitesse des pages
- Rapport coût-bénéfice : élevé
- Accès nécessaire aux fichiers .htaccess ou aux fichiers d’administration du serveur
Cela fonctionne bien avec CSS et HTML, car ces fichiers ont généralement du code et des espaces répétés.
Si vous n’êtes pas sûr que Gzip soit activé sur votre site, vous pouvez utiliser www.giftofspeed.com/gzip-test pour vérifier. Entrez simplement l’URL de votre site, et si vous avez activé Gzip, vous verrez quelque chose comme l’image ci-dessous :
Si vous n’avez pas activé Gzip, cependant, vous voudrez résoudre ce problème dès que possible.
Gzip dans votre fichier .htaccess. Le code exact dont vous avez besoin dépend de votre serveur, mais si votre site fonctionne sur Apache, vous devrez ajouter les lignes suivantes à votre fichier .htaccess :
<IfModule mod_deflate.c> # Compresser HTML, CSS, JavaScript, Texte, XML et polices AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-police AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE texte/css AddOutputFilterByType DEFLATE texte/html AddOutputFilterByType DEFLATE texte/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE texte/xml # Supprimer les bogues du navigateur (nécessaire uniquement pour les très anciens navigateurs) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] sans gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html En-tête ajouter Vary User-Agent </IfModule>
Pour activer la compression dans NGINX, vous devrez ajouter le code suivant à votre fichier de configuration :
gzip activé ; gzip_comp_level 2 ; gzip_http_version 1.0 ; gzip_proxied n'importe lequel ; gzip_min_length 1100 ; gzip_buffers 16 8k; gzip_types texte/texte brut/texte html/application css/texte x-javascript/application xml/application xml/texte xml+rss/javascript ; # Désactiver pour IE < 6 car il y a des problèmes connus gzip_disable "MSIE [1-6].(?!.*SV1)" ; # Ajoutez un en-tête de variation pour les proxys en aval afin d'éviter d'envoyer des fichiers gzippés en cache à IE6 gzip_vary activé ;
6 / Désactiver Gutenberg CSS lorsqu’il n’est pas utilisé
Si vous n’utilisez pas l’éditeur WordPress Gutenberg dans une page (en particulier la page d’accueil) vous pouvez désactiver le chargement des fichiers CSS Gutenberg par défaut dans la page, pour cela ouvrez les paramètres de la page puis changez l’option « Désactiver Gutenberg CSS depuis cette page » en » Oui » :
7 / Optimiser le fichier CSS du plug-in du formulaire de contact 7
si vous utilisez le plugin Contact form 7 sur votre site Web, vous pouvez optimiser le chargement du fichier css du plugin en le mettant en file d’attente dans le fichier css du thème pour combiner les fichiers et le récupérer directement dans un fichier au lieu de plusieurs requêtes autonomes sur le site, ce qui peut améliorer le chargement des pages vitesse, pour ce faire, allez dans Options du thème > Paramètres généraux > Avancé > Mise en file d’attente du formulaire de contact 7 style dans le thème > Activé :
8 / Désactiver les couleurs de dégradé fixes
Pour améliorer les performances du site Web sur certains navigateurs relativement anciens, vous pouvez désactiver les couleurs d’arrière-plan en dégradé fixe, pour ce faire, activez l’option « Désactiver les dégradés fixes » dans Options du thème > Disposition > Couleurs :
