Télécharger en tant que PDF, PPTX
Téléchargé parJean-Pierre Vincent
Introduction à la webperf
Le document aborde les techniques d'accélération des pages web, en soulignant l'importance de la performance pour la conversion des utilisateurs et le référencement. Il propose des méthodes pour améliorer la vitesse de chargement, telles que l'optimisation des ressources, la gestion des caches et l'élimination des éléments bloquants. Des objectifs de performance sont aussi établis, avec des outils de mesure et des bonnes pratiques recommandées pour les développeurs.
Contenu connexe
Similaire à Introduction à la webperf
Introduction à la webperf
- 1. Techniques d’accélération despages Web Jean-Pierre VINCENT Consultant indépendant @theystolemynick Braincracking.org
- 2. Bonjour, je m’appelleJean-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 ? Performancestraditionnelles : - 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
- 4. Performance frontend Rien RienPremier affichage ! Chargé
- 5. Pourquoi la performance? l Qualité perçue l Ergonomie l Référencement l Coûts réseau l Fun $$
- 6. Combien coûte uneseconde ?
- 7. Combien coûte uneseconde ? Tunnel d’achat : 1s = -7% de conversion Tagman, 2012
- 8. Combien coûte uneseconde ? Vidéo : 1s = -6% de vue Akamai 2012
- 9. Combien coûte uneseconde ? e-commerce 1 s = - 50 % de conversion Walmart 2012
- 10. Combien coûte uneseconde ? 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 uneseconde ? 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 sitede 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,5Mb/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
- 17. l Le site moyen l 1,5Mo l 120 requêtes l 12 domaines 15 secondes de chargement
- 18. Chantier Webperf l Fixer desobjectifs l Mesurer pour l'utilisateur l Coder ! l Surveiller
- 19. Objectifs Utilisateurs Interactivité avecla fonctionnalité < 5 s
- 20. Mesurer l'accès àla fonctionnalité l En JavaScript l Google Analytics « User Timing » l Boomerang, autres outils de RUM
- 21. Interactivité avec lafonctionnalité < 5 s Premier rendu < 2 s Objectifs Utilisateurs
- 22. Mesurer le premierrendu l En JavaScript l Librairies RUM : l RequestTracker l Boomerang JS l Outils externes l WebPageTest.org
- 23. Interactivité avec lafonctionnalité < 5 s Premier rendu < 2 s Réponse HTML < 1 s Chargement de la page < 20 s ? Objectifs SEO
- 24. Mesurer le onload l Pratiquementtous les outils
- 25. Agir Techniques passe partout: l Configuration serveur l Cache serveur, cache client l Chargement des fichiers
- 26. Configuration serveur 1. Configurationdu keep-alive : 2. Activer la compression KeepAlive On KeepAliveTimeout 5 Timeout 10 SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE text/html text/css text/plain application/x-javascript
- 27. Configuration serveur Vérifier avecWebPageTest
- 28. Cache Serveur l Fichiers plats l Mécanismes/ plugin des CMS l memcache l Varnish l CDN… Paramétrage du temps de cache Contenu personnalisé
- 29. Cache serveur Vérifier avecWebPageTest
- 30. Agir l Le chargement desfichiers ou le chemin critique
- 31. Trouver le chemincritique Chemin critique 1er rendu Le chemin critique
- 32. Côté client l Redirections l CSS l Polices l JS Ressources bloquantes: Le chemin critique
- 33. Redirections l Limiter à 1max l Jamais côté client l Surtout sur mobile Le chemin critique
- 34. CSS / JS l Concaténation(2 fichiers max par type) l Minification Le chemin critique
- 35. Polices l Les limiter l Les valider: l poids, l utilisée, l compatible (Chrome XP) Le chemin critique
- 36. Le choix desarmes l <script src> en haut l <script src> en bas l Inline l defer l Asynchrone Inclure JavaScript
- 37. <script src> enhaut Si : l petit l concaténé l sans concurrence l Et l HTML + CSS + JS + Fonts < 6 requêtes Inclure JavaScript
- 38. <script src> enbas l Si : l Page légère l Gestion des dépendances l Pas de document.write() l Pas de iOS Inclure JavaScript
- 39. l Images l Iframe l Objets flash /vidéo Ressources gênantes : Temps onload()
- 40. Images l Optimisations : l Ne pasles charger ! l Charger à la demande l Compression manuelle l Compression automatique
- 41. Remplacer la décoration l Caractèresunicode ►★✓⇢✎♥☎♻⚠☻☺⇨ 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 InTime l Méthode de lazy-load : l charger les images visibles https://github.com/fasterize/lazyload
- 43. Sprites l Maintenance Outil : Sass+ Compass
- 44. Compression manuelle l Connaître lesformats 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 …
- 45.
- 46. Efficace mais : 50%des sites oublient 30% ont un TTL < 30 jours Gérer son cache
- 47. « Vide toncache » 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 cacheslongs 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
- 49. Gérer son cache Surveiller: WebPagetest
- 50. Pourquoi la performance? Un administrateur l système heureux l l l Serveurs tiers
- 51. SPOF Dépendances à desserveurs 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
- 52. SPOF-O-Matic Teste la fragilitéaux ralentissements des serveurs tiers l démo
- 53. SPOF Surveiller : WebPagetest Fixer: chargements asynchrones
- 54. S’auto-former En anglais l http://www.perfplanet.com/ lhttp://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èglesaux 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
- 56. Questions ? l Viens jouer: l braincracking.org l @theystolemynick
- 57. Crédits l http://www.flickr.com/photos/themonnie/2495892146 l http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/ lhttp://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostream/