Optimiser son site web de A à Z

Cela va faire un bon bout de temps que je n’ai pas posté de tutoriel ici. Je vous propose donc d’optimiser votre site web grâce à mon aide:

1. Voir l’état de son site

Avant de nous lancer dans l’optimisation, nous devons faire le bilan de notre site. Pour cela nous allons utiliser deux outils. Le premier outil se nomme « Full Page Test » et est édité par Pingdom. Pour l’utiliser, rendez-vous sur https://tools.pingdom.com/ puis rentrez l’adresse de votre site. Une fois le test effectué, notez le « Total loading time » ainsi que tous les fichiers dont la jauge bleue est importante. Une fois ceci fait, nous allons nous rendre sur https://pagespeed.googlelabs.com. Lancez le test et notez simplement votre note Page Speed (qui apparaît en haut de la page).

2. Optimiser les pages HTML

Vous vous en êtes sans doute rendu compte lors de l’étape précédente: votre site est lent! Pour remédier à cela, nous allons commencer par optimiser le code HTML de votre page (vous pouvez également utiliser cette méthode sur une page se terminant par .php. Sachez cependant qu’il ne faudra pas l’appliquer sur du code PHP (situé entre les balises )). Pour cela, nous allons minifier notre code (nous allons le « compresser ») afin d’alléger la page et la faire charger un peu plus vite. Pour cela, nous allons utiliser un outil en ligne (pourquoi le faire sois même, alors que des sites vous le font proprement en moins de dix secondes?). Cet outil s’appelle « HTML Minifier » et se trouve à cette adresse: https://www.willpeavy.com/minifier/. Copier-collez votre code HTML, cliquez sur « Minify » puis remplacez votre code par le nouveau.

3. Optimiser les fichiers CSS

Minifier le HTML c’est bien, mais ce n’est pas tout! Il faut également réduire votre/vos fichier(s) CSS! Pour cela, nous allons utiliser ce site web: https://www.minifycss.com/css-compressor/. Son fonctionnement étant un peu plus compliqué que le minifieur de code HTML, nous allons procéder par étape:

  1. Entrez votre code CSS dans champ « CSS-Code »
  2. Choisissez la compression dite « La plus compacte »
  3. Cliquez sur « Compresser le CSS »
  4. Remplacez le contenu de votre fichier CSS par la/les ligne(s) de code qui s’affiche(nt) en dessous.
  5. Enregistrez!

Et voilà, votre CSS est maintenant optimisé!

4. Optimiser les fichiers JavaScript

Pour terminer la compression des fichiers dont le code est lisible par les humains, nous allons compresser le JavaScript. Pour cela, nous allons utiliser un troisième minifieur. Ce minifieur (que vous trouverez ici: https://jscompress.com/) fonctionne comme le minifieur de code HTML. Il suffit d’entrer votre code JS, de cliquer sur « Compress JavaScript » puis de remplacer le contenu de votre ficher JavaScript par le code renvoyé!

5. Optimiser les images

Pour terminer l’optimisation de base, nous allons optimiser nos images. Pour cela, je vous conseille tout d’abord d’enregistrer vos images en png ainsi qu’en jpeg. De cette façon, vous pourrez trouver facilement quel est le format qui conviendra le mieux pour enregistrer vos images (prenez fichier le plus léger (sauf si la qualité est importante)). Une fois le bon format trouvé, il faudra encore les compresser. Pour compresser un PNG, cliquez ici. Pour compresser un JPG, cliquez ici.

6. Voir l’état de son site (encore)

Une fois tout ceci fait (et uploadé), nous allons voir ce que nous avons gagné. Pour cela, il vous suffit de refaire la même chose qu’à l’étape n°I et de comparer les résultats que vous obtenez avec ceux obtenus un peu plus tôt. Vous constaterez sans doute que votre site est plus rapide et est mieux optimisé.

7. Un dernier conseil

Pour terminer, voici un conseil qui vous aidera à optimiser encore plus votre site web: n’utilisez pas un CMS lourd et gourmand en ressources comme WordPress. Utilisez plutôt PluXML, blogotext ou codez votre propre CMS (je l’ai fait et croyez moi, je ne regrette pas WordPress!). Votre site gagnera de la vitesse et votre espace disque utilisé descendra en flèche!

Et voilà, votre site est maintenant optimisé. Je vous encourage à faire toutes ces étapes avant de publier votre site web. En effet, Google préférant les sites qui se chargent rapidement, votre référencement sera optimisé dès le début et vous gagnerez des visiteurs plus rapidement!

EDIT: voici un autre tutoriel très complet sur l’optimisation de son site web.