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...
26 % des visiteurs quittent un site e-commerce
s'il met plus de 2 secondes à s'afficher
– PhoCusWright / Akamai (2010)
“ 
...
ON VEUT DES CHIFFRES ! 
C'est pire sur mobile ! 
60% des mobinautes s'attendent à un chargement
de 3s maximum pour un site...
ON VEUT DES CHIFFRES ! 
C'est pire sur mobile ! 
60% des mobinautes s'attendent à un chargement
de 3s maximum pour un site...
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'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)...
LE TYPE DE CONNEXION
3G 20 minutes➞
3G+ 1min 15s➞
4G 10 secondes➞
Concrètement...
Source : Orange (bon OK c'est un peu bul...
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 ...
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➞
9...
LE NOMBRE DE REQUÊTES
… à cause de la latence
Latence
●
dépend du serveur, du DNS
●
dépend de la connexion :
●
20-60ms via...
LES RALENTISSEMENTS DIVERS
Scripts bloquants
CSS bloquants
Redirections HTTP/JavaScript
Mauvaises requêtes (404)
Reflow, r...
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é a...
MANUELLEMENT
Extensions : YSlow et PageSpeed 
YSlow (Yahoo!) : plugin disponible sur Firefox, Chrome, Safari, Opera
PageSp...
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
char...
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 ...
EN DÉTAIL
Hébergez les ressources sur plusieurs domaines«   »
Hébergez les ressources (images, médias) sur plusieurs domai...
RÉDUIRE LE POIDS DES RESSOURCES
Minifiez les fichiers CSS
Minifiez les fichiers JS
Compressez les images
Choississez le bo...
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
fichi...
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 m...
EN DÉTAIL
Charger conditionnellement les éléments«   » ❹@media (min-width : 768px) {
.deco {background: url(concombre-big....
CÔTÉ SERVEUR
Compressez les fichiers texte côté serveur (HTML, CSS, JS)
Générez certaines pages « à l'avance » (ex. flux R...
EN DÉTAIL
Durée d'expiration du cache«   » ❺<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/plain "access plu...
Polices : League Gothic + Segoe UI Light
Photos : Fotolia + mon super APN
Pictos : IconFinder (Visual Pharm, Designmodo)
M...
Prochain SlideShare
Chargement dans…5
×

Convention Medialibs : Raphaël Goetter (Introduction à la performance web)

1 157 vues

Publié le

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 157
Sur SlideShare
0
Issues des intégrations
0
Intégrations
384
Actions
Partages
0
Téléchargements
28
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Convention Medialibs : Raphaël Goetter (Introduction à la performance web)

  1. 1. PERFORMANCE WEB Par quoi commencer ?  Photo : © Raphaël Goetter
  2. 2. RAPHAËL GOETTER Alsacréations #CSS #Standards #Webdesign #Responsive #HTML #Accessibilité #WebPerf
  3. 3. L'INTERNAUTE N'AIME PAS ATTENDRE ❶ !
  4. 4. ON VEUT DES CHIFFRES !  Vous aimez les stats ? 
  5. 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. 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. 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. 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. 9. POURQUOI LA PERFORMANCE WEB ?  ❷ Photo : CC Flickr - jdwheaton
  10. 10. PARCE QUE ÇA RAPPORTE !  Photo : CC Flickr - jdwheaton
  11. 11. +100ms 1% perte de revenus ⬇
  12. 12. +100ms 1% perte de revenus ⬇ +500ms -20% de recherches ⬇
  13. 13. +100ms 1% perte de revenus ⬇ +500ms -20% de recherches ⬇ -2s +15% de chargements ⬇
  14. 14. +100ms 1% perte de revenus ⬇ +500ms -20% de recherches ⬇ -2s +15% de chargements ⬇ -5s +12% de revenus +25% pageviews ⬇
  15. 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. ❶ ❷
  16. 16. QU'EST-CE QUI RALENTIT LE WEB ❸ ?
  17. 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. 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. 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. 20. LE POIDS DES RESSOURCES Source : http://mobitest.akamai.com
  21. 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. 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. 23. LES RALENTISSEMENTS DIVERS Scripts bloquants CSS bloquants Redirections HTTP/JavaScript Mauvaises requêtes (404) Reflow, repaint navigateur Etc.
  24. 24. LES OUTILS POUR TESTER ❹ Photo : © Raphaël Goetter
  25. 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. 26. MANUELLEMENT Extensions : YSlow et PageSpeed  YSlow (Yahoo!) : plugin disponible sur Firefox, Chrome, Safari, Opera PageSpeed (Google) : plugin Chrome, Firefox et en ligne
  27. 27. EN LIGNE La référence : WebPageTest.org  Au choix : lieu du serveur, type de connexion, navigateur, etc.
  28. 28. EN LIGNE Httparchive.org FilmStrip !
  29. 29. EN LIGNE Google PageSpeed Insights
  30. 30. EN LIGNE AkamaiMobitest Pour les temps d'affichage sur mobiles
  31. 31. QUELQUES EXEMPLES ❺
  32. 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. 33. QUELQUES SITES PASSÉS AU CRIBLE 2.3s chargement 171 requêtes 2058ko poids Suite... 6.6s chargement 66 requêtes 671ko poids
  34. 34. ACCÉLÉREZ VOS PAGES WEB ❻ Photo : © Raphaël Goetter
  35. 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. 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. 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. 38. EN DÉTAIL Compressez les images«   » ❷www.kraken.io
  39. 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. 40. EN DÉTAIL Font Icons«   » ❸icomoon.io .icon {font-family: "MyFontIcon", sans-serif;} .icon-twitter:before {content: "t";}
  41. 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. 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. 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. 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. 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

×