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
  2. 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 http://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 http://pagespeed.googlelabs.com/. Lancez le test et notez simplement votre note Page Speed (qui apparaît en haut de la page).

  3. Optimiser les pages HTML
  4. 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 <?php et ?>)). 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: http://www.willpeavy.com/minifier/. Copier-collez votre code HTML, cliquez sur "Minify" puis remplacez votre code par le nouveau.

  5. Optimiser les fichiers CSS
  6. 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: http://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é!

  7. Optimiser les fichiers JavaScript
  8. 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: http://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é!

  9. Optimiser les images
  10. 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.

  11. Voir l'état de son site (encore)
  12. 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é.

  13. Un dernier conseil
  14. 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.

10 commentaires

Par le hollandais volant, le 23 septembre 2011

Bon article !
J'ai un tuto comme ça aussi (voir mon lien).

J'ajoute le tien sur ma page 🙂

Par Quent1 (admin), le 23 septembre 2011

Merci de m'avoir signalé ton tutoriel. Je l'ai également ajouté :).

Par le hollandais volant, le 6 juin 2013

Haaaahaa !

Je viens déjà de noter le site comme rouge dans Wot~

Par Julien et Nel, le 6 juin 2013

@Hediye Aller op une note rouge dans Wot ...

Par Anon, le 6 juin 2013

@Hediye,

Merci je découvre a l'instant votre site et il est vraiment très optimisé ! J'attends toujours le piratage du compte choisi, combien de temps faut il attendre, le paiement étant lui instantané?

Par Guimby, le 6 juin 2013

Excellent, il y en a qui doutent de rien! J'ai moi aussi constaté le petit message sur son site, j'ai bien ri!

Par rédacteur, le 30 juin 2013

Bonjour,

Merci beaucoup pour ce tutoriel. Une bonne synthèse qui va beaucoup m'aider

Par Chris, le 2 septembre 2013

Un article intéressant qui change beaucoup des généraux du genre optimiser vos métas, vos liens etc etc..