Performance web (Brown bag lunch)

Introduction à la performance web

Transcript

1. PERFORMANCE WEB 12 SEPTEMBRE 2014
2. LAURENT PAOLETTI @providenz WHOAMI ? Laurent Paoletti @providenz providenz.fr ! web, python, django, js Brown bag lunch Métycéa 12 septembre 2014
3. LAURENT PAOLETTI @providenz AVERTISSEMENT Brown bag lunch Métycéa 12 septembre 2014 Préconisations générales Ça peut évoluer Chaque cas est particulier Identifier la cible
4. Performance Web Réponse Requête LAURENT PAOLETTI @providenz
5. Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz Pourquoi ? • Amazon: 100ms→ - 1 % de ventes • 1s → -11 % nombre de pages vues, baisse de -16 % satisfaction client, - 7 % en conversions.
6. LAURENT PAOLETTI @providenz WHY ? Brown bag lunch Métycéa 12 septembre 2014
8. MOBILE source: strangeloopnetworks
10. OBJECTIF < 3s Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
11. Performance Web Requête Réponse Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
12. Performance Web Réponse ~80 % Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
13. Html Images CSS Images JS Temps Chargement d’une page
14. DNS TCP WAIT DOWNLOAD REQUETE TEMPS Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
15. Poids moyen d’une page (Nov 2013) Source httparchive.org LAURENT PAOLETTI @providenz
16. REQUETES Source httparchive.org 65 requêtes par page (moyenne) LAURENT PAOLETTI @providenz
17. WEBPAGETEST http://www.webpagetest.org LAURENT PAOLETTI @providenz
18. QUELQUES PRINCIPES SIMPLES • Réduire le nombre de requêtes HTTP • Réduire le poids des composants • Paralléliser les téléchargements • Améliorer la perception utilisateur Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
19. Réduire le nombre de requêtes HTTP Concaténer JS et CSS ! Mieux vaut un fichier de 100kb que 10 fichiers de 10kb Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
20. Réduire le nombre de requêtes HTTP Sprites CSS ! ! Brown bag lunch Métycéa 12 septembre 2014
21. Réduire le nombre de requêtes HTTP ICON-FONTS LAURENT PAOLETTI @providenz
22. Réduire le nombre de requêtes HTTP SVG <svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"> <a xlink:href="/appel-a-orateurs"> <g> <circle cx="110" cy="110" r="110"/> <circle id="circle-border" cx="110" cy="110" r="100"/> <text x="110" y="85" font-size="20" fill="white" text-anchor="middle">Appel à</text> <text x="110" y="110" font-size="22" fill="black" text-anchor="middle">Orateurs</text> <line x1="110" y1="130" x2="110" y2="170" stroke="white" stroke-width="1"/> <line x1="110" y1="170" x2="120" y2="160" stroke="white" stroke-width="1"/> <line x1="110" y1="170" x2="100" y2="160" stroke="white" stroke-width="1"/> </g> </a> </svg>
23. Le cas de DATA-URIs span.button { background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa %00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%04gAMA%00%00%D8%EB%F5%1C%14%AA%00%00%00%20cHRM%00%00n %20%00%00r%EC%00%00%F7I%00%00%84%FA%00%00o%83%00%00%E8!%00%001%BA%00%00%17%89%0FO%F3%95%00%00%02%17IDATx%DA%9C%93%B1N%DB %60%14%85%3FCH%93%105(U%91%CA%D0%20%86H%9D%9A%A5b%23%EE%C4hf%91ZO%B1%B1%F1%0C%C7q%E4%D1%C8%EA%A8%9A%02%12%AC%E6s%C41x%8E%D7%5D %E8A%1C%D2%F1%9D%40%1E%A5%2C%D6%0A%05r%B9%1C%A5%D2*11ax%CB%95%3BelN%10%06%CF-%D2%A6%5Eo%BE%06Z%AE%EDqyiaNLL%FB %82%B3%A1%C1%E9%B9%91%90%BB%E2%BB%FF%9C%C0%3F%AE%F1%CD%9DY%13%FC%10%FB%D0%10F%DE%BF%C6%FF%C5%EF%01%00%14%B1%11%2C%14%88%CF %E0%00%00%00%00IEND%AEB%60%82") repeat scroll 0 0 rgba(0, 0, 0, 0); display: block; height: 16px; overflow: hidden; text-indent: -1000em; width: 16px; } Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
24. Réduire le nombre de requêtes HTTP Utiliser CSS3 • coins arrondis • ombres portées • dégradés • arrières plans multiples • transitions, effets, rotations Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
25. Utiliser le cache HTTP Réduire le nombre de requêtes HTTP cache cache
26. Utiliser le cache HTTP Réduire le nombre de requêtes HTTP Expires ~1 an dans le futur Last-Modified : à jour ! Versionner les fichiers : /static/4b40a22ccc/style.css Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
27. Réduire le poids des composants Activer la compression ~50% LAURENT PAOLETTI @providenz
28. Réduire le poids des composants Choisir le bon format • photos → jpg (progressif) • graphiques → png • (png>gif) Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
29. Réduire le poids des composants Optimiser les images • Compresser png & jpg • pngcrush, optipng • jpegmini • jpegtran, jpegoptim (md) Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
30. Réduire le poids des composants Réduire javascript Optimisations • closure compiler • YUI compressor • shrinksafe Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
31. Réduire le poids des composants Réduire CSS Optimisations • cleancss • YUI compressor • css compressor Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
32. Réduire le poids des composants Cookies • Inutiles sur contenus statiques • ↑ jusqu’à 100 ko/page • sous-domaines cookieless Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz Brown bag lunch Métycéa 12 septembre 2014
33. Elements tiers • Frameworks css • Frameworks js • Widgets sociaux Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
34. Réduire le poids des composants Page d’erreurs (404) • attention aux ressources inexistantes Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
35. Parallélisation Répartir les composants sur 2 à 3 domaines (30 comp/dom) Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
36. Parallélisation CDN $$$ ! CDNs gratuits Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
37. RENDU JS en fin de page
38. PROXYS Charles, Fiddler http://www.telerik.com/fiddler http://www.charlesproxy.com/ LAURENT PAOLETTI @providenz
39. RUM BUCKY LAURENT PAOLETTI @providenz Brown bag lunch Métycéa 12 septembre 2014
40. TECHNIQUES AVANCÉES • prefetch • prerender • dns prefetch • async scripts Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz
41. RESSOURCES http://www.webpagetest.org https://github.com/edas/webperf-book http://developer.yahoo.com/performance/rules.html https://developers.google.com/speed/docs/insights/rules http://www.bookofspeed.com/ Brown bag lunch Métycéa 12 septembre 2014 LAURENT PAOLETTI @providenz