Découvrez la démarche d'éco-conception et de réalisation de notre site internet

Développement

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

Publié le 22 déc. 2022 - 8 minutes de lecture

Avoir l'objectif d'améliorer la performance de son site web, cela nécessite de connaître quelques points importants : on vous en donne 12 !

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.

Vitesse de chargement et performance d'un site web

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é.

Illustration de chargement
Illustration de chargement

Quelques tips pour améliorer les performances de votre site web

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…).
Illustration d'un personne qui prend un dossier sur lequel il est écrit Webp
Illustration d'un personne qui prend un dossier sur lequel il est écrit Webp

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.

Illustration de deux personnes qui mettent des dossiers dans une fusée
Illustration de deux personnes qui mettent des dossiers dans une fusée

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.

Logos HTML CSS et JS
Logos HTML CSS et JS

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 :

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.

Illustration d'un hébergement de site web dan le cloud, avec un personnage sur son ordinateur
Illustration d'un hébergement de site web dan le cloud, avec un personnage sur son ordinateur

É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).

Les autres petites astuces pour améliorer les performances site web

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…
nettoyage base de donnée
nettoyage base de donnée

Les outils pour améliorer les performances d'un site web

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.

Rencontrons-nous

Pour développe ensemble votre performance digitale

Contactez-nous

Je développe des sites et des business !

Photo de Maxime Lacheré

Sorti de la tête de

Maxime Lacheré

Dans la même thématique...

Animation web : introduction au développement avec CSS, JavaScript et SVG

22 mai 2024

Coder en dur ou « hardcode » : pourquoi est-ce déconseillé ?

22 mai 2024

Les 5 avantages de TypeScript face à JavaScript

16 mai 2024