Le plan d’action en 7 étapes pour OPTIMISER votre site web

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)

Google+