astuces pour améliorer la vitesse de chargement de votre site

4 astuces pour améliorer la vitesse de chargement de votre site

Nous avons déjà vu que l’amélioration du temps d’affichage de votre site va permettre aux robots de Google de bien l’indexer. L’utilisateur qui va aussi visiter votre site sera tenter d’y passer du temps et de revenir par la suite.

Dans cet article, nous allons donc voir quelques astuces pour améliorer le temps de chargement du site

Vérifiez la vitesse de chargement de votre site

Il y en plusieurs outils en ligne :

  • Google Page Insights : il suffit de mettre l’adresse de votre site, l’outil va donc analyser le contenu du site, puis génère des suggestions pour accroître la vitesse des différents pages du site. Le grand avantage est qu’il est en Français et qu’il propose les solutions aux problèmes qu’il trouve. A chaque fois vous corrigez un problème, vous pouvez refaire le test et voir de nouveau le résultats
  • Pingdom : c’est un outil très connu aussi. Le même principe : mettre l’adresse de son site, attendre le résultat et récupérer les « Tips » pour corriger les problèmes. Pas de suggestions pour la correction des problèmes.
  • Gtmetrix : Un autre outil Anglo-saxonne qu’on trouve bien puisqu’il donne des détails importants sur les erreurs et leur emplacements

Nous allons utiliser Google Page Insights comme référence de nos tests et utiliser ses recommandations pour améliorer la vitesse de chargement

Utilisez la compression Gzip

C’est la première remarque que va vous afficher Google Page Insights : Activer la compression Gzip.

Pour simplifier, c’est presque la même chose que la compression de fichier avec Winzip qu’on connais tous, il s’agit donc de diminuer la taille des données du site pour un meilleure temps de chargement. C’est une étape qui est normalement transparente à l’utilisateur car géré côté serveur. Il faudra donc que le serveur (votre hébergement) permette d’utiliser la compression Gzip.

Pour vérifier si votre site WordPress utilise la compression Gzip, rendez vous sur le site https://www.giftofspeed.com/gzip-test/

Si Gzip n’est pas disponible, il faut l’activer manuellement via le fichier .htaccess. (Cette étape est à faire seulement si le serveur ne permette pas la compression Gzip).

Voilà comment Editez dans WordPress le fichier .htaccess Collez le code ci-dessous dans le fichier .htaccess de votre installation WordPress:

# compress text, html, javascript, css, xml:
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
# Or, compress certain file types by extension:
SetOutputFilter DEFLATE

Optimisez les images

C’est un point très important à ne pas négliger, car la plus part des webmasters, administrateurs et propriétaires de sites Web vont vouloir avoir un site très joli avec plein d’images de bonnes qualités sans se soucier de la taille de ces images. La plus grosse erreur est donc de télécharger les images depuis le web et de les « uploader » sur notre site sans retravailler la taille des images.

Il est donc important d’optimiser les images:

  • Redimensionner les images par rapport à leur taille d’affichage exacte : l’utilisation de Paint est suffisante pour cela
  • Optimiser la qualité et la résolution : l’utilisation de services de compression tel que compressnow.com
  • Préciser la taille de celles-ci (width / height) dans les balises images HTML

Il existe aussi des plugins qui permettent de compresser les images tel que WP Smush.it mais rien ne remplace le travail manuel d’optimisation des images.

En option, vous pouvez aussi optimiser votre contenu web avec cet article : Comment optimiser son contenu web pour le SEO

Optimisez la taille des fichiers CSS

Quand un développeur rédige son code de style, il souhaite bien organiser ce code en le mettant dans plusieurs fichiers ou en mettant beaucoup de commentaires et des retours à la ligne … c’est bien pour l’écriture du code mais pas du tout bien pour la vitesse de chargement du site.

En effet, on peut réduire énormément la taille des fichiers CSS en les minifiant. Les retours à la ligne inutiles, les commentaires et les espaces en trop seront supprimés. Ceci est à faire uniquement quand on ne touche plus au fichier, ou au pire en sauvegardant soigneusement les fichiers sources, car en minifiant les fichiers, ils deviennent complètement illisible.

Il y a aussi un autre problème si on va aussi minifier le CSS des plugins : A chaque mise à jour on va perdre nos modifications et on doit donc tout recommencer. On pourra donc minifier seulement les fichiers dont on est sûr qu’il ne vont pas se modifier.

cssminifier est le service qu’il faut pour minifier (j’aime bien le mot) vos fichiers CSS.

Optimisez la taille des fichiers JavaScript

Tout comme les fichiers de style, il est très important de réduire la taille des fichiers Javascript. le même principe que pour les fichiers CSS est valable pour les fichiers Javascript. Le service de réduction de la taille des fichier CSS peut aussi être utiliser pour les fichiers javascript. Il est aussi préférable de ne jamais mettre du code Javascript à l’intérieur des fichiers PHP ou HTML mais toujours dans des fichiers include « .js » Et vous ? quel autre astuces vous avez ? Enregistrer Enregistrer EnregistrerEnregistrer

Enregistrer

1 commentaire

  • Matthieu dit :

    Bonjour et merci pour le super partage. J’apprécie énormément la qualité de votre contenu. On ressent la quantité d’heures que vous passez dans l’écriture de vos articles de blogs et de la passion que vous y mettez.

    J’ai déjà une idée sur cette méthode et je la trouve bien : https://hermya.com/

    Est-ce que vous pensez que votre méthode pourrait m’aider encore plus ?

Laisser un commentaire, votre avis nous intéresse