introduction à la webperf
DESCRIPTION
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é.TRANSCRIPT
Techniques d’accélération des pages Web
Jean-Pierre VINCENTConsultant indépendant
@theystolemynickBraincracking.org
Bonjour, je m’appelle Jean-Pierre
l 13 ans de Web :l PHP, JavaScript, HTML5, CSSstartups, Yahoo!, houra.fr
Expert frontend indépendantl Veilleur :l braincracking.orgl @theystolemynick
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
Performance frontend
Rien Rien Premier affichage ! Chargé
Pourquoi la performance ?
l Qualité perçue
l Ergonomie
l Référencement
l Coûts réseau
l Fun
$$
Combien coûte une seconde ?
Combien coûte une seconde ?
Tunnel d’achat :
1s = -7% de conversion
Tagman, 2012
Combien coûte une seconde ?
Vidéo :
1s = -6% de vue
Akamai 2012
Combien coûte une seconde ?
e-commerce
1 s = - 50 % de conversion
Walmart 2012
Combien coûte une seconde ?
Search
l Bing : 1 s = l - 3 % de CAl Yahoo! : 1 s = l + 10 % de rebond
Études Bing et Google Velocity 2009 : http://velocityconf.com/velocity2009/public/schedule/detail/8523
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-revenuehttp://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster
Pourquoi la performance ?
l SEOl1 critère de référencement
chez GooglelInfluence 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
l Charger un site de 1,5 Mo ?
l Facile avec la fibre !
Toujours utile ?
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
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
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 8Safari iOSAndroid 2.3.x et 4.x
Les utilisateurs
l Le site moyenl 1,5 Mol 120 requêtesl 12 domaines
15 secondes de chargement
Chantier Webperf
l Fixer des objectifs
l Mesurer pour l'utilisateur
l Coder !
l Surveiller
Objectifs Utilisateurs
Interactivité avec la fonctionnalité < 5 s
Mesurer l'accès à la fonctionnalité
l En JavaScriptl Google Analytics « User Timing »l Boomerang, autres outils de RUM
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Objectifs Utilisateurs
Mesurer le premier rendu
l En JavaScriptl Librairies RUM :l RequestTrackerl Boomerang JS
l Outils externesl WebPageTest.org
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Réponse HTML < 1 s
Chargement de la page < 20 s ?
Objectifs SEO
Mesurer le onload
l Pratiquement tous les outils
Agir
Techniques passe partout :
l Configuration serveurl Cache serveur, cache clientl Chargement des fichiers
Configuration serveur
1. Configuration du keep-alive :
2. Activer la compression
KeepAlive OnKeepAliveTimeout 5Timeout 10
SetOutputFilter DEFLATEAddOutputFilterByType DEFLATE text/html text/css text/plain application/x-javascript
Configuration serveur
Vérifier avec WebPageTest
Cache Serveur
l Fichiers platsl Mécanismes / plugin des CMSl memcachel Varnishl CDN…
Paramétrage du temps de cacheContenu personnalisé
Cache serveur
Vérifier avec WebPageTest
Agir
l Le chargement des fichiers ou le chemin critique
Trouver le chemin critique
Chemin critique
1er rendu
Le chemin critique
Côté client
l Redirectionsl CSSl Policesl JS
Ressources bloquantes :
Le chemin critique
Redirections
l Limiter à 1 maxl Jamais côté clientl Surtout sur mobile
Le chemin critique
CSS / JS
l Concaténation (2 fichiers max par type)
l Minification
Le chemin critique
Polices
l Les limiterl Les valider :l poids,l utilisée,l compatible (Chrome XP)
Le chemin critique
Le choix des armes
l <script src> en hautl <script src> en basl Inlinel defer l Asynchrone
Inclure JavaScript
<script src> en haut
Si :l petit l concaténé l sans concurrence
l Etl HTML + CSS + JS + Fonts < 6 requêtes
Inclure JavaScript
<script src> en bas
l Si :l Page légèrel Gestion des dépendancesl Pas de document.write()l Pas de iOS
Inclure JavaScript
l Imagesl Iframel Objets flash / vidéo
Ressources gênantes :
Temps onload()
Images
l Optimisations :
l Ne pas les charger !l Charger à la demandel Compression manuellel Compression automatique
Remplacer la décoration
l Caractères unicode ►★✓⇢✎♥☎♻⚠☻☺⇨l Dégradésl Coins arrondisl Ombres sur texte et boîtesl Rotation de textel Opacité
l http://ikwebdesigner.com/special-characters/
Chargement Just In Time
l Méthode de lazy-load :
l charger les images visibles
https://github.com/fasterize/lazyload
Sprites
l Maintenance Outil : Sass + Compass
Compression manuelle
l Connaître les formats
l PNG toujours meilleur que GIFl PNG : ultra efficace avec des aplats de couleurl JPG : mauvais pour le texte si il est en couleursl Jamais de PNG entrelacél PNG8 alphal WebP : mal supportél …
→
Cache client
Efficace mais :50% des sites oublient30% ont un TTL < 30 jours
Gérer son cache
« 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
Invalidation des caches longs
l Maîtrise totale des URLl HTMLl CSSl JS
l Processus de compilationl URL rendues uniques par :
l Numéro de releasel Md5 du fichier
Expires : +1 anCache-control : publicVary : xxx
Mise en cache long :
Gérer son cache
X
Gérer son cache
Surveiller : WebPagetest
Pourquoi la performance ?
Un administrateur l système heureux
l
l
l Serveurs tiers
SPOF
Dépendances à des serveurs tiers qui peuvent bloquer le rendu
Usual suspect :l http://platform.twitter.com/widgets.jsl https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
l http://html5shiv.googlecode.com/svn/trunk/html5.js
SPOF-O-Matic
Teste la fragilité aux ralentissements des serveurs tiersl démo
SPOF
Surveiller : WebPagetest
Fixer : chargements asynchrones
S’auto-former
En anglais
l http://www.perfplanet.com/l http://developer.yahoo.com/performance/rules.htmll https://developers.google.com/speed/docs/best-practices/rules_introl http://www.webpagetest.org/forums
En françaisl http://checklists.opquast.com/webperf/l https://groups.google.com/forum/?fromgroups#!forum/performance-webl @webperf_fr l et l @WebperfParisl https://github.com/edas/webperf-bookl http://braincracking.org
Passer des règles aux outils
l Règlesl Yahoo! Best Practices
l (35 règles)l Google PageSpeedl (31 règles)l Test Opquastl (41 règles)…l Jusqu'à 400+ pratiques
l Outilsl Analyse réseaul Profilingl Bonnes pratiquesl Monitoringl RUMl Intégration continue
Questions ?
l Viens jouer :l braincracking.orgl @theystolemynick
Crédits
l http://www.flickr.com/photos/themonnie/2495892146l http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/l http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostream/