12 points pour améliorer la performance d’un site web

Développer un site web nécessite de comprendre de nombreux éléments. Si on pense souvent à la création de contenus optimisés, la qualité de la navigation joue également un rôle majeur. En développement web, la vitesse de chargement d'un site représente, par exemple, un enjeu de taille. Découvrez alors comment améliorer la performance de votre site web grâce aux conseils de Lemon Interactive.

Inévitablement, il faut commencer par la vitesse de chargement d'un site, /actualites/data-analytics/kpi-optimiser-site-internet/. Généralement, pour référencer les pages des sites web parmi les résultats de recherche, Google utilise un robot qui est chargé de parcourir tout le site. Plus la page va charger vite, plus le robot va accéder rapidement aux pages et en analyser un nombre plus élevé.

Pour comprendre l'importance du temps de chargement d'un site, rappelons quelques chiffres intéressants et révélateurs :

• Trois secondes de temps de chargement, on a un risque d'abandon de 32 % ;
• Cinq secondes, on passe à 90 % de taux de rebond ;
• Dix secondes, on a 123 % de risque d'abandon.

Au regard de ces chiffres, on comprend aisément que la vitesse de chargement de votre site doit être une priorité.

Il existe plusieurs petites astuces qui permettent d'améliorer les performances des sites Internet. L'équipe de Lemon Interactive vous livre alors 12 conseils à suivre pour optimiser votre site et améliorer son positionnement dans les moteurs de recherche.

Compresser les images et opter pour le format webp

Vous arrêteriez-vous sur un site Internet qui ne comporte que du texte, sans photo ni image ? Probablement pas. Et pour cause, les images rendent la lecture et la navigation plus agréables, et sont donc indispensables à la satisfaction utilisateur.

Pourtant, si elles sont de mauvaise qualité, cet atout de taille pour l'expérience utilisateur peut devenir un vrai fardeau dans votre conception web. En effet, une image trop lourde, ou dans un format inadapté, sera trop longue à charger, et risque de faire fuir l'internaute. Il est alors conseillé d'agir sur 3 points :

• Opter pour le format webp, un format spécifiquement adapté au web, qui permet d'économiser les ressources de votre site ;
• Compresser les images, pour qu'elles soient moins lourdes ;
• Redimensionner les images, afin qu'elles soient parfaitement adaptées à la résolution des écrans modernes (PC, smartphone, tablette…).

Utiliser un CDN

De manière générale, un site web est placé sur un unique serveur, et dispose d'un emplacement sur un hébergeur web qui lui est propre. Chaque internaute doit alors se connecter à ce serveur pour charger le site Internet, ce qui risque de créer, en cas de forte affluence, un goulot d'étranglement.

Pour éviter cela, il est possible d'utiliser un CDN (Content Delivery Network). Cette solution propose de stocker des copies de votre site web sur différents serveurs du monde entier. Ainsi, si un visiteur mexicain se connecte à votre site, il utilisera le CDN le plus proche de lui, tandis qu'au même moment, un internaute suédois en utilisera un autre. Le CDN offre alors deux avantages :

• Le serveur principal n'est jamais surchargé, car le trafic est réparti sur les différents serveurs du réseau du CDN ;
• Le temps de chargement est beaucoup plus rapide pour les visiteurs qui sont loin de vous.

Mettre en cache autant que possible

La mise en cache fait partie des essentiels de l'optimisation d'un site. Concrètement, elle permet, quand vous visitez un site pour la première fois, de mémoriser et stocker temporairement certaines informations statiques du site dans le disque dur ou sur la mémoire de votre PC.

L'intérêt est de ne plus avoir à charger ces fichiers lors de vos prochaines visites, et donc de gagner en temps de chargement.

C'est simple, rapide à mettre en place, et terriblement efficace.

Utiliser la technique de lazy loading

Le lazy loading consiste à charger uniquement des éléments visibles d'un site, comme les images, et de déférer les autres ressources.

Pour rentrer dans les détails, rappelons que pour pouvoir consulter un site web, le navigateur doit charger toutes les ressources nécessaires à l'affichage complet de la page. Le chargement concerne alors absolument tous les éléments, même ceux qui ne sont pas dans la zone visible du site.

Le lazy laoding est alors utilisé par les développeurs pour réduire le temps de chargement d'une page. Pour cela, ils empêchent le chargement inutile des éléments "below the fold" (en-dehors du champ de vision), à l'aide d'un script spécifique.

Optimiser les polices web

Cela peut paraître anodin, mais le choix de la police web a aussi une influence sur le temps de chargement et les performances d'une page web. En effet, les polices web ajoutent des requêtes http vers des ressources externes, ce qui ralentit le chargement et influence indirectement les performances du site. En effet, rappelons que la vitesse de chargement est l'enjeu majeur des Core Web Vitals de Google.

Il est conseillé de privilégier l'usage des polices natives au système, ce qui évite de la télécharger. Et si vous voulez absolument une police personnalisée, mieux vaut essayer de l'héberger localement, pour la mettre en cache et limiter le nombre de requêtes externes.

Minifier tous les fichiers CSS, JS et HTML

La plupart des sites web utilisent des fichiers CSS, JavaScript et HTML. Mais saviez-vous qu'à chaque fois que votre site doit charger un nouveau script, ses performances sont altérées ? Alors, plutôt que de supprimer du code indispensable aux fonctionnalités essentielles de votre site, vous pouvez minifier vos fichiers.

La minification permet de réduire les scripts, en enlevant tous les caractères inutiles, comme les sauts de ligne, les espaces, ou encore les commentaires. Cela permet d'avoir des fichiers moins volumineux, qui prennent beaucoup moins de place, et sont donc bien plus rapides à charger.

Préférer l'usage du protocole HTTP/2

De manière générale, et plus encore si votre site traite de nombreuses images, le protocole HTTP/2 est à privilégier sur votre serveur. En effet, le HTTP/2 permet de télécharger en simultanée plusieurs ressources, tandis qu'avec le http/1 il est nécessaire de combiner les fichiers HTML, c'est-à-dire, de les rassembler pour n'en faire qu'un.

Bien sûr, le téléchargement en simultanée offre de meilleurs résultats en termes de vitesse de chargement, ce qui a un impact certain sur le site.

Placer les scripts en bas de page et charger le JavaScript en différé

Lors de la conception de votre site web, vous devez tenir compte de tout ce qui pourrait ralentir le temps de chargement et bloquer le DOM, l'interface de programmation dédiée aux documents au format SVG, XML et HTML. Et parmi les éléments qui peuvent bloquer la navigation et le rendu de la page, on retrouve le JavaScript.

Alors, pour que la page soit rendue le plus rapidement possible à l'écran de l'utilisateur, vous pouvez adopter des bonnes pratiques avec le JavaScript :

• Placer les scripts en bas de page ;
• Charger le JavaScript en différé, avec les directives defer et async ;
• Minifier votre JS.
• Adopter un langage de programmation comme Vue.JS.

Utiliser des hébergements de qualité

Chez une agence web comme Lemon Interactive, nous faisons appel au prestataire Nexylan, qui permet de réduire le TTFB (Time To First Byte), un KPI qui correspond au "temps de chargement du premier octet".

Ce KPI très important permet de mesurer la réactivité d'un serveur. Pour cela, on tient compte du temps qui s'écoule entre la demande envoyée au serveur et la réception des premières informations par le navigateur.

Tous les fournisseurs d'hébergement ne proposent pas les mêmes offres de performance, aussi est-il important de vérifier ces données avant de faire votre choix. Bien sûr, chaque hébergeur vous dira qu'il est le plus rapide, et les informations seront difficilement vérifiables, alors le mieux est de lire un maximum d'avis pour avoir une idée plus précise des performances proposées.

Éviter les redirections

Il n'y a pas si longtemps, les développeurs conseillaient à leur client de proposer plusieurs versions de leur site web, à la fois pour une navigation desktop ou pour une navigation mobile. C'était la meilleure solution pour optimiser le SEO du site et l'expérience utilisateur (UX).

Aujourd'hui, l'usage du mobile est tel, que cette règle ne s'applique plus. En effet, le trafic mobile a largement dépassé le trafic desktop, et il n'est donc plus vraiment nécessaire d'avoir 2 versions de site. Il est plutôt recommandé d'opter pour une conception web unique, adaptée à la navigation bureau comme aux mobiles, mais également adaptée à toutes les résolutions d'écran.

Cela permet d'éviter les redirections, qui sont autant d'obstacles à franchir pour un internaute, et autant de freins à la vitesse de chargement du site.

Activer la compression GZIP

Nous le savons, plus une page est légère et petite, plus elle se charge rapidement. C'est dans cette logique qu'il est recommandé d'utiliser la méthode de compression GZIP. Elle permet de réduire considérablement la taille des fichiers de votre site web. Le poids d'une page peut alors diminuer de 70 % rien qu'à l'activation de la compression GZIP.

De nombreux hôtes web donnent accès à la compression GZIP, mais si le vôtre ne le fait pas, vous trouverez facilement un plugin à télécharger qui vous offrira cette option intéressante.

Faire attention à utiliser les dernières versions de PHP

Si vous utilisez PHP, il est fortement recommandé d'utiliser sa dernière version. En l'occurrence, notre agence de développement web Lemon Interactive vous suggère de vérifier que vous disposez bien de PHP 8. Il propose une composante, appelée JIT, qui offre de meilleures performances en termes de chiffres de charge serveur (jusqu'à 70 % d'économie par rapport à PHP 5).

Bien sûr, il existe une multitude de petites actions à mettre en place pour optimiser les performances de votre site web. Sans rentrer davantage dans les détails, l'équipe de Lemon Interactive vous invite à :

• Nettoyer votre base de données ;
• Limiter le nombre de modules, notamment si vous utilisez des CMS comme WordPress pour un site vitrine ou Prestashop pour un e-commerce ;
• Mettre le site à jour régulièrement…

Il existe de nombreux outils pour optimiser les performances de votre site web, gratuits et payants. Parmi les grands noms, on reconnaît alors Google Page Inside, Lighthouse, GTmetrix... Sur la partie SEO, l'optimisation de performance peut se faire avec Dareboost, par exemple.

Votre site Internet met un temps fou à charger, et cela se ressent sur votre site internet et son trafic ? Confiez votre projet aux équipes de Lemon Interactive, et nous nous chargerons de l'optimisation des performances de votre site web.