Comment optimiser sa performance web ?

Aujourd’hui, la vitesse de votre site web est le moteur de votre succès en ligne. Elle est devenue un facteur décisif qui impacte directement votre taux de conversion, votre classement dans les moteurs de recherche et la fidélité de vos utilisateurs.

Atteindre une performance d’exception n’est pas un hasard ; c’est le résultat d’une stratégie d’optimisations précises, appliquées à chaque composant de votre architecture technique.

D’ailleurs si vous êtes intéressé par les KPI de performance, je vous invite à lire cet article sur l’influence de la web performance sur l’attractivité de votre site.

Analysons ensemble comment construire cette stratégie gagnante.

1. D’abord les ressources (assets)

Chaque octet économisé représente quelques fractions de milliseconde sur la vitesse de chargement. Le poids des ressources est souvent le principal coupable de la lenteur d’un site.

Vous rêvez d’un joli carrousel sur la home de votre site avec vos meilleures photos en haute définition et non compressées ? Il faudra faire quelques compromis…    

Les images, + que de la compression

Actuellement, les formats de nouvelle génération permettent de faire beau, qualitatif et léger ! L’utilisation de formats comme WebP et AVIF est à privilégier.

En effet, ils offrent une compression bien supérieure (lossy et lossless) à leurs ancêtres JPEG et PNG. Pour une transition en douceur, utilisez la balise <picture> qui permet au navigateur de choisir le format le plus optimisé qu’il supporte tout en assurant une compatibilité maximale. Je vous mets un exemple ci dessous.

<picture>
<source srcset= ¨image.avif¨ type=¨image/avif¨>
<source srcset=¨image.webp¨ type=¨image/webp¨>
<img src=¨image.jpg¨ alt=¨Description de l’image¨ loading=¨lazy¨ width=¨60%¨ height=¨auto¨>
</picture>

Une deuxième astuce consiste à utiliser le lazy loading. C’est une technique d’optimisation qui consiste à retarder le chargement de certaines ressources (le plus souvent des images, des vidéos ou des iframes) jusqu’à ce qu’elles soient sur le point d’être affichées à l’écran de l’utilisateur.

En d’autres termes, au lieu de tout charger d’un coup, la page ne charge que ce qui est immédiatement visible. Le reste est chargé au fur et à mesure que l’utilisateur fait défiler la page (scroll).

Sans le lazy loading, lorsqu’un utilisateur arrive sur une page, le navigateur essaie de télécharger toutes les images, y compris celles qui se trouvent tout en bas de la page et qui sont donc invisibles au départ.

La page met plus de temps à devenir interactive car le navigateur est occupé à télécharger des ressources inutiles à ce moment-là.

Si l’utilisateur quitte la page sans jamais faire défiler jusqu’en bas, il aura téléchargé des données pour rien. On considère que c’est un gaspillage de bande passante.

La méthode la plus simple pour implémenter le lazy loading pour les images et les iframes est d’utiliser un attribut HTML natif. Cet attribut est évidemment supporté par tous les navigateurs modernes.

Exemple de code :

<img src=¨mon-image.jpg¨ loading=¨lazy¨ alt=¨Description de l’image¨ width=¨80%¨ height=¨auto¨>

width=¨…¨ et height=¨…¨ : ces attributs sont tout aussi importants. Ils permettent au navigateur de réserver l’espace nécessaire pour l’image avant même qu’elle ne soit chargée. Sans eux, la page pourrait « sauter » ou se réorganiser au moment où l’image apparaît.

Cela dégrade l’expérience utilisateur (ce qu’on appelle le Cumulative Layout Shift – CLS).

Pour des besoins plus complexes ou pour supporter de très vieux navigateurs, il est aussi possible d’implémenter le lazy loading avec du JavaScript, notamment grâce à l’API Intersection Observer.

La page s’affiche beaucoup plus vite, ce qui améliore les métriques de performance comme le Largest Contentful Paint (LCP).

Une page plus rapide est une page plus agréable à utiliser, ce qui réduit le taux de rebond.

Code ► la chasse au superflu

Dans un premier temps activez la minification (HTML, CSS, JS). Ce processus automatisé supprime tous les caractères inutiles (espaces, commentaires, sauts de ligne) du code source sans en altérer la fonctionnalité.

Des outils comme Webpack, Jetpack s’intègrent parfaitement dans les chaînes de compilation modernes et rendent un code bien plus léger.

La notion de tree shaking (élagage) est moins évidente et demande plus de connaissances. La technique réside en la suppression du code inutilisé. Des bundlers modernes comme Webpack ou Rollup peuvent analyser les dépendances de votre code JavaScript et éliminer les exports qui ne sont jamais utilisés.

Pour le CSS, des outils comme PurgeCSS analysent vos fichiers HTML et JS pour supprimer les sélecteurs CSS qui ne sont pas appliqués.

2. Réduisons les requêtes HTTP…

Chaque requête a un coût et réduire leur nombre reste une stratégie gagnante !

Dans les techniques disponibles, nous avons le bundling. il s’agit de regrouper vos modules JavaScript ou CSS en un ou plusieurs fichiers (bundles).

Cependant, l’approche moderne n’est plus de tout mettre dans un seul fichier géant.

On va privilégier le code splitting (fractionnement du code) qui est une technique plus intelligente.Le bundler (ex: Webpack) crée des « chunks » (morceaux) logiques.

Le code critique pour le rendu initial est chargé en premier tandis que les fonctionnalités secondaires sont chargées dynamiquement à la demande.

L’utilisation du CSS sprites, pour les icônes et petits éléments graphiques, les sprites restent pertinents.

Il s’agit de combiner plusieurs images en une seule feuille de sprites.

On utilise ensuite la propriété CSS « background-position » pour afficher la partie de l’image que l’on souhaite.

Cela transforme des dizaines de requêtes potentielles en une seule.

css
.icon {
background-image: url(‘sprite.png’);
background-repeat: no-repeat;
width: 24px;
height: 24px;
}

.icon-home {
background-position: 0 0; / Position de l’icône « home » dans le sprite /
}

.icon-settings {
background-position: -30px 0; / Position de l’icône « settings » /
}

3. Une petite mise en cache ?

Il y a une règle simple en optimisation de performance :

Ne demandez jamais deux fois la même ressource si ce n’est pas nécessaire.

D’abord voyons le cache navigateur (browser caching). il s’agit de configurer correctement l’en-tête HTTP. Cette configuration définit des instructions précises pour le navigateur.

Pour les ressources statiques (CSS, JS, images) qui changent rarement, une stratégie agressive est recommandée.

Exemple de configuration (via .htaccess ou configuration serveur) :
Cache-Control: public, max-age=31536000, immutable

public : mis en cache par les navigateurs et les proxys.
max-age=31536000 : indique au navigateur de conserver la ressource pendant un an.
immutable : Indique que le fichier ne sera jamais modifié.

Ensuite, vous pouvez tester le cache côté serveur (server side caching). Pour les sites dynamiques, générer une page à partir d’une base de données est coûteux. Le cache côté serveur stocke une version statique de la page ou de ses fragments.

Des solutions comme Varnish ou les mécanismes de cache intégrés dans les frameworks (Symfony, Laravel) et les CMS (WordPress avec des plugins comme WP Rocket) ou encore l’utilisation de  Redis ou Memcached pour mettre en cache des objets et des requêtes de base de données réduisent drastiquement le temps de réponse du serveur (Time to First Byte – TTFB).

4. – de distance | + de vitesse

La latence du réseau est une loi de la physique, mais on peut la contourner.

La première chose à mettre en place est un CDN (Content Delivery Network). Sa fonction est de distribuer des copies de vos ressources statiques sur un réseau de serveurs répartis dans le monde entier.

Lorsqu’un utilisateur demande une ressource, elle lui est servie depuis le serveur géographiquement le plus proche (appelé « Edge Server »). Ce service rapide réduit ainsi la latence de manière spectaculaire. C’est un indispensable pour une audience internationale.

Ensuite vous pouvez vous intéresser aux protocoles HTTP/2 et HTTP/3. L’activation du protocole HTTP/2 sur votre serveur est une étape nécessaire. Sa principale innovation est le multiplexage qui permet d’envoyer plusieurs requêtes et réponses en parallèle sur une seule connexion TCP.

Cela élimine le problème du « head of line blocking de HTTP/1.1. On peut faire l’analogie avec une route à une voie avec un véhicule qui bloque cette voie. Tous les véhicules se retrouvent bloqués. C’est le principal problème du protocole HTTP/1. Si un paquet est bloqué, tous les paquets sont bloqués. 

Il faut voir le multiplexage du HTTP/2 comme une autoroute à plusieurs voies. Même s’il y a un ralentissement, il y a toujours des échanges de paquets qui s’effectuent.

Le HTTP/3 est apparu en 2022. Il est basé sur le protocole QUIC (UDP) et va encore plus loin en réduisant le temps d’établissement de la connexion et en améliorant la gestion des pertes de paquets.

5. L’essentiel ► votre hébergement

Toutes ces optimisations reposent sur des fondations solides.

Le choix d’un hébergement performant est la pierre angulaire de votre stratégie. Privilégiez des serveurs équipés de disques rapides avec une allocation généreuse en RAM et une configuration logicielle moderne (ex: Nginx, qui est souvent plus performant qu’Apache pour servir du contenu statique ou une version récente de PHP avec OPcache activé).

Un serveur dédié ou un VPS de qualité offrira des performances bien plus stables et prévisibles qu’un hébergement mutualisé bas de gamme.

Retenons que l’optimisation des performances d’un site web est un processus continu d’analyse, d’implémentation et de mesure.

Chaque axe d’amélioration apporte des gains qui, une fois cumulés, transforment radicalement l’expérience utilisateur et le succès de votre projet web.