Comment accélérer ses pages Web ? Combien cela rapporte il, quels sont les outils
Nous allons voir les techniques de base que les développeurs doivent connaître et quels sont les outils dont tout site moderne doit s'équiper pour assurer un minimum de qualité.
1. Techniques d’accélération des pages Web
Jean-Pierre VINCENT
Consultant indépendant
@theystolemynick
Braincracking.org
2. Bonjour, je m’appelle Jean-Pierre
l
13 ans de Web :
l
PHP, JavaScript, HTML5, CSS
startups, Yahoo!, houra.fr
Expert frontend indépendant
l
Veilleur :
l
braincracking.org
l
@theystolemynick
3. Performance frontend ?
Performances traditionnelles :
- Tenir la charge
- Délivrer vite
- Techniques serveur
Performances Frontend
- Vitesse d'affichage d'une page
- Fluidité de l'interface
- Techniques de développeur front
9. Combien coûte une seconde ?
e-commerce
1 s = - 50 %
de conversion
Walmart 2012
10. Combien coûte une seconde ?
Search
l
Bing : 1 s =
l
- 3 % de CA
l
Yahoo! : 1 s =
l
+ 10 % de rebond
Études Bing et Google Velocity 2009 : http://velocityconf.com/velocity2009/public/schedule/detail/8523
11. Combien coûte une seconde ?
Mobile
l
1 s = -10% de pages vues
l
Après 4 s : 60% d'abandon
/
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
12. Pourquoi la performance ?
l
SEO
l1 critère de référencement
chez Google
lInfluence le taux de crawl
l
Métrique : temps « onload »
lMesurée par les utilisateurs
http://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.html
13. l
Charger un site de 1,5 Mo ?
l
Facile avec la fibre !
Toujours utile ?
14. Les utilisateurs
Sources 2012 : Akamai, Degrouptest, 60 Millions de
consommateurs, ARCEP, Cedexis
ADSL Mobiles
Débit 4, 8 Mb/s 2,5 Mb/s
Latence 95 ms 200 ms
Temps de chargement
15. l
Débit moyen : 5 Mb/s
l
25% des utilisateurs
ont moins de 2,5 Mb/s
Répartition des débits (ligne fixe)
Les utilisateurs
16. ADSL Mobiles
Débit 2,5 Mb/s 2,5 Mb/s
Latence 110 ms 200 ms
+25% de perte
Connexion réseau à cibler :
Navigateurs à cibler :
IE 8
Safari iOS
Android 2.3.x et 4.x
Les utilisateurs
41. Remplacer la décoration
l
Caractères unicode ►★✓⇢✎♥☎♻⚠☻☺⇨
l
Dégradés
l
Coins arrondis
l
Ombres sur texte et boîtes
l
Rotation de texte
l
Opacité
l
http://ikwebdesigner.com/special-characters/
42. Chargement Just In Time
l
Méthode de lazy-load :
l
charger les images visibles
https://github.com/fasterize/lazyload
44. Compression manuelle
l
Connaître les formats
l
PNG toujours meilleur que GIF
l
PNG : ultra efficace avec des aplats de couleur
l
JPG : mauvais pour le texte si il est en couleurs
l
Jamais de PNG entrelacé
l
PNG8 alpha
l
WebP : mal supporté
l
…
46. Efficace mais :
50% des sites oublient
30% ont un TTL < 30 jours
Gérer son cache
47. « Vide ton cache »
Sans cache :
• Phases de recette interne
• Environnements de
développement
Cache agressif :
• Cache utilisateur
• Chaîne de cache réseau
Gérer son cache
48. Invalidation des caches longs
l
Maîtrise totale des URL
l
HTML
l
CSS
l
JS
l
Processus de compilation
l
URL rendues uniques par :
l
Numéro de release
l
Md5 du fichier
Expires : +1 an
Cache-control : public
Vary : xxx
Mise en cache long :
Gérer son cache
X
51. SPOF
Dépendances à des serveurs tiers qui peuvent
bloquer le rendu
Usual suspect :
l
http://platform.twitter.com/widgets.js
l
https://ajax.googleapis.com/ajax/libs/jquery/1.7.
2/jquery.min.js
l
http://html5shiv.googlecode.com/svn/trunk/html
5.js
54. S’auto-former
En anglais
l http://www.perfplanet.com/
l http://developer.yahoo.com/performance/rules.html
l https://developers.google.com/speed/docs/best-practices/rules_intro
l http://www.webpagetest.org/forums
En français
l http://checklists.opquast.com/webperf/
l https://groups.google.com/forum/?fromgroups#!forum/performance-web
l @webperf_fr
l
et
l @WebperfParis
l https://github.com/edas/webperf-book
l http://braincracking.org
55. Passer des règles aux outils
l
Règles
l
Yahoo! Best Practices
l
(35 règles)
l
Google PageSpeed
l
(31 règles)
l
Test Opquast
l
(41 règles)
…
l
Jusqu'à 400+ pratiques
l
Outils
l
Analyse réseau
l
Profiling
l
Bonnes pratiques
l
Monitoring
l
RUM
l
Intégration continue