Abdelaziz Bennouna
 Directeur Technique tellibus



         &
Organisateurs
Défnitions
Performance n.f.

Résultat chifré ou homologué
obtenu dans un domaine précis
Web Performance Optimization
           (WPO)

    Steve Souders – 2004
Web Performance Optimization
           (WPO)

    Steve Souders – 2004
Site Web Classique
Site Web Mobile
Web Mobile
Web Mobile
Internet au
   Maroc
Internautes au Maroc


16,5 millions
  +5% / 6 mois

              Source : IWS (T2/12)
Parc Internet au Maroc


   4 millions
  +24% / 12 mois

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




               Source : ANRT (T4/12)
Parc 3G au Maroc


3,3 millions
+26% / 12 mois

           Source : ANRT (T4/12)
Connexions 3G sur mobile


    1,6 million
   +50% / 12 mois

               Source : ANRT (T4/12)
Hauts débits vendus au Maroc

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

     2,5% > 4 Mbit/s
            dont
     0% > 10 Mbit/s
               Source : Akamai SOI (T3/12)
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
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
La Web Perf,
pourquoi faire ?

“Speed matters”
71%  ± 
   59%  ≤ 3 s.
    74%  ≥ 5 s.
     Source : Compuware Gomez (2011)

 7 s.  2 s.
 7%  12%
  +25%
   Source : Shopzilla Site Redesign (2009)

 +400 ms 
   -0,59% /j
   +1 s. 
   -0,7% /
Source : Performance Related Changes…

 
   
 Source : Shopzilla Site Redesign (2009)
Web Perf

  Critères
d’évaluation

 Temps de
chargement

Taille totale des
   ressources

Nombre de
ressources
Yahoo! YSlow
Google PageSpeed
Web marocain

Etat des lieux
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)
 16 s.
 2,7 Mo
  180
B (85%)
C (71%)
 25 s.
 4,3 Mo
  270
D (69%)
E (59%)
 2,5 s.
 220 ko
  50
A (95%)
B (84%)
 12 s.
 1 Mo
 130
E (56%)
D (65%)
 26 s.
 2,2 Mo
  114
D (68%)
C (71%)
Problématique

Début d’afchage            DOM chargé




                  Chargement complet
Requête HTTP
Recherche        Requête
  DNS             HTTP




    Connexion              Téléchargement
       TCP                  de la ressource
Homepage hespress.com


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

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

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


9 icônes séparées
→ requêtes inutiles
Réseaux 3G

Contraintes
particulières




    
            
           
        




           
           
            
                
                
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)
Relevés 3G
512 kbit/s Voix+Data

     72 kbit/s
     148 ms
Relevés de latence 3G
230 ms
210 ms
190 ms
170 ms
150 ms
130 ms
110 ms
 90 ms
3,6 Mbit/s Voix+Data

    400 kbit/s
     124 ms
Relevés de latence 3G
230 ms
210 ms
190 ms
170 ms
150 ms
130 ms
110 ms
 90 ms
7,2 Mbit/s Data Only

    990 kbit/s
     57 ms
Relevés de latence 3G
125 ms
110 ms
95 ms
80 ms
65 ms
50 ms
35 ms
20 ms
Début d’afchage            DOM chargé




                  Chargement complet
Smartphones

Contraintes
particulières
Moins de mémoire

Processeur moins
    puissant
Web mobile
 marocain

Etat des lieux
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)
19 s.  14 s.   7 s.   22 s.    8 s.
1,6 Mo 0,9 Mo 0,2 Mo   1 Mo    87 ko
Techniques
d’optimisation
   front-end
Réduire le nombre
   de requêtes
Eviter les
redirections
Compresser (gzip) les
ressources adéquates
Utiliser la mémoire
cache du navigateur
Optimiser les
  images
Minifer les
ressources
adéquates
Combiner
intelligemment les
    ressources
Insérer les petites
 feuilles de style en
ligne dans le HTML
Insérer les petits
scripts .js en ligne
   dans le HTML
Reporter (defer)
l’exécution des scripts
          .js
Evaluer
la Web Perf
PageSpeed Insights

GTMetrix (PageSpeed + YSlow)

        WebPagetest

WebPagetest Comparison Test

         Pingdom

  Mobile: Akamai Mobitest
Compresser
 les images
ImageAlpha

ImageOptim

 TinyPNG
☻
“Faster sites
create happy
    users”
En savoir plus
WebPerf-Mobile.com/blog

 WebPerfMobile

 WebPerfMobile

#webperf
Merci
abdelaziz@tellibus.com


                  tellibus.com

                         tellibus

                         tellibus

Séminaire Web Perf Mobile by tellibus (26/02/2013)