SlideShare une entreprise Scribd logo
1  sur  45
Télécharger pour lire hors ligne
PERFORMANCE WEB
Par quoi commencer ? 
Photo : © Raphaël Goetter
RAPHAËL GOETTER
Alsacréations
#CSS #Standards #Webdesign #Responsive
#HTML #Accessibilité #WebPerf
L'INTERNAUTE
N'AIME PAS
ATTENDRE
❶
!
ON VEUT DES CHIFFRES ! 
Vous aimez les stats ? 
ON VEUT DES CHIFFRES ! 
Sites e-commerce et attente client
57 % des visiteurs quittent un site e-commerce
s'il met plus de 4 secondes à s'afficher
– PhoCusWright / Akamai (2010)
“ 
26 % des visiteurs quittent un site e-commerce
s'il met plus de 2 secondes à s'afficher
– PhoCusWright / Akamai (2010)
“ 
ON VEUT DES CHIFFRES ! 
Sites e-commerce et attente client
ON VEUT DES CHIFFRES ! 
C'est pire sur mobile ! 
60% des mobinautes s'attendent à un chargement
de 3s maximum pour un site mobile
– Compuware (2011)
“ 
ON VEUT DES CHIFFRES ! 
C'est pire sur mobile ! 
60% des mobinautes s'attendent à un chargement
de 3s maximum pour un site mobile
– Compuware (2011)
“ … Et 74% quittent une page après 5 secondes d'attente
– Compuware (2011)
“ 
POURQUOI
LA PERFORMANCE WEB ? 
❷
Photo : CC Flickr - jdwheaton
PARCE QUE ÇA
RAPPORTE !  Photo : CC Flickr - jdwheaton
+100ms
1% perte de revenus
⬇
+100ms
1% perte de revenus
⬇
+500ms
-20% de recherches
⬇
+100ms
1% perte de revenus
⬇
+500ms
-20% de recherches
⬇
-2s
+15% de chargements
⬇
+100ms
1% perte de revenus
⬇
+500ms
-20% de recherches
⬇
-2s
+15% de chargements
⬇
-5s
+12% de revenus
+25% pageviews
⬇
MAIS AUSSI (SURTOUT ?) ...
Sources : WebRankInfo / 1ere-position.fr / silicon.fr
En 2010, Google a annoncé
officiellement qu'il tenait compte
de la rapidité des sites dans son
algorithme de positionnement.
Google recommande un délai
moyen de 1,5 seconde pour
l’affichage d’une page web.
❶ ❷
QU'EST-CE QUI
RALENTIT
LE WEB
❸
?
LE TYPE DE CONNEXION
EDGE (0,38 Mbit/s)
3G (1,9 Mbit/s)
3G+ (3,6 Mbit/s)
H+ (10 Mbit/s)
Wi-Fi (25 Mbit/s)
ADSL (30 Mbit/s)
4G (40 Mbit/s)
Fibre (100 Mbit/s)
Source : Wikipedia
LE TYPE DE CONNEXION
3G 20 minutes➞
3G+ 1min 15s➞
4G 10 secondes➞
Concrètement...
Source : Orange (bon OK c'est un peu bullshit marketing)
Téléchargement d'un album
de musique :
LE POIDS DES RESSOURCES
Images 700 Ko➞
JavaScript 230 Ko➞
CSS 37 Ko➞
HTML 45 Ko➞
Autres 188 Ko➞
1,2Mo au total en
moyenne : 
Source : AlexaRank Top 1000 (janvier - août 2013)
LE POIDS DES RESSOURCES
Source : http://mobitest.akamai.com
LE NOMBRE DE REQUÊTES
Images 60 requêtes➞
JavaScript 17 requêtes➞
CSS 3,5 requêtes➞
HTML 10 requêtes➞
Autres 7 requêtes➞
98 requêtes en
moyenne : 
Source : AlexaRank Top 1000 (janvier - août 2013)
LE NOMBRE DE REQUÊTES
… à cause de la latence
Latence
●
dépend du serveur, du DNS
●
dépend de la connexion :
●
20-60ms via ADSL
●
200-600ms en 3G
Chargement
●
dépend du poids
LES RALENTISSEMENTS DIVERS
Scripts bloquants
CSS bloquants
Redirections HTTP/JavaScript
Mauvaises requêtes (404)
Reflow, repaint navigateur
Etc.
LES OUTILS POUR
TESTER
❹
Photo : © Raphaël Goetter
MANUELLEMENT
Outil d'audit de Chrome
Module d'audit divers (accessibilité, réseau, performances,...)
directement intégré au navigateur Chrome :
Touche F12 Onglet « Audit » Option « Webpage performance »➞ ➞
MANUELLEMENT
Extensions : YSlow et PageSpeed 
YSlow (Yahoo!) : plugin disponible sur Firefox, Chrome, Safari, Opera
PageSpeed (Google) : plugin Chrome, Firefox et en ligne
EN LIGNE
La référence : WebPageTest.org 
Au choix : lieu du serveur, type de connexion, navigateur, etc.
EN LIGNE
Httparchive.org
FilmStrip !
EN LIGNE
Google PageSpeed Insights
EN LIGNE
AkamaiMobitest
Pour les temps d'affichage sur mobiles
QUELQUES
EXEMPLES
❺
QUELQUES SITES PASSÉS AU CRIBLE
7s
chargement
78
requêtes
1095ko
poids
7.1s
chargement
163
requêtes
2203ko
poids
7.2s
chargement
133
requêtes
808ko
poids
7.7s
chargement
57
requêtes
1010ko
poids
QUELQUES SITES PASSÉS AU CRIBLE
2.3s
chargement
171
requêtes
2058ko
poids
Suite...
6.6s
chargement
66
requêtes
671ko
poids
ACCÉLÉREZ VOS
PAGES WEB
❻
Photo : © Raphaël Goetter
BONNES PRATIQUES GÉNÉRALES
Pas de redirections de pages
Scripts placés avant </body> et/ou attributs async / defer
Évitez @import pour les fichiers CSS
Hébergez les ressources sur plusieurs domaines (entre 2 et 4)
Déclarez les dimensions des images dans le HTML (width="", height="")
Évitez les mauvaises requêtes (404)
❶
EN DÉTAIL
Hébergez les ressources sur plusieurs domaines«   »
Hébergez les ressources (images, médias) sur plusieurs domaines différents.
Cette technique favorise leur téléchargement en parallèle.
Un sous-domaine fonctionne aussi (ex. media.alsacreations.com), et un domaine sans cookies
est encore plus performant.
Source : Yahoo!UI blog
Opera : 8 / IE10 : 8 / Chrome : 6 / Firefox : 6 / IE8/IE9 : 6 / Safari : 4 / IE6/IE7 : 2
❶
RÉDUIRE LE POIDS DES RESSOURCES
Minifiez les fichiers CSS
Minifiez les fichiers JS
Compressez les images
Choississez le bon format d'image
(.png, .gif, .jpg)
Optez pour des fontes légères
(.woff est généralement plus léger)
❷
EN DÉTAIL
Compressez les images«   » ❷www.kraken.io
RÉDUIRE LES REQUÊTES
Réunissez les feuilles de styles CSS
en une seule si possible
Réduisez / réunifiez le nombre de
fichiers JavaScript externes si possible
N'utilisez pas (ou presque pas)
d'images !
→ Sprites CSS,
→ Data-URI,
→ Caractères unicodes,
→ Font Icons, ...
❸
EN DÉTAIL
Font Icons«   » ❸icomoon.io
.icon {font-family: "MyFontIcon", sans-serif;}
.icon-twitter:before {content: "t";}
NE CHARGER QUE LE NÉCESSAIRE
Chargez les scripts externes en Asynchrone et/ou Différé
N'utilisez pas display : none pour masquer un élément
jQuery est parfois inutile et remplaçable par jQuip ou Zepto.js, plus légers
Triez les scripts nécessaires et les scripts de confort
JavaScript est parfois avantageusement remplaçable par CSS3 :
bordures, arrondis, ombrages, animations, formes simples
(triangles, ronds, carrés)
Pensez à faire du chargement conditionnel de ressources
(selon taille d'écran, pixel-ratio, ...)
❹
EN DÉTAIL
Charger conditionnellement les éléments«   » ❹@media (min-width : 768px) {
.deco {background: url(concombre-big.jpg);}
}
@media (max-width : 767px) {
.deco {background: url(concombre-small.jpg);}
}
concombre-big.jpg
concombre-small.jpg
CÔTÉ SERVEUR
Compressez les fichiers texte côté serveur (HTML, CSS, JS)
Générez certaines pages « à l'avance » (ex. flux RSS)
Gérez les durées de cache des éléments
❺
EN DÉTAIL
Durée d'expiration du cache«   » ❺<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/plain "access plus 1 day"
ExpiresByType text/html "access plus 1 hour"
ExpiresByType application/x-javascript "access plus 3 months"
ExpiresByType application/javascript "access plus 3 months"
ExpiresByType text/css "access plus 3 months"
ExpiresByType image/gif "access plus 3 months"
ExpiresByType image/x-icon "access plus 3 months"
ExpiresByType image/png "access plus 3 months"
ExpiresByType image/jpeg "access plus 3 months"
ExpiresByType application/xml "access plus 1 hour"
# ExpiresDefault "access plus 1 day"
</IfModule>
Outil Google : Google ModPagespeed
Polices : League Gothic + Segoe UI Light
Photos : Fotolia + mon super APN
Pictos : IconFinder (Visual Pharm, Designmodo)
MERCI, BISOUS
Raphaël Goetter www.alsacreations.fr @goetter
Crédits

Contenu connexe

Tendances

Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
Chi Nacim
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
Chi Nacim
 

Tendances (19)

Supports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMSSupports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMS
 
Wordpress et referencement naturel - WordCamp Paris 2013, Daniel Roch
Wordpress et referencement naturel - WordCamp Paris 2013, Daniel RochWordpress et referencement naturel - WordCamp Paris 2013, Daniel Roch
Wordpress et referencement naturel - WordCamp Paris 2013, Daniel Roch
 
Mieux travailler le css avec sass:compass
Mieux travailler le css avec sass:compassMieux travailler le css avec sass:compass
Mieux travailler le css avec sass:compass
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
 
SASS
SASSSASS
SASS
 
HTML5
HTML5HTML5
HTML5
 
Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du web
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
CSS 3
CSS 3CSS 3
CSS 3
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
 
La performance sur mobile
La performance sur mobileLa performance sur mobile
La performance sur mobile
 
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
 
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
Wordpress et SEO - Campus Made in Blog 2014 Montréal
Wordpress et SEO - Campus Made in Blog 2014 MontréalWordpress et SEO - Campus Made in Blog 2014 Montréal
Wordpress et SEO - Campus Made in Blog 2014 Montréal
 
Démarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listDémarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" list
 

En vedette

Introduction au logiciel de gestion bibliographique Zotero
Introduction au logiciel de gestion bibliographique ZoteroIntroduction au logiciel de gestion bibliographique Zotero
Introduction au logiciel de gestion bibliographique Zotero
Fabienne EL KHOURY
 
Sistema operativo google chrome os
Sistema operativo google chrome osSistema operativo google chrome os
Sistema operativo google chrome os
Christian Sanchez
 

En vedette (20)

Assignment 3
Assignment 3Assignment 3
Assignment 3
 
Webrtc
WebrtcWebrtc
Webrtc
 
Eurocode 2 Part 3 - Design of concrete Silos & Tanks
Eurocode 2  Part 3 - Design of concrete Silos & TanksEurocode 2  Part 3 - Design of concrete Silos & Tanks
Eurocode 2 Part 3 - Design of concrete Silos & Tanks
 
Présentation avis sur les plateformes pétrolières
Présentation avis sur les plateformes pétrolièresPrésentation avis sur les plateformes pétrolières
Présentation avis sur les plateformes pétrolières
 
Tutoriel WiseStamp
Tutoriel WiseStampTutoriel WiseStamp
Tutoriel WiseStamp
 
HTML5 maintenant partie 3 : multimedia
HTML5 maintenant partie 3 : multimediaHTML5 maintenant partie 3 : multimedia
HTML5 maintenant partie 3 : multimedia
 
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...
 
Introduction au logiciel de gestion bibliographique Zotero
Introduction au logiciel de gestion bibliographique ZoteroIntroduction au logiciel de gestion bibliographique Zotero
Introduction au logiciel de gestion bibliographique Zotero
 
Utiliser les réseaux sociaux pour développer son Business!
Utiliser les réseaux sociaux pour développer son Business!Utiliser les réseaux sociaux pour développer son Business!
Utiliser les réseaux sociaux pour développer son Business!
 
JI 2015 atelier ma 4
JI 2015 atelier ma 4JI 2015 atelier ma 4
JI 2015 atelier ma 4
 
Chromium: o navegador que mudou o mundo
Chromium: o navegador que mudou o mundoChromium: o navegador que mudou o mundo
Chromium: o navegador que mudou o mundo
 
BSI Lagebericht 2014
BSI Lagebericht 2014BSI Lagebericht 2014
BSI Lagebericht 2014
 
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
 
Les Meilleurs Extensions: Top 10 google chrome extensions
Les Meilleurs Extensions: Top 10 google chrome extensionsLes Meilleurs Extensions: Top 10 google chrome extensions
Les Meilleurs Extensions: Top 10 google chrome extensions
 
Personalizar google chrome y añadir marcadores
Personalizar google chrome y añadir marcadoresPersonalizar google chrome y añadir marcadores
Personalizar google chrome y añadir marcadores
 
Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools
Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevToolsMejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools
Mejora tu desarrollo web con Firefox Developer Edition y Google Chrome DevTools
 
Google chrome os
Google chrome osGoogle chrome os
Google chrome os
 
Limpiar Windows, Internet Explorer y Chrome
Limpiar Windows, Internet Explorer y ChromeLimpiar Windows, Internet Explorer y Chrome
Limpiar Windows, Internet Explorer y Chrome
 
Sistema operativo google chrome os
Sistema operativo google chrome osSistema operativo google chrome os
Sistema operativo google chrome os
 
Sistema operativo google chrome os
Sistema operativo google chrome osSistema operativo google chrome os
Sistema operativo google chrome os
 

Similaire à Introduction à la performance web

Web typographie
Web typographieWeb typographie
Web typographie
mirko
 
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
 
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.
 

Similaire à Introduction à la performance web (20)

Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"
 
10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEO
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Web typographie
Web typographieWeb typographie
Web typographie
 
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 ?
 
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
 
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web Mobile
 
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é...
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
Conception de sites Web
Conception de sites WebConception de sites Web
Conception de sites Web
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifié
 
CasperJS
CasperJSCasperJS
CasperJS
 
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
 
Améliorer la rapidité de son site web
Améliorer la rapidité de son site webAméliorer la rapidité de son site web
Améliorer la rapidité de son site web
 
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
 
Octo Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endOcto Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-end
 
Octo RefCard test front-end
Octo RefCard test front-endOcto RefCard test front-end
Octo RefCard test front-end
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
 

Plus de Raphaël Goetter

Futur du-positionnement-css
Futur du-positionnement-cssFutur du-positionnement-css
Futur du-positionnement-css
Raphaël Goetter
 

Plus de Raphaël Goetter (10)

10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
 
Futur du-positionnement-css
Futur du-positionnement-cssFutur du-positionnement-css
Futur du-positionnement-css
 
Le Futur du positionnement CSS
Le Futur du positionnement CSSLe Futur du positionnement CSS
Le Futur du positionnement CSS
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
 
Quiz finalistes
Quiz finalistesQuiz finalistes
Quiz finalistes
 
Quiz
QuizQuiz
Quiz
 
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
 
Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011
 
Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
 

Introduction à la performance web

  • 1. PERFORMANCE WEB Par quoi commencer ?  Photo : © Raphaël Goetter
  • 2. RAPHAËL GOETTER Alsacréations #CSS #Standards #Webdesign #Responsive #HTML #Accessibilité #WebPerf
  • 4. ON VEUT DES CHIFFRES !  Vous aimez les stats ? 
  • 5. ON VEUT DES CHIFFRES !  Sites e-commerce et attente client 57 % des visiteurs quittent un site e-commerce s'il met plus de 4 secondes à s'afficher – PhoCusWright / Akamai (2010) “ 
  • 6. 26 % des visiteurs quittent un site e-commerce s'il met plus de 2 secondes à s'afficher – PhoCusWright / Akamai (2010) “  ON VEUT DES CHIFFRES !  Sites e-commerce et attente client
  • 7. ON VEUT DES CHIFFRES !  C'est pire sur mobile !  60% des mobinautes s'attendent à un chargement de 3s maximum pour un site mobile – Compuware (2011) “ 
  • 8. ON VEUT DES CHIFFRES !  C'est pire sur mobile !  60% des mobinautes s'attendent à un chargement de 3s maximum pour un site mobile – Compuware (2011) “ … Et 74% quittent une page après 5 secondes d'attente – Compuware (2011) “ 
  • 9. POURQUOI LA PERFORMANCE WEB ?  ❷ Photo : CC Flickr - jdwheaton
  • 10. PARCE QUE ÇA RAPPORTE !  Photo : CC Flickr - jdwheaton
  • 11. +100ms 1% perte de revenus ⬇
  • 12. +100ms 1% perte de revenus ⬇ +500ms -20% de recherches ⬇
  • 13. +100ms 1% perte de revenus ⬇ +500ms -20% de recherches ⬇ -2s +15% de chargements ⬇
  • 14. +100ms 1% perte de revenus ⬇ +500ms -20% de recherches ⬇ -2s +15% de chargements ⬇ -5s +12% de revenus +25% pageviews ⬇
  • 15. MAIS AUSSI (SURTOUT ?) ... Sources : WebRankInfo / 1ere-position.fr / silicon.fr En 2010, Google a annoncé officiellement qu'il tenait compte de la rapidité des sites dans son algorithme de positionnement. Google recommande un délai moyen de 1,5 seconde pour l’affichage d’une page web. ❶ ❷
  • 17. LE TYPE DE CONNEXION EDGE (0,38 Mbit/s) 3G (1,9 Mbit/s) 3G+ (3,6 Mbit/s) H+ (10 Mbit/s) Wi-Fi (25 Mbit/s) ADSL (30 Mbit/s) 4G (40 Mbit/s) Fibre (100 Mbit/s) Source : Wikipedia
  • 18. LE TYPE DE CONNEXION 3G 20 minutes➞ 3G+ 1min 15s➞ 4G 10 secondes➞ Concrètement... Source : Orange (bon OK c'est un peu bullshit marketing) Téléchargement d'un album de musique :
  • 19. LE POIDS DES RESSOURCES Images 700 Ko➞ JavaScript 230 Ko➞ CSS 37 Ko➞ HTML 45 Ko➞ Autres 188 Ko➞ 1,2Mo au total en moyenne :  Source : AlexaRank Top 1000 (janvier - août 2013)
  • 20. LE POIDS DES RESSOURCES Source : http://mobitest.akamai.com
  • 21. LE NOMBRE DE REQUÊTES Images 60 requêtes➞ JavaScript 17 requêtes➞ CSS 3,5 requêtes➞ HTML 10 requêtes➞ Autres 7 requêtes➞ 98 requêtes en moyenne :  Source : AlexaRank Top 1000 (janvier - août 2013)
  • 22. LE NOMBRE DE REQUÊTES … à cause de la latence Latence ● dépend du serveur, du DNS ● dépend de la connexion : ● 20-60ms via ADSL ● 200-600ms en 3G Chargement ● dépend du poids
  • 23. LES RALENTISSEMENTS DIVERS Scripts bloquants CSS bloquants Redirections HTTP/JavaScript Mauvaises requêtes (404) Reflow, repaint navigateur Etc.
  • 24. LES OUTILS POUR TESTER ❹ Photo : © Raphaël Goetter
  • 25. MANUELLEMENT Outil d'audit de Chrome Module d'audit divers (accessibilité, réseau, performances,...) directement intégré au navigateur Chrome : Touche F12 Onglet « Audit » Option « Webpage performance »➞ ➞
  • 26. MANUELLEMENT Extensions : YSlow et PageSpeed  YSlow (Yahoo!) : plugin disponible sur Firefox, Chrome, Safari, Opera PageSpeed (Google) : plugin Chrome, Firefox et en ligne
  • 27. EN LIGNE La référence : WebPageTest.org  Au choix : lieu du serveur, type de connexion, navigateur, etc.
  • 30. EN LIGNE AkamaiMobitest Pour les temps d'affichage sur mobiles
  • 32. QUELQUES SITES PASSÉS AU CRIBLE 7s chargement 78 requêtes 1095ko poids 7.1s chargement 163 requêtes 2203ko poids 7.2s chargement 133 requêtes 808ko poids 7.7s chargement 57 requêtes 1010ko poids
  • 33. QUELQUES SITES PASSÉS AU CRIBLE 2.3s chargement 171 requêtes 2058ko poids Suite... 6.6s chargement 66 requêtes 671ko poids
  • 35. BONNES PRATIQUES GÉNÉRALES Pas de redirections de pages Scripts placés avant </body> et/ou attributs async / defer Évitez @import pour les fichiers CSS Hébergez les ressources sur plusieurs domaines (entre 2 et 4) Déclarez les dimensions des images dans le HTML (width="", height="") Évitez les mauvaises requêtes (404) ❶
  • 36. EN DÉTAIL Hébergez les ressources sur plusieurs domaines«   » Hébergez les ressources (images, médias) sur plusieurs domaines différents. Cette technique favorise leur téléchargement en parallèle. Un sous-domaine fonctionne aussi (ex. media.alsacreations.com), et un domaine sans cookies est encore plus performant. Source : Yahoo!UI blog Opera : 8 / IE10 : 8 / Chrome : 6 / Firefox : 6 / IE8/IE9 : 6 / Safari : 4 / IE6/IE7 : 2 ❶
  • 37. RÉDUIRE LE POIDS DES RESSOURCES Minifiez les fichiers CSS Minifiez les fichiers JS Compressez les images Choississez le bon format d'image (.png, .gif, .jpg) Optez pour des fontes légères (.woff est généralement plus léger) ❷
  • 38. EN DÉTAIL Compressez les images«   » ❷www.kraken.io
  • 39. RÉDUIRE LES REQUÊTES Réunissez les feuilles de styles CSS en une seule si possible Réduisez / réunifiez le nombre de fichiers JavaScript externes si possible N'utilisez pas (ou presque pas) d'images ! → Sprites CSS, → Data-URI, → Caractères unicodes, → Font Icons, ... ❸
  • 40. EN DÉTAIL Font Icons«   » ❸icomoon.io .icon {font-family: "MyFontIcon", sans-serif;} .icon-twitter:before {content: "t";}
  • 41. NE CHARGER QUE LE NÉCESSAIRE Chargez les scripts externes en Asynchrone et/ou Différé N'utilisez pas display : none pour masquer un élément jQuery est parfois inutile et remplaçable par jQuip ou Zepto.js, plus légers Triez les scripts nécessaires et les scripts de confort JavaScript est parfois avantageusement remplaçable par CSS3 : bordures, arrondis, ombrages, animations, formes simples (triangles, ronds, carrés) Pensez à faire du chargement conditionnel de ressources (selon taille d'écran, pixel-ratio, ...) ❹
  • 42. EN DÉTAIL Charger conditionnellement les éléments«   » ❹@media (min-width : 768px) { .deco {background: url(concombre-big.jpg);} } @media (max-width : 767px) { .deco {background: url(concombre-small.jpg);} } concombre-big.jpg concombre-small.jpg
  • 43. CÔTÉ SERVEUR Compressez les fichiers texte côté serveur (HTML, CSS, JS) Générez certaines pages « à l'avance » (ex. flux RSS) Gérez les durées de cache des éléments ❺
  • 44. EN DÉTAIL Durée d'expiration du cache«   » ❺<IfModule mod_expires.c> ExpiresActive On ExpiresByType text/plain "access plus 1 day" ExpiresByType text/html "access plus 1 hour" ExpiresByType application/x-javascript "access plus 3 months" ExpiresByType application/javascript "access plus 3 months" ExpiresByType text/css "access plus 3 months" ExpiresByType image/gif "access plus 3 months" ExpiresByType image/x-icon "access plus 3 months" ExpiresByType image/png "access plus 3 months" ExpiresByType image/jpeg "access plus 3 months" ExpiresByType application/xml "access plus 1 hour" # ExpiresDefault "access plus 1 day" </IfModule> Outil Google : Google ModPagespeed
  • 45. Polices : League Gothic + Segoe UI Light Photos : Fotolia + mon super APN Pictos : IconFinder (Visual Pharm, Designmodo) MERCI, BISOUS Raphaël Goetter www.alsacreations.fr @goetter Crédits