Téléchargé parAbdelaziz Bennouna
Séminaire Web Perf Mobile by tellibus (26/02/2013)
Le document présente des statistiques sur la performance web au Maroc, incluant des chiffres sur les internautes, le débit et l'optimisation des sites. Il souligne l'importance de la vitesse de chargement pour l'expérience utilisateur et fournit des recommandations sur les techniques d'optimisation à adopter. Enfin, il liste les principaux sites web marocains selon leur performance et leur trafic.
Séminaire Web Perf Mobile by tellibus (26/02/2013)
- 1. Abdelaziz Bennouna DirecteurTechnique tellibus &
- 2.
- 5.
- 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.
- 10.
- 11.
- 12.
- 13. Internet au Maroc
- 14. Internautes au Maroc 16,5millions +5% / 6 mois Source : IWS (T2/12)
- 15. Parc Internet auMaroc 4 millions +24% / 12 mois Source : ANRT (T4/12)
- 16. Parc Internet auMaroc Source : ANRT (T4/12)
- 17. Parc 3G auMaroc 3,3 millions +26% / 12 mois Source : ANRT (T4/12)
- 18. Connexions 3G surmobile 1,6 million +50% / 12 mois Source : ANRT (T4/12)
- 19. Hauts débits vendusau Maroc 6% > 4 Mbit/s dont 2,7% > 10 Mbit/s Source : ANRT (T3/12)
- 20. Hauts débits efectifsau Maroc 2,5% > 4 Mbit/s dont 0% > 10 Mbit/s Source : Akamai SOI (T3/12)
- 21. Débit maximal moyenau 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 auMaroc 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, pourquoifaire ?
- 24.
- 25.
- 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.
- 35. Taille totale des ressources
- 36.
- 37.
- 38.
- 39.
- 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.
- 45. 25 s. 4,3 Mo 270
- 46.
- 48. 2,5 s. 220 ko 50
- 49.
- 51. 12 s. 1 Mo 130
- 52.
- 54. 26 s. 2,2 Mo 114
- 55.
- 56.
- 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 .jsconcaténés systématiquement → pas de parallélisme → pas de cache réel
- 64. Homepage hespress.com 9 icônesséparées → requêtes inutiles
- 65.
- 66.
- 67. Débit moyen auMaroc 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.
- 69. 512 kbit/s Voix+Data 72 kbit/s 148 ms
- 70. Relevés de latence3G 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 latence3G 230 ms 210 ms 190 ms 170 ms 150 ms 130 ms 110 ms 90 ms
- 73. 7,2 Mbit/s DataOnly 990 kbit/s 57 ms
- 74. Relevés de latence3G 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.
- 79. Moins de mémoire Processeurmoins puissant
- 82. Web mobile marocain Etatdes 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.
- 88. Compresser (gzip) les ressourcesadéquates
- 89. Utiliser la mémoire cachedu navigateur
- 90. Optimiser les images
- 91.
- 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 desscripts .js
- 96.
- 97. PageSpeed Insights GTMetrix (PageSpeed+ YSlow) WebPagetest WebPagetest Comparison Test Pingdom Mobile: Akamai Mobitest
- 98.
- 99.
- 100.
- 101. “Faster sites create happy users”
- 102. En savoir plus WebPerf-Mobile.com/blog WebPerfMobile WebPerfMobile #webperf
- 103.
- 104. abdelaziz@tellibus.com tellibus.com tellibus tellibus