Héberger ses ressources statiques (et gagner gros en performances)

Dans la jungle des opportunités d’optimisation technique, il en est une que l’on entend que trop rarement et qui pourtant permet des gains immédiats, sans avoir à fournir des efforts colossaux. Il s’agit de l’hébergement des ressources dites statiques, c’est-à-dire n’étant pas amenées à changer dynamiquement (exemples ci-après). Prêt à accélérer le site ? C’est parti :

Statique contre dynamique

Les ressources statiques sont toutes les ressources qui n’ont pas à être transformées, elles ne sont pas spécifiques et peuvent être envoyées à l’utilisateur telles quelles. Par exemple : des images ou un fichier index.html.

Les ressources dynamiques sont celles qui sont spécifiques à l’utilisateur qui en fait la demande, et doit souvent exécuter du code, effectuer des appels à la base de données, etc… Par exemple : un fichier JSON.

Les fichiers statiques sont ceux qui nous intéressent ici.

Gaspillage externe

Énormément de ressources statiques à l’image des librairies ou des balises analytiques sont chargées à partir d’adresses publiques. C’est simple à mettre en place et permet l’utilisation d’un CDN.

Vous les avez forcément croisées à un moment ou à un autre… :

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js">
<script src="https://www.google-analytics.com/analytics.js">

… et bien d’autres.

Pourtant, cela présente un problème majeur : si leurs serveurs tombent en panne ou s’ils souffrent de ralentissements, votre site va également en pâtir. C’est d’autant plus sérieux si certaines de ces ressources bloquent le rendu. Cela implique donc une perte régulière de vitesse et de performance et, in fine, une baisse des conversions.

Autre chose agréable : ces ressources externes posent également des problèmes de sécurité (si les fournisseurs sont atteints). On peut alors vous servir toutes sortes de code vérolé… bon plan !

Méthode

Voici maintenant les étapes à suivre pour évaluer les opportunités sur son site et avancer :

• Explorer différents types de page, ouvrir Chrome Dev Tools > Elements / Coverage / Performance et chercher les scripts qui sont chargés à partir d’une adresse externe.
  
• Transférer le plus de ces ressources sur votre hébergement à vous et configurer la mise à jour automatique de ces fichiers, par exemple en programmant une tâche Cron ou en utilisant un plugin comme RankMath qui va le faire pour vous.
  
• Pour toutes les ressources que vous ne pouvez pas héberger seul, il est possible d’utiliser un attribut Preconnect qui va ouvrir une connexion vers la source extérieure de manière préventive. Par exemple : <link rel="preconnect" href="https://code.jquery.com" />, facilitant ainsi son chargement.

Et voilà, c’est fait ! Les gains sont immédiats et substantiels.

Pour ceux qui désirent creuser le sujet, le superbe article d’Harry Roberts est une lecture incontournable.