SlideShare une entreprise Scribd logo
1  sur  42
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.com
twitter : @tsoudaz
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 réduites
 Tap delay
 InApp web
 Forfaits Data / Roaming
Limites du mobile
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
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
 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ï
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
« 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 !
Source : étude Harris Interactive pour le compte d’IBM
Comment se comporte l‘utilisateur face au
temps de chargement lents sur mobile ?
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é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
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 (desktop first)
 Télécharger du CSS/JS non utilisé
 Agrandir la taille du document HTML
Image resizées en html/css
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 !!!
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.
Utilisez la balise « picture» pour servir des petites images
Supporté par seulement 78% du parc mobile français
Performance des images RWD
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é €
Contenu masqué
Et pendant ce temps là sur mobile :
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
Chargement conditionnel
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à !
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.
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
RWD Performant - Questions ?
Site : Refficience.com Email : ts refficience.com twitter : @tsoudaz

Contenu connexe

Tendances

SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...
SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...
SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...Alexandre Siahou
 
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...Search Foresight
 
Le searchdexing - utiliser son moteur de recherche interne pour le SEO
Le searchdexing - utiliser son moteur de  recherche interne pour le SEOLe searchdexing - utiliser son moteur de  recherche interne pour le SEO
Le searchdexing - utiliser son moteur de recherche interne pour le SEOPeak Ace
 
Seo mobile - bonnes pratiques
Seo mobile -  bonnes pratiquesSeo mobile -  bonnes pratiques
Seo mobile - bonnes pratiquesAymeric Bouillat
 
SEO: Piloter les comportement des moteurs de recherche
SEO: Piloter les comportement des moteurs de rechercheSEO: Piloter les comportement des moteurs de recherche
SEO: Piloter les comportement des moteurs de recherchePeak Ace
 
Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...
Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...
Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...Mathieu Gheerbrant
 
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...Office de Tourisme Luberon Durance
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEODigimood - Agence SEO / SEA
 
Comment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateurComment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateurAlexandre Thuriot
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?Virginie Clève - largow ☕️
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Semrush France
 
Performance web et PageSpeed : du SEO à la qualité web
Performance web et PageSpeed : du SEO à la qualité webPerformance web et PageSpeed : du SEO à la qualité web
Performance web et PageSpeed : du SEO à la qualité webSemrush France
 
Du Crawl à l’indexation : les prérequis pour bien ranker
Du Crawl à l’indexation : les prérequis pour bien rankerDu Crawl à l’indexation : les prérequis pour bien ranker
Du Crawl à l’indexation : les prérequis pour bien rankerSemrush France
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfObject Vingt Trois
 
SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...
SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...
SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...David Groult
 
Performance web #perfmatters - Tuniseo 2018
Performance web #perfmatters - Tuniseo 2018Performance web #perfmatters - Tuniseo 2018
Performance web #perfmatters - Tuniseo 2018Aymen Loukil
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 

Tendances (20)

SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...
SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...
SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...
 
SEO Dawa Day Progressive Web App 23 sept 2017
SEO Dawa Day Progressive Web App 23 sept 2017SEO Dawa Day Progressive Web App 23 sept 2017
SEO Dawa Day Progressive Web App 23 sept 2017
 
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
 
Le searchdexing - utiliser son moteur de recherche interne pour le SEO
Le searchdexing - utiliser son moteur de  recherche interne pour le SEOLe searchdexing - utiliser son moteur de  recherche interne pour le SEO
Le searchdexing - utiliser son moteur de recherche interne pour le SEO
 
2015 seo-campus-mobile1
2015 seo-campus-mobile12015 seo-campus-mobile1
2015 seo-campus-mobile1
 
Seo mobile - bonnes pratiques
Seo mobile -  bonnes pratiquesSeo mobile -  bonnes pratiques
Seo mobile - bonnes pratiques
 
SEO: Piloter les comportement des moteurs de recherche
SEO: Piloter les comportement des moteurs de rechercheSEO: Piloter les comportement des moteurs de recherche
SEO: Piloter les comportement des moteurs de recherche
 
Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...
Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...
Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...
 
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEO
 
Comment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateurComment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateur
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?
 
Performance web et PageSpeed : du SEO à la qualité web
Performance web et PageSpeed : du SEO à la qualité webPerformance web et PageSpeed : du SEO à la qualité web
Performance web et PageSpeed : du SEO à la qualité web
 
Du Crawl à l’indexation : les prérequis pour bien ranker
Du Crawl à l’indexation : les prérequis pour bien rankerDu Crawl à l’indexation : les prérequis pour bien ranker
Du Crawl à l’indexation : les prérequis pour bien ranker
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperf
 
SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...
SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...
SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...
 
Performance web #perfmatters - Tuniseo 2018
Performance web #perfmatters - Tuniseo 2018Performance web #perfmatters - Tuniseo 2018
Performance web #perfmatters - Tuniseo 2018
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 

Similaire à Responsive WebDesign performant

Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Brigitte Marandon
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostDamien Jubeau
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Kenny Dits
 
Techniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyTechniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyJean-Pierre Vincent
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Fasterize
 
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre parisPeak Ace
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web MobileWilly Leloutre
 
Mobile first : évitez de perdre des clients à cause d'un site trop lent
Mobile first : évitez de perdre des clients à cause d'un site trop lentMobile first : évitez de perdre des clients à cause d'un site trop lent
Mobile first : évitez de perdre des clients à cause d'un site trop lentFasterize
 
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
 
Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Adyax
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans DrupalAdyax
 
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
 
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 HTML5davrous
 
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
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Peak Ace
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 

Similaire à Responsive WebDesign performant (20)

Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
 
Techniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyTechniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwiparty
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
 
Talk performance web
Talk performance webTalk performance web
Talk performance web
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web Mobile
 
Mobile first : évitez de perdre des clients à cause d'un site trop lent
Mobile first : évitez de perdre des clients à cause d'un site trop lentMobile first : évitez de perdre des clients à cause d'un site trop lent
Mobile first : évitez de perdre des clients à cause d'un site trop lent
 
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...
 
Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
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...
 
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
 
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...
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 

Responsive WebDesign performant

  • 2. Thomas SOUDAZ Fondateur de la société Refficience, Consultant WebPerf et SEO Site : Refficience.com Email : ts@refficience.com twitter : @tsoudaz
  • 3. Définition WebPerfomance Délai perçu par l’internaute entre l’action (ex: un touch) et une réponse intelligible “ ”
  • 4. Actualité SEO Source : twitter.com/methode/status/737891772504887296
  • 6.
  • 7.
  • 8.
  • 9. Speedindex  Mesure « la moyenne de temps d’affichage des éléments visibles de la page »
  • 10. Speedindex Prend en compte la progressivité du chargement visuel Pourcentagedecomplétion Chrono en secondes
  • 11.  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
  • 12. 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
  • 13. 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
  • 14.  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ï
  • 15. 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
  • 16.
  • 17. « Plutôt que de faire un site responsive, on va demander à nos clients d’acheter des mobiles avec des écrans plus grands ! »
  • 18. 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 ?
  • 19. Solutions techniques  Pas de site mobile  Site mobile+url dédiée  Site RWD  Adaptive delivery Optimisé
  • 20. 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
  • 21. Site dédié en m. ? Une redirection 301 + une redirection 302 = 1,3 secondes
  • 22. Site dédié m. - take 2 Partage sur facebook/twitter ?
  • 23. RWD : image & principes Conception • Grilles fluides • Images flexibles • MediaQueries Technique • Url unique • HTML unique
  • 29. Pensez Mobile first / PE mobile PhabletteTabletteDesktop
  • 30. 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
  • 31. Image resizées en html/css
  • 32. 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 !!!
  • 33. 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.
  • 34. Utilisez la balise « picture» pour servir des petites images Supporté par seulement 78% du parc mobile français Performance des images RWD
  • 35. 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é €
  • 36. Contenu masqué Et pendant ce temps là sur mobile :
  • 37. 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
  • 39. 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à !
  • 40. 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.
  • 41. 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
  • 42. RWD Performant - Questions ? Site : Refficience.com Email : ts refficience.com twitter : @tsoudaz

Notes de l'éditeur

  1. « 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
  2. Jennifer est éditrice de Thesempost, methode est en charge de la communication auprès des webmasters chez Google
  3. Webpagest.org réaliser un test avec une connectivité mobile
  4. En émulant un mobile Nexus
  5. Identifier le SpeedIndex sur la page de résultat de test
  6. Mesure « la moyenne de temps d’affichage des éléments visibles de la page »
  7. + d’infos : https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index Start render 1.1secondes Visually complete 4,8 secondes
  8. 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é…
  9. Etude Akamaï
  10. 1 seconde de délai sur mobile c’est 0,4pts de taux de conversion en moins = 27% de conversion en plus 
  11. Vous avez déjà casser la vitre de votre smartphone ? O:-)
  12. Allociné est enfin Responsive !
  13. Le plus gros problème des sites mobiles dédiés
  14. Site mobile sur desktop ?  il faut au moins prévoir une redirection Aller/Retour
  15. PE = progressive enhancement Les UX mobiles réussient ne s’adaptent pas elles se conçoivent !
  16. Image avec 35x moins de pixels
  17. La mode est au interface épurée et imageless 
  18. Smashing magazine qualifie picturefill de “The perfect polyfill” WebP !
  19. 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>
  20. HTTP2 améliore les performances mobile grâce à un protocole nouvelle génération qui optimise la connectivité serveur/client
  21. Responsive Design + Server Side Component