Améliorez la vitesse de chargement de votre site - Webisland 2018

Améliorez la vitesse de
chargement
Surpassez vos concurrents !
Aymen Loukil#webisland

@LoukilAymen #webisland
UX ?
SEO ?
Technique ?
Marketing ?
Conversion ?
Business ?
C’est quoi la performance web ?

La performance est La fonctionnalité

Programme
● Pourquoi c’est important
● On optimise pour qui ?
● Métriques et objectifs
● Comment y arriver ?

Aymen Loukil
#TechnicalSEO #entrepreneur #speaker #ex-dev
Consultant SEO International
https://www.aymen-loukil.com @LoukilAymen

Un internaute, perd en moyenne 2 jours
d’attente par an..

Le web est lent ?
“50% des sites mettent 13s à charger et être utilisables”
2
pit stops
F1

WEB STRESS

Attente = frustration
0 100ms
300ms
1000ms 10.000msSmooth Petit délai Tâche
normale
Perte de
focus
Frustration
3s : la conversion chute

La lenteur est pire que l’indisponibilité..

Time is Money
+ 500ms => -25% searches
-100ms => +1% revenue

On optimise pour qui ?
A partir de 25 ans, notre capacité d’utiliser le web baisse de 0,8% /an

Quelles connexions ?
France 14 Mbps
Denmark 24.41 Mbps
Japan 22 Mbps
Belgique 20 Mbps
Suisse 18.5 Mbps
State of Mobile Networks https://opensignal.com
USA 12.5 Mbps
Une page web en moyenne : 3.6Mb*
3.6 Mb
14 Mbps
= 25s
16s(Japan)

Quelles ressources matérielles ?
https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
4s sur un iPhone 8 (800€) Vs 14s sur un Motorolla G4 (200€)

Métriques et objectifs
https://developers.google.com/
ça arrive ?
c’est utile ?
c’est utilisable ?

Weber-Fechner Law : (+-) 20% imperceptible

Visez 30% d’amélioration !
Exemple : 3 secondes X 0.3 = 0.9 Secondes à gagner
Avant une MEP, si on dégrade <20%, pas grave

Et par rapport à la concurrence ?
1. Être égal /meilleur ?
2. Faire au moins, moins bien de 20%

Comment mesurer la performance ?
Synthétique
- Lab
- Dev, debug
- QA SEO
Une part de la vérité, permet de
comparer, ne reflète pas la vraie
perception de la performance
Chez nos utilisateurs
- Utilisateurs
- Terrain (RUM)
Reflète l’expérience de nos
utilisateurs,
pas toujours évident de l’avoir,
comparaisons subjectives
CrUX

Mesure synthétique
webpagetest.org

Les métriques
webpagetest.org

Comparer synthétiquement
webpagetest.org

Comparer les métriques
webpagetest.org

La console Chrome

Network Throttling (simuler connexions lentes)

Lighthouse - Outil de diagnostic

Automatiser vos rapports
https://github.com/GoogleChrome/lighthouse
$ npm install -g lighthouse
$ lighthouse --perf https://webisland.io/
$ lighthouse --output-path=./report.json --output json

Automatiser avec Puppeteer
https://github.com/GoogleChromeLabs/puppeteer-examples

RUM : Real User Measurement

Je vais demander à mes concurrents un accès GA

Mes concurrents sont ils plus
rapides ?

On va explorer la RUM publique
https://beta.httparchive.org/
https://developers.google.com/web/tools/chrome-user-experience-report

Proportions par type de connexion
Benchmarker, comparer !

Proportions par type de support
Mieux connaître..

Distribution FCP par support
Comment ça se passe par support

Distribution FCP par support
@rick_viscomi

Densité des utilisateurs avec FCP < 1s
Métriques, exigences différentes..

Comparer l’évolution du FCP
Historiser, suivre..

Suivre ces métriques dans le temps
Etude sites e-commerce : https://www.aymen-loukil.com/blog/top-sites-ecommerce-p
2018/

Requêtes Google BigQuery
Récupérez les requêtes ici
https://github.com/AymenLoukil/Chrome-user-experience-report-queries

SpeedInsight intègre la RUM

Scorecard speed
https://www.thinkwithgoogle.com/feature/mobile/

Speed impact calculator
https://www.thinkwithgoogle.com/feature/mobile/

Mesure de performance
● Corréler les métriques perf IT avec métrique perf business
● Enrichir synthétique par RUM
● Segmenter par type de page (listing, checkout, product, editorial)
● Afficher les mesures dans les locaux
● Ne jamais arrêter les mesures

Comment y arriver ?

Chargement d’une page web
Parse Compile ExecuteDownload
Réseau Matériel (processeur, mémoire)

Faire plus light, plus rapide
http://vanilla-js.com/

Coverage : code non utilisé
50% du code
n’est pas utilisé
[1.4MB potentiel
à gagner]*
ctrl+shift+p [win]

Sur wordpress regarder :
wp_enqueue_script()
wp_enqueue_style()
Splitter le code
Juste ce qu’il faut !

Les scripts externes ? [3rd party]
Third party badges

Bloquer le chargement d’une ressource

Top des 3rd party scripts [http archive]

Comparer avec et sans 3rd party
https://developers.google.com
Les scripts externes [non maitrisés] peuvent dégrader la performance

Optimiser le chemin critique
Donner en priorité ce qui est nécessaire au premier print et la ligne de flottaison
CC optimisé
CC non optimisé

Les ressources chargées avant le rendu
Faire l’inventaire des script
https://www.webpagetest.org/

Javascript est une ressource bloquante

Quel est l’élément héro
de la page ?

Prioriser le CSS critique
1. Installer CasperJS : http://casperjs.org/ (Node.js)
2. Télécharger ce script :
https://github.com/ibrennan/automation/tree/master/content/critical-css
3. >casperjs app.js pour l’exécuter
4. Répondre aux questions
5. Copier le code CSS sorti et le coller en inline avant l’inclusion des fichiers de style

Utilisez les “Resource Hints” : preload
https://w3c.github.io/resource-hints/

rel=”prefetch”
Gain de -30% sur le TTI

Quelle serait la next page ?

Prédire la next page
https://github.com/SamKnows/futurelink

DNS-prefetch

Passez en HTTP/2
HTTP/1.1 HTTP/2
Open
Close
Open
Close
T T
Avantages
● Multiplexage
● Compression de header
● Meilleure priorisation
● Push serveur

Network API

Adapter par rapport à la connexion

Compression Gzip
+ Réduit la taille des ressources
transmises
- Peut engendrer un surcoût
(TTFB)
https://varvy.com/pagespeed/enable-compression.html

Cache navigateur (static resources)
+ Réduit le nombre de
ressources à partir
de la deuxième
visite
Facebook a économisé 60% des requêtes grâce au cache
https://code.facebook.com/posts/557147474482256/this-browser-tweak-saved-60-of-requests-to-facebook/

Compression d’images
Caesium :
https://saerasoft.com/caesium/
- Choisir le pourcentage de compression
- Version Desktop
- Version CLI
25% d’une image est inutile (HTTPArchive)

Font-display
@font-face {
font-family: 'Saira Condensed';
src: url(fonts/sairacondensed.woff2) format('woff2');
font-display: swap;
}

Font-display
https://font-display.glitch.me/

J’ai un gros.. TTFB
TTFB : Time To First Byte (octet)
Deux raisons possibles :
1- Serveur lent ?
Tester en http://localhost : pareil => Serveur lent
Optimiser, BD*, cache serveur
Si inférieur => Connexion lente
2- Connexion lente ?
CDN, hébergeur
Google préconise un TTFB de 200ms
*https://fr.wordpress.org/plugins/query-monitor/

Et à la fin, ce qui compte
c’est comment on le sent..
#perception

Actif Vs Passif

L’être humain sur estime
le temps passif paer 40% !
Richard Larson

Loader si une action prend > 1.5s

Barres de progressions
Animées : +6% plus
rapide
Animées et
accélérées :
+12% plus rapide

Lecture : Faster Progress Bars
http://chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf

On va tricher !
onmousedown VS onclick
onmousedown peut nous faire gagner 150ms

Bonnes pratiques de performance 2018
Ressources critiques en premier
Moins de javaScript
Moins de requêtes
Compression et minification
Lazy loading
Auditer les 3rd parties
Stratégie de Fonts
‘Cacher’ les ressources statiques
Ressources hints
Le code de la prod = propre
Viser 30% d’amélioration !
Culture performance partagée
Equipes multi skills (tech, market,
product)

Bonne optimisation !
https://www.aymen-loukil.com

Améliorez la vitesse de chargement de votre site - Webisland 2018

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Améliorez la vitesse de chargement de votre site - Webisland 2018

Similaire à Améliorez la vitesse de chargement de votre site - Webisland 2018 (20)

Plus de Aymen Loukil

Plus de Aymen Loukil (13)

Améliorez la vitesse de chargement de votre site - Webisland 2018