Comment optimiser le temps de chargement de son site

Suite à l’article Connaître et améliorer la vitesse de chargement des pages web dans lequel j’expliquais comment mesurer la performance d’un site et où trouver des suggestions d’amélioration, je vous explique comme promis ce qu’il faut faire concrètement pour optimiser le temps de chargement.

En bref, je m’attache dans cet article à vous expliquer comment se débarrasser des points rouges (high priority suggestions) indiqués par l’add-on Page Speed, sans vous noyer dans les explications. Non pas que ce ne soit pas intéressant de savoir comment cela fonctionne, mais on n’a pas toujours le temps…

Enable gzip compression

Activer la compression gzip est une manière simple et efficace d’économiser de la bande passante et de diminuer le temps de chargement des pages. Pour ce faire, ajoutez les lignes suivantes à votre fichier .htaccess.

Leverage browser caching

Il faut spécifier une date d’expiration pour le plus de fichiers possibles pour profiter de la mise en cache, c’est-à-dire le stockage des fichiers dans le cache du navigateur afin d’éviter de les charger à chaque fois.
On peut faire cela de plusieurs manières. En voici une : ajoutez les lignes suivantes à votre fichier .htaccess.

Vous pouvez modifier la durée de mise en cache en secondes, et en spécifier une différente selon le type de fichiers. Google Page Speed demande une mise en cache d’ un mois minimum.

Attention : si vous modifiez un fichier, les internautes pour lesquels le fichier est stocké dans le cache de leur navigateur ne verront pas le nouveau fichier avant que l’ancien expire. Le plus simple est de changer le nom du fichier.

Combine External JavaScript      &     Combine External CSS

C’est tout simple, copiez/collez le contenu de tous les fichiers JavaScripts que vous appelez dans un seul fichier .js et le contenu de tous les fichiers CSS que vous appelez dans un seul fichier .css, pour ne faire qu’un appel pour chaque.

Minify CSS      &     Minify JavaScripts

Là encore ce n’est pas compliqué. Page Speed vous propose une version optimisée de vos fichiers CSS et JavaScript, il n’y a qu’à l’utiliser pour les fichiers que vous hébergez vous même. Cliquez sur le + devant Minify CSS/JavaScript, puis sur « minified version » et enregistrez le code fourni.

Ne remplacez pas vos anciens fichiers, renommez-les en quelque chose comme style-non-minified.css pour les sauvegarder. En effet la version optimisée de vos fichiers CSS et Javascript est illisible et il est indispensable de conserver la version normale pour pouvoir y apporter des modifications, avant de relancer Page Speed pour l’optimiser à nouveau.

Optimize images

Optimiser les images signifie :
- Enregistrer les images directement à la taille voulue, pour ne pas avoir à les redimensionner en HTML.
- Enregistrer « pour le web », c’est à dire sans informations superflues et avec la qualité nécessaire.
Exemple sur Photoshop : Cliquez sur Fichier / Enregistrer pour le web et les périphériques, puis choisissez la qualité désirée grâce à l’aperçu.

Il est également utile de spécifier la longueur et la largeur de chaque image pour que le navigateur réserve la place nécessaire à chaque image et n’ait pas à déplacer le contenu après coup.

Optimize the order of styles and scripts

Le chargement de fichiers JavaScript externes bloque tout le reste. Pour optimiser le temps de chargement, il faut respecter l’ordre suivant :
- d’abord les scripts « inline »*,
- ensuite l’appel au fichier CSS externe,
- enfin l’appel au fichier JavaScript externe.

*Si les scripts « inline » peuvent être exécutés en dernier, comme le tracker Google Analytics, il faut alors les placer juste avant la balise </body>. Sinon, il faut les placer avant l’appel aux fichiers externes.

Bon voilà, j’espère que votre Page Speed vire au vert

• Connaître et améliorer la vitesse de chargement des pages web
• Le temps de chargement des pages fait son entrée dans les facteurs de SEO
• Enregistrer la navigation de ses visiteurs pour optimiser son site ou son blog