Download - La performance sur mobile
![Page 1: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/1.jpg)
Web mobile et Performances
Jean-Pierre Vincent – BrainCracking @theystolemynick
![Page 2: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/2.jpg)
Jean-pierre VINCENT - BrainCracking
• Expertise technique – Applications Web (HTML5 / JS) – Performances !
• Formation – JavaScript – Performances
• Veille : – @theystolemynick – braincracking.org
![Page 3: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/3.jpg)
À une seconde près ?
Temps de réaction Perception
0 – 100 ms Instantané (wow)
100 – 300 ms Ça rame
300 – 1000 ms La machine travaille
1 s+ Changement de contexte mental
10 s+ Je reviendrais (ou pas)
![Page 4: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/4.jpg)
À une demie seconde près !
Site témoin
• Facile à utiliser • Simple • Lent • Chargé • Mobile friendly • Rapide
Latence de 500 ms
• Lent • Basique • Navigation difficile • Ennuyant • Compliqué • frustrant
Tests utilisateurs : perception de la marque tesco.com
![Page 5: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/5.jpg)
Combien coûte le temps ? • Etsy :
– 1 image de 160K = + 12% de taux de rebond
• DoubleClick – 1 redirection en moins = +12%
de taux de clic • RadWare
– 60% d’abandon après 4 secondes de chargement
• Wallmart – -50% de conversion par
seconde • Akamai
– -6% de vidéo vue par seconde • Google
– Critère de Référencement
![Page 6: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/6.jpg)
Où est le problème ?
• Réseau mobile français (Akamai) : – 6 Mb/s en moyenne – 34 Mb/s en pointe
• La 4G française (degrouptest) : – 21-32 Mb/s
• 75% d’utilisation via le wifi (Étude Google)
![Page 7: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/7.jpg)
Les contraintes externes
• Latence 4G : 50-100 ms
• Vraies situations de mobilité : need for speed
• Utilisateur : un site avec moins de contenu doit se charger plus vite non ?
• Saturation et variabilité des réseaux
![Page 8: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/8.jpg)
Les contraintes des sites mobiles
• Le poids des sites – +56% sur les dédiés mobile ! – 750 Ko en moyenne
• Les fonctionnalités – Fonts, grosses images – Trackers, AB testing, pub
• Le mauvais RWD – Retina© + IE6 + 5
breakpoints – Mettez tout sur la HP
![Page 9: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/9.jpg)
Forcément …
![Page 10: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/10.jpg)
LE CHEMIN CRITIQUE
![Page 11: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/11.jpg)
Le chemin critique
![Page 12: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/12.jpg)
Les grands classiques
• Grouper CSS / JS
• Minifier
• Compresser (lvl 9)
![Page 13: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/13.jpg)
Les polices
• Non critiques (icônes, variantes) : – Inclusion standard
• Critiques (titres, corps) – Police de fallback, inclusion asynchrone – Négocier la suppression …
![Page 14: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/14.jpg)
L’enfer c’est les autres
• Boutons sociaux
• Scripts (jQuery, bootstrap, boilerplate …)
• Polices
• Solutions : – Options asynchrones
– Rapatriement – Pubs en iframe
![Page 15: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/15.jpg)
LES 3 CACHES
![Page 16: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/16.jpg)
« Il n’y a pas plus rapide qu’une requête qu’on ne fait pas »
![Page 17: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/17.jpg)
Manage cache (or die trying)
La seule bonne méthode : • Définir des temps de cache
longs (1 mois - 1 an) • Invalidation par changement
de l’URL d’appel
![Page 18: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/18.jpg)
Cache manuel
Les caches sur mobile ne sont pas fiables
• Utiliser localStorage (voir google HP) – Stockage de plusieurs Mo – HTML, CSS, JS, images, données JSON
![Page 19: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/19.jpg)
Le cache ultime
http://bit.ly/demo-offline
• HTML5 Application Cache • Apparition instantanée
de l’interface • Équivalent de
l’installation d’une d’application native
• Gère la déconnexion !
![Page 20: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/20.jpg)
LES IMAGES
![Page 21: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/21.jpg)
« ça va plus vite sans images »
![Page 22: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/22.jpg)
Remplacer les images
• CSS3 : – Dégradés – Arrondis – rotations, – Opacités
• Caractères unicodes : – ►★✓⇢ – ✎♥☎ – ♻⚠ – ☻☺⇨
![Page 23: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/23.jpg)
Chargement juste à temps
• Ne charge que les images visibles • Libére la connexion pour les ressources critiques
• Ex: lequipe.fr – 30 images et 300Ko économisés
• Librairie bullet-proof
![Page 24: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/24.jpg)
Images embarquées
• Technique de data:uri + encodage base 64 • Images critiques encodées dans le HTML
![Page 25: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/25.jpg)
Les formats d’image Optimiser les formats actuels
• Gif < PNG < JPG
• Des dizaines d’outils de compression auto
• Nettoyage des EXIF
• JPG progressif : NON
Distribuer les remplaçants de JPG
• WebP (Android Chrome) • JPG XR (Windows phone) • JPG 2000 (iOS Safari)
![Page 26: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/26.jpg)
IMAGES ADAPTATIVES
![Page 27: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/27.jpg)
Définir le problème
• Taille d’images adaptée à la taille de viewport ? • Support des écrans haute résolution ? • Variation des formats d’image ?
• Art direction ?
![Page 28: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/28.jpg)
Une réponse compliquée à un problème compliqué
• Format officiel final : <picture> • Librairie d’émulation officielle : picturefill 2.0
![Page 29: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/29.jpg)
La technique improbable
« grand JPG qualité nulle » http://bit.ly/jpg-0 (sur un écran à haute densité)
![Page 30: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/30.jpg)
Les formats vectoriels
• Polices icôniques • SVG
![Page 31: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/31.jpg)
Technique « fait main »
• Images d’interface critiques encodées en base64
• Images de contenu critiques visibles en basse définition (<img src>)
• Images de contenu critiques en haute définition (JS)
• Images contenu secondaire en lazy-loading • Image d’interface secondaires en font / SVG /
sprites
![Page 32: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/32.jpg)
LES TECHNIQUES DISCUTABLES
![Page 33: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/33.jpg)
SPDY / HTTP 2
Réduit les dégâts d’un grand nombre de requêtes Support
• Chrome (forcément), Firefox, iOS 8
Limites
• HTTPS only • Laisse ramer IE 8, iOS < 7, navigateur Android
![Page 34: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/34.jpg)
Domain sharding
Il faut arrêter maintenant hein • Résolution DNS couteuses • Saturation immédiate de la bande passante
![Page 35: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/35.jpg)
JavaScript en bas de page
• Ça ne sert à rien pour le site lambda – Ralentit l’affichage sur Safari iOS – Ralentit l’exécution partout
![Page 36: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/36.jpg)
INTERFACES FLUIDES
![Page 37: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/37.jpg)
Grandeur et décadence
• Animations – Directement en CSS3 (généré si besoin) – Utiliser translate – Tenter requestAnimationFrame
• Scroll de longues pages – Technique du recyclage d’objets
• Décoration – Éviter CSS3 … (ombrages)
• Calcul – Web Workers – L’increvable setTimeout( 0 )
![Page 38: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/38.jpg)
Fluidité
• Une seule règle : tester et profiler
• Avoir de vrais téléphones
• Utiliser les déboguages via USB : – Chrome Android – Safari iOS – Windows – Firefox OS
![Page 39: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/39.jpg)
MÉTHODOLOGIE
![Page 40: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/40.jpg)
Impliquer
• Le mythe du développeur héro solitaire
• La vitesse doit être prévue dans les specs – Google : « Speed is the #1 feature »
• Exemple : – Pour 80% des utilisateurs – Premier rendu en moins de 2 secondes – Fonctionnalité principale en moins de 5 secondes – Navigations internes en moins de 2 secondes
![Page 41: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/41.jpg)
Mesurer, avant action
• La base : WebPageTest • Mesures utilisateurs – Google, de base – À enrichir avec des mesures liées au métier
![Page 42: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/42.jpg)
Surveiller dans le temps
• Compléments payants ou gratuits à WPT • Analytics – Google, de base – À enrichir avec des mesures liées au métier
![Page 43: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/43.jpg)
CONCLUSION Parce qu’il en faut une
![Page 44: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/44.jpg)
RWD ? Non : mobile first
• Suivre les utilisateurs : – Déjà en multi-écrans – Commencent souvent par une navigation mobile – Parfois moyen unique d’accès au net
• Bonus : accélération pour tout le monde – IE 8 – marchés lointains – smartphones bas de gamme
![Page 45: La performance sur mobile](https://reader033.vdocument.in/reader033/viewer/2022060117/5586e9d2d8b42a7b198b4658/html5/thumbnails/45.jpg)
Questions ?
Jean-pierre Vincent – BrainCracking @theystolemynick
Slides : http://bit.ly/perf-mobile