Le plan d’action en 7 étapes pour OPTIMISER votre site web
Cédric Vimeux 
Article invité rédigé par Marie-Eve Mouillard, du blog Les Doigts dans le Net dans le cadre de l’événement La Valse des Invités 2013.
Saviez-vous que 47% des consommateurs attendent qu’une page web se charge en 2 sec maximum ?
Les acheteurs deviennent distraits lorsqu’ils doivent attendre : 23% iront faire autre chose.
Optimiser un site web n’est pourtant pas insurmontable !
Si votre site web a un but professionnel, améliorer son temps de chargement doit devenir une priorité pour vous. A vrai dire, c’est un sujet qui me tient à cœur puisque mon propre blog souffre de ce mal.
J’ai donc cherché et compilé les bonnes pratiques en la matière pour me constituer une feuille de route, en plusieurs escales. Mes instructions sont particulièrement adaptées à WordPress mais restent valables pour tout type d’environnement : à vous de trouver les outils équivalents dans votre univers.
Le chemin est long et requiert de multiples compétences: j’ai donc décidé de regrouper les tâches selon leur complexité et leur temps de réalisation (comme vous, je n’ai pas une semaine à temps plein à consacrer à ce projet).
Le but de cet article est de vous fournir un plan d’action pour optimiser un site web : je ne rentrerai pas (trop) dans le détails de chaque étape, afin d’éviter d’en faire un article fleuve ! Les ressources citées en fin d’article vous permettront d’approfondir le sujet.
Analyser objectivement la vitesse de votre site
Inutile de partir dans l’optimisation avant d’avoir testé votre site avec des outils objectifs. D’une part, cette analyse pointera les éléments les plus problématiques, et d’autre part vous aurez un moyen de contrôler le gain amené par vos optimisations.
De nombreux outils existent, voici les 3 que je vous conseille, avec une petite préférence pour le premier.
GTMetrix
Il donne deux notes : « Page speed grade » et « Yslow grade ». Mais son avantage tient surtout à la liste des recommandations fournie ainsi qu’à ses bonnes pratiques « spécial WordPress ».
Web page Test
Étrangement, cet outil ne se lance que sur Chrome ou Internet Explorer. Il établit 5 notes selon 5 critères :
- temps de chargement à la 1ère visite
- compressions des ressources externes
- compressions des images
- cache statique
- utilisation d’un Content Delivery Network (cf en fin d’article)
L’outil de Google
Google reste quand même le moteur de recherche n°1 et le critère de la vitesse fait partie prenante de son algorhitme. Quand on sait à quel point il favorise ses outils, négliger ses recommandations seraient un tort évident!
Cet outil vous donne un score sur 100.
1ère couche d’optimisation : la facilité de mise en oeuvre de ces recommandations vous imposent de les réaliser !
Optimiser le serveur n°1 : le cache
Les serveurs ont la possibilité d’utiliser un « cache » : cette fonctionnalité génère et sauvegarde à l’avance les pages du site pour n’avoir qu’à les fournir quand un internaute en demande une.
Sur WordPress, utilisez ces plugins : « WP Super Cache » OU « W3 Total Cache », et « WP DB Reloaded Fix ». Les deux premiers mettent en cache les pages, tandis que le second s’occupe de « cacher » les requêtes vers la base de données.
D’autres actions plus techniques sont possibles…je vous fournis à la fin de cet article les références à l’origine de cette feuille de route. Vous y trouverez de nombreuses informations complémentaires pour optimiser un site web et des exemples pratiques à reproduire.
Optimiser le serveur n°2 : les images
Les images font partie des éléments qui ralentissent le plus votre site…alors qu’il est si simple de s’en prémunir. Outre les compressions manuelles que vous pouvez faire dans votre éditeur d’image (Photoshop ou autre), des outils peuvent aussi le faire pour vous.
Sur WordPress, on ne présente plus le plugin « WP smush-it » qui compressent à la fois les images uploadées, et aussi celles qui sont déjà présentes dans votre bibliothèque de médias. Smush-it propose également un logiciel dédicacé à la compression d’image.
Optimiser le serveur n°3 : configuration de WordPress
Voici la configuration à ajouter à votre fichier wp-config.php
- Permet aux plugins de cache de fonctionner :
define('WP_CACHE', true); - Diminue le nombre de révisions de chaque article conservées dans votre base de données à 2 :
define('WP_POST_REVISIONS', 2); - Vide la corbeille tous les 3 jours (plutôt que toutes les deux semaines) :
define('EMPTY_TRASH_DAYS', 3 );
Avec ces 3 premières tâches, l’optimisation de votre site devrait commencer à se ressentir : repassez les tests de vitesse pour vous en convaincre. Le gain n’est pas énorme, mais aux regards de l’effort fourni (installer des plugins, quelques « copié-collé ») c’est plus que satisfaisant.
Vous voulez de l’optimisation du tonnerre ? Vous n’allez pas être déçu!
2ème couche d’optimisation : un travail plus complexe et chronophage…mais quel gain!
Optimiser le thème du site n° 1 : les appels à la base de données
Que vous opériez sur WordPress ou une autre CMS, vous utilisez forcément une couche graphique pour personnaliser votre design. Chez WordPress on appelle ça « un thème » mais qu’importe son petit nom, son rôle est toujours le même : celui d’offrir une apparence spécifique tout en conservant le contenu. Conséquence ?
Votre thème passe son temps à interroger la base de données pour retrouver les informations à afficher : le titre du site, le slogan, le logo, la personnalisation CSS, les liens vers vos réseaux sociaux….et d’une manière générale, tout ce que vous configurez depuis le back-office de votre thème et depuis le menu « Réglages » de WordPress.
Or, une requête à la base de données est gourmande en ressources ! Votre but ?
Vous l’aurez compris: parcourir votre thème pour remplacer les appels par du texte « en dur ». Voici un exemple pour mieux comprendre:
Le code PHP echo bloginfo('url'); affiche l’url de votre site web : vous remplacez cette ligne par votre url, tout simplement!
Attention : une fois l’ensemble des requêtes modifiées, votre thème ne doit plus être mis à jour! Ou vous perdrez vos modifications. De même, n’utilisez plus les interfaces du back-office (par exemple pour changer le slogan), puisqu’elles ne sont plus reliées à votre thème : il va falloir prendre l’habitude de travailler directement dans vos fichiers.
Ces optimisations ne sont pas pour tout le monde, ceci dit, rien ne vous empêche de sous-traiter les parties trop complexes! ;)
Optimiser le thème du site n° 2 : les fichiers CSS et JavaScript
Idéalement, votre site ne doit avoir qu’UN fichier CSS et UN fichier JavaScript. Dans la réalité, c’est assez difficile à faire, voire même impossible avec certains thème premium.
Pour les autres, analysez tous les fichiers CSS d’une part, et JavaScript d’autre part, et regroupez-les. Eliminez les fichiers non-utilisés. Ensuite compressez les deux fichiers grâce à un outil en ligne comme par exemple http://www.refresh-sf.com/yui/.
D’autres optimisations existent mais si vous faîtes déjà ce que je viens de vous expliquer, vous gagnerez énormément sur le temps de chargement.
Optimiser le thème du site n° 2 : les plugins
C’est si simple de faire évoluer son site WordPress en installant un plugin qu’il n’est pas rare de voir des plugins faire le travail d’une seule ligne de code ! En voilà des ressources gâchées inutilement!
Vous avez la plugiboulimie ? Pas d’inquiétude, ça se soigne.
Tous les plugins ne sont pas faciles à remplacer. Voici les fonctionnalités que même le débutant peut installer à la main:
- Le code de suivi de Google Analytics : la procédure se retrouve un peu partout sur la toile
- Les statistiques de Google : remplacez-les par celles de Google Analytics
- Passez les liens des commentateurs en dofollow : une ligne de code et c’est réglé !
- Les liens vers vos réseaux sociaux : un lien est très facilement réalisable via votre wysiwyg ou à la main.
- Détourner votre flux RSS par Feedburner : le hack à copier-coller se trouve un peu partout sur le net, ainsi que dans les ressources de cet article
- Ajouter une police orginale à votre site web : la manipulation de votre CSS demande à peine 5 minutes et les tutos ne manquent pas .
Soyez curieux, renseignez-vous avant de vous jeter sur un plugin pour tout et n’importe quoi !
3ème couche d’optimisation : pour les utilisateurs avertis seulement !
Il nous reste une seule tâche pour propulser notre site à toute vitesse: installer un CDN ou « Content Delivery Network« .
Pour ne pas surcharger cet article déjà bien long, je me contenterai de vous en expliquer le principe. Comptez sur moi pour vous faire un retour plus détaillé ultérieurement…notamment après l’avoir implémenté sur Les Doigts dans le Net.
Prenons un exemple pour mieux comprendre le problème et sa solution : une page X est composée de 20 images, 6 fichiers JavaScript, 4 fichiers CSS et 5 zones de textes. Pour l’afficher, votre navigateur, qui demande chaque ressource indépendamment, doit donc réaliser 35 requêtes !
Or, votre navigateur est limité à 12 (nombre arbitraire) requêtes simultanées pour un même serveur. Comment peut-il alors afficher l’entièreté de la page ?
Il doit attendre que les 12 premières requêtes soient terminées avant de lancer les autres : pendant ce temps, votre internaute s’impatiente. La solution ?
En externalisant le CSS, JS et les images sur un 2ème serveur, vous aurez droit à 24 requêtes simultanées: 12 vers le serveur principal et 12 vers le 2ème serveur. Votre page s’affichera donc 2 fois plus vite! CQFD
Les sources
Cet article est une compilation et une ré-organisation de nombreux conseils trouvés sur SEO MIX, un blog dédié à WordPress et au référencement (même si à mon sens, il est orienté technique). Son auteur Daniel Roch ne cesse de me surprendre par la qualité de ces articles.
- http://www.seomix.fr/wp-config-vitesse/
- http://www.seomix.fr/optimisez-vitesse-wordpress-theme/
- http://www.seomix.fr/bookmarks-performances/
- http://www.seomix.fr/sans-plugins/
- http://www.seomix.fr/cdn-wordpress/
Optimiser un site est un travail de longue haleine qui est loin d’être inutile et vous apprendra beaucoup sur son fonctionnement. Allez-y doucement mais sûrement pour mener votre projet à son terme.
A vos claviers! Y’a plus qu’à…
Article invité rédigé par Marie-Eve Mouillard, du blog Les Doigts dans le Net.
Marie-Eve vous recommande SEOMix (cliquez)
47 Comments to “Le plan d’action en 7 étapes pour OPTIMISER votre site web”
Post comment
Commentaires récents
- dans Êtes-vous crédible aux yeux de vos prospects?
- dans Droit de rétraction et remboursement: ce que vous devez savoir si vous vendez des formations
- dans 2 idées ingénieuses pour gagner de l’argent avec vos photos de voyage
- dans La loi de Fitts, ou comment augmenter le taux de cliques sur vos boutons d’achat ou d’inscription
- dans Et si nous nous aidions à améliorer notre positionnement Google ? Nouvelle entraide entre blogueurs
Bonjour,
D’abord merci pour les articles utiles et efficaces que vous fournissez.
Je souhaiterai savoir comment faire pour faire « Passez les liens des commentateurs en dofollow : une ligne de code et c’est réglé ! ».
Même si je développe un business sur mon blog, je ne comprends pas grand chose au dofollow ou nofollow, qu’est ce qui est le plus utile pour quelqu’un qui monte son blog.
Cordialement.
Bonjour,
Par exemple en suivant le lien se trouvant sur cette phrase dans l’article, il mène à un article qui vous explique tout ! ;)
Bonjour Marie-Eve,
Voilà un article des plus intéressant.
Je connaissais certaines des astuces, que j’applique déjà , mais maintenant je vais m’attaquer aux autres afin d’offrir un affichage le plus confortable possible à mes lecteurs.
Bonne journée à tous.
Emmanuel
Marie-Eve
Merci pour cet excellent article.
Et un très grand bravo pour un texte sans faute !
Elisabeth
HA! HA! HA! 0 sur 100 avec l’outil Google!!!
J’ai du pain sur la planche. Je m’en vais immédiatement contacter mon webmaster pour qu’il m’arrange tout ça en suivant tes conseils judicieux.
Merci tout plein.
Marie-Noël
Virtuose Marketing obtient le même score ;-)
Bonjour,
En testant avec Virtuose-marketing, j’obtiens 46/100, c’est pas top, mais c’est pas 0 non plus…
Ah, ça me remonte le moral,ça!
ah moi j’obtiens 85/100, je suis plutôt étonnée :-)
Bonjour,
Blogspot doit être bien optimisé….c’est assez logique quand on y pense. Il propose un service « clé en main », ils se doivent donc de l’assurer (ce type de site n’étant pas administrable du point de vue de la performance)
Bonjour Marie-Ève,
Excellents conseils sur lesquels je viens de passer un moment en complétant certains plugins sur mon blog.
Bonne feuille de route, un peu de temps m’est nécessaire pour comprendre certains aspects un peu plus techniques.
En tout cas j’apprécie cet article fort utile, je le garde dans mes outils.
Merci Marie-Ève et au plaisir…
Hélène
PS : merci à Cédric de ce partage !
Jolie article j’ai passé quelques minutes sur mon blog pour appliquer les bonnes pratiques ;)
Un grand merci
Il faut dire également que le choix de l’hébergeur est un point super important !
vraiment genial Marie-Eve! merci, je vais m’appliquer a demander ca a mon web. Je vous admire!!!
Très intéressant, je vais garder cet article très précieusement pour quand je passerai à Word-press. j’utiliser pour l’instant blogger qui semble avoir le vent en poupe en ce moment.
Amicalement,
Xavier
Bonjour Marie Eve
Et merci de ces excellents conseils
J’ai commencé d’en appliquer quelques uns et mes résultats s’améliorent à vue d’oeil
Il me reste quelques (beaucoup ;-) de points à améliorer mais grâce à tes judicieux conseils ça devrait déjà aller beaucoup mieux
Merci encore
Thiery
Voici d’excellent conseil, merci pour l’article.
Bien d’accord avec Mickael: l’hébergement joue beaucoup sur la vitesse de chargement des pages du site concerné. J’ai utilisé deux hebergeurs: OVH et mavenhosting. Chez OVH j’ai déposé des toute petites pages html, avec une petite image par page et un peu de texte et ça ramait comme c’était pas possible: au moins 5 secondes par ouverture de page.
Chez Mavenhosting, j’ai mis un site en php, qui affiche des pages bourrées d’images et de texte et l’affichage est fluctuant, mais en général inférieur à 2 secondes.
J’ai donc discuté avec OVH pour les avertir du problème et quelques jours plus tard, le temps de chargement de mes pages html chez eux était devenu normal.
Donc voilà, faut vraiment prendre en compte l’hébergement.
Bonjour,
Et bien tu as eu plus de chance que moi ! Quand je leur ai dit que mon site ramait…en gros il m’ont dit que ça venait de mon site :/ Ca m’a un peu énervée sur le coup ce manque de bonne volonté, mais en fait…ils avaient un peu raison, puisque sans leur aide, j’ai remonté mon score.
D’ailleurs, j’en profite pour signaler qu’il y a une suite à cet article : http://lesdoigtsdanslenet.com/jouez-a-cache-cache-avec-votre-site-web-et-gagnez-en-reactivite/
Avec ça, vous avez toutes les cartes en main !
je me demandais justement si les plugins WordPress était pratique ou plutôt superflu.
tu réponds à ma question
merci de ton expertise :-)
Bonjour,
Parmi les articles de SEOMix cités, il y en a un qui reprend la liste des plugins dont on peut se passer, et comment les remplacer.
Bonjour,
Votre blog avec une page d’accueil avec 17 articles, un poids total de 86ko c’est énorme (cela commence à être chaud au-dessus de 30ko …) ça me fait un peu sourire … ne vous étonnez pas de voir votre blog ramer et souffrir de ce mal …
Il serait peut être souhaitable de commencez par le basique avant de se lancer dans des réglages compliqués et poussés ! :-)
Amicalement
Bonjour,
Votre blog avec une page d’accueil avec 17 articles, un poids total de 86ko c’est énorme (cela commence à être chaud au-dessus de 30ko …) ça me fait un peu sourire ne vous étonnez pas de voir votre blog ramer et souffrir de ce mal …
Il serait peut être souhaitable de commencez par le basique avant de se lancer dans des réglages compliqués et poussés …
Bonjour,
L’amélioration de la page d’accueil est inclu dans la 2ème couche d’optimisation. La couche 1 étant consacrée à des modifications minimes _tant en temps passé qu’en gain de performance.
Vous pouvez sourire, mais nous sommes d’accord (même si apparemment mon message n’est pas clair) : il faut d’abord commencer par les bases, soit optimiser le thème (js, css, images et plugins).
Je n’avais juste pas pensé à réduire le nombre d’article en page d’accueil car je ne pense pas qu’une boucle de 15 éléments augmentent significativement le temps de chargement par rapport à une boucle de 5 éléments, du moment où la requête SQLderrière est bien faite. A tester quand tout le reste sera propre !
Bonjour Marie,
Effectivement même en passant de 17 à 10 articles , le poids de votre page ne change pas …
ce qui me semble curieux, par contre vous avez diminué le temps d’affichage :-)
@+
Sa page web semble se charger assez rapidement…
Bonjour,
Votre article semble super intéressant… je suis désolé j’ai arrêté avant la fin.
Je m’explique, je débute un blog et franchement c’est pas si facile qu’on le dit. En effet, il faut mettre les mains dans le cambouis et c’est pas de la franche rigolade.
Avant d’en arriver au optimiser mon blog, j’aimerai déjà qu’il tourne. A ce jour, il n’est pas facile d’avoir une formation « optimale » sur le sujet (enfin c’est mon point de vue).
Un blogueur débutant si ‘il n’est pas aidé dans son projet se décourage rapidement car cela prend trop de temps à chercher les infos.
Bref, je tiens bon !! :)
Bonjour Damien,
votre souhait va bientôt être exhaussé …(par rapport à une formation optimal sur le sujet)
Amicalement
Comme je te comprends Damien.
Je suis nul en technique. Et certains termes résonnent comme du chinois à mes oreilles… ;)
Sam
Hello
0 sur 100 pour moi aussi mais impossible de me débrouiller toute seule! Il commence à y avoir beaucoup de vidéos sur mon blog, est-ce un problème en même temps c’est un blog de recettes vidéos! Je suis démoralisée!
Je garde cet article sous la main…merci
Bonjour Agnès,
si les vidéos sont hébergées sur Youtube, elles ne sont pas à l’origine du ralentissement. (même si bien sûr, une vidéo est toujours plus longue à charger qu’une photo).
et que penser de PageSpeed service Google?
Le plus important pour moi: hébergement, cache, images.
Pour ce qui est du remplacement des appels a la BDD par des liens en dur je ne trouve pas ça terrible…. Cela va générer plein de problèmes pour les mises à jour, et une des règles pour avoir un site optimisé c’est en général d’avoir tout à jour…
Bonjour,
Je voulais dire qu’on doit faire ces modif dans un thème enfant si on souhaite garder les mises à jour du parent. Petit oubli…
Bonjour Marie-Eve,
Un vrai article de professionnel. En tout cas ça m’a permis d’optimiser la vitesse de mon site web. Je partage.
Personnellement j’utilise régulièrement PageSpeed et différents plugins WordPress comme WP Super Cache pour continuellement améliorer la vitesse de mes différents sites.
Hum, trop compliqué pour mes connaissances en web. Dommage, car cet article est bien détaillé !
Bonjour Marie Eve,
merci pour cet article sympa et synthétique. J’ajoute qu’avec Gt metrix il y a aussi pingdom.com qui fait un travail similaire.
Noé
Merci pour PingDom, je cherchais justement un outil dans le genre.
Merci pour cet article très bien conçu et le plan d’action qui en découle.
Mon site obtient 29/100 d’après l’outil Google, je vais donc y revenir très vite.
J’ai beaucoup apprécié l’outil GTmetrix, on voit tout de suite où il faut mettre l’accent pour optimiser rapidement le site.
Merci !
Génial d’avoir posté toutes ces informations utiles. C’est bien de distinguer et comprendre ces choses qui concernent nos blogs. Mais ne vous limitez pas à faire des tests de votre blog mais faites en sorte aussi d’en tirer les bonne leçons.
Autres astuces évitez de mettre trop de plugins sur vos pages de blog car leur chargement vous grignote toujours un peu de temps. Managez également vos photos pour les rendre plus légères au téléchargement.
Je connaissais pas GTMetrix, c’est pas mal ce qu’il propose la combinaison d’ Yslow et page speed grade et les recommandations qui vont avec pour WP, c’est très pratique !
Merci beaucoup !
Je me rends compte qu’il y a beaucoup de détail à regarder si l’on veut optimiser son site internet. Dommage que cet article soit tourné sur WordPress, en tout cas les outils présentés sont très intéressants.
Le gratuit donne de mauvaises habitudes… Beaucoup de petites PME examinent le rapport qualité/ prix de l’hébergement qu’on leur propose en s’attachant d’abord aux tarifs. Les hébergements mutualisés de qualité sont plutôt rares et sur de mauvais hébergement les conseils d’optimisation que vous donnez sont vraiment précieux. Quand on sait à quel point une page lente à se charger pénalise le crawl par Googlebot….Un hébergement de bonne qualité c’est vraiment de la SEO efficace à bas coût en fait.
Bonsoir Marie Eve,
Je ne dirait qu’un mot « wahhhhhhhhhhhh »
Alors ça devient technique pour moi mais en testant mon site je me rend compte que je vais pouvoir agir simplement sur certaines images trop lourdes.
Je testerai cela ultérieurement.
Pour le reste ça me parait un peu compliqué à première vu, mais comme d’habitude, il me faut un temps d’assimilation et un peu d’audace pour aller fouiller tout ça.
Merci
Salut Marie-Eve et Cédric,
Je viens d’éplucher le header.php et le footer.php dans les thèmes enfants de mes 2 blogs ;-) Sur chaque site, j’ai supprimé entre 7 et 8 appels à la base de données ! Autour du titre, du sous-titre, du logo et des crédits. Ce n’est peut-être pas grand-chose, mais sans cet article, je n’aurais jamais osé remplacé ça par du code en dur…
Merci !
Par contre, minifier et concaténer, c’est au-delà de mes compétences (pour l’instant).
Jérémie
Très intéressante.Merci