SlideShare une entreprise Scribd logo
1  sur  79
Techniques d’accélération des pages Web
Jean-Pierre VINCENT
Consultant indépendant
@theystolemynick
Braincracking.org
Bonjour, je m’appelle Jean-Pierre
 5 10 13 ans de Web
PHP, JavaScript, HTML5, C
Ex :
startups, Yahoo!, houra.fr
Expert frontend indépendan
Veilleur :
 braincracking.org
 @theystolemynick
Performance Web ?
Les 10 14 commandements
en 2006
http://developer.yahoo.com/performance/rules.html
Soooo 2006
2006 - 2013
Nouveaux besoins
Pages 1 Mo +
Social, tracking, pubs
JavaScript partout
Mobile !
Meilleur environnement
SPDY remplace HTTP
IE 7 meurt
ADSL pour tous
4G, Fibre !
Passer des règles aux outils
Règles
Yahoo! Best Practices
(35 règles)
Google PageSpeed
(31 règles)
Test Opquast
(41 règles)
…
Jusqu'à 400+ pratiques
Outils
Analyse réseauProfiling
Bonnes pratiques
Monitoring
RUM
Intégration continue
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
Bing : 1 s =
- 3 % de CA
Yahoo! : 1 s =
+ 10 % de rebond
Études Bing et Google Velocity 2009 : http://velocityconf.com/velocity2009/public/schedule/detail/8523
Combien coûte une seconde ?
Mobile
1 s = -10% de pages vues
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
Chantier Webperf
Comment ne pas rater un chantier Webperf ?
Chantier Webperf
Fixer des objectifs
Mesurer pour l'utilisateur
Coder !
Surveiller
Pourquoi la performance ?
Qualité perçue
Ergonomie
Réponse à un besoin
Métriques :
Accès fonctionnalité
premier rendu$$
Objectifs
Interactivité avec la fonctionnalité < 5 s
Mesurer
En JavaScript
Google Analytics « User Timing »
Boomerang, autres outils de RUM
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Objectifs
Mesurer
WebPageTest
Dynatrace
Services payants
Trouver le chemin critique
Chemin critique
1er rendu
Le chemin critique
Agir
Agir sur le chemin critique
Côté client
Redirections
CSS
Polices
JS
Ressources bloquantes :
Le chemin critique
Redirections
Limiter à 1 max
Jamais côté client
Surtout sur mobile
Le chemin critique
CSS
Concaténation (2 fichiers max)
Minification
Inline ?
Le chemin critique
Polices
Les supprimer …
Les valider :
poids,
utilisée,
compatible (Chrome XP)
Chargement asynchrone
Le chemin critique
Le choix des armes
<script src> en haut
<script src> en bas
Inline
defer
Asynchrone
Inclure JavaScript
<script src> en bas
Si :
Page légère
Gestion des dépendances
Pas de document.write()
Pas de iOS
Inclure JavaScript
<script defer>
Retardé par le onload
Inclure JavaScript
Javascript asynchrone
Conditions :
Chargeur mis inline
Gestion d'une file de téléchargement
Remplacer les dépendances inline par des callback
Découpe par module
Téléchargement dépriorisé
Au top: concaténation + module + asynchrone
LabJS, requireJS
Inclure JavaScript
<script src> en haut
Si :
petit
concaténé
sans concurrence
Et
HTML + CSS + JS + Fonts < 6 requêtes
Inclure JavaScript
Le choix se fera sur :
Contraintes de la page
Maturité de l'équipe
Inclure JavaScript
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Réponse HTML < 1 s
Objectifs
Tous les outils du monde…
Et WebPageTest
Mesurer
 Moyens :
 Cache serveur
 Flush()
 Page dynamiques et XHR
 Parallélisation (Big Pipe de FB)
Agir
Pages statiques
Cache serveur
 Fichiers plats
 Mécanismes des CMS
 memcache
 Varnish
 CDN…
Paramétrage du temps de cache
Contenu personnalisé
Technique du Flush()
 Envoyer le <head> au plus tôt
Personnalisation :
Server Side Include
Inclusion des parties dynamiques
Pages semi-dynamiques
Pages semi-dynamiques
Pages semi-dynamiques
 Cache sur les parties statiques
 Envoyer ASAP
 XHR ou SSI pour les parties dynamiques
 Ne pas oublier l'interface
 Référencement
Extrêmes
Facebook Big Pipe
Pourquoi la performance ?
SEO
1 critère de référencement
chez Google
Métrique : temps « onload
Mesurée par les utilisateurs
http://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.html
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Réponse HTML < 1 s
Chargement de la page < 20 s ?
Objectifs
Tous les outils du monde…
Et WebPageTest
Mesurer
Window.onload() de 20 secondes ?
Facile avec la fibre !
Mesurer
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 8
Safari iOS
Android 2.3.x et 4.x
WebPageTest Monitor
Les utilisateurs
Images
Iframe
Objets flash / vidéo
Ressources gênantes :
Temps onload()
Images
Optimisations :
 Ne pas les charger !
 Charger à la demande
 Compression manuelle
 Compression automatique
Remplacer la décoration
Caractères unicode ►★✓⇢✎♥☎☻☺⇨
Dégradés
Coins arrondis
Ombres sur texte et boîtes
Rotation de texte
Opacité
http://ikwebdesigner.com/special-characters/
Chargement Just In Time
Méthode de lazy-load :
 charger les images visibles
https://github.com/fasterize/lazyload
Sprites

Maintenance
Outil : Sass + Compass
Limiter les requêtes
 Encodage en base64
<img src="data:image/png;base64,<?= base64_e
 IE < 8 : MHTML
⚠ Performance de rendu
Compression manuelle
Connaître les formats
PNG toujours meilleur que GIF
PNG : ultra efficace avec des aplats de couleur
JPG : mauvais pour le texte si il est en couleurs
Jamais de PNG entrelacé
PNG8 alpha
WebP : mal supporté
…
Compression automatique
Ligne de commande
 PNGOUT
 OptiPNG
 Pngcrush
 JpegOptim
 Jpegrescan
Interface
 ImageAlpha (pngmini.com)
 PNGGauntlet
 ImageOptim
 pngquant
 pngnq-s9
 Gifsicle
 jpegtran
 SVG : distribuer en gzip
Pourquoi la performance ?
Un administrateur
système heureux
Serveurs tiers
SPOF
Dépendances à des serveurs tiers qui peuvent blo
Usual suspect :
http://platform.twitter.com/widgets.js
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2
http://html5shiv.googlecode.com/svn/trunk/html5.
SPOF-O-Matic
Teste la fragilité aux ralentissements des serveurs tiers
démo
SPOF
Surveiller : WebPagetest
Fixer : chargements asynchrones
→
Gérer son cache
« Vide ton cache »
Sans cache :
• Phases de recette interne
• Environnements de développ
Cache agressif :
• Cache utilisateur
• Chaîne de cache réseau
Gérer son cache
Invalidation des caches longs
Maîtrise totale des URL
HTML
CSS
JS
Processus de compilation
URL rendues uniques par :
Numéro de release
Md5 du fichier
Expires : +1 an
Cache-control : public
Vary : xxx
Mise en cache long :
Gérer son cache
X
Le super cache
API Application Cache
1 application = 1 pack de fichiers
1 fichier de règles
1 API de gestion du cache
Surtout sur mobiles
Gérer son cache
Gérer son cache
Surveiller : WebPagetest
Configuration serveur
1. Configuration du keep-alive :
2. Activer la compression
KeepAlive On
KeepAliveTimeout 5
Timeout 10
Outils : analyse
ySlow
Outils : analyse
Google PageSpeed
Outils : analyse
WebPageTest
Monitoring
Gratuit

 WPT monitor
 ShowSlow
Commercial
 Torbit
 Yottaa
 GTmetrix
 Dynatrace
…
Performance de rendu
Profilers front
IE Developer tools
Profilers front
Dynatrace AJAX
Rendu fluide
Alléger le DOM
Surveiller 2 métriques
La profondeur max et moyenne ( < 12 )
Le nombre de nœuds (< 1500 )
Outil : DOM Monster, WPT
Long et périlleux si fait après coup
Sensibilisation des intégrateurs
Rendu fluide - JavaScript
Bonnes pratiques
Peu de requêtes DOM
Caching
En dehors des boucles
Manipulation du DOM par batch
Application de classes VS $.css()
Limiter la taille des requêtes
$(doc.ById('monID')).find('> div.maC
Privilégier document.querySelector()
JavaScript lui même est rarement un problème
Rendu fluide
La technique du setTimeout( 0 )
En cas de blocage de l'interface :
« casser » les boucles toutes les 50 ms
Y revenir lorsque le navigateur est libre
Résumé
Performances Web moderne :
Outils
WebPageTest !
Profilers
Monitoring, process
WPT Monitor, build, RUM
 Techniques :
Travailler le chemin critique
Chargements juste à temps
Connaître ses utilisateurs, faire de la veille
S’auto-former
En anglais
http://www.perfplanet.com/
http://developer.yahoo.com/performance/rules.html
https://developers.google.com/speed/docs/best-practices/rules_intro
http://www.webpagetest.org/forums
En français
http://checklists.opquast.com/webperf/
https://groups.google.com/forum/?fromgro
@webperf_fr
et
@WebperfParis
https://github.com/edas/webperf-book
http://braincracking.org
Questions ?
Viens jouer :
 braincracking.org
 @theystolemynick
Crédits
http://www.flickr.com/photos/themonnie/2495892146
http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/
http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostream/

Contenu connexe

Tendances

Formation agile - Certification Professional Scrum Master
Formation agile - Certification Professional Scrum MasterFormation agile - Certification Professional Scrum Master
Formation agile - Certification Professional Scrum Master
NovUp
 
Formation agile - Certification Professional Scrum Product Owner
Formation agile - Certification Professional Scrum Product OwnerFormation agile - Certification Professional Scrum Product Owner
Formation agile - Certification Professional Scrum Product Owner
NovUp
 
Développement en méthode agile
Développement en méthode agileDéveloppement en méthode agile
Développement en méthode agile
laurent bristiel
 

Tendances (20)

Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !
 
Ecrire de bonnes user stories - en 5 minutes - scrum wine v1.0
Ecrire de bonnes user stories - en 5 minutes -  scrum wine v1.0Ecrire de bonnes user stories - en 5 minutes -  scrum wine v1.0
Ecrire de bonnes user stories - en 5 minutes - scrum wine v1.0
 
Mes outils électroniques Agile, tout un programme!
Mes outils électroniques Agile, tout un programme!Mes outils électroniques Agile, tout un programme!
Mes outils électroniques Agile, tout un programme!
 
Clean Architecture et Code patrimonial
Clean Architecture et Code patrimonialClean Architecture et Code patrimonial
Clean Architecture et Code patrimonial
 
Large Scale Scrum
Large Scale ScrumLarge Scale Scrum
Large Scale Scrum
 
Mise en place de bonnes pratiques (Scrum et php) au sein de projets existants
Mise en place de bonnes pratiques (Scrum et php) au sein de projets existantsMise en place de bonnes pratiques (Scrum et php) au sein de projets existants
Mise en place de bonnes pratiques (Scrum et php) au sein de projets existants
 
Méthodes agiles & Scrum
Méthodes agiles & ScrumMéthodes agiles & Scrum
Méthodes agiles & Scrum
 
Preparation et certification PSM Niv1
Preparation et certification PSM Niv1 Preparation et certification PSM Niv1
Preparation et certification PSM Niv1
 
Une semaine dans ma peau de Scrum Master - V0 - Meetup Renault Digital
Une semaine dans ma peau de Scrum Master - V0 - Meetup Renault DigitalUne semaine dans ma peau de Scrum Master - V0 - Meetup Renault Digital
Une semaine dans ma peau de Scrum Master - V0 - Meetup Renault Digital
 
Kanban pour tous
Kanban pour tousKanban pour tous
Kanban pour tous
 
Tester du legacy code, mission impossible ?
Tester du legacy code, mission impossible ?Tester du legacy code, mission impossible ?
Tester du legacy code, mission impossible ?
 
Drupal, scrum et l'agilité - Drupalcamp Paris 2013
Drupal, scrum et l'agilité - Drupalcamp Paris 2013Drupal, scrum et l'agilité - Drupalcamp Paris 2013
Drupal, scrum et l'agilité - Drupalcamp Paris 2013
 
2011 XKE - Kanban in action
2011 XKE - Kanban in action2011 XKE - Kanban in action
2011 XKE - Kanban in action
 
Formation agile - Certification Professional Scrum Master
Formation agile - Certification Professional Scrum MasterFormation agile - Certification Professional Scrum Master
Formation agile - Certification Professional Scrum Master
 
Scrumday 2015 : La régression continue - une méthode pour bien faire rater l'...
Scrumday 2015 : La régression continue - une méthode pour bien faire rater l'...Scrumday 2015 : La régression continue - une méthode pour bien faire rater l'...
Scrumday 2015 : La régression continue - une méthode pour bien faire rater l'...
 
Scrum Master, qui es-tu ? Que fais-tu ?
Scrum Master, qui es-tu ? Que fais-tu ?Scrum Master, qui es-tu ? Que fais-tu ?
Scrum Master, qui es-tu ? Que fais-tu ?
 
"Initiation au kanban" à la conférence CodeursEnSeine (Novembre 2014)
"Initiation au kanban" à la conférence CodeursEnSeine (Novembre 2014)"Initiation au kanban" à la conférence CodeursEnSeine (Novembre 2014)
"Initiation au kanban" à la conférence CodeursEnSeine (Novembre 2014)
 
Project Management 9 kanban
Project Management 9 kanbanProject Management 9 kanban
Project Management 9 kanban
 
Formation agile - Certification Professional Scrum Product Owner
Formation agile - Certification Professional Scrum Product OwnerFormation agile - Certification Professional Scrum Product Owner
Formation agile - Certification Professional Scrum Product Owner
 
Développement en méthode agile
Développement en méthode agileDéveloppement en méthode agile
Développement en méthode agile
 

En vedette (9)

Uai docentes charla metodo
Uai docentes charla metodoUai docentes charla metodo
Uai docentes charla metodo
 
Efectividad Personal En 3 Pasos Ocubre 2009 [ Modo De Compatibilidad]
Efectividad  Personal En 3 Pasos  Ocubre 2009 [ Modo De Compatibilidad]Efectividad  Personal En 3 Pasos  Ocubre 2009 [ Modo De Compatibilidad]
Efectividad Personal En 3 Pasos Ocubre 2009 [ Modo De Compatibilidad]
 
Tippi fille de la jungle
Tippi fille de la jungleTippi fille de la jungle
Tippi fille de la jungle
 
Handicaps for summer 2014
Handicaps for summer 2014Handicaps for summer 2014
Handicaps for summer 2014
 
Little Ice Age
Little Ice AgeLittle Ice Age
Little Ice Age
 
10.00 10.30 nancy moureau - publiceren
10.00 10.30 nancy moureau - publiceren10.00 10.30 nancy moureau - publiceren
10.00 10.30 nancy moureau - publiceren
 
Transferencia Internacional de Datos Personales - Safe Harbor
Transferencia Internacional de Datos Personales - Safe HarborTransferencia Internacional de Datos Personales - Safe Harbor
Transferencia Internacional de Datos Personales - Safe Harbor
 
Rare Disease Day Webinar
Rare Disease Day WebinarRare Disease Day Webinar
Rare Disease Day Webinar
 
Doctorado dominios
Doctorado dominiosDoctorado dominios
Doctorado dominios
 

Similaire à Techniques accélération des pages web #kiwiparty

Similaire à Techniques accélération des pages web #kiwiparty (20)

Techniques d'accélération des pages web
Techniques d'accélération des pages webTechniques d'accélération des pages web
Techniques d'accélération des pages web
 
Introduction à la webperf
Introduction à la webperfIntroduction à la webperf
Introduction à la webperf
 
Techniques d&rsquo;accélération des pages Web
Techniques d&rsquo;accélération des pages WebTechniques d&rsquo;accélération des pages Web
Techniques d&rsquo;accélération des pages Web
 
Talk performance web
Talk performance webTalk performance web
Talk performance web
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performant
 
Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"
 
La performance sur mobile
La performance sur mobileLa performance sur mobile
La performance sur mobile
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Comment améliorer la performance de vos sites et applications web présen...
Comment améliorer la performance de vos sites et applications web    présen...Comment améliorer la performance de vos sites et applications web    présen...
Comment améliorer la performance de vos sites et applications web présen...
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
Un site web rapide ?
Un site web rapide ? Un site web rapide ?
Un site web rapide ?
 
Le Web comme plateforme applicative - comment programme-t-on le Web?
Le Web comme plateforme applicative - comment programme-t-on le Web?Le Web comme plateforme applicative - comment programme-t-on le Web?
Le Web comme plateforme applicative - comment programme-t-on le Web?
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
La vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéLa vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploité
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEOCore Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
 

Plus de Jean-Pierre Vincent

Function oop - bonnes pratiques ms tech days
Function   oop - bonnes pratiques ms tech daysFunction   oop - bonnes pratiques ms tech days
Function oop - bonnes pratiques ms tech days
Jean-Pierre Vincent
 

Plus de Jean-Pierre Vincent (16)

Mesurer la performance : onload, pages
Mesurer la performance : onload, pagesMesurer la performance : onload, pages
Mesurer la performance : onload, pages
 
Les Performance de rendu sur mobile
Les Performance de rendu sur mobileLes Performance de rendu sur mobile
Les Performance de rendu sur mobile
 
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
 
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exempleAccélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
 
Le monitoring de la performance front
Le monitoring de la performance frontLe monitoring de la performance front
Le monitoring de la performance front
 
Function oop - bonnes pratiques ms tech days
Function   oop - bonnes pratiques ms tech daysFunction   oop - bonnes pratiques ms tech days
Function oop - bonnes pratiques ms tech days
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
 
Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
 
Télés connectées et développement Web
Télés connectées et développement WebTélés connectées et développement Web
Télés connectées et développement Web
 
Html5 bonnes-pratiques
Html5 bonnes-pratiquesHtml5 bonnes-pratiques
Html5 bonnes-pratiques
 
Inclure du Javascript de manière performante
Inclure du Javascript de manière performanteInclure du Javascript de manière performante
Inclure du Javascript de manière performante
 
HTML5 maintenant partie 3 : multimedia
HTML5 maintenant partie 3 : multimediaHTML5 maintenant partie 3 : multimedia
HTML5 maintenant partie 3 : multimedia
 
HTML5 maintenant partie 2 : APIs
HTML5 maintenant partie 2 : APIsHTML5 maintenant partie 2 : APIs
HTML5 maintenant partie 2 : APIs
 
HTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantiqueHTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantique
 
Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 

Techniques accélération des pages web #kiwiparty