Optimiser la vitesse de chargement de son site internet est primordial aujourd’hui. En effet, la vitesse est devenue un critère clé pour l’algorithme Google ; et pour les utilisateurs qui attendent une réactivité toujours plus surprenante. Plus le site va être rapide et fluide, plus l’expérience utilisateur sera importante ; donc plus de probabilité pour gagner des clients.
Il existe plusieurs outils pour mesurer la vitesse de chargement d’un site. En voici un : https://www.webpagetest.org/
Nous vous dévoilons quelques conseils pour optimiser la vitesse de chargement de votre site.
Le design
Plus un site est simple, avec des contenus distincts et non surchargés, plus le site sera rapide. Ce travail s’effectue en amont, au moment de la conception du site ou lors d’une refonte puisque l’arborescence sera impactée.
L’éco-conception
A l’agence, nous éco-concevons nos (vos) sites internet. Mais concrètement, qu’est-ce que cela signifie ? L’éco-conception web implique que le site consomme moins d’énergie et est plus respectueux de l’environnement. C’est un peu la manière de dire que le site est écologique (et économique !).
Le dernier site en date construit selon ce principe est : A2MAC1. En amont du projet, il nous a été confié la charte graphique de la marque qui plantait le décor en la matière : choix des couleurs les moins consommatrices, choix d’une typo système, visuels formés grâce à des symboles universels informatique pour réduire l’énergie consommée. Rien n’a été laissé au hasard, c’est alors armés de ces principes, nous avons ensuite continué l’éco-conception du projet en développant ce site en headless CMS. A2MAC1 souhaitant réellement avoir un site peu énergivore pour leur empreinte carbone, le pari est réussi : simple, épuré et rapide, ce site offre une expérience utilisateur nouvelle tout en étant respectueux de l’environnement.
Les avantages de l’éco-conception sont les suivants :
Une solution « green » est moins gourmande en ressources et donc plus rapide, pour une meilleure expérience utilisateur.
- Meilleure visibilité.
- Maintenance facilitée.
- Design aussi épuré que possible.
- Navigation simplifiée.
- Ergonomie intuitive.
- Réduction des bugs.
- Hébergement plus sécurisé et plus vert.
- Temps de chargement réduit.
Optimiser la structure du site
Le site est composé de deux familles d’éléments :
- le back-office où tous les contenus du site sont intégrés;
- et le code source. Ce code source est la fondation du site. Dans ce code il y a du HTML, CSS, et même du JS pour certains.
Tous ces éléments peuvent être optimisés pour le chargement !
Les plugins
Ahhh les plugins, ils sont bien pratiques, mais prennent de la place ! Que vous soyez sur WordPress, Magento ou autre, un plugin est une extension qui vient se greffer au code html/css, soit le corps du site. Dès qu’une page du site se charge, l’ensemble des plugins doit se charger également.
Alors, moins il y aura de plugins, plus votre site sera rapide !
Simplifier le code
Il est important de noter que chaque balise HTML a son utilité. Là où le code peut être optimisé c’est sur toutes les balises communes, comme les H1, H2 … où une seule balise regroupe toutes les propriétés similaires. Le code s’alourdit petit à petit avec tout le contenu du site. Alors optimiser les espaces ou retours à la ligne allégera considérablement le code ! Et si le code est allégé, le chargement aussi. En plus, un code plus clair et optimal est récompensé par le référencement.
Les médias
Les médias prennent une place importante sur le site et sur la base de données. Nous relevons deux problèmes liés aux médias. Le premier est le poids. Si les images, vidéos ou encore les PDFs sont trop lourds, ils vont alourdir le chargement de la page. Toujours faire attention à la taille et au poids des médias. Le deuxième problème des médias est leur quantité. Il ne faut pas en abuser, puisque chaque élément doit être chargé sur le site. Alors plus il y en a, plus le chargement sera long.
Le format Webp
Le format Webp est un nouveau format encore plus léger que le png. C’est un format inventé par les équipes Google pour optimiser au maximum les images. La qualité d’image est conservée tout en réduisant le poids de 30%. Ce nouveau format prend en charge les images animées et les fonds transparents, ce qui remplacera les GIF et PNG.
Si ce format est peu connu, il se démocratise depuis que la majorité des navigateurs le supportent. Les CMS (WordPress, Magento, Kirby) suivent la marche et acceptent ce format via des plugins, ou nativement pour les dernières versions.
Et Google favorise son format dans son algorithme, donc si vous utilisez des images webp, le score SEO sera performant ! En plus, nous vous conseillons de faire le tri régulièrement, de supprimer les doublons par exemple.
L’embed pour les vidéos
Les vidéos deviennent vite assez lourdes, alors pourquoi ne pas simplement insérer un lien url ? Si les vidéos sont hébergées sur youtube et/ou viméo, il suffit d’insérer leur lien via le code <embed> et le tour est joué !
Parlons-en ensemble 🙂
Optimiser la délivrance de contenu
Choisir un CDN
Un CDN, Content Delivery Network, est un ensemble de serveurs dispatchés à plusieurs endroits pour stocker aléatoirement les données du site internet. Ce système permet de gagner en temps de chargement du site. Les serveurs sont plus sécurisés et ne sont pas submergés de requêtes.
Le headless cms
Le headless CMS est une nouvelle façon de concevoir un site internet. Le stockage et la livraison du contenu sont délivrés via deux services distincts. Plus simple et plus rapide, le headless CMS remplace petit à petit les systèmes traditionnels. Il offre des performances optimisées en supprimant le temps de chargement et permet de créer des sites beaucoup plus interactifs.
Le site static
Une fois que tous les contenus sont renseignés en back-office, le site static est généré et ne va plus bouger. C’est-à-dire que le site n’envoie aucune requête au serveur, le site ne se connecte à rien. Tant que le site n’est pas régénéré en back-office – pour une modification de contenu ou une mise à jour – le site restera inchangé. L’avantage est bien entendu pour le gain de temps de l’affichage des pages. Mais aussi pour la sécurité du site.
Conclusion
La vitesse de chargement d’un site dépend d’un ensemble d’éléments. Si tous ces éléments sont appréhendés et traités séparément, le site gagnera en vitesse, fluidité et référencement ! Pour une vitesse de chargement encore plus optimale, optez pour un headless CMS ! Cette nouvelle technologie est incroyable, fiable et sécurisée. Nous saurons vous guider pour ce choix technique dans le cadre d’une refonte 😉
Retrouvez l’ensemble de nos articles sur notre blog !
