Initiation à la Web Perf Mobile. Présentation (1h) faite lors du 1er séminaire sur la performance des Sites Web Mobiles. Plus d’infos http://webperf-mobile.com

1. Abdelaziz Bennouna
Directeur Technique tellibus
&

2. Organisateurs

5. Défnitions

6. Performance n.f.
Résultat chifré ou homologué
obtenu dans un domaine précis

7. Web Performance Optimization
(WPO)
Steve Souders – 2004

8. Web Performance Optimization
(WPO)
Steve Souders – 2004

9. Site Web Classique

10. Site Web Mobile

11. Web Mobile

12. Web Mobile

13. Internet au
Maroc

14. Internautes au Maroc
16,5 millions
+5% / 6 mois
Source : IWS (T2/12)

15. Parc Internet au Maroc
4 millions
+24% / 12 mois
Source : ANRT (T4/12)

16. Parc Internet au Maroc
Source : ANRT (T4/12)

17. Parc 3G au Maroc
3,3 millions
+26% / 12 mois
Source : ANRT (T4/12)

18. Connexions 3G sur mobile
1,6 million
+50% / 12 mois
Source : ANRT (T4/12)

19. Hauts débits vendus au Maroc
6% > 4 Mbit/s
dont
2,7% > 10 Mbit/s
Source : ANRT (T3/12)

20. Hauts débits efectifs au Maroc
2,5% > 4 Mbit/s
dont
0% > 10 Mbit/s
Source : Akamai SOI (T3/12)

21. Débit maximal moyen au Maroc
16,0 Mbit/s
14,0 Mbit/s
12,0 Mbit/s
10,0 Mbit/s
8,0 Mbit/s
6,0 Mbit/s
4,0 Mbit/s
2,0 Mbit/s
0,0 Mbit/s
/10 /10 /11 /11 /11 /11 /12 /12 /12
T3 T4 T1 T2 T3 T4 T1 T2 T3
Source : Akamai SOI

22. Débit moyen au Maroc
2,5 Mbit/s
2,0 Mbit/s
1,5 Mbit/s
1,0 Mbit/s
0,5 Mbit/s
0,0 Mbit/s
/10 /10 /11 /11 /11 /11 /12 /12 /12
T3 T4 T1 T2 T3 T4 T1 T2 T3
Source : Akamai SOI

23. La Web Perf,
pourquoi faire ?

24. 

25. “Speed matters”

26. 71%  ± 
 59%  ≤ 3 s.
74%  ≥ 5 s.
Source : Compuware Gomez (2011)

27. 

28.  7 s.  2 s.
 7%  12%
  +25%
Source : Shopzilla Site Redesign (2009)

29. 

30.  +400 ms 
 -0,59% /j
 +1 s. 
 -0,7% /
Source : Performance Related Changes…

31. 

32.  
 
Source : Shopzilla Site Redesign (2009)

33. Web Perf
Critères
d’évaluation

34. 
Temps de
chargement

35. 
Taille totale des
ressources

36. 
Nombre de
ressources

37. Yahoo! YSlow

38. Google PageSpeed

39. Web marocain
Etat des lieux

40. Top 20 Alexa / Maroc
6. hespress.com 197k /j 750k /j
14. hibapress.com 80k /j 220k /j
15. avito.ma 36k /j 420k /j
19. iam.ma 47k /j 124k /j
20. inwi.ma 43k /j 87k /j
Source : Alexa (02/13)

42.  16 s.
 2,7 Mo
 180

43. B (85%)
C (71%)

45.  25 s.
 4,3 Mo
 270

46. D (69%)
E (59%)

48.  2,5 s.
 220 ko
 50

49. A (95%)
B (84%)

51.  12 s.
 1 Mo
 130

52. E (56%)
D (65%)

54.  26 s.
 2,2 Mo
 114

55. D (68%)
C (71%)

56. Problématique

57. 

58. Début d’afchage DOM chargé
Chargement complet

59. Requête HTTP
Recherche Requête
DNS HTTP
Connexion Téléchargement
TCP de la ressource

60. Homepage hespress.com
138  = 2 Mo
22 .js = 200 ko
7  = 330 ko

62. Homepage hespress.com
11 scripts .js
bloquants
= 220 ko
décompressés

63. Homepage hespress.com
Scripts .js concaténés
systématiquement
→ pas de parallélisme
→ pas de cache réel

64. Homepage hespress.com
9 icônes séparées
→ requêtes inutiles

65. Réseaux 3G
Contraintes
particulières

66. 


 


 
 




67. Débit moyen au Maroc
4,5 M 2,4 Mbit/s
4,0 M 2,2 Mbit/s
3,5 M 2,0 Mbit/s
3,0 M 1,8 Mbit/s
2,5 M 1,6 Mbit/s
2,0 M 1,4 Mbit/s
1,5 M 1,2 Mbit/s
1,0 M 1,0 Mbit/s
/ 10 4/10 1/11 2/11 3/11 4/11 1/12 2/12 3/12 4/12
T3 T T T T T T T T T
Source : Akamai SOI + ANRT (T4/12)

68. Relevés 3G

69. 512 kbit/s Voix+Data
 72 kbit/s
 148 ms

70. Relevés de latence 3G
230 ms
210 ms
190 ms
170 ms
150 ms
130 ms
110 ms
90 ms

71. 3,6 Mbit/s Voix+Data
 400 kbit/s
 124 ms

72. Relevés de latence 3G
230 ms
210 ms
190 ms
170 ms
150 ms
130 ms
110 ms
90 ms

73. 7,2 Mbit/s Data Only
 990 kbit/s
 57 ms

74. Relevés de latence 3G
125 ms
110 ms
95 ms
80 ms
65 ms
50 ms
35 ms
20 ms

75. Début d’afchage DOM chargé
Chargement complet

78. Smartphones
Contraintes
particulières

79. Moins de mémoire
Processeur moins
puissant

82. Web mobile
marocain
Etat des lieux

83. Top 20 Alexa / Maroc
6. hespress.com 197k /j 750k /j
14. hibapress.com 80k /j 220k /j
15. avito.ma 36k /j 420k /j
19. iam.ma 47k /j 124k /j
20. inwi.ma 43k /j 87k /j
Source : Alexa (02/13)

84. 19 s. 14 s. 7 s. 22 s. 8 s.
1,6 Mo 0,9 Mo 0,2 Mo 1 Mo 87 ko

85. Techniques
d’optimisation
front-end

86. Réduire le nombre
de requêtes

87. Eviter les
redirections

88. Compresser (gzip) les
ressources adéquates

89. Utiliser la mémoire
cache du navigateur

90. Optimiser les
images

91. Minifer les
ressources
adéquates

92. Combiner
intelligemment les
ressources

93. Insérer les petites
feuilles de style en
ligne dans le HTML

94. Insérer les petits
scripts .js en ligne
dans le HTML

95. Reporter (defer)
l’exécution des scripts
.js

96. Evaluer
la Web Perf

97. PageSpeed Insights
GTMetrix (PageSpeed + YSlow)
WebPagetest
WebPagetest Comparison Test
Pingdom
Mobile: Akamai Mobitest

98. Compresser
les images

99. ImageAlpha
ImageOptim
TinyPNG

100. ☻

101. “Faster sites
create happy
users”

102. En savoir plus
WebPerf-Mobile.com/blog
WebPerfMobile
WebPerfMobile
#webperf

103. Merci

104. abdelaziz@tellibus.com
tellibus.com
tellibus
tellibus