Vous souhaitez accélérer votre site web pour améliorer votre expérience utilisateur, votre SEO et vos taux de conversion et vous cherchez la meilleure solution pour optimiser vos temps de chargement ? Vous pensez pouvoir tout réaliser en interne, ou au contraire, vous aimeriez confier cette mission à un prestataire, mais vous craignez de perdre la main sur votre infrastructure ?
Voici un tour d’horizon des options possibles, du 100 % fait maison à l’externalisation, et les avantages et limites de chacune.
Optimiser la vitesse des pages : les solutions en interne
Vous pouvez confier l’optimisation du Frontend de votre site web à vos équipes techniques en interne, moyennant du temps, des ressources et de l’expertise pour travailler votre code. Voici quelques pistes pour vous guider (vous en trouverez aussi chaque mois dans notre newsletter mensuelle, abonnez-vous tout simplement ici).
Définir un budget performance
Avant d'entamer un chantier webperf, il faut fixer un Budget Performance afin de définir les objectifs à atteindre et les seuils à ne pas dépasser.
Comment se repérer ? Les KPI peuvent varier selon votre point de départ et votre marché.
Vous pouvez par exemple vous référer au classement webperf mensuel du JDN. Ce palmarès donne un ordre d’idée, par secteurs (e-commerce, médias et voyage), des performances sur mobile des sites internet les plus visités en France : Speed Index, Time To Interactive, poids des pages...
Par exemple, Rue Du Commerce est parvenu à atteindre la tête du classement en appliquant les bonnes pratiques et techniques d’optimisation des temps de chargement dans la durée, en s’appuyant sur notre expertise.
Vous pouvez aussi fixer des seuils de performance brute, comme l’a fait Rossignol qui souhaitait diviser son Speed Index par 10, ou iDGARAGES qui projetait de le faire baisser de 45 %. Les métriques sont nombreuse, elles concernent chacune des aspects différents de la vitesse (affichage, interactivité, temps de réponse serveur…) - vous devez avant tout identifier quels sont vos propres leviers d’amélioration et vos enjeux.
Vous travaillez votre SXO (SEO + UX) ? Google, qui accorde de plus en plus d’importance à la vitesse pour le SEO, indique des seuils à ne pas dépasser pour ses Core Web Vitals. Ce sont 3 métriques webperf clés pour évaluer l’expérience utilisateur d’un site web selon Google, et qui entrent en compte dans son algorithme de classement des résultats de recherche :
- un score inférieur à 100 ms pour le First Input Delay,
- un Cumulative Layout Shift inférieur à 0.1,
- un Largest Contentful Paint qui intervient dans les 2,5 premières secondes après le début du chargement de la page.
Mais comment vous mettre en ordre de bataille pour atteindre les objectifs visés pour accélérer vos pages ?
Quelles ressources pour optimiser les performances d’un site web
La vitesse n’est pas seulement la responsabilité des équipes techniques !
Marketing, E-commerce, Produit… Toutes les équipes doivent être investies pour un site internet rapide, sur mobile comme sur desktop.
Travailler main dans la main, c’est l’assurance de performances maintenues sur le long terme, comme c’est le cas au Parisien où les équipes produit et IT se coordonnent systématiquement avant la mise en ligne de nouvelles fonctionnalités. Ainsi, les risques pour la performance et la sécurité sont anticipés, et l’impact sur chaque page est surveillé également a posteriori.
Les optimisations essentielles pour un site internet rapide
Les leviers d’amélioration de la vitesse sont nombreux.
Vous devez prendre soin de votre Backend en choisissant une solution d’hébergement adaptée à vos besoins, et appuyez vous sur un CDN.
Ces dispositifs doivent s'accompagner d'optimisations côté Frontend pour des résultats optimaux. C’est la démarche qu’a suivie Conforama, dont les équipes techniques se sont rendu compte que le Backend seul ne permettait pas d’améliorer les performances autant qu’espéré, c’est pourquoi elles ont travaillé également côté Frontend pour améliorer encore la vitesse de chargement.
Parmi les techniques de web performance essentielles- que vous connaissez et appliquez peut-être déjà :
- optimisation des fonts et des fichiers images (compression, lazyloading…),
- concaténation et minification des ressources (fichiers HTML / JS / CSS),
- stratégie de cache,
- gestion des Third Parties,
- optimisations HTTPS...
Si vos équipes sont structurées et formées pour, toutes ces optimisations peuvent être appliquées en interne.
Gardez toutefois à l’esprit que c’est un travail de longue haleine, et qu’un accompagnement expert ponctuel ou régulier peut être nécessaire pour vous orienter vers les bonnes pratiques et les techniques les plus à jour. En effet, elles évoluent vite, et cela nécessite une veille, de la recherche et des ajustements constants.
Dans le cas où vous n’avez pas les ressources en interne, la plupart des CMS - si vous en utilisez un - proposent des plugins dédiés à la vitesse, voici quelques exemples.
Les plugins et extensions pour améliorer la vitesse
Les extensions Magento
- Apptrian Minify. Cette extension Magento permet de supprimer tous les caractères inutiles des fichiers HTML, il gère l’inlining des CSS et des JS, et propose un mode Cache Compatibility. L’installation est gratuite mais le support est payant.
- Apptrian Image Optimizer. Ce plugin Magento optimise les .GIF, .JPEG et .PNG avec le format de compression Guetzli (attention, c’est un format de compression avec perte).
- Defer Parsing of JavaScript. Ce plugin Magento s’active depuis le Backend et permet d’exécuter les scripts HTML et CSS avant le JavaScript.
Les plugins WordPress / WooCommerce
- WPRocket. Ce plugin WordPress est le plus populaire pour accélérer un site WordPress. Il intègre un système de cache, la gestion des fonts et des Third Parties.
- Imagify. Ce plugin d’optimisation des images pour WordPress permet de réduire leur poids, de les recadrer à la volée, de définir un niveau de compression, et de restaurer les médias dans leur version originale.
- Perfmatters. Ce plugin WordPress permet d’optimiser la vitesse des pages des sites WordPress, notamment en se débarrassant de certains fichiers (emojis, JS, jQuery), en priorisant le chargement des scripts, et en activant DNS Prefetch ou encore Preconnect...
Les addons Prestashop
- Page Cache Ultimate. Cet addon Prestashop permet de mettre les pages dans le cache du navigateur pour un chargement plus rapide.
- Image WebP Compression. Cette extension Prestashop compresse les images au format WebP et prend aussi en charge le lazyloading pour ne charger que les éléments à afficher dans le viewport.
- Module Super Speed. Ce module Prestashop propose un package de plusieurs optimisations : cache, optimisation des images, de la base de données Prestashop, minification HTML/JS/CSS et compression Gzip.
Tous ces plugins permettent d'améliorer certains aspects des performances. Si vous êtes totalement autonome sur l’installation et la désinstallation, vous aurez remarqué que chacun ne couvre pas toutes les problématiques de vitesse possibles et imaginables.
Pour une approche complète, mieux vaut vous diriger vers une solution tout-en-un de Frontend Optimization, afin d’être sûr de répondre à tous vos besoins, mais aussi que les optimisations fonctionnent bien les unes par rapport aux autres tout en étant automatisées.
Accélérer automatiquement ses pages web et soulager les équipes techniques
Le CDN : un fondamental de la webperf
Si vous vous préoccupez de vos temps de chargement, vous utilisez peut-être déjà un CDN. C’est la base pour rapprocher le contenu des utilisateurs, mais il ne suffit pas à lui seul pour accélérer des sites web. Pour des pages vraiment rapides, il vous faut optimiser votre Frontend, et cela passe par les techniques d’optimisation des performances que nous avons abordées un peu plus tôt.
Mais comment faire si vos équipes ne sont pas formées ou expertes en webperf ? Ou si elles n’ont tout simplement pas le temps de s’occuper des temps de chargement ? Soulagez-les !
Il suffit pour cela d’opter pour un CDN Next Generation qui automatise l’application des bonnes pratiques et des techniques webperf.
C’est le choix qu’à fait le retailer Celio, dont toute la stack technique repose sur notre CDN Next Generation. La DSI reste totalement autonome dans la gestion de son infrastructure, et profite en même temps d’un service de CDN et d'une solution SaaS d'optimisation du Frontend, avec un système de cache avancé, l’optimisation des images... De plus, la plateforme e-commerce reste stable même pendant les pics de charge… Le tout pour un budget maîtrisé. Les équipes techniques sont ainsi soulagées, et les clients plus engagés sur un site qui offre une expérience utilisateur de meilleure qualité (vitesse, sécurité et disponibilité).
Performance web : accompagnement et expertise pour un site rapide
L’un des autres avantages d’une solution SaaS d’accélération des pages web est l’accompagnement par des experts du sujet.
Comme nous l’indiquions un peu plus tôt, les bonnes pratiques et les techniques webperf sont en constante évolution, et il faut pouvoir se tenir à jour par une veille attentive.
Chez Fasterize, c’est précisément le rôle des Customer Success Engineers qui accompagnent les clients depuis les tests jusqu’au bilans et rapports réguliers pour challenger les performances en continu.
Sachez qu’une solution SaaS peut se révéler utile même dans des structures de taille importante, où les ressources peuvent malgré tout ne pas avoir la bande passante pour se consacrer en continu à l’amélioration de la vitesse.
C’est pour cette raison que But se repose sur notre moteur d’optimisation : afin que les équipes ne reprennent pas indéfiniment le même travail à chaque évolution ou modification du code sur le site. Résultat : un site rapide, sécurisé, et un déploiement en 3 semaines de plusieurs chantiers que cet e-commerçant avait planifié sur 12 mois.
C’est également le choix qu’a fait Orange Marine : en automatisant l’optimisation de son Frontend, la DSI de ce spécialiste des équipements nautiques a aussi optimisé son budget, et ses taux de conversion ont augmenté de 5 %, grâce à un site plus rapide sur mobile et sur desktop.
En conclusion:
- vous pouvez accélérer votre site en interne, mais cela demande du temps et des ressources ;
- vous pouvez vous reposer sur des plugins en fonction du CMS que vous utilisez, mais avec les limites que nous avons soulignées ;
- vous pouvez vous reposer sur une solution SaaS, ce qui vous permet de soulager vos équipes, votre budget, et de profiter de conseils d’experts. Vous gardez ainsi la maîtrise de votre infrastructure puisque vous pouvez à tout moment activer ou désactiver chaque fonctionnalité. Si vous êtes curieux d’en savoir plus, découvrez ici comment marche notre solution.
Pour un état des lieux de votre web performance,
et savoir quelles optimisations vous pourriez apporter à vos pages web
pour de meilleurs temps de chargement :
