Lucas Willems

LUCAS WILLEMS

Un étudiant de 27 ans passionné par les maths et la programmation

English

14 astuces pour rendre son site internet plus rapide

Article

Rendre son site internet plus rapide, vu le nombre d'articles qui en parlent, semble être très important. Pourquoi ? Premièrement, pour l'utilisateur : il est beaucoup plus plaisant d'avoir un site internet qui s'affiche instantanément, qu'un site lent. Je n'invente rien. Deuxièmement, pour le référencement. Google, depuis 2010, prend en compte le temps de chargement de votre site. Pour plus de renseignements, allez voir, si vous en avez un, votre compte Google Webmasters.

Après une courte introduction, voyons maintenant comment rendre son site 2 fois plus rapide. Notez que 2 outils web sont à utiliser pour détecter les lacunes de votre site. Le premier, WebWait, avec lequel j'ai pu donner ce nom à l'article, permet de connaître le temps moyen de chargement d'une page, en effectuant X requêtes espacées de X secondes. Le second outil, GTmetrix, génère un rapport de performance pour vos pages en regroupant les recommandations de Page Speed et YSlow (extensions pour navigateur), la timeline de chargement des éléments de vos pages et l'historique des précédents rapports de performance pour ces pages.

Réduisez la taille de vos ressources

La première étape pour rendre votre site plus rapide consiste à réduire la taille de vos ressources : Javascript, CSS et images. Cette réduction de taille permettra ainsi d'accéder et de télécharger plus rapidement vos ressources. Notez que lorsque vous minifierez vos fichiers CSS et Javascript, il sera préférable d'en garder une version non minifiée pour pouvoir, par la suite, continuer à apporter des modifications facilement.

Minifiez vos fichiers CSS et supprimez les propriétés inutiles

Tout d'abord, il vous faut réduire la taille de vos fichiers CSS et cela de deux façons. La première consiste à supprimer toutes les propriétés présentes dans vos fichiers qui ne sont à aucun moment utilisées. Pour se faire, vous pouvez utiliser le Developer Tools de Google Chrome en appuyant sur la touche F12. Allez ensuite dans Audits, puis sélectionnez "Select all" et "Reload Page and Audit on Load" et enfin, cliquez sur "Run".

Rendre son site plus rapide

Dans le résultat de l'audit, allez dans la rubrique "Web page performance" et déroulez la list "Remove unused CSS rules" : vous obtenez la liste des propriétés CSS chargées non utilisées. Il ne vous reste alors plus qu'à les supprimer de vos fichiers.

Une fois les propriétés CSS inutiles supprimées, il vous faut minifier vos fichiers, c'est à dire supprimer tous les caractères inutiles (espaces, tabulations, retours à la ligne) qui prennent de la place. Pour cela, voici un outil qui permet de minifier vos fichiers CSS grâce au YUI compressor : Minifieur CSS.

Minifiez et optimisez vos fichiers Javascript

Après avoir réduit la taille de vos fichiers CSS, il vous faut faire la même chose mais cette fois-ci pour vos fichiers Javascript. Et pour cela, il existe un outil extraordinaire : le Closure compiler de Google. Cet outil permet, en plus de supprimer les caractères inutiles de vos fichiers, de les optimiser car il analyse leur fonctionnement pour ensuite les simplifier, permettant une réduction de taille conséquente, qu'aucun autre minifieur ne peut battre.

Réduisez les dimensions de vos images et compressez les

Pour finir de bien réduire la taille de vos ressources, il ne vous reste plus qu'à réduire la taille (le poids) de vos images et cela de deux manières. La première consiste à enregistrer vos images sur votre serveur avec déjà les bonnes dimensions pour, ensuite, ne pas avoir besoin de les redimensionner dans vos pages avec du CSS. Cela permettra d'envoyer aux visiteurs vos images avec la taille nécessaire, sans superflu, et donc de les envoyer plus rapidement.

La seconde manière consiste à compresser vos images. Là aussi des outils web permettent de le faire. Celui que je vous conseille d'utiliser s'appelle Image Optimizer et est très simple d'utilisation. Vous n'avez qu'à choisir l'image à optimiser et à prendre "Minimum file size" en qualité d'optimisation, puis à cliquer sur "Optimize now" et enfin, à télécharger l'image optimisée.

Soulagez votre serveur pour envoyer vos pages plus vite

La taille de vos ressources étant maintenant réduite, la deuxième étape pour rendre votre site plus rapide consiste à soulager votre serveur, à lui faire faire le moins de travail possible pour générer une page.

Combiner vos fichiers CSS et Javascript

Pour soulager votre serveur, commencez par combiner vos fichiers CSS et Javascript. Cela permettra de diminuer le nombre de fichiers par page, donc le nombre de requête, d'accès au serveur. Toutefois, faites attention, lors de la combinaison de vos fichiers, à bien respecter leur ordre de chargement : si un fichier Javascript A doit être chargé avant un fichier Javascript B, il vous faudra placer le fichier Javascript A en premier dans le fichier combiné.

Combiner vos images avec les sprites

Combinez maintenant vos images avec ce qu'on appelle des sprites. Le fonctionnement est très simple : il s'agit de regrouper vos images dans une image plus grande. Parmi les outils trouvables sur internet qui génèrent facilement des sprites CSS, je vous conseille Spritegen.

Pour l'utiliser, envoyez lui un fichier zip avec toutes les images à mettre dans le sprite, puis, en bas de la page, cliquez sur "Créer le sprite et le CSS", sans vous occuper de tous les paramètres. Vous obtiendrez donc un sprite et un bout de code CSS. Il ne vous restera plus, dans les balises img, qu'à remplacer le lien vers les anciennes images de votre site par celui vers le sprite et à y ajouter la classe CSS correspondante.

Compresser vos fichiers avec Gzip

Dans la première partie de l'article, vous avez minifié vos fichiers. Il est maintenant temps de les compresser, cela avec des systèmes de compression comme Gzip, qui peut faire penser aux fichiers Zip de Windows, mais pour Apache. Utiliser Gzip permettra de rendre vos ressources jusqu'à 70% plus petites, ce qui n'est en aucun cas négligeable.

Pour autoriser cette compression, rien de plus simple : vous devez créer, si vous n'en avez pas encore, un fichier .htaccess à la racine de votre site internet où vous ajouterez le code suivant :

SetOutputFilter DEFLATE

Mettez en cache vos fichiers

Enfin, pour finir de soulager votre serveur, utiliser la mise en cache. Celle-ci va permettre de stocker vos fichiers directement sur l'ordinateur de vos visiteurs et de ne pas avoir besoin de les télécharger de nouveau à chaque fois qu'une page est chargée. Le temps nécessaire pour envoyer vos pages sera alors considérablement réduit car une partie des ressources, celle qui ne change pas (images, CSS, Javascript), n'aura pas à être renvoyée.

Permettre cette mise en cache est, là aussi, très simple : vous n'avez qu'à ajouter le code suivant dans votre fichier .htaccess.

<filesMatch ".(jpg|jpeg|png|gif|ico|txt|css|js)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Les chiffres après max-age représentent la durée de mise en cache en seconde (2592000 secondes = 30 jours) et public représente le type de mise en cache.

Gérer l'affichage de vos pages dans votre navigateur

La troisième étape pour rendre votre site plus rapide n'a plus lieu au niveau de votre serveur mais au niveau de votre navigateur.

Différer l'analyse de vos codes Javascript

Le premier point consiste à différer l'analyse de vos codes Javascript qui, contrairement à ce que l'on pourrait penser, permet d'éviter le blocage de vos pages.

Par défaut, votre navigateur charge vos pages de manière synchrone, les uns à la suite des autres : il attend la fin du chargement du premier fichier pour lancer le chargement du deuxième, puis il attend la fin du chargement du deuxième fichier pour lancer le chargement du troisième, ainsi de suite jusqu'à ce que tous les fichiers soient chargés.

Charger une page de manière asynchrone revient donc à faire l'inverse, c'est à dire à lancer le chargement de tous les fichiers en même temps. Notez que le chargement asynchrone n'est bon à utiliser que si l'ordre de chargement des fichiers n'a pas d'importance, car un fichier A peut être chargé après un fichier B, même si le fichier A vient avant le fichier B dans votre code source. Dans un problème d'universalité de navigateur, le code à utiliser pour charger vos fichiers Javascript de façon asynchrone serait le suivant :

<script type="text/javascript">
(function() {
var script = document.createElement('script'); script.type = 'text/javascript';
script.src = "script.js";
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);
})();
</script>

Cependant, tous les navigateurs (Chrome, Firefox, Opéra, Safari), excepté Internet Explorer 9 et inférieur, permettent de charger des scripts de manière asynchrone de manière très simple grâce à l'attribut async à utiliser comme suit :

<script type="text/javascript" src="script.js" async="async"></script>

Placez vos fichiers CSS dans la balise head

Il est impératif aussi de placer votre CSS dans la balise head de votre page et non pas dans la balise body. Pour vous rendre compte de l'énorme différence d'affichage que ce changement d'emplacement peut impliquer, faites le teste en local. Ainsi, le temps de mise en page sera instantané si vos fichiers CSS sont placés dans le head, et de quelques secondes, engendrant une nuisance esthétique durant ce temps, si vos fichiers sont placés dans le body.

Chargez vos fichiers Javascript juste avant </body>

Charger ses fichiers Javascript avant la balise fermante body s'avère utile seulement si vous ne chargez déjà pas vos fichiers de manière asynchrone.  Dans ce cas là, les charger à la fin permet de bloquer la page seulement une fois que celle-ci s'est correctement affichée : c'est-à-dire une fois que le HTML et le CSS se sont correctement chargés.

Spécifiez les tailles de vos images

Il est important, pour chaque image, de préciser, au préalable, la dimension de vos images grâce aux attributs height et width comme ceci :

<img alt="Image" src="image.png" width="100" height="100" />

Pourquoi ? Tout simplement, car le fait de spécifier leurs dimensions permet à votre navigateur de connaître, par avance, la taille de vos images, et ainsi de disposer en conséquence les éléments à leur bonne place dans la page.

Bonnes pratiques

La dernière étape pour rendre votre site plus rapide consiste à utiliser des astuces, pas souvent mentionnées par les outils d'analyse de site internet présents sur le web, mais très utiles et très bénéfiques au temps de chargement de votre site.

Préférer le Javascript pur au jQuery

Il est important de privilégier l'utilisation du Javascript pur au jQuery lorsque vous n'avez pas beaucoup de code Javascript dans votre page. Certes, utiliser une bibliothèque comme jQuery est intéressant car cela permet d'écrire moins de code pour faire la même chose. Seulement, vous devez charger la bibliothèque à chaque fois, ce qui peut avoir des conséquences car celle-ci a un poids : 91.4 Kb non compressée et 33.1 Kb compressée pour le jQuery 1.8.

Utiliser du jQuery est seulement intéressant si, pour un même résultat, le poids de votre Javascript pur serait supérieur à celui du jQuery + 33 Kb. Le Javascript pur est alors préférable au jQuery si vous avez peu de code.

Remplacez les @import par des link

Charger un fichier peut se faire de deux façons, avec import ou avec link :

<link rel="stylesheet" href="style.css" />
<style>@import url('style.css');</style>

Et si la deuxième façon peut avoir des avantages, il est préférable d'utiliser la première. D'ailleurs, l'article de Steve Souders explicite très bien cette affirmation. Je ne développerai donc pas plus pour ne pas le paraphraser.

Cet article touche à sa fin : 14 astuces pour rendre 2 fois plus rapide votre site internet viennent peut-être de vous être dévoilés, même s'il en existe sûrement d'autres. N'hésitez donc pas à en partager dans les commentaires si vous en connaissez d'autres.

Recherche

Voici les recherches relatives à cette page :

Commentaires

Qu'en pensez-vous ? Donnez moi votre avis (positif ou négatif) pour que je puisse l'améliorer.