Comment transformer la performance web en croissance et conversion utilisateur

1#seocampSEO CAMP Day LYON 2019
Comment transformer la performance web
en croissance et conversion utilisateur
Alexandre Thuriot

https://blog.resoneo.com/2019/04/webperf-les-cles-dun-site-beaucoup-rapide-seo-campus/

Tout le monde en parle … Less is More !

Dareboost
Et ce ne sont pas les outils qui manquent
Lighthouse Page Speed Insight
WebPageTest Fasterize GTMetrix
avec des audits et recommandations toujours plus détaillés
Sans parler de plugins All In One … / WP Rocket ..

La culture de la performance web ?
Webperf = Fonctionnalité ?
La performance Web ne consiste pas seulement à comprendre ce qui fait qu'un site
est rapide. Il s'agit de sensibiliser les développeurs et les non-développeurs que c’est
essentiel pour le business.
La performance est une fonctionnalité et doit être priorisée en tant que telle !
= La webperf est priorisée quand quelqu’un arrive à démontrer que les concurrents sont meilleurs.

La priorisation de la webperf chez le client …
La priorisation doit être objective et basée sur des hypothèses mesurables !
Dans ces conditions la performance web est généralement laissée aux développeurs qui s’ils le souhaitent peuvent prendre cette
responsabilité. En pratique, les développeurs se concentrent sur la qualité et la delivrabilité des demandes.
La performance web n’est jamais priorisée car n’étant pas monitorée il est pour beaucoup trop complexe de déterminer son R.O.I

Comment créer une culture webperf ?
Comprendre, Auditer, Mesurer, Séduire, Améliorer, Evaluer
Expliquer le Pourquoi !

Qui doit assumer les optimisations ?
Travailler la webperf nécessite de travailler sur toutes les étapes de construction d’’une requête http : DNS Réseau / Hébergement / Cache / Développements / CDN / Images .
C’est pourquoi la mise en place d’une stratégie d’amélioration continue de la performance web doit inclure tous les métiers de l’entreprise qui interagissent avec le site
web. (Admin système / Devs / SEO / UX / Marketing / Sales …)
Périmètre de la performance web

Time To First Byte : 1er octet reçu par le
navigateur, c’est à dire la vitesse à
laquelle le serveur renvoi le premier
octet de donnée.
TTFB
Il s’agit de la spmmes des ressources
téléchargés par le navigateur du client
pour afficher la page (html, images, js,
css …)
Poids des pages
correspond au moment ou les premiers
éléments de la page apparaissent à l’écran
Start Render
Somme des ressources téléchargeés par
le navigateur pour executer le rendu et le
tracking de la page demandée.
Nombre de requêtes
Etape 1 : suivre des KPI
Les premiers éléments à suivre
Simple à suivre / simple à expliquer

Etape 2 : La perception de la performance
Auditer la cinématique de chargement des pages
Le Speed Index met en lumière le
rythme auquel les éléments au-
dessus de la ligne de flottaison
s’affichent. Cet indice de
performance de chargement de
page indique à quelle vitesse le
contenu d'une page commence à
être visible. Plus le score est proche
de zéro, mieux c'est.
Speed Index
> améliorer vos conversions

https://requestmap.webperf.tools/
Request Map Generator
On commence par quoi ?
= A faire sur son site / ses soncurrents !

Benchmark
Moyenne du Web
Poids moyen d’une page web en 2018
HTTP Archive
Répartition des ressources
Cumul du poids des ressources téléchargées par
un navigateur (après compressions)
Images 45%
Javascript 35%
Font 10%
CSS 5%
Selon Dareboost, une page web génère en moyenne 122 requêtes

CrUX : Chrome User Experience
https://web.dev/chrome-ux-report-data-studio-dashboard

Créer une matrice avec toutes vos données et appuyez sur les points en souffrance vs concurrence
Passer en mode
Quick Wins

Gestion des images : Lancer un audit
= permet d’avoir un score de la gestion des images ; mais surtout permet d’avoir un objectif chiffré

Les images
pour les nuls
▪ Optimisation de la compression
▪ Sélection du format d’image
▪ Taille optimale
▪ Support des navigateurs
▪ Privilégier WebP
▪ Téléchargement de l’image optimisée
en 1 clic

API CDN
• Les CDN d’images sont initialement utilisés pour
localiser les images au plus proche de
l’internaute.
• Depuis quelques temps, il est possible d’utiliser les
CDN comme un service d’optimisation et
traitement avec des fonctionnalités difficiles à
reproduire en interne.
• Pour quelques euros par mois, cela permet de
mettre ses ressources sur des fonctionnalités
coeur-business.
Content Delivery Network

Optimiser
Le chargement
▪ Suppression librairie Javascript
▪ <img src =‘’ dans la page (SEO)
▪ Fonctionne aussi sur les <iframe>
En fonction du device, de la taille de l’écran, du réseau et
de l’interraction utilisateur : le navigateur préchargera de
façon dynamique les images.

Javascript
Processing Time
57%
Third Party
Code
Influence du JS
100 KB de Javascript
augmente en moyenne le
Start To Render d’1 seconde.
= Limiter les ressources Javascript au strict minimum !

Centraliser la gestion de vos scripts
Utilisation d’un TMS (Tag Manager Service)
▪ Appels Asynchrones des librairies JS
▪ Configuration dynamique
▪ Ajout / Suppression / Planification des scripts
▪ Configuration à la page
▪ 0 devs

JS : Mise au régime !
▪ Code Coverage (Green / Red) via la console
du navigateur (F12)
▪ Segmenter l’appel aux ressources JS / CSS en
fonction du pattern des pages
▪ Limiter les librairies tierces
▪ Utiliser les dernièers versions des librairies
▪ Favoriser les développements natifs

Single Point Of Failure
La majorité des sites Internet exploitent les Polices héberées sur Google Fonts.
En cas de problème réseau cela peut impacter fortement le rendu de la page.
Le SPOF …

Perdre 20% de poids en 10min …
Utiliser la compression Brotli à la place de Gzip
> S’installe très simplement sur Apache / Ngnix. Faites la demande à votre admin système ou votre hébergeur.

… https – Keep-Alive et résolution DNS
Le fait de ne pas activer le
Keep-Alive en https est
catastrophique.
A chaque appel d’une
ressource sur le site le
navigateur revalide toutes la
chaîne SSL Negociation.
Cela ajoute entre 150 et 200
ms par fichiers au temps de
téléchargement global.
Lorsqu’il est activé, le Keep-
Alive permet au navigateur
de valider une seule fois le
protocole SSL.

… https - http/2 & Keep Alive
Avant
Après

Solution All in One :
AMP Instant Everywhere
▪ Format dédié mobile
▪ Priorisation chargement des
ressources pour le 1er écran
▪ Limitation Javascript
▪ Mécanisme de cache distribué
▪ Images Webp
▪ Compression Brotli
▪ …
> Migrer vers AMP peut être une solution pour améliorer sa webperf mobile !

Cela me rapporte
combien d’améliorer
ma webperf ?

Les gains statistiques
La performance web comme fonctionnalité améliore l’usage
Aller / Retour entre la SERP et la page de votr
site. Analyse de la pertinence du résultat par
l’analyse comportementale de l’internaute.
(Augmentation des analytics)
PogoSticking
La page se chargeant rapidement, la fonction de
la page est affichée et comprise plus rapidement
par l’internaute. Celui étant moins stressé, gagne
en confiance ett sera plus facile à séduire.
Taux de conversion
L’optimisation du site par la suppression de
l’inutile permet de simplifier son architecture
dans le but de garder uniquement l’essentiel.
Connaissance technique
Comportement de l’internaute sur votre site.
Fait-il une interaction supplémentaire ?
Taux de rebond métier
> Considérer toutes les fonctionnalités de votre site comme un ‘one click add to cart”
Utiliser ces indicateurs pour enclencher l’étape 2 et aller plus loin dans l’optimisation

https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9

https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

Migration AMP
https://www.thinkwithgoogle.com/intl/fr-fr/inspirations/success-stories/greenweez-booste-de-80-son-taux-de-conversion-mobile-avec-amp/

Maintenir les performances pour de
nombreux sites est tout aussi
difficile, sinon plus difficile que
d’être le plus rapide une fois
40% des grandes marques
régressent sur leurs performances
après 6 mois.
Katie Hempenius Addy Osmani
https://www.youtube.com/watch?v=YJGCZCaIZkQ

Comment éviter de chuter et
grossir à nouveau ?

Définition d’un budget de Performance

Intégration continue / build
Test de non regression du contrat de performance à intégrer dans le process de mise en production

MERCI AUX SPONSORS

Question Mug
● Quel paramètre faut-il déclarer au
moment de l’appel des Google Fonts
pour afficher son contenu 1s plus
rapidement ?

Comment transformer la performance web en croissance et conversion utilisateur

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Comment transformer la performance web en croissance et conversion utilisateur

Similaire à Comment transformer la performance web en croissance et conversion utilisateur (20)

Comment transformer la performance web en croissance et conversion utilisateur