Améliorer la vitesse de chargement d'un site web

Webmastering

Améliorer la vitesse de chargement d'un site web

Outre une expérience utilisateur plus agréable, la vitesse de chargement d'un site web est intégrée aux critères de référencement. De plus, les connexions massives depuis un smartphone en 3G ou 4G se faisant omniprésentes, la performance devient un élément important dans la conception d'un site web.

Limiter les composants et les animations

Avez-vous réellement besoin de cette animation, de ce carrousel, de ce nuage de tags ou de ce calendrier ? Cela fait joli, mais n'a probablement strictement aucun intérêt pour le visiteur. C'est, d'ailleurs, un fréquent cheval de bataille entre les clients et les développeurs.
Pour faire simple : simplifiez, épurez, allez à l'essentiel.

Épurer le code source

Trop souvent, le code source d'un site web ressemble à un vrai champ de bataille : imbrication hallucinante de balises, bloc vide, accumulation de classe, etc.
Nettoyer le code HTML des éléments superflus et utiliser les techniques modernes de mise en page comme flex ou grid apparaît comme une bonne base de départ. D'autre part, la compatibilité avec les anciens navigateurs (Internet Explorer en particulier) est-elle encore nécessaire ? Vérifiez les stats pour vous en convaincre !

Optimiser la feuille de style

  • Si vous utilisez un framework (souvent fourni en Sass/Less), n'intégrez que les éléments que vous allez utiliser : à quoi bon charger la gestion des tableaux si vous n'en avez pas sur le site
  • Polices d'icônes/icon fonts : utilisez un générateur de police personnalisé comme IcoMoon. En effet, pourquoi charger les 7 000 icônes de Font Awesome (sans compter la feuille de style qui va avec), alors que vous n'en utilisez qu'une ou deux
  • D'ailleurs si vous n'avez que quelques icônes, préférez l'utilisation du SVG
  • Limitez l'utilisation de police de caractères exotiques
  • Regroupez tout les CSS en un seul fichier

Optimiser le JavaScript

  • Réfléchissez avant d'inclure une librairie JavaScript : en avez-vous vraiment besoin alors que quelques lignes de code en JavaScript natif suffisent ?
  • Passez en Vanilla JS (10 à 25 fois plus rapide que jQuery)
  • Pour les composants/scripts tout prêts, vérifiez qu'ils ne comprennent pas des dizaines d'options différentes que vous n'allez jamais utiliser

Minifier et compresser les CSS et le JavaScript

Minifiez systématiquement les fichiers CSS et JavaScript. Par exemple la feuille de style de base de ce site fait 90 kilo-octets, après minification, elle fait 62 kilo-octets. Quelques outils en ligne si besoin :

Vous pouvez aller encore plus loin en utilisant la compression Gzip. En reprenant l'exemple de la feuille de style de base de ce site, on passe de 90 kilo-octets à 16 kilo-octets. Sur de très gros site le gain peut-être assez impressionnant !
Article complémentaire sur alsacreations
Un outil en ligne : cnvyr.io

Optimiser les images

  • Utilisez des SVG pour vos icônes et logo lorsque cela est possible
  • Utilisez les attributs srcset et sizes pour laisser les navigateurs décider quelle est la meilleure image à utiliser en fonction de la résolution et de la densité de pixels
  • Modifiez la qualité des images JPEG : selon les cas, passer d'une qualité de 90 à 50, voir moins, ne pose pas de soucis

Réduire le nombre de requêtes HTTP externes

Les requêtes externes peuvent être source de ralentissement : il suffit que le serveur en question soit un peu surchargé et c'est votre site qui en pâtit. Voici les cas les plus fréquents :

  • Les webfonts : en plus d'en limiter fortement l'usage, il est préférable de les héberger sur le même serveur que votre site
  • Réseaux sociaux : utilisez des boutons de partage personnalisés plutôt que des widgets (cela évitera également l'implémentation de cookies externes)
  • Contenu embarqué (Vidéo YouTube, Tweet, etc) : préférez un simple lien à l'intégration (même avantage pour les cookies que le point précédent)
  • Analytics : avez-vous réellement besoin de stats avancées ? Si vous appliquez strictement le RGPD, elles seront faussées, une bonne partie des visiteurs n'acceptant pas le traçage. D'autre part, chez Google Analytics, l'anonymisation des adresses IP s'effectue uniquement sur les 3 derniers chiffres au lieu des 6 derniers (ce qui est incompatible avec le RGPD).
    Les stats fournies par votre hébergeur ou un script fait maison basé sur les IP réellement anonymisées est peut-être suffisant !
    Pour les sites web ayant des besoins avancés (e-commerce par exemple), d'autres solutions sont possibles comme Matomo (anonymisation sur 2 ou 3 bytes)
  • Publicité : mise à part les liens sponsorisés, et à moins de mettre en place votre propre régie publicitaire, il n'existe que peu de remède si ce n'est accepter les solutions proposées par les régies.

Articles en complément :

Extensions et thèmes des CMS

Que vous exploitiez WordPress, Joomla, Drupal ou autres, faites attention aux extensions et thèmes que vous utilisez : certains sont très gourmands en ressources, mal conçu ou pas du tout optimisés. Des tests préalables sont indispensables ainsi qu'un suivi des performances. N'hésitez pas à passer par des scripts sur-mesure spécifiquement adaptés à vos besoins.

Bien choisir son hébergement

L'hébergement, c'est la clef ! Il doit être en adéquation avec, d'une part l'infrastructure du site et d'autre part l'afflux de visiteurs. Des sites sous WooCommerce ou Magento peuvent demander un hébergement puissant. N'hésitez pas à prendre une formule plus performante que ce que vous prévoyez pour avoir une marge de manœuvre. D'autre part, les hébergements proposant des SSD sont à privilégier : ils sont plus rapides, en particulier avec les bases de données.

Utiliser un cache HTML

Pour éviter que le serveur n'ait à reconstruire le contenu pour chaque visiteur, il est possible d'enregistrer les pages d'un site web sur le serveur, il n'y a alors pas ou peu de requêtes dans la base de données. La vitesse de chargement est ainsi considérablement améliorée. Cela peut s'effectuer sur tout ou partie d'une page.
C'est une solution à fortement envisager pour la page d'accueil.
Pour les CMS, des extensions toutes prêtes sont souvent disponibles.

Utiliser une API

Si vous utilisez des CMS assez gourmand, pourquoi ne pas envisager les API pour construire votre site (tout ou partie). Par exemple, WordPress et WooCommerce sont utilisés pour l'administration, le front static étant généré à partir des données des API, puis enregistré et mis en cache sur le serveur.

Articles en complément :

Utiliser un cache CDN

Pour les sites à très fort trafic, il est possible d'utiliser un cache CDN. Le contenu de votre site est stocké sur des serveurs à proximité de l'internaute et envoyé directement vers le navigateur sans passer par votre propre serveur. Le gain de chargement s'en trouve grandement amélioré, en particulier dans le cas de site à vocation internationale.
Article complémentaire : Les avantages et le fonctionnement du cache CDN

Outils de tests :