Les performances Web mobile
-
Upload
jean-pierre-vincent -
Category
Technology
-
view
942 -
download
0
description
Transcript of Les performances Web mobile
![Page 1: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/1.jpg)
La performance sur mobiles
Jean-pierre VINCENT
![Page 2: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/2.jpg)
Qui ça ?Jean-pierre VINCENT
braincracking.org@theystolemynick
12 ans de WebConsultant, formateur, auteur
![Page 3: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/3.jpg)
Importance ?
● 32 millions de forfaits data● +80% de volume● 10% du trafic sur sites standards
![Page 4: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/4.jpg)
Usage ?
● Maison, travail, déplacement, magasin...● Mails, recherche, réseau social...● Infos produits, chercher un endroit, voyages, news
http://services.google.com/fh/files/blogs/our_mobile_planet_france_fr.pdf
![Page 5: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/5.jpg)
Exigences
● 1S = -10% de pages vues
● 60% attendent 4s max
● les sites se chargent en 12s
http://www.themediabriefing.com/article/2012-10-02/speed-is-a-feature-why-a-slow-mobile-web-experience-means-lost-revenue http://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster/
![Page 6: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/6.jpg)
Débits théoriques
![Page 7: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/7.jpg)
Vraie moyenne
+ 25% de perte ?
![Page 9: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/9.jpg)
La volatilité
![Page 10: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/10.jpg)
Objectifs● Affichage rapide :• News• Comparateurs• Voyage• Vidéo
● Interface fluide• Applications• Formulaires• Recherches
![Page 11: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/11.jpg)
Comment tester✗ Émulateurs• Connexion sans faille• Charger une page : 50% plus rapide• Exécution JS : 90% plus rapide
![Page 12: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/12.jpg)
Comment testerMobile perf bookmarklet
http://stevesouders.com/mobileperf/mobileperfbkm.php
![Page 13: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/13.jpg)
Comment tester
Wifi => tcpdump => .pcap => .har => HAR viewerhttp://code.google.com/p/pcaphar/wiki/CaptureMobileTraffics
![Page 15: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/15.jpg)
Comment testerWifi sur mobile+
● Proxy Charles● Trickle (Linux)● Network Link Conditioner (OSX 10.6)● Slowy app (OSX 10.5)
![Page 16: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/16.jpg)
Comment debug
● Stoyan Icy
● Chrome iOS
● SocketBug
![Page 17: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/17.jpg)
Comment debug● Opera Dragonfly● Firefox Remote Debugger● Chrome Remote Debugging
● IOS 6 : enfin natif
![Page 18: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/18.jpg)
Charger
![Page 19: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/19.jpg)
Théorie 1/2● Réduire le nombre de requêtes● Gérer le cache navigateur● Gzip● Scripts en bas de page● JS et CSS dans des fichiers externes● Moins de domaines par page● Minifier● Pas de redirection
http://developer.yahoo.com/performance/rules.html
![Page 20: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/20.jpg)
Théorie 2/2● Preload / postload components● Reduce DOM size● Domain sharding● Reduce cookie size● Optimize images● CSS Sprites
http://developer.yahoo.com/performance/rules.html
![Page 22: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/22.jpg)
DépartDépart :
● Start render : 5s● Render article : 7s
http://www.webpagetest.org/video/compare.php?tests=121019_CG_b761ca40c0644ff4b15f96c1b90fe712-r:1-c:0
![Page 23: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/23.jpg)
À vous
![Page 24: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/24.jpg)
TODO
● Concaténer CS● (pas de police)● (pas de redirection)● Tester sans JS
![Page 25: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/25.jpg)
TODO
http://www.webpagetest.org/result/121031_ef8a9887f8a90150e8a50873c574d48f/
![Page 26: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/26.jpg)
TODOTravail sur le JavaScript
● Concaténer par modules● Nuke document.write()● Exécution asynchrone● Chargement et exécution au scroll• Pubs invisibles• Widgets
https://github.com/jpvincent/LazyLoadLight - https://github.com/jpvincent/onAreaVisible
![Page 27: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/27.jpg)
Gérer le cache
● La base :• Gestion fine des URL• Headers correctement mis
● Aller plus loin :• Détourner localStorage• Utiliser appCache Manifest
![Page 28: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/28.jpg)
Moins de requêtesLa base
● Sprites● Icônes unicode
Aller plus loin ● Inline JS/CSS● WebSocket● Sacrifice de fonctionnalités
● CSS3● Base64
● SPDY, HTTP2
![Page 29: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/29.jpg)
Le poidsLa base
● Gzip, minify● Compression des images● Lazy load
Aller plus loin ● Se passer des grosses librairies● HMTL5 History
![Page 30: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/30.jpg)
Se méfier
● Domain sharding : fini● Scripts en bas de page : inutile● Tout inline ou tout external ?● CDN : insignifiant● Render côté client
![Page 31: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/31.jpg)
Responsive Web DesignCritiqué :
● Trop de choses chargées● Difficile à maintenir
Site dédié mobile :● Permet de se lâcher● Contenu minimal approprié à l'usage● Seule le V de MVC est à refaire
![Page 32: Les performances Web mobile](https://reader035.fdocuments.us/reader035/viewer/2022081404/55946a691a28ab8a2b8b45d3/html5/thumbnails/32.jpg)
ConclusionLes techniques classiques :
● Marchent globalement bien● Peuvent être dangereuses● Ne vont pas encore assez loin
Débat ?