Post on 25-Dec-2014
description
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/