SlideShare une entreprise Scribd logo
1  sur  57
Télécharger pour lire hors ligne
Techniques d’accélération des pages Web
Jean-Pierre VINCENT
Consultant indépendant
@theystolemynick
Braincracking.org
Bonjour, je m’appelle Jean-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
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 CA
l
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-revenue
http://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster
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
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 8
Safari iOS
Android 2.3.x et 4.x
Les utilisateurs
l
Le site moyen
l
1,5 Mo
l
120 requêtes
l
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 JavaScript
l
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 JavaScript
l
Librairies RUM :
l
RequestTracker
l
Boomerang JS
l
Outils externes
l
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 serveur
l
Cache serveur, cache client
l
Chargement des fichiers
Configuration serveur
1. Configuration du 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
Configuration serveur
Vérifier avec WebPageTest
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é
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
Redirections
l
CSS
l
Polices
l
JS
Ressources bloquantes :
Le chemin critique
Redirections
l
Limiter à 1 max
l
Jamais côté client
l
Surtout sur mobile
Le chemin critique
CSS / JS
l
Concaténation (2 fichiers max par type)
l
Minification
Le chemin critique
Polices
l
Les limiter
l
Les valider :
l
poids,
l
utilisée,
l
compatible (Chrome XP)
Le chemin critique
Le choix des armes
l
<script src> en haut
l
<script src> en bas
l
Inline
l
defer
l
Asynchrone
Inclure JavaScript
<script src> en haut
Si :
l
petit
l
concaténé
l
sans concurrence
l
Et
l
HTML + CSS + JS +
Fonts < 6 requêtes
Inclure JavaScript
<script src> en bas
l
Si :
l
Page légère
l
Gestion des dépendances
l
Pas de document.write()
l
Pas de iOS
Inclure JavaScript
l
Images
l
Iframe
l
Objets flash / vidéo
Ressources gênantes :
Temps onload()
Images
l
Optimisations :
l
Ne pas les charger !
l
Charger à la demande
l
Compression manuelle
l
Compression automatique
Remplacer la décoration
l
Caractères unicode ►★✓⇢✎♥☎♻⚠☻☺⇨
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/
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 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
…
→
Cache client
Efficace mais :
50% des sites oublient
30% 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 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
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.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
SPOF-O-Matic
Teste la fragilité aux ralentissements des serveurs tiers
l
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.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
Passer des règles aux 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
Questions ?
l
Viens jouer :
l braincracking.org
l @theystolemynick
Crédits
l http://www.flickr.com/photos/themonnie/2495892146
l http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/
l http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostream/

Contenu connexe

Tendances

Introduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, ParisIntroduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, Paris
Eric D.
 

Tendances (14)

Meetup Webperf : résumé des 3 dernières années
Meetup Webperf : résumé des 3 dernières annéesMeetup Webperf : résumé des 3 dernières années
Meetup Webperf : résumé des 3 dernières années
 
Performance des tiers : combien coûte cet emplacement pub ?
Performance des tiers : combien coûte cet emplacement pub ?Performance des tiers : combien coûte cet emplacement pub ?
Performance des tiers : combien coûte cet emplacement pub ?
 
Le scrap : accessible à tous #seocamp
Le scrap : accessible à tous #seocampLe scrap : accessible à tous #seocamp
Le scrap : accessible à tous #seocamp
 
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
 
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 ?
 
La guerre SEO du CMS : WordPress VS Drupal
La guerre SEO du CMS : WordPress VS DrupalLa guerre SEO du CMS : WordPress VS Drupal
La guerre SEO du CMS : WordPress VS Drupal
 
Faire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketingFaire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketing
 
Magento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerceMagento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerce
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performant
 
Introduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, ParisIntroduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, Paris
 
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEO
 
Webperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performanceWebperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performance
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 

En vedette

En vedette (20)

Référentiels de bonnes pratiques : industrialisons nos savoir-faire
Référentiels de bonnes pratiques : industrialisons nos savoir-faireRéférentiels de bonnes pratiques : industrialisons nos savoir-faire
Référentiels de bonnes pratiques : industrialisons nos savoir-faire
 
La performance sur mobile
La performance sur mobileLa performance sur mobile
La performance sur mobile
 
Conférence Open Data par où commencer ? Intervention J.M.Lazard Open datasoft
Conférence Open Data par où commencer ? Intervention J.M.Lazard Open datasoft Conférence Open Data par où commencer ? Intervention J.M.Lazard Open datasoft
Conférence Open Data par où commencer ? Intervention J.M.Lazard Open datasoft
 
HTML5 maintenant partie 2 : APIs
HTML5 maintenant partie 2 : APIsHTML5 maintenant partie 2 : APIs
HTML5 maintenant partie 2 : APIs
 
Webpagetest en 5 minutes - Sud Web 2011
Webpagetest en 5 minutes - Sud Web 2011Webpagetest en 5 minutes - Sud Web 2011
Webpagetest en 5 minutes - Sud Web 2011
 
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
 
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
 
Bassem Asseh - présentation à la Fabrique du changement - mjs pdl sept 2016- ...
Bassem Asseh - présentation à la Fabrique du changement - mjs pdl sept 2016- ...Bassem Asseh - présentation à la Fabrique du changement - mjs pdl sept 2016- ...
Bassem Asseh - présentation à la Fabrique du changement - mjs pdl sept 2016- ...
 
Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 
Les Performance de rendu sur mobile
Les Performance de rendu sur mobileLes Performance de rendu sur mobile
Les Performance de rendu sur mobile
 
Practical web performance - Site Confidence Web Performance Seminar
Practical web performance - Site Confidence Web Performance SeminarPractical web performance - Site Confidence Web Performance Seminar
Practical web performance - Site Confidence Web Performance Seminar
 
Physical web
Physical webPhysical web
Physical web
 
Measuring Mobile Web Performance v2
Measuring Mobile Web Performance v2Measuring Mobile Web Performance v2
Measuring Mobile Web Performance v2
 
Microsoft et l'Open Source
Microsoft et l'Open SourceMicrosoft et l'Open Source
Microsoft et l'Open Source
 
Responsive logic - Kiwiparty
Responsive logic - KiwipartyResponsive logic - Kiwiparty
Responsive logic - Kiwiparty
 
Barcamp Prestashop - Améliorer la disponibilité
Barcamp Prestashop - Améliorer la disponibilitéBarcamp Prestashop - Améliorer la disponibilité
Barcamp Prestashop - Améliorer la disponibilité
 
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au GuardianFaire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au Guardian
 
Les outils de monitoring
Les outils de monitoringLes outils de monitoring
Les outils de monitoring
 
BEM, vos CSS sous vitamines !
BEM, vos CSS sous vitamines !BEM, vos CSS sous vitamines !
BEM, vos CSS sous vitamines !
 
Un peu de sécurité dans ce monde de Kiwi
Un peu de sécurité dans ce monde de KiwiUn peu de sécurité dans ce monde de Kiwi
Un peu de sécurité dans ce monde de Kiwi
 

Similaire à Introduction à la webperf

Techniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyTechniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwiparty
Jean-Pierre Vincent
 

Similaire à Introduction à la webperf (20)

Techniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyTechniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwiparty
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Performance Web côté client - Daspet / Sullivan - Paris Web 2008Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
 
Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010
 
Mesurer la performance : onload, pages
Mesurer la performance : onload, pagesMesurer la performance : onload, pages
Mesurer la performance : onload, pages
 
Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
Performance au quotidien dans un environnement symfony
Performance au quotidien dans un environnement symfonyPerformance au quotidien dans un environnement symfony
Performance au quotidien dans un environnement symfony
 
Comment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateurComment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateur
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperf
 
Webperf Front-End SeoCampus 2012
Webperf Front-End SeoCampus 2012Webperf Front-End SeoCampus 2012
Webperf Front-End SeoCampus 2012
 
LoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé AlbertonLoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé Alberton
 
Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...
Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...
Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...
 
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéLe Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
 
Webperf et SEO : les Mythes et la Réalité
Webperf et SEO : les Mythes et la RéalitéWebperf et SEO : les Mythes et la Réalité
Webperf et SEO : les Mythes et la Réalité
 
Webperf & SEO : les mythes et la réalité
Webperf & SEO : les mythes et la réalitéWebperf & SEO : les mythes et la réalité
Webperf & SEO : les mythes et la réalité
 
Performance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autrePerformance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autre
 
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é
 

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 (9)

Performances web - quoi de neuf ?
Performances web - quoi de neuf ?Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
 
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
 
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
 

Introduction à la webperf