10 astuces pour optimiser les performances de votre site web

Le constat est bien connu : les performances d’un site web peuvent se dégrader de manière phénoménale. En ajoutant toujours plus de fonctionnalités ou de couches applicatives, le mille feuilles s’établit peu à peu. Devenu une usine à gaz nécessitant beaucoup de ressources pour finalement pas grand-chose, votre site web devient un problème majeur lorsque votre audience elle-même en est impactée (lenteurs chroniques, bugs, erreurs, crashs, etc.). Avant d’en arriver là, il convient de maintenir au quotidien votre outil de production. Les 10 astuces qui suivent vous permettront, sinon de régler, au moins de colmater l’hémorragie naissante.

Index :

  1. Optimisez vos images
  2. Compressez l’HTML, le CSS et le Javascript
  3. Réduisez le nombre de requêtes HTTP
  4. Améliorez le chemin critique du rendu
    1. Pour le CSS
    2. Pour le Javascript
  5. Utilisez le cache
    1. Le cache de fichiers
    2. Le cache navigateur
    3. Le proxy inversé
  6. Activez la compression Gzip
    1. Si vous avez Apache
    2. Si vous avez Nginx
  7. Optez pour un CDN
  8. Évitez les redirections 301
  9. Allégez votre usage de la base de données
  10. Empêchez le hotlinking
  11. Pour conclure

1. Optimisez vos images

L’erreur la plus commune, c’est la gestion des images. Il est impératif de commencer par réduire leurs poids pour diminuer le temps d’attente lié au chargement des pages. L’autre aspect bénéfique est à voir du côté de votre hébergement. Des images moins lourdes permettent également de libérer de la bande passante et de la charge serveur.

Vous êtes encore nombreux à ne pas optimiser vos images et à les afficher dans leur format d’origine. Voire, et c’est là beaucoup plus sournois, à ne pas créer de miniatures spécifiques à chaque type d’utilisation. En effet, une bonne gestion des images passe d’abord par une utilisation réfléchie de celles-ci : une image pleine taille n’a pas à être utilisée comme encart d’un article. Créez pour cela une ribambelle de miniatures de plusieurs tailles, et, pour chaque contenu, prenez celle qui convient.

Il en va de même pour les extensions et la transparence. A moins de vouloir une image d’une netteté irréprochable en Bitmap (.bmp) ou en TIFF (.tiff), préférez le format JPEG (.jpg). Vous avez besoin de la transparence ? Vous aurez alors le choix entre le format GIF (.gif) et PNG (.png). Préférez toujours PNG, sauf s’il s’agit d’une image animée ou d’une très petite image (comme un bouton). Car la compression d’une image en PNG est en moyenne 5 à 25% meilleure que celle d’un GIF.

Sachez enfin qu’il est très rare d’avoir besoin d’une qualité proche des 100%. Si vous êtes en possession de logiciels de retouche d’images comme Adobe Photoshop (payant et propriétaire) ou Gimp (libre et gratuit), vous pourrez en abaisser facilement la qualité en jouant sur la compression. Pour le format JPEG, 75% de compression est un bon compromis entre qualité et poids. Pour les formats GIF et PNG, il faudra avoir l’œil sur le nombre de couleurs. Si votre image ne nécessite pas de nombreuses couleurs, choisissez une table des couleurs plus petite dans les paramètres d’exportation du fichier.

Pour de plus amples informations sur le sujet, je vous conseille de lire l’excellent et très complet article Optimisation de l’image, écrit par Ilya Grigorik, ingénieur spécialisé en performance web chez Google.

2. Compressez l’HTML, le CSS et le Javascript

De nos jours, la plupart des pages web se composent de 3 langages : la structure HTML (pour HyperText Markup Language), l’habillage CSS (pour Cascading Style Sheets) et l’interaction Javascript. Chaque langage dispose de ses propres fichiers, qu’il conviendra de compresser au maximum afin d’en réduire, une fois n’est pas coutume, leurs poids. Dans le jargon du web, cet acte est appelé minification.

La minification consiste à retirer des fichiers :

  • Les commentaires
  • Les indentations
  • Les espaces blancs
  • Les délimiteurs de bloc

Voici une liste non-exhaustive de sites pour minifier manuellement vos fichiers :

Si vous êtes sur WordPress, utilisez un plugin externe. Ils permettront de minifier automatiquement le Javascript, le CSS et l’HTML. Certains modules de cache inclus des options de minification comme Cache Enabler. D’autres viennent se greffer à l’existant, c’est le cas d’Autoptimize. Ce dernier est capable non seulement de minifier, mais aussi de joindre tous les fichiers entre eux pour réduire le nombre de requêtes HTTP. Nous verrons au prochain chapitre les avantages d’une telle solution.

3. Réduisez le nombre de requêtes HTTP

Lorsqu’un visiteur demande une page, son navigateur s’empresse d’aller chercher tout le contenu inclus à l’aide du protocole HTTP (pour Hypertext Transfer Protocol). C’est un jeu de ping-pong, pour chaque demande, une requête au serveur. Et cela marche pour tout : la page en elle-même, les images, les scripts, les vidéos, etc. Bref, plus vous avez de fichiers différents, plus il y a de requêtes. Et plus il y a de requêtes, plus ça consomme de la ressource et du temps.

Il existe plusieurs solutions simples à mettre en oeuvre :

  • Quand vous le pouvez et lorsque cela est pertinent, liez les fichiers entre-eux
  • Incluez le Javascript directement dans la page (s’il s’agit d’un petit script)
  • Réduisez au maximum le nombre de modules externes
  • Réduisez le nombre d’images (par la technique des sprites CSS)
  • Faites du ménage dans votre code (tous les fichiers sont-ils nécessaires ?)

Enfin, je vous conseille de faire très attention à l’endroit où sont hébergés vos fichiers. S’ils sont sur votre propre hébergement ou sur un CDN (pour Content Delivery Network), aucun problème. En revanche, s’il s’agit de sites lambda, prenez garde. Ayez toujours le réflexe de récupérer les fichiers et d’utiliser un hébergement de confiance. Vous n’êtes pas à l’abris d’un problème chez votre voisin, qui pourrait ralentir votre propre site web et vous impacter par un banal effet domino.

4. Améliorez le chemin critique du rendu

Derrière cette appellation barbare se cache quelque-chose de plutôt simple à comprendre. Toutes les informations sur une page web ne se valent pas. Et tous les éléments sur celle-ci ne se chargent pas de la même manière, ni occupent le même ordre de priorité. Il est important de comprendre qu’avant d’afficher une page, le navigateur vérifie que tout ce qu’elle contient existe bel et bien. En partant du principe que nous avons une page web avec 1 fichier CSS, 1 fichier Javascript et 1 image, le processus sera le suivant :

  1. Le navigateur demande la page
  2. Le navigateur analyse le HTML et découvre 1 fichier CSS, 1 fichier Javascript et 1 image
  3. Le navigateur télécharge l’image
  4. Le navigateur décide qu’il n’affiche pas la page sans avoir reçu le CSS et le Javascript
  5. Le navigateur télécharge le CSS et vérifie que rien d’autre n’y est inclus
  6. Le navigateur décide qu’il n’affiche pas la page sans avoir reçu le Javascript
  7. Le navigateur télécharge le Javascript et vérifie que rien d’autre n’y est inclus
  8. Tout est OK. Le navigateur affiche la page.

Vous trouvez cette liste grotesque ? Attendez un peu, et imaginez maintenant cette même liste avec la composition réelle d’un site web, à savoir plusieurs fichiers CSS et Javascript, des dizaines d’images, des vidéos, etc. Imaginez le parcours des requêtes, les réponses serveur – client… Et c’est sans parler de la construction de la DOM (pour Document Object Model) et de sa modification par des scripts en toute fin de chargement !

Dès lors, comment optimiser le chemin critique du rendu ? Par des moyens simples :

Pour le CSS

  • Toujours inclure les fichiers CSS en haut de page (juste avant </header>)
  • Appelez correctement vos fichiers CSS
  • Utilisez moins de fichiers CSS
  • Minifiez vos fichiers CSS
  • Supprimez ce qui est obsolète

Pour le Javascript

  • Toujours mettre les fichiers Javascript en fin de page (juste avant </body>)
  • Utilisez les directives async ou defer
  • Utilisez moins de fichiers Javascript
  • Minifiez vos fichiers Javascript
  • Supprimez ce qui est obsolète

Je souhaiterai dès à présent parler des polices de caractères. Nous, développeurs web, sommes tous devenus accros à l’utilisation des polices dites “custom” sur nos sites web. Elles sont de plus en plus belles, le choix est on ne peut plus vaste, bref, tout va bien. Cependant, n’oubliez jamais qu’il s’agit de requêtes HTTP. Enfin, que leurs poids est très loin d’être neutre. Pour chaque spécificité (en italique, un gras 300, 400, 700), vous retéléchargez tous les symboles. Prêtez-y attention. Tâchez d’en saisir l’utilité et le besoin, car cela peut vous coûter plusieurs méga-octets supplémentaires ! Quand on sait que 80 à 90% du temps d’attente est lié au téléchargement d’une page, ça laisse rêveur…

Pour connaître le temps d’affichage de vos pages et déterminer où ça coince, utilisez :

  • YSlow, un plugin pour votre navigateur
  • Firebug (avec l’option Réseau activée), un autre plugin pour navigateur
  • Google PageSpeed Tools, un outils externe de Google qui va analyser votre site web

En clôture de ce chapitre, je vous conseille la lecture d’un autre article de Ilya Grigorik : Analyser la performance du chemin critique du rendu.

5. Utilisez le cache

Dans le milieu du web, dès qu’on parle de cache, on a tendance à penser directement au cache de fichiers. Pourtant, il est important de rappeler qu’il en existe deux autres et qu’ils permettent aussi d’optimiser votre site : le cache navigateur et le proxy inversé. Découvrons à quoi ils servent.

Le cache de fichiers

Lorsqu’une page est demandée, votre serveur traite l’information en allant chercher le contenu sur une base de données. Il s’agit du même procédé que le nombre de requêtes HTTP : plus il y a de demandes, plus il y a de charges et de temps d’attente. Pour peu que votre site web ait beaucoup d’informations à récupérer ou qu’il soit mal optimisé, le nombre de requêtes peut grimper en flèche. Le cache de fichiers est là pour mettre de l’ordre. En mettant en cache la page pour une durée déterminée, il coupera net le nombre d’allers-retours à la base de données. Il existe un nombre impressionnants de systèmes de cache de fichiers. Les plus notables :

Pour PHP

Pour WordPress

Le cache navigateur

Le cache navigateur permet de spécifier de quelle manière et à quel moment le cache du navigateur doit être mis à jour. Pour cela, nous avons :

Intéressons-nous à la première solution, l’en-tête HTTP Cache-Control et sa directive max-age. Celle-ci va nous permettre de spécifier une date limite d’expiration (par exemple 7 jours). Cela signifie que pendant 7 jours, le contenu choisi ne sera pas retéléchargé par le navigateur et ce quelle qu’en soit la raison. D’autres directives existent (comme no-cache). Il conviendra de définir ce qui vous conviendra le mieux.

Allez jeter un œil chez Mark Nottingham. Son Tutoriel de la mise en cache est très bien documenté.

Le proxy inversé

Un proxy inversé est un serveur de liaison entre l’utilisateur final et des serveurs internes. Son but est simple : en étant placé en tête de pont, il décharge et répartie toutes les informations aux autres serveurs restés en arrière. En plus d’une sécurité accrue, le proxy inversé dispose d’une large gamme d’outils comme la répartition des charges (load balancing), la mise en cache (accélération HTTP), la compression des données, le chiffrement, etc. Ce qui nous intéresse particulièrement ici, ce sont les accélérateurs HTTP.

Parmi les principaux, citons :

La lecture de cet article vous expliquera plus en détails l’utilisation des proxy et des proxy inversés.

6. Activez la compression Gzip

La compression Gzip permet de réduire la consommation de bande passante. Le procédé est simple : tout le contenu va être compressé côté serveur puis envoyé au navigateur. Ce dernier va ensuite le décompresser, l’interpréter et l’afficher. Ce qui est intéressant ici, c’est le cheminement client – serveur. En compressant l’information, celle-ci a voyagé plus rapidement en utilisant moins de ressources. Très simple à mettre en place, Gzip peut faire une grande différence sur le temps d’affichage.

Pour savoir si Gzip est déjà activé et avoir des informations sur ce que vous pouvez encore améliorer, je vous invite à utiliser le site Gift Of Speed. Dans le cas contraire, suivez les instructions suivantes.

Si vous avez Apache

Ajoutez ces lignes à votre fichier .htaccess :

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Si vous avez Nginx

Ajoutez ces lignes à votre fichier nginx.conf :

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

7. Optez pour un CDN

L’utilisation d’un CDN (pour Content Delivery Network) permet d’avoir accès à un vaste réseau mondial de serveurs connectés à Internet. En déterminant la localisation du visiteur, le CDN réduira la latence en utilisant des serveurs plus proches pour acheminer le contenu à l’utilisateur final. Prenons l’exemple d’une personne à Lyon qui souhaite afficher un site web hébergé à Toronto. L’information devra transiter à travers l’Atlantique. Le CDN, lui, préférera utiliser un serveur basé à Paris. Le trajet étant plus court, le gain de temps est considérable.

En fonction de ce que vous souhaitez faire et de votre CDN, vous pouvez procéder ainsi pour tout ou partie de votre contenu : fichiers CSS, Javascript, images, et même le cache ! Certains CDN permettent également de se substituer momentanément à votre site web au cas où celui-ci aurait un coup dur (ralentissements) ou serait indisponible (crash).

Vous utilisez WordPress ? L’article CDN pour les Nuls – Accélérez votre site de WPFormation pourrait vous intéresser. En outre, cet article d’Antoine Augusti devrait vous aiguiller encore un peu plus dans la manière d’utiliser le CDN d’OVH, leader de l’hébergement sur Internet en Europe (et 100% Made in France, cocorico !).

8. Évitez les redirections 301

Une redirection 301 est une redirection permanente de l’url A vers l’url B. Bien qu’elle puisse être très utile dans certains cas (référencement, redirection mobile), elle est toujours néfaste en terme de performance. Quand le navigateur demande la page, la redirection lui répond d’aller voir ailleurs. Cela va générer des allers-retours d’informations pour rien, augmenter le temps nécessaire à la génération de la page HTML sur l’adresse finale et le chargement des fichiers supplémentaires qui y sont liés. C’est pourquoi je vous conseille de les utiliser le moins possible.

9. Allégez votre usage de la base de données

Pour augmenter la vitesse d’affichage des pages, vous devez également optimiser la manière dont vous utilisez votre base de données. Commencez déjà par diminuer le nombre de requêtes SQL. Une requête SQL c’est un aller – retour d’informations entre le serveur et la base de données et donc un temps précieux de perdu à la génération de votre page. Ensuite, optimisez vos requêtes elles-mêmes, en prêtant attention au type et au nombre d’informations que vous demandez. Avez-vous besoin de toutes ces colonnes ? Traitez-vous toutes les informations obtenues ? Vérifiez aussi que vos index sont pertinents et utilisez-les à bon escient. Enfin, un petit coup de ménage dans vos tables ne fait jamais de mal, terminez le job en supprimant ce qui est obsolète.

Je tiens à vous rappeler que les modules externes sont souvent de gros consommateurs de la base de données. Utilisez-les avec parcimonie et sagesse. De même, lorsque vous prenez un code quelque part, réfléchissez-y à deux fois avant de le mettre en production. Une, deux ou trois petites requêtes en plus ce n’est pas grand-chose, mais si vous brassez un nombre conséquent de visiteurs et avez une infrastructure très juste, cela peut facilement engendrer des ralentissements et vous mettre sur les rotules.

Deux liens utiles :

10. Empêchez le hotlinking

Le hotlinking est l’acte visant à subtiliser la bande passante d’un autre. Tout le monde l’a déjà fait, sans s’en rendre compte. Mais si, rappelez-vous, vous trouviez cette image de chat extrêmement drôle et sympathique. Vous l’aviez alors inséré dans le contenu d’un site ou d’un forum en gardant l’URL source. Votre geste, anodin en apparence, ne l’était pas tant que ça. En agissant ainsi, vous n’utilisiez non pas votre bande passante, mais celle de la personne qui héberge l’image. Ce qui a eu pour conséquence d’augmenter toujours un peu plus la charge de son serveur. Pour votre site, un hotlinker pourrait faire la même chose. Afin de palier à ce problème, vous pouvez utiliser un fichier .htaccess dans le but de rediriger toute demande qui ne viendrait pas de chez vous vers une image ou une page d’avertissement.

Ajoutez ces lignes à votre fichier .htaccess :

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mondomaine\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /chemin/vers/limage/desole.jpg [L]

Pour conclure

Il existe mille et une manière d’optimiser votre site web et cet article n’a pas pour vocation de toutes les réunir. Néanmoins, j’estime que les 10 astuces évoquées plus haut sont sans aucun doute les plus importantes. Elles vous permettront de considérablement augmenter la vitesse de chargement des pages tout en baissant la latence et la charge de votre serveur. Certaines de ces solutions sont rapides à mettre en oeuvre, d’autres peuvent nécessiter un travail de chaque instant. Mais toutes font partie d’un ensemble de bonnes pratiques qu’il vous faudra adopter.

Vous aimerez également

Vos commentaires