Initiation Webperf : Comprendre, analyser et optimiser les performances web Front-End

Initiation WebPerf
Comprendre et optimiser la vitesse d’affichage Front-End

Qui suis-je ?
Kenny DITS : Responsable Etude et Développement chez M6Web
Twitter: @kenny_dee

Sommaire
Introduction
Comprendre
Mesurer
Améliorer
Conclusion / Questions

Les performances Web :
Introduction

Etats des lieux
Perf Back-End
15% du temps passé
3% du temps passé
Perf Front-End
85% du temps passé
97% du temps passé
Web
Source : http://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
Mobile

Pourquoi ?
Référencement
Satisfaction internautes
Contenu important visible plus rapidement
Diminuer les coûts d'hébergement / BP
Bonnes pratiques de désign / intégration
QOS

Crédibilité
« Anypause beforeresponding to a simple question "doesthisdressmake me look big ?" qualifies the inevitableresponse"absolutelynot" as lesscertain. »
Source : http://radar.oreilly.com/2011/04/why-speed-matters.html

Speed Matters !
Tout le monde est concerné !

1)Comprendre les performances Web

Les métriques de base
Start Render
Document Complete
FullyLoaded
Request
Bytes In

Comment fonctionnent nos navigateurs ?
Latence (Round Trip Time)
Connexions simultanées par domaine
Fonctionnement CSS / JS
…
Voir BrowserScope.org

BrowserScope
Comparatif navigateurs surhttp://www.browserscope.org

Cuzillon
Tester des combinaisons Js/Css/image/iframe …http://stevesouders.com/cuzillion/

2)Mesurer les performances web :

WaterfallCharts
Exemple généré avec Webpagetest

Mesurer les performances ?
En local :

Onglet Réseau :
Waterfall complet
Filtres par type de fichier
Détails des requêtes
http://www.firebug.net
Firebug (Plugin Firefox)

Onglet Yslow de Firebug :
Best practices Webperf
Yslow Score
Yslow (Plugin Firebug)

Best PraticesWebperf
PageSpeed Score / Yslow Rank
PageSpeed /Yslow

Payant.
Fonctionne avec IE et Firefox
Windows only …
HTTPWatch

Windows only
Pas lié à un navigateur : capture le traffic web
WaterfallCharts
http://www.fiddler2.com/
Fiddler

Dynatrace Ajax
Windows uniquement (IE/FF)
Très précis pour le javascript
Beaucoup de possibilités
Version premium payante
http://ajax.dynatrace.com/

Chrome Speed Tracer
Sur la version de dév de Chrome
Reflow/Repaint
Très précis mais complexe
Adapté aux applications « Ajax »

Mesurer les performances ?
A distance :

WebPageTest.org
La référence incontestable dans le domaine.
Crée par @patmeenan (désormais chez Google)http://www.lafermeduweb.net/tutorial/web-page-test-auditez-les-performances-de-votre-site-web-42.html

WebPageTest.org
Waterfallcharts très complet (et paramétrable)
Graphique par connexion Http
Multi Browser :
IE (6/7/8/9) + Dynatrace, Chrome 11, Chrome Frame 11 IE 6
Génération de vidéo
Comparaison visuelle et vidéo entre plusieurs tests
Grand choix de location : Paris / Dulles / Londres / HongKong …
Scripting (navigation / clic / formulaire …)
Blocking : permet de bloquer la pub, les Js, des scripts tiers, des domaines etc …
Résultâts ultra-complets (par type de ressources, par domaine)
Screenshots des tests
Intégration pagespeed, yslow et différent conseils pour optimiser la page testée

Comparaison Vidéo WebPageTest.org

Blaze.ioMobile
Iphone 4.3
Android 2.2, 2.3
Vidéo + Waterfall …
Accessible via l’onglet Mobile de WebPageTest
http://www.blaze.io/mobile/

W3C Validator Mobile
Respect des standards
Priorisation des erreurs rencontrées
http://validator.w3.org/mobile/

ShowSlow
Peut être installé sur son serveur
Implémente PageSpeed / Yslow et Webpagetest
Pratique pour l’automation (Selenium IDE / Selenium RC / Firebug / Netexport …)
http://www.showslow.com

Yottaa.com
Cloud
YottaaOptimizer
Waterfall + Time To Title
http://www.yottaa.com

Mesurer les performances
Voir aussi:
Pingdom, Yottaa,Gxmetric…
WebPageTest Monitoring
ShowSlow+ Automation (Selenium RC) + Firebug+ NetExport
PageSpeed Online
…

3)Comment améliorer les performances ?
Quelques pistes:

Diminuer le nombre de requêtes HTTP

Sprites CSS
Regrouper plusieurs images en une seule, et les positionner via CSS

Images => CSS
Remplacer les images de dégradé (pngtocss)et les bords arrondis par des équivalents CSS 3
https://github.com/bluesmoon/pngtocss

Regroupement CSS et Js intelligent
Regrouper les multiples Js et Css en fonction du rubriquage de votre site.

Cache HTTP / Expires
Définir une durée de cache pour chaque élément de vos sites :
Ex : ExpiresByType dans la conf Apache
http://httpd.apache.org/docs/2.0/mod/mod_expires.html

Javascript : Optimisation et blocage
Utilisez FireBug / Speed Tracer / Dynatrace pour optimiser votre code Javascript. Eviter les scripts JsInline autant que possible ou regroupez les en fin de page.
Utilisez des sélecteurs efficaces.
Evitez les balises <script> dans le <head>, et préférez les avant le </body>

Javascript externe : Asynchrone
Charger les scripts qui le permettent en Asynchrone afin de ne pas bloquer le chargement des autres éléments.
var e = document.createElement('script’);e.async= true;e.src = document.location.protocol + '//connect.facebook.net/fr_FR/all.js’;document.getElementById('fb-root').appendChild(e);

Optimisation et positionnement CSS
Utilisez PageSpeed pour modifier les sélecteurs non optimisés.
Réduisez la taille de vos feuilles de style au maximum.

CookieLess Domain
Utilisez des domaines sans cookie pour délivrer les contenus statiques.

Domain Sharding
Pour une meilleure parallélisation, utilisez plusieurs domaines pour délivrer les contenus statiques

Lazyloading
Ne charger certains contenus que lorsque l’utilisateur peut le visualiser.

Compression Gzip / Keep-Alive
Gzip permet de gagner 70% sur la taille des éléments de la page.
Le keep-alive permet l’établissement de connexions permanentes.

Compression CSS et Javascript
Pour le JS : Closure Compiler, YUICompressor
http://code.google.com/intl/fr-FR/closure/compiler/ , http://developer.yahoo.com/yui/compressor/
Pour les CSS : CssCompressor (PHP)
https://github.com/codenothing/css-compressor/

Compression des images Jpg/Png
OptiPng / Jpegtran / Pngcrush / Smush.it / ImageMagick …

Widgets ou scripts Tiers
Attention à l’intégration des widgets Facebook, Twitter, ou tags Adsense & co …Lazyload / Cron …
http://stevesouders.com/p3pc/

Commentaires conditionnels IE
Paralleliser les CSS sur IE en cas de commentairesconditionnels dans le <head>

=> 0,2s gagnée sur le StartRender
http://webforscher.wordpress.com/2010/05/20/ie-6-slowing-down-ie-8/

Feuille de style Print
Ajouter la CSS print dans la CSS globale avec :
@media print { … }

Pour continuer :

HTTP Archive : le standard
Viewer :
http://code.google.com/p/harviewer/
Format : http://groups.google.com/group/http-archive-specification
Supporté par : http://groups.google.com/group/http-archive-specification/web/har-adopters?hl=en

HTTP Archive : le site
Statistiques diverses sur les performances Web récoltées via les mesures publiques WebPageTest
http://www.httparchive.org

Pour continuer
Nouvelle métrique : Abovethe Fold Time (AFT) sur WPT.
Google Analytics (mesures des performances)
Service d’optimization : Strangeloop / Yottaa / Blaze.io / CloudFlare / Torbit …
Audit de performances

Conclusion/Thanks to
WebperfGuru’s : StoyanStefanov / Steve Souders
Webperf Fr : Eric Daspet @edasfr, Vincent Voyer @zeroload & many more
Le Webperf Group Fr : https://groups.google.com/group/performance-web?hl=fr
#webperf sur Twitter
EvenFasterWebsites (Livre)
High Performance Websites (Livre)
…

Follow me on Twitter
@kenny_dee

http://www.novaway.fr	1017
http://www.developpez.com	352
http://www.mashant.com	293
http://www.developpez.net	122
http://kenny-dee.tumblr.com	101
http://blog.ludikreation.com	61
http://event.lafermeduweb.net	40
http://web.developpez.com	24
http://v2.novaway.fr	20
http://www.scoop.it	7
http://planet.ludikreation.com	4
http://lanyrd.com	3
http://manu.clabman.fr	3
http://twitter.com	3
http://www.slideshare.net	2
http://mashant-local.fr	1
http://djo.novaway.dev.novaway.net	1
https://twitter.com	1
http://paper.li	1
url_unknown	1
http://m.novaway.fr	1

Initiation Webperf : Comprendre, analyser et optimiser les performances web Front-End

by Kenny Dits

Accessibility

Categories

Upload Details

Usage Rights

21 Embeds 2,058

Statistics