SlideShare une entreprise Scribd logo
Optimiser les performances de son site
                      pour un affichage confortable sur mobile




                              Willy Leloutre, intégrateur Web

dimanche 23 septembre 2012
Quels sont les enjeux
    La France est en 30e position, des pays où les connexions Internet
    sont les plus rapides. (Avec une moyenne de 4.9 mbit/s).
    Les connexions mobiles ont elles un débit moyen de 350 Ko/s avec des pointes
    à 1 Mo/s. (sources http://www.akamai.fr).

    Selon Google, l'expérience mobile est 1.5 fois plus lente que celle sur Desktop.
    La 4G devrait permettre d’atteindre des débits (nomades) plus raisonnables !
    Début des travaux : 2014.
    Le trafic mobile représente désormais 10% du trafic web mondial.
    880 millions de mobiles (Android / IOS ) sont arrivés sur le marché en un peu
    plus de cinq ans. (sources www.lukew.com).

    Les mobiles atteignent 87% de la population mondiale, c'est plus répandu
    que n'importe quel autre média de masse. (sources www.lukew.com).




        État des lieux du trafic Internet : http://www.akamai.fr/enfr/stateoftheinternet/

dimanche 23 septembre 2012
Le front-end, c'est du lourd !

     Steve Souders, gourou de la performance web, a conclu que
     plus de 80% du temps passé par le navigateur à charger une page
     dépend du côté "front-end". Notamment les images qui peuvent représenter
     plus de 50% du poids total des ressources à télécharger.



        images                                       scripts

   rich media                                                  css

                   font                                     html



dimanche 23 septembre 2012
Les erreurs courantes

     •    Multiplication des requêtes d'appels aux fichiers CSS, JS, IMG

     •    Sources CSS et Javascript non compressés

     •    Arbre DOM comportant trop de nœuds

     •    Sur-imbrication de sélecteurs CSS

     •    Inversement, sélecteurs trop évasifs (*)

     •    Surcharge de Hack CSS

     •    Redimensionnement des images en CSS

     •    Utilisation d'images graphiques pour les bordures,
          les ombres et dégradés

     •    Mauvaises pratiques des frameworks CSS
          (Blueprint, Boilerplate, 960gs, Skeleton, ...)

     •    Mauvaises pratiques des Data URI

     •    Surutilisation de la sécurisation SSL

     •    Chargement de fonctionnalités inutiles sur mobile


dimanche 23 septembre 2012
Les bonnes pratiques

     •    Optimisez le poids de vos images (smushit.com)

     •    Rassemblez vos images à l'aide de sprites (draeton.github.com/stitches/)

     •    Unifiez et compressez vos scripts (cssdrive.com, refresh-sf.com/yui/)

     •    Utilisez les classes conditionnelles, une bonne alternative aux
          commentaires conditionnels et aux hacks Css !

     •    Dans la mesure du possible préférez les CSS3 aux images

     •    Charger uniquement ce dont vous avez besoin à l'aide des média
          queries, des chargeurs de scripts et polyfills. (http://requirejs.org/)

     •    Utilisez le lazy-loading sur les images, c’est à dire ne téléchargez
          l’image que lorsqu’elle est sur le point d’être affichée (OnScroll).

     •    Globalement, respectez les bonnes pratiques de conception web.
          (csslint.net, http://csslisible.com/)




dimanche 23 septembre 2012
Le serveur prend le relais
   •   Héberger les ressources (images, médias)
       sur plusieurs domaines favorise la parallélisation.

   •   Mais attention à ne pas maximiser le nombre
       de requêtes DNS. Le coût de recherche DNS peut être
       dix fois plus important sur mobile à cause de la
       latence que sur Desktop. Un sous-domaine fonctionne
       aussi ! (media.mondomaine.fr)
   •   Utiliser HTML5 localStorage pour stocker vos datas,
       scripts et images (encodés en base64). Technique
       choisie par LinkedIn mobile, Bing ou GMail.
       Attention ! Le cache des navigateurs mobiles
       est beaucoup plus petits que celui des navigateurs
       de bureau (4Mo environ).
   •   Déployez votre site sur un CDN.
       Cela consiste à distribuer le contenu statique (images,
       scripts ..) de votre site suivant la localisation physique
       de l’utilisateur.


dimanche 23 septembre 2012
Trés bien, mais en production ?

                             Comment utiliser
                             toutes ces pratiques
                             en production ?
                             Une première approche :
                             Demandez de l'aide à votre éditeur 'IDE'
                             préféré, pour ma part SublimeText
                             ou Netbeans. Ils auront sûrement quelques
                             outils à disposition...

                             •   CSSLint (erreurs de conception)

                             •   JSMinifier (minifier le JavaScript)

                             •   YUI Compressor ( minifier JS et CSS)




dimanche 23 septembre 2012
Profiter des nouvelles technologies




dimanche 23 septembre 2012
Les préprocesseurs CSS

     Avec les préprocesseurs Css

      •    Profitez des variables et des héritages de classes pour
           favoriser une approche DRY (Don’t Repeat Your CSS).

      •    Minifiez vos styles en production

      •    Générez automatiquement vos sprites d'images

      •    Unifiez vos Css avec l'import de feuilles de style partielles

      •    Encodez nativement vos backgrounds en data-uri,...




          Certains préprocésseurs Css proposent des compilations en Javascript
          côté front-end. Attention en production il faudra "précompiler" votre code
          Less et déployer un bon vieux style.css.


dimanche 23 septembre 2012
Les Polyfills, Script loader, ...

  ?
       Quel script loader choisir ?
       http://goo.gl/qbkVG



     RequireJS est un "script loader" modulable, qui fournit entre autre un outil
     d'optimisation permettant de combiner vos sources et de les minifier.
     http://requirejs.org/docs/start.html

     Enquire.js est une bibliothèque apportant la puissance des Media Queries
     en Javascript. Il est utile par exemple pour charger vos scripts selon le format
     du périphérique (device) utilisé. http://wickynilliams.github.com/enquire.js/

     YepNope est un chargeur de scripts conditionnel et asynchrone
     (ultra-rapide). Ce polyfill est inclus nativement dans Modernizer,
     une bibliothèque JavaScript qui détecte les fonctionnalités accessibles
     dans le navigateur de l'utilisateur. http://modernizr.com/



dimanche 23 septembre 2012
Profiter... des nouvelles technologies
                OU PAS !

     ● Faut-il charger des images rétiniennes
       pour les appareils disposant de cette technologie ?
     ● Devons nous laisser le choix aux internautes et mobinautes de l'activer ou non ?
     ● Il faut savoir que les images "rétiniennes" seront plus lourdes à charger
       que les images standard...




     Mon avis est que
     les connectivités réseaux
     ne permettent pas aujourd'hui
     de fournir du retina
     sur des mobiles connectés
     en 3G !


dimanche 23 septembre 2012
Mythe ou réalité ?




     @media (min-bandwidth: 25Mbps) {}
     @media (max-bandwidth: 10Mbps) {}




dimanche 23 septembre 2012
Des images responsives
     Nous n'avons pas parlé des images responsives !




dimanche 23 septembre 2012
Mesurer, comparez !

      ● http://mobitest.akamai.com/

      ● https://developers.google.com/speed/

      ● http://yslow.org/

      ● http://validator.w3.org/mobile/

      ● http://www.opquast.com/

      ● http://gtmetrix.com/

      ● http://www.browserscope.org/

dimanche 23 septembre 2012
Un exemple ?

    ● leklub.fr/blog
      25 secondes de chargement
      sur Iphone 4 en 3G




dimanche 23 septembre 2012
Sans l'aspect social : 13.26   secondes de chargement




dimanche 23 septembre 2012
Sans script superflu : 12.53   secondes de chargement




dimanche 23 septembre 2012
Sans Google font !      11.81secondes de chargement




dimanche 23 septembre 2012
Images compressées : 4.78               secondes de chargement




                             Avec optimisation des CSS
                             pour mobile...


dimanche 23 septembre 2012
Mobile Ready ! 1.68     secondes de chargement




dimanche 23 septembre 2012
Les optimisations réalisées

      •    Feuilles de styles CSS unifiées

      •    Images compressées

      •    Image d'arrière-plan chargé uniquement si écran > 640px

      •    Suppression des styles IE (classes conditionnelles)

      •    Google font chargé uniquement si écran > 640px

      •    Chargement asynchrone des scripts Javascript*

      •    Chargement des widgets sociaux uniquement si écran > 960px*
           * En test sur le blog




          Attention ! PageSpeed, YSlow, ... sont des outils d’évaluation.
          Ils ont été mis en place pour aider les développeurs à avoir une vision
          d’ensemble de l’optimisation de leurs pages et synthétisent l’ensemble
          des tests sous forme d’un score global.


dimanche 23 septembre 2012
Et testez !




                             Les outils de mesure
                             ne remplacent pas
                             les tests en situation
                             réelle !




dimanche 23 septembre 2012
Testez, ... mais comment !


                             Avec Opéra mobile émulator ! Non, cet outil peut être
                             utile pour vaguement tester la "responsivité" de son site,
                             mais en aucun cas les performances réseaux.




                             Pour simuler un réseau 3G, on pourra utiliser
                             des proxys via WiFi qui dégradent volontairement
                             la connexion. Je vous invite à tester Trickle (Linux),
                             Network Link Conditioner (OSX 10.6) ou Slowy App
                             (OSX 10.5).




dimanche 23 septembre 2012
Quelques ressources utiles

                                                 http://stevesouders.com/

                                                 http://www.lukew.com/

                                                 http://blog.goetter.fr/

                                                 http://www.webperformancetoday.com/

                                                 http://wdfriday.com/

                                                 http://letrainde13h37.fr/

                                                 https://twitter.com/#!/search/webperf




                             Atelier de travail sur les bonnes pratiques Webperf
                             https://checklists.opquast.com/webperf/workshops/


dimanche 23 septembre 2012
Conclusion

     La performance est un élément
     essentiel pour une bonne
     expérience utilisateur (sur mobile)
     mais pas uniquement.

     Attention à ne pas surestimer
     les configurations technologiques
     de nos utilisateurs.

     C'est un travail de longue
     haleine, qui s'écoule sur toute
     la durée de vie du site.




dimanche 23 septembre 2012
Merci !
                             willy@leloutre.com
                             Twitter: @wleloutre




                                  ?
                                          Des questions ?
dimanche 23 septembre 2012

Contenu connexe

En vedette

Références GeoDev
Références GeoDev Références GeoDev
Références GeoDev
AntoineGeoDev
 
Referentiel des prix_agadir_13_07_2015
Referentiel des prix_agadir_13_07_2015Referentiel des prix_agadir_13_07_2015
Referentiel des prix_agadir_13_07_2015
Mark Mark
 
Rapport d'activités 2012 de la gouverneure du Brabant wallon
Rapport d'activités 2012 de la gouverneure du Brabant wallonRapport d'activités 2012 de la gouverneure du Brabant wallon
Rapport d'activités 2012 de la gouverneure du Brabant wallonahup1
 
Liris presentation
Liris presentationLiris presentation
Liris presentation
fabiennou
 
Specifications techniques 2011 la tribune
Specifications techniques 2011 la tribuneSpecifications techniques 2011 la tribune
Specifications techniques 2011 la tribuneLa Tribune
 
My School # 03 Janvier 2011
My School # 03 Janvier 2011My School # 03 Janvier 2011
My School # 03 Janvier 2011
My School Mag
 
Bergasol fin (poids réduit)
Bergasol fin (poids réduit)Bergasol fin (poids réduit)
Bergasol fin (poids réduit)vanderpee
 
Identité numérique - Atelier Job Dating
Identité numérique - Atelier Job DatingIdentité numérique - Atelier Job Dating
Identité numérique - Atelier Job Dating
Thomas SEGRETAIN
 
Publicite commerciale 2011 la tribune br
Publicite commerciale 2011 la tribune brPublicite commerciale 2011 la tribune br
Publicite commerciale 2011 la tribune brLa Tribune
 
la gestion des chantiers
la gestion des chantiersla gestion des chantiers
la gestion des chantiersbamani
 
Euro 2012 : analyse de cas avec Yohan Cobaye
Euro 2012 : analyse de cas avec Yohan CobayeEuro 2012 : analyse de cas avec Yohan Cobaye
Euro 2012 : analyse de cas avec Yohan CobayeChristophe Tricot
 

En vedette (20)

Commission neteco
Commission netecoCommission neteco
Commission neteco
 
Références GeoDev
Références GeoDev Références GeoDev
Références GeoDev
 
Referentiel des prix_agadir_13_07_2015
Referentiel des prix_agadir_13_07_2015Referentiel des prix_agadir_13_07_2015
Referentiel des prix_agadir_13_07_2015
 
Rapport d'activités 2012 de la gouverneure du Brabant wallon
Rapport d'activités 2012 de la gouverneure du Brabant wallonRapport d'activités 2012 de la gouverneure du Brabant wallon
Rapport d'activités 2012 de la gouverneure du Brabant wallon
 
Liris presentation
Liris presentationLiris presentation
Liris presentation
 
Specifications techniques 2011 la tribune
Specifications techniques 2011 la tribuneSpecifications techniques 2011 la tribune
Specifications techniques 2011 la tribune
 
Offre TQC Digital
Offre TQC DigitalOffre TQC Digital
Offre TQC Digital
 
My School # 03 Janvier 2011
My School # 03 Janvier 2011My School # 03 Janvier 2011
My School # 03 Janvier 2011
 
Tableaux degas
Tableaux degasTableaux degas
Tableaux degas
 
Bergasol fin (poids réduit)
Bergasol fin (poids réduit)Bergasol fin (poids réduit)
Bergasol fin (poids réduit)
 
Sport 2
Sport 2Sport 2
Sport 2
 
Nourriture 1
Nourriture 1Nourriture 1
Nourriture 1
 
Identité numérique - Atelier Job Dating
Identité numérique - Atelier Job DatingIdentité numérique - Atelier Job Dating
Identité numérique - Atelier Job Dating
 
233838 papiniel
233838 papiniel233838 papiniel
233838 papiniel
 
Publicite commerciale 2011 la tribune br
Publicite commerciale 2011 la tribune brPublicite commerciale 2011 la tribune br
Publicite commerciale 2011 la tribune br
 
la gestion des chantiers
la gestion des chantiersla gestion des chantiers
la gestion des chantiers
 
Projet Carrières
Projet CarrièresProjet Carrières
Projet Carrières
 
Diapo odp
Diapo odpDiapo odp
Diapo odp
 
Charte du-dj
Charte du-djCharte du-dj
Charte du-dj
 
Euro 2012 : analyse de cas avec Yohan Cobaye
Euro 2012 : analyse de cas avec Yohan CobayeEuro 2012 : analyse de cas avec Yohan Cobaye
Euro 2012 : analyse de cas avec Yohan Cobaye
 

Similaire à Performances Web Mobile

Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
davrous
 
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
SEO CAMP
 
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
RESONEO
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
Julien LE THUAUT
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
Jérémy Buget
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Idean France
 
2012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo32012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo3
Talan
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
Olivier Dommange
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
Atelier IHM Polytech Nice Sophia
 
Cours de Web Design part.1
Cours de Web Design part.1Cours de Web Design part.1
Cours de Web Design part.1
MC Casal
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
Relax In The Air
 
MGD Html5 pres fr
MGD Html5 pres frMGD Html5 pres fr
MGD Html5 pres fr
Moroccan game developers
 
Glossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - WebdesignGlossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - Webdesign
Relax In The Air
 
Monter des environnements dev test efficaces avec Windows Azure
Monter des environnements dev test efficaces avec Windows AzureMonter des environnements dev test efficaces avec Windows Azure
Monter des environnements dev test efficaces avec Windows AzureMicrosoft Technet France
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
Un site web rapide ?
Un site web rapide ? Un site web rapide ?
Un site web rapide ?
haricot
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
Frédéric Harper
 
Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / Mobilité
André Dubreuil
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
wyggio
 

Similaire à Performances Web Mobile (20)

Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
 
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...
 
2012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo32012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo3
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Cours de Web Design part.1
Cours de Web Design part.1Cours de Web Design part.1
Cours de Web Design part.1
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
 
MGD Html5 pres fr
MGD Html5 pres frMGD Html5 pres fr
MGD Html5 pres fr
 
Glossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - WebdesignGlossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - Webdesign
 
Monter des environnements dev test efficaces avec Windows Azure
Monter des environnements dev test efficaces avec Windows AzureMonter des environnements dev test efficaces avec Windows Azure
Monter des environnements dev test efficaces avec Windows Azure
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Un site web rapide ?
Un site web rapide ? Un site web rapide ?
Un site web rapide ?
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / Mobilité
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 

Plus de Willy Leloutre

Il était une fois le Marketing digital
Il était une fois le Marketing digitalIl était une fois le Marketing digital
Il était une fois le Marketing digital
Willy Leloutre
 
NodeJs in real life
NodeJs in real lifeNodeJs in real life
NodeJs in real life
Willy Leloutre
 
Numérique et médiation handicap
Numérique et médiation handicapNumérique et médiation handicap
Numérique et médiation handicap
Willy Leloutre
 
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle JavascriptLe Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle JavascriptWilly Leloutre
 
L’accessibilité web pour les organismes publics
L’accessibilité web pour les organismes publicsL’accessibilité web pour les organismes publics
L’accessibilité web pour les organismes publicsWilly Leloutre
 
Les nouvelles perspectives SEO - E-marketing en 2013
Les nouvelles perspectives SEO - E-marketing en 2013Les nouvelles perspectives SEO - E-marketing en 2013
Les nouvelles perspectives SEO - E-marketing en 2013
Willy Leloutre
 

Plus de Willy Leloutre (7)

Il était une fois le Marketing digital
Il était une fois le Marketing digitalIl était une fois le Marketing digital
Il était une fois le Marketing digital
 
NodeJs in real life
NodeJs in real lifeNodeJs in real life
NodeJs in real life
 
Numérique et médiation handicap
Numérique et médiation handicapNumérique et médiation handicap
Numérique et médiation handicap
 
Le HTML5 & les API
Le HTML5 & les APILe HTML5 & les API
Le HTML5 & les API
 
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle JavascriptLe Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
 
L’accessibilité web pour les organismes publics
L’accessibilité web pour les organismes publicsL’accessibilité web pour les organismes publics
L’accessibilité web pour les organismes publics
 
Les nouvelles perspectives SEO - E-marketing en 2013
Les nouvelles perspectives SEO - E-marketing en 2013Les nouvelles perspectives SEO - E-marketing en 2013
Les nouvelles perspectives SEO - E-marketing en 2013
 

Dernier

Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU  SOUS WINDOWSCOURS D'ADMINISTRATION RESEAU  SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
AlbertSmithTambwe
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
AlbertSmithTambwe
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
abderrahimbourimi
 
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
Horgix
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 

Dernier (9)

Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU  SOUS WINDOWSCOURS D'ADMINISTRATION RESEAU  SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
 
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 

Performances Web Mobile

  • 1. Optimiser les performances de son site pour un affichage confortable sur mobile Willy Leloutre, intégrateur Web dimanche 23 septembre 2012
  • 2. Quels sont les enjeux La France est en 30e position, des pays où les connexions Internet sont les plus rapides. (Avec une moyenne de 4.9 mbit/s). Les connexions mobiles ont elles un débit moyen de 350 Ko/s avec des pointes à 1 Mo/s. (sources http://www.akamai.fr). Selon Google, l'expérience mobile est 1.5 fois plus lente que celle sur Desktop. La 4G devrait permettre d’atteindre des débits (nomades) plus raisonnables ! Début des travaux : 2014. Le trafic mobile représente désormais 10% du trafic web mondial. 880 millions de mobiles (Android / IOS ) sont arrivés sur le marché en un peu plus de cinq ans. (sources www.lukew.com). Les mobiles atteignent 87% de la population mondiale, c'est plus répandu que n'importe quel autre média de masse. (sources www.lukew.com). État des lieux du trafic Internet : http://www.akamai.fr/enfr/stateoftheinternet/ dimanche 23 septembre 2012
  • 3. Le front-end, c'est du lourd ! Steve Souders, gourou de la performance web, a conclu que plus de 80% du temps passé par le navigateur à charger une page dépend du côté "front-end". Notamment les images qui peuvent représenter plus de 50% du poids total des ressources à télécharger. images scripts rich media css font html dimanche 23 septembre 2012
  • 4. Les erreurs courantes • Multiplication des requêtes d'appels aux fichiers CSS, JS, IMG • Sources CSS et Javascript non compressés • Arbre DOM comportant trop de nœuds • Sur-imbrication de sélecteurs CSS • Inversement, sélecteurs trop évasifs (*) • Surcharge de Hack CSS • Redimensionnement des images en CSS • Utilisation d'images graphiques pour les bordures, les ombres et dégradés • Mauvaises pratiques des frameworks CSS (Blueprint, Boilerplate, 960gs, Skeleton, ...) • Mauvaises pratiques des Data URI • Surutilisation de la sécurisation SSL • Chargement de fonctionnalités inutiles sur mobile dimanche 23 septembre 2012
  • 5. Les bonnes pratiques • Optimisez le poids de vos images (smushit.com) • Rassemblez vos images à l'aide de sprites (draeton.github.com/stitches/) • Unifiez et compressez vos scripts (cssdrive.com, refresh-sf.com/yui/) • Utilisez les classes conditionnelles, une bonne alternative aux commentaires conditionnels et aux hacks Css ! • Dans la mesure du possible préférez les CSS3 aux images • Charger uniquement ce dont vous avez besoin à l'aide des média queries, des chargeurs de scripts et polyfills. (http://requirejs.org/) • Utilisez le lazy-loading sur les images, c’est à dire ne téléchargez l’image que lorsqu’elle est sur le point d’être affichée (OnScroll). • Globalement, respectez les bonnes pratiques de conception web. (csslint.net, http://csslisible.com/) dimanche 23 septembre 2012
  • 6. Le serveur prend le relais • Héberger les ressources (images, médias) sur plusieurs domaines favorise la parallélisation. • Mais attention à ne pas maximiser le nombre de requêtes DNS. Le coût de recherche DNS peut être dix fois plus important sur mobile à cause de la latence que sur Desktop. Un sous-domaine fonctionne aussi ! (media.mondomaine.fr) • Utiliser HTML5 localStorage pour stocker vos datas, scripts et images (encodés en base64). Technique choisie par LinkedIn mobile, Bing ou GMail. Attention ! Le cache des navigateurs mobiles est beaucoup plus petits que celui des navigateurs de bureau (4Mo environ). • Déployez votre site sur un CDN. Cela consiste à distribuer le contenu statique (images, scripts ..) de votre site suivant la localisation physique de l’utilisateur. dimanche 23 septembre 2012
  • 7. Trés bien, mais en production ? Comment utiliser toutes ces pratiques en production ? Une première approche : Demandez de l'aide à votre éditeur 'IDE' préféré, pour ma part SublimeText ou Netbeans. Ils auront sûrement quelques outils à disposition... • CSSLint (erreurs de conception) • JSMinifier (minifier le JavaScript) • YUI Compressor ( minifier JS et CSS) dimanche 23 septembre 2012
  • 8. Profiter des nouvelles technologies dimanche 23 septembre 2012
  • 9. Les préprocesseurs CSS Avec les préprocesseurs Css • Profitez des variables et des héritages de classes pour favoriser une approche DRY (Don’t Repeat Your CSS). • Minifiez vos styles en production • Générez automatiquement vos sprites d'images • Unifiez vos Css avec l'import de feuilles de style partielles • Encodez nativement vos backgrounds en data-uri,... Certains préprocésseurs Css proposent des compilations en Javascript côté front-end. Attention en production il faudra "précompiler" votre code Less et déployer un bon vieux style.css. dimanche 23 septembre 2012
  • 10. Les Polyfills, Script loader, ... ? Quel script loader choisir ? http://goo.gl/qbkVG RequireJS est un "script loader" modulable, qui fournit entre autre un outil d'optimisation permettant de combiner vos sources et de les minifier. http://requirejs.org/docs/start.html Enquire.js est une bibliothèque apportant la puissance des Media Queries en Javascript. Il est utile par exemple pour charger vos scripts selon le format du périphérique (device) utilisé. http://wickynilliams.github.com/enquire.js/ YepNope est un chargeur de scripts conditionnel et asynchrone (ultra-rapide). Ce polyfill est inclus nativement dans Modernizer, une bibliothèque JavaScript qui détecte les fonctionnalités accessibles dans le navigateur de l'utilisateur. http://modernizr.com/ dimanche 23 septembre 2012
  • 11. Profiter... des nouvelles technologies OU PAS ! ● Faut-il charger des images rétiniennes pour les appareils disposant de cette technologie ? ● Devons nous laisser le choix aux internautes et mobinautes de l'activer ou non ? ● Il faut savoir que les images "rétiniennes" seront plus lourdes à charger que les images standard... Mon avis est que les connectivités réseaux ne permettent pas aujourd'hui de fournir du retina sur des mobiles connectés en 3G ! dimanche 23 septembre 2012
  • 12. Mythe ou réalité ? @media (min-bandwidth: 25Mbps) {} @media (max-bandwidth: 10Mbps) {} dimanche 23 septembre 2012
  • 13. Des images responsives Nous n'avons pas parlé des images responsives ! dimanche 23 septembre 2012
  • 14. Mesurer, comparez ! ● http://mobitest.akamai.com/ ● https://developers.google.com/speed/ ● http://yslow.org/ ● http://validator.w3.org/mobile/ ● http://www.opquast.com/ ● http://gtmetrix.com/ ● http://www.browserscope.org/ dimanche 23 septembre 2012
  • 15. Un exemple ? ● leklub.fr/blog 25 secondes de chargement sur Iphone 4 en 3G dimanche 23 septembre 2012
  • 16. Sans l'aspect social : 13.26 secondes de chargement dimanche 23 septembre 2012
  • 17. Sans script superflu : 12.53 secondes de chargement dimanche 23 septembre 2012
  • 18. Sans Google font ! 11.81secondes de chargement dimanche 23 septembre 2012
  • 19. Images compressées : 4.78 secondes de chargement Avec optimisation des CSS pour mobile... dimanche 23 septembre 2012
  • 20. Mobile Ready ! 1.68 secondes de chargement dimanche 23 septembre 2012
  • 21. Les optimisations réalisées • Feuilles de styles CSS unifiées • Images compressées • Image d'arrière-plan chargé uniquement si écran > 640px • Suppression des styles IE (classes conditionnelles) • Google font chargé uniquement si écran > 640px • Chargement asynchrone des scripts Javascript* • Chargement des widgets sociaux uniquement si écran > 960px* * En test sur le blog Attention ! PageSpeed, YSlow, ... sont des outils d’évaluation. Ils ont été mis en place pour aider les développeurs à avoir une vision d’ensemble de l’optimisation de leurs pages et synthétisent l’ensemble des tests sous forme d’un score global. dimanche 23 septembre 2012
  • 22. Et testez ! Les outils de mesure ne remplacent pas les tests en situation réelle ! dimanche 23 septembre 2012
  • 23. Testez, ... mais comment ! Avec Opéra mobile émulator ! Non, cet outil peut être utile pour vaguement tester la "responsivité" de son site, mais en aucun cas les performances réseaux. Pour simuler un réseau 3G, on pourra utiliser des proxys via WiFi qui dégradent volontairement la connexion. Je vous invite à tester Trickle (Linux), Network Link Conditioner (OSX 10.6) ou Slowy App (OSX 10.5). dimanche 23 septembre 2012
  • 24. Quelques ressources utiles http://stevesouders.com/ http://www.lukew.com/ http://blog.goetter.fr/ http://www.webperformancetoday.com/ http://wdfriday.com/ http://letrainde13h37.fr/ https://twitter.com/#!/search/webperf Atelier de travail sur les bonnes pratiques Webperf https://checklists.opquast.com/webperf/workshops/ dimanche 23 septembre 2012
  • 25. Conclusion La performance est un élément essentiel pour une bonne expérience utilisateur (sur mobile) mais pas uniquement. Attention à ne pas surestimer les configurations technologiques de nos utilisateurs. C'est un travail de longue haleine, qui s'écoule sur toute la durée de vie du site. dimanche 23 septembre 2012
  • 26. Merci ! willy@leloutre.com Twitter: @wleloutre ? Des questions ? dimanche 23 septembre 2012