06.83.89.73.98 -Du lundi au vendredi, de 9h à 12h et de 14h à 17h -[email protected]

Tester et améliorer la rapidité de son site internet

Un petit article pour vous décrire ma méthodologie et les outils que j’utilise pour optimiser la vitesse d’un site internet notamment sous WordPress (Certains conseils fonctionnent pour tous les sites internet!). On cherche donc à améliorer l’expérience utilisateur, qui ne partira pas au bout des 10 secondes d’attentes pour visualiser le site! Et de ce fait on gagnera aussi des points pour le référencement (Google n’aime pas non plus les pages lentes!)

Comme je suis en train de finir la mise en place de CréaLion.net, j’en profite pour vous montrer les tests à faire et quelles améliorations apporter.

Avant de faire les optimisations, faisons un constat avec PageSpeed Insights de Google et GTmetrix de GT.net:

GTMetrix

Autant dire qu’il y a du pain sur la planche! Je vais d’abord commencer par la partie la plus technique, car elle conditionnera le bon déroulement des opérations suivantes, notamment l’installation de plugin d’optimisations.

Commençons donc par le premier aspect technique: Vérifier la version de PHP. PHP 7 est plus rapide que PHP 5. Il faut donc s’assurer qu’on travaille avec la bonne version. Pour cela, consulter le tableau de bord de votre hébergeur, ou alors vérifier dans l’admin de WordPress via un plugin tel que « Display PHP Version » (Pas besoin de garder le plugin par la suite). Si vous êtes chez OVH, vous pouvez ouvrir le fichier .ovhconfig situé à la racine du serveur (Accessible via un client FTP tel que FileZilla) et faire la modification directement:

Vérification chez l’herbergeur
Vérification avec un plugin
Vérification avec OVH

Pour CréaLion.net pas de soucis donc pour la version de PHP! Si ce n’est pas votre cas, vérifier dans l’administration de votre hébergeur s’il est possible de la changer, sinon les contacter pour faire ce changement de version.

Par contre, je me rend compte que je suis encore dans un environnement de développement avec le premier fichier. Cela a pour conséquence de ralentir le serveur car des traitements supplémentaires sont exécutés pour le débogage. Je change donc le fichier .ovhconfig pour obtenir:

Autre aspect technique, vérifier le support du protocole HTTP/2.0 qui est, lui aussi, plus rapide que son prédécesseur.
Pour cela, un site: https://tools.keycdn.com/http2-test

 

C’est une grande déception! En réalité, il semble que le datacentre OVH de Paris ne soit pas encore passé au HTTP/2.0. Heureusement, il y a une solution, par l’intermédiaire des CDN (Content Delivery Network), un système qui duplique votre site internet sur plusieurs serveurs dans le monde et ceux-ci utilisent bien le protocole HTTP/2.0.
Selon la formule choisie chez votre hébergeur, l’option CDN sera incluse ou payante (quelques euros par mois).
Pour OVH, c’est 1€/mois et elle est incluse dans l’offre Performance. J’active donc le CDN pour mon nom de domaine Crealion.net (A faire 2 fois pour inclure les « www ») :

 

 

Après quelques minutes, le test est maintenant OK:

 

Pour la duplication du site sur les serveurs grâce au CDN, il faudra par contre attendre quelques heures. On peut vérifier cela avec des sites comme https://www.cdnplanet.com/tools/cdnfinder ou http://www.whatsmycdn.com

En attendant on a encore de quoi faire! Regardons un peu plus en détails ce que les résultats de Page Speed Insights et GTMetrix nous suggère de faire:

 

Recommandations de Page Speed Insights

 

Recommandations de GTMetrix

 

 

On retrouve en réalité les optimisations les plus communes à faire: Le premier facteur de ralentissement d’un site internet, on le voit ici, ce sont les images non optimisées. On a ensuite l’activation de la mise en cache du navigateur et le traitement des codes Javascript et CSS qui bloquent le rendu de la page.

Commençons donc par nous occuper de ces images qui impactent tant le chargement de notre site. Première chose à faire, s’attaquer au problème « Serve scaled images », ce qui veut dire en réalité que sur le site on affiche une image par exemple en 600 x 200 px alors qu’en réalité elle fait 1800 x 600 px. Le navigateur a donc redimensionné l’image en plus petit. Il a donc charger une grande image « pour rien ». Il faut que l’image soit directement au format voulu, c’est à dire pour l’exemple au format 600 x 200 px.

Dans le cas de crealion.net, et ce qui arrive souvent, c’est qu’en réalité la grande image est affichée lorsqu’on clique sur la petite! Il faut donc optimiser ce système de lightbox (cliquer pour afficher une image en grand) afin qu’il ne charge la grande image que lorsqu’on a cliqué sur la petite image. Vous me suivez?

Si vous utilisez un plugin pour les lightbox, vérifier son paramétrage pour qu’il affiche bien les images en « thumbnails » de base et uniquement l’image originale lorsqu’on clique dessus. Pour ma part, c’est l’excellent plugin Elementor, un page builder (un constructeur de page donc ^^), qui gère mes lightbox. Et en effet, mes réglages ne sont pas optimaux:

 

J’ai demandé (Ou Elementor l’a fait par défaut pour moi) à afficher l’image en 1024 x 1024 px alors qu’il n’y a clairement pas la place pour. Dans le rapport de GTMetrix, et en inspectant le code source de la page, je constate qu’en réalité mon image s’affiche aux dimensions 360 x 218px. Je vais donc donner cette taille personnalisée à Elementor. Et là, la puissance de ce plugin s’exprime: Il va reconstruire notre image exactement à cette dimension!

 

L’image étant toujours liée au fichier média, lorsque je vais cliquer sur mon image,  c’est bien l’image d’origine qui sera affichée! Il ne me reste plus qu’à faire ce changement pour les 7 autres images de ma page d’accueil (il faudra vérifier les autres pages du site également!) Et on a alors réglé notre premier « problème » concernant les images.

Seconde partie, il faut optimiser la compression des images. Pour cela, le plus simple est de faire appel à un plugin pour que ce traitement soit automatisé chaque fois qu’on ajoute une image dans WordPress. J’utilise pour ma part « Compress JPEG & PNG images« , le plugin officiel du site tinypng.com, qui fait son travail de manière très efficace (jusqu’à 90% parfois de gain sur certaines images!). Le plugin est limité a environ 100 compressions par mois mais cela suffit généralement. Une fois le plugin installé, il suffit de lancer l »optimisation en masse est c’est fait!

Enfin c’est presque fini! Petit défaut d’Elementor (il en faut bien un), comme j’ai choisi des tailles personnalisées pour mes images, le plugin a créée ces images a part. Elles n’ont donc pas été détectées par « Compress JPEG & PNG images ». Mais comme tout problème a sa solution, on va récupérer les fichiers optimisés proposés en bas de page de Page Speed Insight:

Et mettre ces images dans le dossier d’Elementor: « wp-content / uploads / elementor / thumbs  » et le tour est joué!

Attaquons maintenant le problème de la mise en cache des fichiers, dans le navigateur et sur le serveur. Pour cela, on va travailler sur le fichier .htaccess qui se trouve normalement à la racine de votre site quand vous le visualisez avec un client FTP tel que FileZilla. On va rajouter les lignes suivantes dans ce fichier .htaccess:

ExpiresActive On
ExpiresDefault "access plus 7200 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
AddType image/x-icon .ico
ExpiresByType image/ico "access plus 2592000 seconds"
ExpiresByType image/icon "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 2592000 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 7200 seconds"
ExpiresByType application/xhtml+xml "access plus 7200 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"

# Cache des images durant 1 semaine
<FilesMatch "\.(jpg|jpeg|png|gif)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

# Cache des javascript et CSS durant 1 mois
<FilesMatch "\.(js|css)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

Vérifier que votre site fonctionne toujours. Si ce n’est pas le cas, soit il y a une faute de frappe dans le fichier, soit c’est le module « Expires_module » qui n’est pas activé sur votre serveur. Vérifier dans l’administration de votre hébergement ou contacter celui-ci pour activer ce module.

Deuxième optimisation, il s’agit de compresser le contenu sur le serveur avant de l’envoyer au navigateur du visiteur. Pour cela, on utilise la compression gzip proposé par le module « deflate_module ». La encore, si le code ci-dessous plante votre site internet, c’est que ce module n’est pas activé sur votre serveur. Ajoutons les lignes suivantes dans le fichier .htaccess:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Pour tester si la compression fonctionne: https://varvy.com/tools/gzip/

Et tant qu’on est dans le fichier .htaccess, on va rajouter ceci (cela n’impacte pas les performances mais ajoute un peu de sécurité):

# Protection du fichier wp-config.php
<files wp-config.php>
order allow,deny
deny from all
</files>

# Protection du fichier htaccess
<files .htaccess>
order allow,deny
deny from all
</files>

# Bloquer l'affichage du contenu des dossiers
Options -Indexes

Il nous reste plus que la cerise sur le gâteau en apportant les dernières optimisations que nous ne pourront pas faire sans passer par un ou plusieurs plugins. Car je précise que les réglages effectués jusqu’à présent sur le fichier htaccess pourraient se faire via des plugins…mais ce serait prendre le risque d’installer un plugin qui plante le site, qui ne soit plus maintenu à jour ou tout simplement inefficace. En faisant les réglages nous-même (un copier-coller en gros!), on ne surcharge pas notre WordPress avec des traitements pas toujours utiles.

Selon nos rapports de performances effectués tout à l’heure, il nous reste donc à optimiser le chargement des fichiers CSS et JS pour qu’ils ne bloquent pas le chargement de la page. Et on va en profiter pour les minifier et les combiner pour limiter le nombre de fichiers à charger sur notre serveur. En effet, en regardant sur ce site: https://varvy.com/pagespeed/ il apparaît que le site charge 16 fichiers CSS et 17 fichiers JavaScript. Donc autant de requêtes effectuées vers le serveur pour récupérer les fichiers, et donc du temps de perdu.

Pour palier à tout cela, je fais appel au plugin « Fast Velocity Minify » qui est assez simple à utiliser et permet d’obtenir de bon résultats. Il faut généralement suivre les recommandations, voici les réglages que j’ai mis en place:

Retourner sur le site pour déclencher les traitements, vous devriez ensuite voir dans le premier onglet du plugin, les fichiers générés:

Si jamais ce plugin ne fonctionne pas bien avec votre configuration, je vous conseille d’essayer « Autoptimize » ou « Merge + Minify + Refresh« .

Parfait, il est temps maintenant de récolter les fruits de notre travail! Voyons les résultats sur Page Speed Insights et GTMetrix, mais on remarque déjà que le site s’affiche beaucoup plus vite qu’au départ!

Je pense qu’on peut dire que les résultats sont là! Et pour ne pas bouder son plaisir, je vous propose de vérifier (on sait jamais!) avec d’autres sites nos bon résultats:

https://tools.pingdom.com
https://testmysite.withgoogle.com/intl/fr-fr
https://varvy.com/pagespeed/

Ce qui donne:

 

 

Ce n’est pas parfait, et il est toujours difficile de satisfaire pleinement ces outils de tests, mais on obtient tout de même des résultats spectaculaires au vu des conditions de départ.

J’espère que cet article vous aura plu et je compte sur vous pour le partager!

MAJ du 16/11: Je continue de surveiller les outils pour améliorer et tester les performances de nos sites internet. Dernières trouvailles intéressantes:

  • Le nouveau site de performance de google: https://web.dev/measure
  • Et un plugin qui fait bien son job: a3 Lazy Load, simple et efficace pour différer le chargement des images, vidéos, etc… et donc gagner encore quelques dixièmes de secondes (voir plus) pour le chargement des pages

Laisser un commentaire

Fermer le menu