Performance web #perfmatters - Tuniseo 2018

@LoukilAymen #tuniseo
TECHNIQUES AVANCÉES POUR AMÉLIORER LA PERFORMANCE WEB
Aymen Loukil

C’est quoi la performance ?
UX ?
SEO ?
Technique
?
Marketing ?
Conversion ?
Business ?

Performance is The Feature.
No performance, no feature

Programme du jour
Pourquoi c’est important01
02
03
04On 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

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

Pitstop Formula 1

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

WEB STRESS

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

Mobile First Requirement

#TUNISEO
Pour qui : Quelle connexion ?
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)

#TUNISEO
Pour qui : Quel matériel ?
4s sur un iPhone 8 (800€) Vs 14s sur un Motorolla G4 (200€)
https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

#TUNISEO
Pour qui : Quels ages ?
A partir de 25 ans, notre capacité d’utiliser le web baisse de 0,8% /an

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

Loi de Weber-Fechner

Exemple : 3 secondes X 0.3 = 0.9 Secondes à gagner
Au moins +30% d’amélioration

Synthétique
- Lab
- Dev, debug
- QA SEO
Chez nos utilisateurs
- Utilisateurs
- Terrain (RUM)
CrUX
Mesure de la performance

webpagetest.org
Comparer en synthétique

webpagetest.org
Mesure de la performance

Simuler une connexion lente

Google Lighthouse
Addon Chrome Console>Audit

Exemple résultat Lighthouse

https://github.com/GoogleChrome/lighthouse
$ npm install -g lighthouse
$ lighthouse --perf http://www.tuniseo.tn/
$ lighthouse --output-path=./report.json --output json
Industrialiser la mesure

Console Google Chrome

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

La RUM : temps de chargement

La RUM : localisation

Mes concurrents sont ils plus rapides ?

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

Benchmarker, comparer !
Proportion par connexion

Mieux connaître..
Proportion par support

Métriques, exigences différentes..
Se comparer avec les autres

Historiser, suivre..
Suivre dans le temps

Etude sites e-commerce : https://www.aymen-loukil.com/blog/top-sites-ecommerce-pe
2018/
Suivre dans le temps

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

• 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 (#fierté #succès)
• Jamais arrêter la mesure
Mesure de performance

On est prêt !
Comment y arriver ?

Charger une page c’est comme s’habiller

Parse Compile ExecuteDownload
Téléchargement Exécution et affichage
Pendant les 15 secondes ...

http://vanilla-js.com/
Faire plus light
JS natif : 35X plus rapide que jQuery

Le lendemain d’une certaine refonte..
Chute de la conversion
+12% en taux de rebond
Baisse du CA

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

Sur wordpress regarder :
wp_enqueue_script()
wp_enqueue_style()
Juste ce qu’il faut !
Faire plus light

Third party badges
Les scripts externes, souvent coupables

Bloquer les ressources externes

https://developers.google.com
Comparer avec / sans

Le pire scénario ?
“Scripts externes bloquants et indisponibles”

Caesium :
https://saerasoft.com/caesium/
25% d’une image est inutile (HTTPArchive)
Compressez les images
! Essayez les nouveaux formats : JPEG 2000,
JPEG XR, et WebP

Donner en priorité ce qui est nécessaire au-dessus de la ligne de flottaison
Prioriser le chargement

Faire l’inventaire des script
https://www.webpagetest.org/
Prioriser le chargement

1 Kg de fer Vs 1 Kg de coton

JavaScript le plus coûteux
38 fois plus couteux qu’un JPEG

Bienveillance envers vos users
JavaScript Notre User

Charger les ressources intelligemment
Scripts essentiels
Scripts non essentiels

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

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

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
Prioriser le CSS critique

DNS prefetch : accélérer la résolution

https://w3c.github.io/resource-hints/
Preload : Ressource prioritaire

Gain de -30% sur le TTI
Prefetch : Page suivante

Quelle est la page suivante ?

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

HTTP/1.1 HTTP/2
Open
Close
Open
Close
T T
Passez en HTTP/2

Charger les fonts autrement
https://www.fasterize.com/fr/blog/nos-optimisations-webperf-dediees-aux-fonts/

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

Ce qui compte le plus c’est la
perception de l’utilisateur

Etat actif / passif

L’être humain surestime le
temps passif par 40% !
Richard Larson, MIT

Loader si >1.5s

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

http://chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
Lecture : Faster progress bars

onmousedown VS onclick
onmousedown : gain de150ms

Take aways pour une meilleure performance web
• Culture de performance (Équipes multi skills, #perfmatters)
• Less is more
• Chargement intelligent des scripts (preload, async, defer)
• Prioriser le CSS critique
• Auditer les ressources externes
• Chargement intelligent des fonts (Font-display)
• Mettre en cache les éléments statiques
• Viser 30% d’amélioration !

Bonne Perf !
Merci
https://www.aymen-loukil.com

Performance web #perfmatters - Tuniseo 2018

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (9)

Similaire à Performance web #perfmatters - Tuniseo 2018

Similaire à Performance web #perfmatters - Tuniseo 2018 (20)

Plus de Aymen Loukil

Plus de Aymen Loukil (9)

Performance web #perfmatters - Tuniseo 2018