Accélérez le chargement de vos sites en 6 points simples à mettre en oeuvre

L'important pour le visiteur, ce n'est pas la vitesse de chargement de vos pages, mais la vitesse "ressentie". Qu'importe si votre page met 7 secondes à se charger s'ils ne s'en rendent pas compte ! Mais comment accélérer au mieux cette vitesse ressentie ?

Pour répondre à cette question, nous allons devoir séparer vos visites en deux catégories, nécessitant des optimisations différentes : les "premières visites", celles par lesquels vos visiteurs entre pour la première fois sur votre site, puis toutes les autres.

La premiere visite

Les premières visites que font vos utilisateurs seront souvent les plus lentes si vous faites bien votre travail, car toutes les ressources que vous pourrez mettre en cache doivent bien être télécharger au moins une fois. Doit-on pour autant abandonner cette première visite, et se dire "ce n'est qu'une visite, concentrons-nous sur les autres" ? Non ! Il existe diverses méthodes permettant de limiter la casse sur cette première visite.

Extraire son CSS Critique

Le CSS visible sans scroller sur votre page peut-être considéré comme "critique" car c'est la première chose que verront vos visiteurs. C'est lui (ou plutôt son absence) qui sera responsable des flashs blancs que vous verrez parfois lors de l’arrivée sur une page.

Extraire ce CSS critique pour l’insérer directement dans votre Head permet de pouvoir styliser le haut de votre site sans avoir à attendre le téléchargement de vos ressources. Vous pouvez évidemment faire cela a la main, mais sachez qu'il existe des ressources comme critical qui fera ça de manière automatique bien plus rapidement.

Utiliser un CDN

Vos visiteurs vont devoir télécharger vos assets au moins une fois, et rien ne pourra lutter contre ce fait. La solution qui nous reste est donc d'accélérer au maximum ce téléchargement ! L'utilisation d'un CDN permet de servir vos ressources depuis le serveur le plus proche géographiquement de vos visiteurs, et accélère un petit peu ce premier téléchargement. Si vous ne savez pas par où commencer, je vous conseille fortement Cloudflare, dont le plan gratuit est excellent.

Autre point positif, un CDN comme cdnjs est utilisé par de nombreux sites, et il y a de très grandes chances pour que des ressources comme jQuery soient déjà présentes dans le cache de vos visiteurs, ce qui peut faire un gain de temps assez intéressant pour le navigateur de votre visiteur (surtout sur mobile).

Enfin, pensez aussi à compiler et minifier les ressources que vous ne servez pas avec cdnjs, pour limiter le nombre d'appels nécessaires a l'affichage de votre première page.

 

Les appels suivants

Maintenant que nos visiteurs ont charge la page une première fois, le plus gros du travail sera d’éviter a vos visiteurs de re-télécharger des ressources et informations qu'ils ont déjà téléchargé une fois.

Mettre en place un cache

La mise en place d'un cache au niveau de vos ressources permet déjà de limiter grandement les appels et le téléchargement de ressources, ce qui permet un gain de temps considérable. Normalement, votre CND s'occupe de la mise en place de votre cache et des headers "expires" automatique, nous n'en parlerons donc pas ici. En cas de besoin, vous pourrez trouver des informations pour apache sur leur documentation.

Ne pas recharger la page à chaque appel

Les caches permettent de ne pas avoir à retélécharger les ressources. En revanche, les ressources CSS et JS de votre doivent tout de même être lues et traitées par votre navigateur, ce qui prend un certain temps.

Pour éviter cette étape, l'idéal est de ne pas rechercher "totalement" la page, uniquement les parties ayant changé ! Pour cela, vous pouvez utiliser des ressources comme pjax, ou SmoothState. Notez aussi que ce genre de ressources permet d'ajouter des petites transitions de pages, qui dynamise le chargement et donne l'impression de l'accélérer.

Précharger les pages suivantes

Une autre possibilité est de précharger les pages et ressources que vos utilisateurs risquent de visionner en continuant leur navigation. Pour cela, je vous propose InsantClick, une bibliothèque permettant de "deviner" la prochaine page de vos visiteurs, et la charger avant même qu'ils cliquent sur le lien !

Aller plus loins

Cet article est loin d'être exhaustif, il existe de nombreuses autres solutions pour accélérer votre site ! Je me suis contente des solutions simples à mettre en place et ne touchant pas à la structure de votre page. Pour aller plus loin, je vous conseille d'orienter vos recherches vers le lazy loading par exemple.