Responsive Web Design
Performant
8 juin 2016
Thomas SOUDAZ
Fondateur de la société Refficience, Consultant WebPerf et SEO
Site : Refficience.com
Email : ts@refficience...
Définition WebPerfomance
Délai perçu par l’internaute entre l’action
(ex: un touch) et une réponse intelligible
“
”
Actualité SEO
Source : twitter.com/methode/status/737891772504887296
SpeedIndex < 2000
Speedindex
 Mesure « la moyenne de temps d’affichage des éléments visibles de la page »
Speedindex
Prend en compte la progressivité du chargement visuel
Pourcentagedecomplétion
Chrono en secondes
 Latence réseau
 Qualité du signal
 Capacité CPU
 Mémoire/ disque limité
 Consommation de batterie
 Tailles d’écrans...
Poids moyen d’une page web mobile
+ HTML
+ CSS
+ JS
+ Images
+ Fonts personnalisées
+ Tags/tracking/pubs
+ Ressources tier...
Moi, qui poste une photo sur
facebook depuis mon tel
« Echec de l’envoi.
Réessayez »
Moi, qui tend le bras pour tenter
de ...
 39% des utilisateurs mobiles sont mécontents de leur
expérience web mobile
 57% ont des problèmes en utilisant leur mob...
1 sec de délai pénalise la conversion
Source : Soasta
Taux de conversion
Taux de conversion
Temps de chargement (secondes)...
« Plutôt que de faire un site responsive, on va demander à nos
clients d’acheter des mobiles avec des écrans plus grands !...
Mobile Rage
62%
23%
11%
4%
Se comporte normalement
Insulte son téléphone
Hurle sur son téléphone
Jette son téléphone !
Sou...
Solutions techniques
 Pas de site mobile
 Site mobile+url dédiée
 Site RWD
 Adaptive delivery
Optimisé
RWD = 0 redirection 
Top 10 Fr Techno URL Surcoût !
Leboncoin RWD Unique Surcoût faible
Lefigaro RWD Unique Sur télécharg...
Site dédié en m. ?
Une redirection 301 + une redirection 302 = 1,3 secondes
Site dédié m. - take 2
Partage sur facebook/twitter ?
RWD : image & principes
Conception
• Grilles fluides
• Images flexibles
• MediaQueries
Technique
• Url unique
• HTML unique
Version smartphone < 480
Version 480<phablette< 740
Version 740< tablette < 980
Version 980<tablette< 1140
Version desktop > 1140px
Pensez Mobile first / PE
mobile
PhabletteTabletteDesktop
Les pièges du RWD
 Télécharger les images en grand format pour les réduire
 Télécharger le contenu pour le masquer (desk...
Image resizées en html/css
Performance des images RWD
 Compression lossless !
 Avoir un seul format d’image n’est clairement pas suffisant
 Les im...
Mediaqueries et images
 Les navigateurs ont quasi tous des comportements différents
 La plupart télécharge les images en...
Utilisez la balise « picture» pour servir des petites images
Supporté par seulement 78% du parc mobile français
Performanc...
LA bonne image à tous
Homemade
 Script de redimensionnement (à la volée ou pré-génération à l’upload)
 Polyfill : pictur...
Contenu masqué
Et pendant ce temps là sur mobile :
Chargement conditionnel
Le Javascript à la rescousse « matchmedia »
Avantages
 Pas de surtéléchargement
 Compatible avec...
Chargement conditionnel
RWD webperf compatible?
 Tous les sites n’ont pas vocation à faire du RWD
 Technologies bientôt matures mais pas tout à ...
RWD + Adaptive = RESS
 Détection mobile/tablette => Côté serveur/applicatif
 Impact sur le cache, les CDN, les proxys
 ...
Toolbox
Diagnostic Niveau
 Google Pagespeed Insights Débutant
 Outils de développement Chrome/FF/IE Intermédiaire/Avancé...
RWD Performant - Questions ?
Site : Refficience.com Email : ts refficience.com twitter : @tsoudaz
Responsive WebDesign performant
Responsive WebDesign performant
Responsive WebDesign performant
Responsive WebDesign performant
Prochain SlideShare
Chargement dans…5
×

Responsive WebDesign performant

723 vues

Publié le

Commentaires des slides accessibles depuis : http://refficience.com/wpo/queduweb-2016/
Présentation donnée lors de la conférence QueDuWeb le 8 juin 2016 à Deauville. Les bonnes pratiques permettant de réaliser un site mobile performant (optimisation de temps de chargement des pages) en utilisant les techniques du Responsive Web Design - présenté par Thomas SOUDAZ de la société Refficience booster de speedindex !

Publié dans : Internet
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
723
Sur SlideShare
0
Issues des intégrations
0
Intégrations
455
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • « Délai perçu par l’internaute entre l’action (ex: un touch) et une réponse intelligible » ”The delay perceived by the website visitor between an action (e.g click) and a meaningful response” Définition traduit de l’anglais © Stephen Thair @TheOpsMgr
  • Jennifer est éditrice de Thesempost, methode est en charge de la communication auprès des webmasters chez Google
  • Webpagest.org réaliser un test avec une connectivité mobile
  • En émulant un mobile Nexus
  • Identifier le SpeedIndex sur la page de résultat de test
  • Mesure « la moyenne de temps d’affichage des éléments visibles de la page »
  • + d’infos : https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
    Start render 1.1secondes
    Visually complete 4,8 secondes
  • Latence sur mobile ~150ms
    Pertes de paquet : de 0 à 1 %
    CPU 2,3,10x puissant qu’un ordinateur de bureau
    Mémoire vive, cache navigateur, espace disque
    Batterie qui va raccourcir la durée des sessions
    27% des utilisateurs dépassent le forfait Data.
    Wifi… Hotspot… Sécurité…
  • Etude Akamaï
  • 1 seconde de délai sur mobile c’est 0,4pts de taux de conversion en moins = 27% de conversion en plus 
  • Vous avez déjà casser la vitre de votre smartphone ? O:-)
  • Allociné est enfin Responsive !
  • Le plus gros problème des sites mobiles dédiés
  • Site mobile sur desktop ?  il faut au moins prévoir une redirection Aller/Retour
  • PE = progressive enhancement
    Les UX mobiles réussient ne s’adaptent pas elles se conçoivent !
  • Image avec 35x moins de pixels
  • La mode est au interface épurée et imageless 
  • Smashing magazine qualifie picturefill de “The perfect polyfill”

    WebP !
  • Exemple de code permettant de ne pas charger des Javascripts sur mobile
    <script data-mq="(min-width: 640px)" data-src="//ads.com/banner.js"></script>
    <script data-mq="(min-width: 640px)" data-src="livechat.js" ></script>
    <script>
    var scripts = document.getElementsByTagName("script");
    for(var i=0;i<scripts.length; i++)
    {
    // Test qui vérifie la validité de la mediaquerie
    var mq = scripts[i].getAttribute("data-mq");
    if (window.matchMedia(mq).matches)
    {
    // Si oui, on charge de façon asyncrhone le script
    var s = document.createElement("script");
    s.type = 'text/javascript';
    s.src = scripts[i].getAttribute("data-src");
    document.body.appendChild(s);
    }
    }
    </script>
  • HTTP2 améliore les performances mobile grâce à un protocole nouvelle génération qui optimise la connectivité serveur/client
  • Responsive Design + Server Side Component
  • Responsive WebDesign performant

    1. 1. Responsive Web Design Performant 8 juin 2016
    2. 2. Thomas SOUDAZ Fondateur de la société Refficience, Consultant WebPerf et SEO Site : Refficience.com Email : ts@refficience.com twitter : @tsoudaz
    3. 3. Définition WebPerfomance Délai perçu par l’internaute entre l’action (ex: un touch) et une réponse intelligible “ ”
    4. 4. Actualité SEO Source : twitter.com/methode/status/737891772504887296
    5. 5. SpeedIndex < 2000
    6. 6. Speedindex  Mesure « la moyenne de temps d’affichage des éléments visibles de la page »
    7. 7. Speedindex Prend en compte la progressivité du chargement visuel Pourcentagedecomplétion Chrono en secondes
    8. 8.  Latence réseau  Qualité du signal  Capacité CPU  Mémoire/ disque limité  Consommation de batterie  Tailles d’écrans réduites  Tap delay  InApp web  Forfaits Data / Roaming Limites du mobile
    9. 9. Poids moyen d’une page web mobile + HTML + CSS + JS + Images + Fonts personnalisées + Tags/tracking/pubs + Ressources tierces En moyenne 117 requêtes Source : mobile.httparchive.org
    10. 10. Moi, qui poste une photo sur facebook depuis mon tel « Echec de l’envoi. Réessayez » Moi, qui tend le bras pour tenter de mieux capter Source : reposti.com/p/bxE
    11. 11.  39% des utilisateurs mobiles sont mécontents de leur expérience web mobile  57% ont des problèmes en utilisant leur mobile  75% des utilisateurs estiment que le mobile est plus lent que le desktop  46% ne retournent pas sur un site lent. Seulement 9% des utilisateurs préfèrent acheter sur mobile Les stats qui font mal :’( Source : akamaï
    12. 12. 1 sec de délai pénalise la conversion Source : Soasta Taux de conversion Taux de conversion Temps de chargement (secondes) Visites Tauxdeconversion(%) Visites faible qualité Visites Conversions
    13. 13. « Plutôt que de faire un site responsive, on va demander à nos clients d’acheter des mobiles avec des écrans plus grands ! »
    14. 14. Mobile Rage 62% 23% 11% 4% Se comporte normalement Insulte son téléphone Hurle sur son téléphone Jette son téléphone ! Source : étude Harris Interactive pour le compte d’IBM Comment se comporte l‘utilisateur face au temps de chargement lents sur mobile ?
    15. 15. Solutions techniques  Pas de site mobile  Site mobile+url dédiée  Site RWD  Adaptive delivery Optimisé
    16. 16. RWD = 0 redirection  Top 10 Fr Techno URL Surcoût ! Leboncoin RWD Unique Surcoût faible Lefigaro RWD Unique Sur téléchargement / 2mo CreditAgricole.fr RWD Unique Sur téléchargement / 1.2mo Allociné RWD Unique Surcoût moyen / 650ko Orange redirection serveur > site m. 2 Urls 150/200 ms Leparisien redirection javascript > site m. 2 Urls 400/500 ms Lequipe redirection javascript > site m. 2 Urls 400/500 ms Lemonde redirection fichier JS > site m. 2 Urls 500/700 ms Pages Jaunes RESS Unique Sfr Adaptive + Tablet RWD Unique Tests réalisés avec connectivité 3G - 150ms
    17. 17. Site dédié en m. ? Une redirection 301 + une redirection 302 = 1,3 secondes
    18. 18. Site dédié m. - take 2 Partage sur facebook/twitter ?
    19. 19. RWD : image & principes Conception • Grilles fluides • Images flexibles • MediaQueries Technique • Url unique • HTML unique
    20. 20. Version smartphone < 480
    21. 21. Version 480<phablette< 740
    22. 22. Version 740< tablette < 980
    23. 23. Version 980<tablette< 1140
    24. 24. Version desktop > 1140px
    25. 25. Pensez Mobile first / PE mobile PhabletteTabletteDesktop
    26. 26. Les pièges du RWD  Télécharger les images en grand format pour les réduire  Télécharger le contenu pour le masquer (desktop first)  Télécharger du CSS/JS non utilisé  Agrandir la taille du document HTML
    27. 27. Image resizées en html/css
    28. 28. Performance des images RWD  Compression lossless !  Avoir un seul format d’image n’est clairement pas suffisant  Les images retinas sont très LOURDES : 1 ou 1,5x suffisant!  Logos, icones => html ♥, css , SVG et pas de font icon  Lazyloading !!!
    29. 29. Mediaqueries et images  Les navigateurs ont quasi tous des comportements différents  La plupart télécharge les images en display:none  Les images responsives sont trop souvent chargées avec : max-width : empêche l’image de dépasser de son conteneur tout en prenant le maximum de place possible. height: auto : permet à l’image ne pas être déformée par le redimensionnement.
    30. 30. Utilisez la balise « picture» pour servir des petites images Supporté par seulement 78% du parc mobile français Performance des images RWD
    31. 31. LA bonne image à tous Homemade  Script de redimensionnement (à la volée ou pré-génération à l’upload)  Polyfill : picturefill / imagerjs Solutions tiers  Fait le travail pour vous  Mod_pagespeed, Akamai Ion €, cloudinary.com €, Thème RWD optimisé €
    32. 32. Contenu masqué Et pendant ce temps là sur mobile :
    33. 33. Chargement conditionnel Le Javascript à la rescousse « matchmedia » Avantages  Pas de surtéléchargement  Compatible avec 98% des navigateurs (IE<=9 = 2%) Inconvénients  Passe outre le comportement natif  Patiente jusqu’à l’execution du JS  Augmente le poids du HTML
    34. 34. Chargement conditionnel
    35. 35. RWD webperf compatible?  Tous les sites n’ont pas vocation à faire du RWD  Technologies bientôt matures mais pas tout à fait (Android/iOs)  Maintenance applicative complexifiée  Monitoring !  HTTP/2 est là !
    36. 36. RWD + Adaptive = RESS  Détection mobile/tablette => Côté serveur/applicatif  Impact sur le cache, les CDN, les proxys  Pas de problème de Sur-téléchargement  Permet de servir deux HTML ≠ mais aussi des contenus adaptés aux contexte mobile / desktop  Exploite la force du Responsive en limitant les faiblesses.
    37. 37. Toolbox Diagnostic Niveau  Google Pagespeed Insights Débutant  Outils de développement Chrome/FF/IE Intermédiaire/Avancé  WebpageTest Avancé Mesures RUM  Google Analytics Débutant  Soasta € Intermédiaire  Basilic.io € Intermédiaire Mesures Synthétiques  WPT monitor Avancé  SpeedCurve € Intermédiaire  Dareboost € Intermédiaire
    38. 38. RWD Performant - Questions ? Site : Refficience.com Email : ts refficience.com twitter : @tsoudaz

    ×