Améliorer radicalement le temps de chargement de vos pages

Améliorer la vitesse de chargement de vos pages

Dans l’article « Le temps de chargement des pages explose en France« , je vous avais fait part des problèmes que le web rencontre de nos jours, de l’alourdissement des pages qui sont, de plus en plus lentes. La moyenne Française est classée à plus de 6 secondes en 2014, ce qui est un très mauvais chiffre. Dans cet article, je vais vous dévoiler mes techniques pour améliorer radicalement le temps de chargement de vos pages grâce à toute une flopée d’astuces que j’ai ressemblé durant ces dernières années.

Identifier les causes d’un temps de chargement trop long.

Avez vous l’âme d’un détective ?

Pour pouvoir trouver des solutions, il nous faut tout d’abord identifier les problèmes. Sachez que la lenteur de votre site/blog peut-être due à 1000 variables indépendantes. Pour pouvoir identifier les causes, nous avons toute une flopée d’outils gratuits à notre service.

Les outils à utiliser.

Pingdom Tools: est un outil gratuit qui vous permettra de tester la rapidité de votre site web et vous aidera à identifier les causes d’un temps de chargement trop long. Commencez par entrer votre adresse URL dans le champ approprié et envoyez…

Pingdom Tools - Améliorer radicalement le temps de chargement de vos pages

Google PageSpeed Insights: Fourni par Google, ce merveilleux outil vous indiquera surtout comment votre blog pourrait être plus rapide. Les indications seront sous les formes suivantes: « Améliorations urgentes », « améliorations éventuelles » et « règles approuvées », ce qui sera très pratique pour s’y retrouver rapidement.

Google PageSpeed insights tester vitesse site web - Améliorer radicalement le temps de chargement de vos pages

En bonus, voici un outil encore plus complet à joindre aux deux précédents:

[sociallocker]

GtMetrix: Véritable monstre de l’analyse, cet outil ultra complet vous dira tout sur votre blog. Vous trouverez sa taille, son poids, des graphiques, les évolutions entre les différents tests ainsi qu’un classement tiré des outils pour tester la vitesse de son site proposé par Google et Yahoo!.

Gt Metrix test vitesse - Améliorer radicalement le temps de chargement de vos pages

[/sociallocker]

Accélérez la vitesse de votre blog, simplement et améliorer radicalement le temps de chargement de vos pages.

Laissez-le décoller…

Etape suivante. Vous devriez avoir identifier plusieurs problèmes sur vos sites grâce aux quelques outils que je vous ai fourni mais nous allons procéder méthodiquement pour plus d’efficacité. J’insiste sur le fait que je ne serais pas l’éventuel responsable du plantage de votre blog si vous avez un problème technique, alors concentrez-vous, et c’est parti.

Allégez le poids de vos images.

use-light-png---améliorer-vitesse-chargement-de-vos-pages-web

Le saviez-vous ? Une des principales causes de la lenteur des pages web provient du poids des images qui s’affichent. Lorsque vous disposez d’une image que vous avez trouvé sur internet, avant de l’uploader, procédez automatiquement aux améliorations suivantes:

Compresser votre image sur un logiciel de retouche photo comme Photoshop ou simplement Paint de Windows. Commencez par introduire votre image dans votre logiciel et cliquez sur « enregistrer sous » ou « exporter pour le web » sur Adobe Photoshop.

Au moment d’exporter, vous aurez normalement la possibilité de réduire le poids de l’image en la compressant. Cela réduira sensiblement sa qualité finale, mais vous économisez des millièmes sur chaque image traitée.

Votre image ne devrait pas dépasser les 50-60ko. Oubliez tout de suite les images plus lourdes, elle seront la principale cause de la lenteur de votre blog. Sans vous faire un dessin, vous devez comprendre que le serveur télécharge à chaque fois l’image et mettra beaucoup moins de temps à passer à l’étape suivante si votre image est légère. J’insiste sur ce point, c’est très important.

En bonus, voici un plugin pour vous permettre de compresser vos images déjà en ligne rapidement: [sociallocker] Wp Smush it, développé par WP Mu Dev. Pensez bien à désactiver/supprimer le plugin après avoir compressé vos images, car les plugins sont aussi une des causes du ralentissement de vos sites, d’ailleurs…[/sociallocker]

Désactiver et supprimer les Plugin(s) inutiles et superflus.

 améliorer vitesse chargement de vos pages web

Les plugins ralentissent énormément votre site, ce n’est pas nouveau. Pourquoi ? Le plugin est un tas de lignes de codes qui sont chargées à chaque affichage de vos pages. De ce fait, ils ralentissent vos serveurs. Chaque plugin superflu doit être désactivé, voir supprimé de votre installation.

Dès qu’il vous sera possible de vous en passer, effacez. Essayez de trouver des solutions plus légères, intégrez directement vos lignes de codes à votre thème wordpress par exemple. Faites vos recherches là-dessus, il existe pas mal d’infos sur les forums wordpress.

Laissez-moi maintenant vous présenter vos pires ennemis: les plugins sociaux. Ces plugins envoient des données à tout les réseaux sociaux affichés sur votre blog à chaque chargement. N’avez-vous jamais remarqué dans la barre d’état un certain « en l’attente de akamai facebook »?

Voilà, pas besoin d’en dire beaucoup plus, ces plugins sont mauvais pour votre blog mais attention, pas tous. Après avoir fait plusieurs tests, il sembleraient que certains des ces plug-in fonctionnent la plupart du temps bien. Je pense notamment à Social Starter. Évitez les barre flottantes style « digg digg » qui créent en passant des bugs d’affichage et des incohérences sur les thèmes mobile et ça, sur tous les blogs que j’ai pu voir en utiliser.

En bonus, voici un outil  gratuit qui va vous permettre de tester la consommation de vos plugins en temps réel: [sociallocker]Plugin Performance Profiler.[/sociallocker]

Les plugin de cache: l’enfer de vos blogs.

 améliorer vitesse chargement de vos pages web

La première chose que l’on vous dira si vous cherchez  des solutions sur un forum est: « installe w3 total cache ». C’est ici que je vous arrête les amis, ce n’est pas une solution et je vais vous expliquer pourquoi. Sachez toute fois que si vous n’avez jamais eu de problème, ce paragraphe ne vous est pas destiné !

Lorsque vous installerez pour la première fois un système de cache, vous serez bluffé, abasourdi et fier de votre blog, c’est indéniable. Vous allez pouvoir économiser plusieurs secondes juste en installant un simple plugin, mais ne vous réjouissez pas trop vite…

J’ai pu en parler autour de moi, à des professionnels et à d’autres blogueurs: les plugins de cache ne sont pas la solution ultime. Pourquoi ça ?

Promio car vous allez devoir faire face à une tonne d’action supplémentaires qui vont vous faire perdre du temps: vous devrez vider la cache pour voir certaines mises à jour de votre thème wordpress par exemple.

Le cache vous installera quelques lignes de code dans votre répertoire wordpress qui créera des incompatibilités avec les autres plugins et l’ensemble du processus ira même jusqu’à utiliser la réécriture de vos urls. Sans rentrer dans les termes techniques, en gros, si un bug se crée et est lié à votre système de cache, vous aurez de grosses difficultés à vous en sortir et faire fonctionner à nouveau votre cher petit site, la prunelle de vos yeux (j’ai personnellement eu beaucoup de problèmes qui m’ont coûté cher à cause de ce genre de plugins.)

Secundo, car le plugin de cache est traître: il vous créera des problèmes au bout de quelques mois, croyez en mon expérience. Vous trouverez un jour votre site anormalement lent et vous vous demanderez pourquoi. A ce stade, or de question de désinstaller votre petit plugin de cache et pourtant, soyez en sur, le problème viendra de lui.

Tertio, il m’a été certifié que les offres d’hébergement à bas prix (je pense aux « Basic » de chez 1&1) n’étaient absolument pas adaptées pour supporter ce genre de systèmes. Si vous possédez une offre d’hébergement plus puissante et pas mal de trafic, tentez le coup peut-être positif, mais dans ce cas optez pour un plugin premium comme Wp Rocket.

Compressez votre HTML, JS  et CSS.

 améliorer vitesse chargement de vos pages web

Autre chose méconnue : l’impact de votre code sur le temps de chargement de votre site. Le saviez-vous ? Chaque espace en trop dans votre code alourdira celui-ci et ralentira son chargement. Là, on passe aux choses sérieuses, cela risque d’être un petit peu plus technique, je vous préviens.

Il existe en autre des solutions pour faire ce que l’on appelle la « Minification » de votre code: la méthode manuelle mais peut adaptée aux novices, ou, la méthode automatique via des outils spécialisés. Etant donné que je suis quelqu’un de plutôt gentil, vous n’aurez même pas à chercher : tapez « minify css » ou minify html » sur Google pour trouver des convertisseurs ou utilisez le plugin Better WordPress minify (et pensez bien à le désactiver à la fin!)

La compression vous fera gagner immédiatement entre 200ms et 1s sur la vitesse de votre site. Très bien, à ce stade, vous devriez déjà commencer à ressentir la différence, mais pour booster encore le processus, nous allons encore étudier quelques petites choses.

Utilisez la compression GZIP.

 améliorer vitesse chargement de vos pages web

Encore une étape assez technique mais qui peut grandement améliorer les résultats de vos investigations : la fameuse compression gzip.

Schématiquement parlant, une fois la compression gzip activé, elle compressera, comme son nom l’indique, vos fichiers avant de les envoyer au serveur. Cette étape vous aidera à économiser elle aussi votre bande passante et améliorer radicalement le temps de chargement de vos pages.

Pour le coup, il va falloir que vous fassiez quelques tests, car toutes les solutions que j’ai trouvées sur le net ne fonctionnent pas avec tous les serveurs. Cette fois évitez sincèrement les plugins, puisque une simple ligne de code ou deux suffiront à installer la compression gzip sur votre serveur. Voici les lignes que j’utilise sur le JDB, à vous de tester si cela fonctionne.

A copier à la fin de votre fichier « .htaccess » disponible à la racine de votre site. Pour tester si votre gzip est activé, utilisez Check GZIP compression.

# Gzip compression
<IfModule mod_deflate.c>
# Active compression
SetOutputFilter DEFLATE
# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding « gzip,deflate » env=HAVE_Accept-Encoding
</IfModule>
</IfModule>

# Compress all output labeled with one of the following MIME-types
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>

Combinez vos images en sprite CSS.

 améliorer vitesse chargement de vos pages web

Cette partie sera courte, car très technique et difficilement exploitable par tous. Votre serveur reçoit des requêtes (des données) qui se seront vu limités par l’étape de suppression des plugins par exemple. Imaginez-vous la chose suivante : chaque plugin = 1 requête. De la même façon votre thème utilise des images (les boutons,les menus…) et chacune de ces images correspond à une requête elle aussi. Le fait de concentrer vos images dans une seul « grosse image » -appelée sprite CSS- réduira le nombre de requêtes et vous fera encore économiser du temps.

Un sprite CSS ressemble à ceci.

Créer un sprite est une chose complexe, alors je vous conseille de vous documenter pas mal là-dessus. Je vous conseille de lire l’article tuto de l’excellent site OpenClassRoom (anciennement « le site du zero ».)

Sinon vous pouvez simplement adopter un thème récent, un thème premium qui est déjà optimisé pour la réactivité sur le web.

Et votre serveur, vous y avez pensé ?

 améliorer vitesse chargement de vos pages web

-« C’est ton serveur qui est lent. »

-« Comment ça mon serveur » 

-« Bah oui, ton hébergeur quoi… »

-« Ah, mais non, il est très bien, ça ne vient pas de là. »

STOOOP! Là je vous arrête de suite, votre hébergeur joue un rôle extrêmement important dans la vitesse du chargement de vos pages, contrairement à ce que certains disent.

Pour vous donner un ordre d’idée : votre serveur est une machine, un ordinateur. Si vous possédez un serveur dédié (que vous seul louez) alors, vous passez votre chemin. Par contre, si vous êtes en mutualisé (que cette machine héberge plusieurs sites web), cette partie pourrait bien vous intéresser.

Sachez qu’un serveur à bas prix (comme l’offre Basic de chez 1&1) possède globalement les mêmes caractéristiques que les autres, mais pas du tout la même puissance. Pour continuer avec l’exemple de l’offre Basic, sachez que celle-ci vous confère une machine très peu de mémoire vive et des performances globales très faibles puisque tout est partagé.

Il est bon de savoir la chose suivante (et j’en ferais évidemment un article pour en parler) : l’offre basic 1&1 est trop juste pour votre site, surtout si vous utilisez des plugins et autre choses gourmandes. Pourquoi ? Tout simplement parce que j’ai changé pour une offre beaucoup plus puissante cette année et je vous assure que la différence s’est fait ressentir immédiatement. J’ai gagné un chargement quasi-instantané des pages lorsque tout fonctionne bien et j’espère que ça durera.

La note de fin.

Il existe encore d’autre façon d’améliorer l’ensemble du temps de chargement de vos pages mais l’essentiel est là. Vous devriez avoir réussi à améliorer radicalement le temps de chargement de vos pages. Pensez bien à tester tout sur différents navigateurs (n’oubliez pas de vider leur cache à eux aussi) et testez, re-testez encore et encore.

Lorsque votre blog sera passé sous la barre des 2 secondes, vous pourrez danser la macarena devant votre ordinateur et voir votre référencement s’améliorer de jour en jour.

 améliorer vitesse chargement de vos pages web

 

1 Comment

  1. Michaël
    Michaël05-20-2018

    De passage par hasard grâce à l’article du cache, tu m’as totalement fait changer d’avis XD Merci pour tes précieux conseils très pro sans blabla surperfue, que je vais suivre ! 😀

Laisser un commentaire

Cochez cette case et partagez vos articles !