Introductions aux notions de performances web et des temps d'affichage des pages : notions, avantages financiers, ce qui ralentit le web, comment mesurer, quelques exemples, comment accélérer ses pages concrètement.

1. PERFORMANCE WEB
Par quoi commencer ?
Photo : © Raphaël Goetter

2. RAPHAËL GOETTER
Alsacréations
#CSS #Standards #Webdesign #Responsive
#HTML #Accessibilité #WebPerf

3. L'INTERNAUTE
N'AIME PAS
ATTENDRE
❶
!

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.
❶ ❷

16. QU'EST-CE QUI
RALENTIT
LE 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.

28. EN LIGNE
Httparchive.org
FilmStrip !

29. EN LIGNE
Google PageSpeed Insights

30. EN LIGNE
AkamaiMobitest
Pour les temps d'affichage sur mobiles

31. QUELQUES
EXEMPLES
❺

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

34. ACCÉLÉREZ VOS
PAGES WEB
❻
Photo : © Raphaël Goetter

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