SlideShare une entreprise Scribd logo
1  sur  20
Télécharger pour lire hors ligne
Poids des pages :
attention danger !
Quelques rappels utiles
Pourquoi parler
de mobile ?
de mobile ?
Pourquoi parler
de mobile ?
de mobile ?
• Appareils moins performants
• Utilisateurs plus impatients
• Optimisations valables pour le desktop
Débit 3G
Débit 3G
7.2 Mbit/s en théorie
2 Mbit/s max
500-1500 kbit/s en moyenne
Page ± 1.5 MB
http://httparchive.org/
Page ± 1.5 MB
Chargement de 10 à 20 s !
http://www.webperformancetoday.com/2012/10/03/what-we-learned-from-testing-the-
mobile-load-times-of-200-top-retail-sites-over-3g-and-lte/
On n’y peut rien
Connexion antenne 0 - 2300 ms
Autorisation SIM 200 ms
Résolution DNS 200 ms
Connection TCP 200 ms
Echange TLS 0 - 400 ms
Requête HTTP 200 ms
TOTAL 800 - 3500 ms
Breaking the 1000ms time to glass mobile barrier
http://www.youtube.com/watch?v=Il4swGfTOSM
0. Mesurer
0. Mesurer
• WebPageTest
• PageSpeed Insights
• YSlow
• Google Analytics
• Garder des enregistrements !
1. Réduire
1. Réduire
• Images
• Minifier
• Concaténer
• En-têtes de cache
• Vanilla JS
2. Prioriser
2. Prioriser
• CSS
• JS
3. Comparer
3. Comparer
• Temps de chargement
• Engagement des visiteurs
• Bande passante
4. Fignoler
• Sprites d’images
• Encoder en base64
• Font Subset
• FastClick.js
http://qkme.me/3ujva3
A retenir
• Mesurez
• Réduisez
• Priorisez
• Recommencez !
Merci !
@goulvench
paris-web.fr
sudweb.fr

Contenu connexe

En vedette

Beitrag der Kreislaufwirtschaft zur Energiewende
Beitrag der Kreislaufwirtschaft zur EnergiewendeBeitrag der Kreislaufwirtschaft zur Energiewende
Beitrag der Kreislaufwirtschaft zur EnergiewendeOeko-Institut
 
Rentrée analyse 2010 2011
Rentrée analyse 2010 2011Rentrée analyse 2010 2011
Rentrée analyse 2010 2011micertzscheid
 
TIC y competencia digital para el desarrollo profesional
TIC y competencia digital para el desarrollo profesionalTIC y competencia digital para el desarrollo profesional
TIC y competencia digital para el desarrollo profesionalOlga Navarro
 
Auf dem Weg zu einem ganzheitlichen und zukunftsfähigen Strommarktdesign
Auf dem Weg zu einem ganzheitlichen und zukunftsfähigen StrommarktdesignAuf dem Weg zu einem ganzheitlichen und zukunftsfähigen Strommarktdesign
Auf dem Weg zu einem ganzheitlichen und zukunftsfähigen StrommarktdesignOeko-Institut
 
Les Réseaux Sociaux pour gérer sa carrière - Apec Booster Tour Décembre 2009
Les Réseaux Sociaux pour gérer sa carrière - Apec Booster Tour Décembre 2009Les Réseaux Sociaux pour gérer sa carrière - Apec Booster Tour Décembre 2009
Les Réseaux Sociaux pour gérer sa carrière - Apec Booster Tour Décembre 2009Stephen Demange
 
Retour sur-networking-ete
Retour sur-networking-eteRetour sur-networking-ete
Retour sur-networking-eteEcobiz 37
 
Herr von Ribbeck auf Ribbeck im Havelland
Herr von Ribbeck auf Ribbeck im HavellandHerr von Ribbeck auf Ribbeck im Havelland
Herr von Ribbeck auf Ribbeck im HavellandYPEPTH
 
Drupalcamp Nantes - Adapter Drupal
Drupalcamp Nantes - Adapter DrupalDrupalcamp Nantes - Adapter Drupal
Drupalcamp Nantes - Adapter DrupalArtusamak
 
Lipome intradural MANZO Neurochirugie fort-de-france
Lipome intradural MANZO Neurochirugie fort-de-franceLipome intradural MANZO Neurochirugie fort-de-france
Lipome intradural MANZO Neurochirugie fort-de-franceneurochirurgie
 
Nouvelles méthodes de développement web avec les technologies centrées doc...
Nouvelles méthodes de développement web avec les technologies centrées doc...Nouvelles méthodes de développement web avec les technologies centrées doc...
Nouvelles méthodes de développement web avec les technologies centrées doc...stsire
 
Personal 2010 Präsentation
Personal 2010 PräsentationPersonal 2010 Präsentation
Personal 2010 PräsentationXING AG
 
Mozambique
MozambiqueMozambique
MozambiqueAllonsy
 

En vedette (19)

Prj02
Prj02Prj02
Prj02
 
Beitrag der Kreislaufwirtschaft zur Energiewende
Beitrag der Kreislaufwirtschaft zur EnergiewendeBeitrag der Kreislaufwirtschaft zur Energiewende
Beitrag der Kreislaufwirtschaft zur Energiewende
 
Rentrée analyse 2010 2011
Rentrée analyse 2010 2011Rentrée analyse 2010 2011
Rentrée analyse 2010 2011
 
TIC y competencia digital para el desarrollo profesional
TIC y competencia digital para el desarrollo profesionalTIC y competencia digital para el desarrollo profesional
TIC y competencia digital para el desarrollo profesional
 
Auf dem Weg zu einem ganzheitlichen und zukunftsfähigen Strommarktdesign
Auf dem Weg zu einem ganzheitlichen und zukunftsfähigen StrommarktdesignAuf dem Weg zu einem ganzheitlichen und zukunftsfähigen Strommarktdesign
Auf dem Weg zu einem ganzheitlichen und zukunftsfähigen Strommarktdesign
 
Droit & patrimoine
Droit & patrimoineDroit & patrimoine
Droit & patrimoine
 
Les Réseaux Sociaux pour gérer sa carrière - Apec Booster Tour Décembre 2009
Les Réseaux Sociaux pour gérer sa carrière - Apec Booster Tour Décembre 2009Les Réseaux Sociaux pour gérer sa carrière - Apec Booster Tour Décembre 2009
Les Réseaux Sociaux pour gérer sa carrière - Apec Booster Tour Décembre 2009
 
Miguel Hernández
Miguel HernándezMiguel Hernández
Miguel Hernández
 
Gestion por procesos
Gestion por procesosGestion por procesos
Gestion por procesos
 
Retour sur-networking-ete
Retour sur-networking-eteRetour sur-networking-ete
Retour sur-networking-ete
 
Herr von Ribbeck auf Ribbeck im Havelland
Herr von Ribbeck auf Ribbeck im HavellandHerr von Ribbeck auf Ribbeck im Havelland
Herr von Ribbeck auf Ribbeck im Havelland
 
Drupalcamp Nantes - Adapter Drupal
Drupalcamp Nantes - Adapter DrupalDrupalcamp Nantes - Adapter Drupal
Drupalcamp Nantes - Adapter Drupal
 
Lipome intradural MANZO Neurochirugie fort-de-france
Lipome intradural MANZO Neurochirugie fort-de-franceLipome intradural MANZO Neurochirugie fort-de-france
Lipome intradural MANZO Neurochirugie fort-de-france
 
Nouvelles méthodes de développement web avec les technologies centrées doc...
Nouvelles méthodes de développement web avec les technologies centrées doc...Nouvelles méthodes de développement web avec les technologies centrées doc...
Nouvelles méthodes de développement web avec les technologies centrées doc...
 
Personal 2010 Präsentation
Personal 2010 PräsentationPersonal 2010 Präsentation
Personal 2010 Präsentation
 
Bussunda
BussundaBussunda
Bussunda
 
Mozambique
MozambiqueMozambique
Mozambique
 
Darpa
DarpaDarpa
Darpa
 
Jacob
JacobJacob
Jacob
 

Similaire à Poids des pages, attention danger

Séminaire Web Perf Mobile by tellibus (26/02/2013)
Séminaire Web Perf Mobile by tellibus (26/02/2013)Séminaire Web Perf Mobile by tellibus (26/02/2013)
Séminaire Web Perf Mobile by tellibus (26/02/2013)Abdelaziz Bennouna
 
20150126 latence 10 minutes - human talk
20150126 latence   10 minutes - human talk20150126 latence   10 minutes - human talk
20150126 latence 10 minutes - human talkCommunity motwin
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performantRefficience
 
Amif Bouygues Tel 3 G+ Haut DéBit
Amif Bouygues Tel 3 G+ Haut DéBitAmif Bouygues Tel 3 G+ Haut DéBit
Amif Bouygues Tel 3 G+ Haut DéBitARTESI / AMIF
 
Agriculture et Télécoms : le point sur les réseaux et les technologies
Agriculture et Télécoms : le point sur les réseaux et les technologiesAgriculture et Télécoms : le point sur les réseaux et les technologies
Agriculture et Télécoms : le point sur les réseaux et les technologiesQualiméditerranée
 
Intro technos-reseau
Intro technos-reseauIntro technos-reseau
Intro technos-reseautsdi2011
 
Robustel R2000-ent pour mise en réseau de sites temporaires - QL3D
Robustel R2000-ent pour mise en réseau de sites temporaires - QL3DRobustel R2000-ent pour mise en réseau de sites temporaires - QL3D
Robustel R2000-ent pour mise en réseau de sites temporaires - QL3DLudovic DEBOVES
 
Webperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performanceWebperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performanceRefficience
 
Competitic explosion des debits telecoms - numerique en entreprise
Competitic   explosion des debits telecoms - numerique en entrepriseCompetitic   explosion des debits telecoms - numerique en entreprise
Competitic explosion des debits telecoms - numerique en entrepriseCOMPETITIC
 
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
 
Présentation amélioration WIfi.pdf
Présentation amélioration WIfi.pdfPrésentation amélioration WIfi.pdf
Présentation amélioration WIfi.pdfYoussefSassi2
 
La connexion à Internet
La connexion à InternetLa connexion à Internet
La connexion à InternetD1clic
 

Similaire à Poids des pages, attention danger (13)

Séminaire Web Perf Mobile by tellibus (26/02/2013)
Séminaire Web Perf Mobile by tellibus (26/02/2013)Séminaire Web Perf Mobile by tellibus (26/02/2013)
Séminaire Web Perf Mobile by tellibus (26/02/2013)
 
20150126 latence 10 minutes - human talk
20150126 latence   10 minutes - human talk20150126 latence   10 minutes - human talk
20150126 latence 10 minutes - human talk
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performant
 
Présentation 5 g
Présentation 5 gPrésentation 5 g
Présentation 5 g
 
Amif Bouygues Tel 3 G+ Haut DéBit
Amif Bouygues Tel 3 G+ Haut DéBitAmif Bouygues Tel 3 G+ Haut DéBit
Amif Bouygues Tel 3 G+ Haut DéBit
 
Agriculture et Télécoms : le point sur les réseaux et les technologies
Agriculture et Télécoms : le point sur les réseaux et les technologiesAgriculture et Télécoms : le point sur les réseaux et les technologies
Agriculture et Télécoms : le point sur les réseaux et les technologies
 
Intro technos-reseau
Intro technos-reseauIntro technos-reseau
Intro technos-reseau
 
Robustel R2000-ent pour mise en réseau de sites temporaires - QL3D
Robustel R2000-ent pour mise en réseau de sites temporaires - QL3DRobustel R2000-ent pour mise en réseau de sites temporaires - QL3D
Robustel R2000-ent pour mise en réseau de sites temporaires - QL3D
 
Webperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performanceWebperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performance
 
Competitic explosion des debits telecoms - numerique en entreprise
Competitic   explosion des debits telecoms - numerique en entrepriseCompetitic   explosion des debits telecoms - numerique en entreprise
Competitic explosion des debits telecoms - numerique en entreprise
 
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
 
Présentation amélioration WIfi.pdf
Présentation amélioration WIfi.pdfPrésentation amélioration WIfi.pdf
Présentation amélioration WIfi.pdf
 
La connexion à Internet
La connexion à InternetLa connexion à Internet
La connexion à Internet
 

Plus de Goulven Champenois

TECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkTECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkGoulven Champenois
 
Objectif zéro déchet (hévéa)
Objectif   zéro déchet (hévéa)Objectif   zéro déchet (hévéa)
Objectif zéro déchet (hévéa)Goulven Champenois
 
Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Goulven Champenois
 
Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Goulven Champenois
 
Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Goulven Champenois
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueGoulven Champenois
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueGoulven Champenois
 
Intitulés de poste, bas les masques
Intitulés de poste, bas les masquesIntitulés de poste, bas les masques
Intitulés de poste, bas les masquesGoulven Champenois
 
Mobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieMobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieGoulven Champenois
 
Responsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusResponsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusGoulven Champenois
 
1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)Goulven Champenois
 
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactifPourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactifGoulven Champenois
 
Développer pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniquesDévelopper pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniquesGoulven Champenois
 

Plus de Goulven Champenois (18)

TECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkTECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field check
 
Objectif zéro déchet (hévéa)
Objectif   zéro déchet (hévéa)Objectif   zéro déchet (hévéa)
Objectif zéro déchet (hévéa)
 
Objectif : zéro déchet
Objectif : zéro déchetObjectif : zéro déchet
Objectif : zéro déchet
 
Attention Déchets
Attention DéchetsAttention Déchets
Attention Déchets
 
Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?
 
UX et santé
UX et santéUX et santé
UX et santé
 
Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !
 
Pour un Web inclusif
Pour un Web inclusifPour un Web inclusif
Pour un Web inclusif
 
Guérir le burnout (E1 2016)
Guérir le burnout (E1 2016)Guérir le burnout (E1 2016)
Guérir le burnout (E1 2016)
 
Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
 
Intitulés de poste, bas les masques
Intitulés de poste, bas les masquesIntitulés de poste, bas les masques
Intitulés de poste, bas les masques
 
Mobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieMobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à Troie
 
Responsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusResponsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processus
 
1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)
 
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactifPourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
 
Développer pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniquesDévelopper pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniques
 

Poids des pages, attention danger

Notes de l'éditeur

  1. En conditions réelles, le débit 3G associé au temps de traitement des navigateurs sur mobile font qu’une page d’1 méga 5 met entre 10 et 20 secondes à se charger. Non, ce n’est pas normal...
  2. Avant de se lancer dans des optimisations, il faut déjà savoir où se situe le site sur le plan des performances.
  3. Puisque nous ne pouvons pas modifier le débit du “tuyau” par où passent les données, il faut limiter au maximum ce qui transite dedans.
  4. Les images représentent presque 2/3 du poids des pages aujourd’hui. Or il est souvent possible de réduire leur poids sans les modifier visuellement (ImageOptim, RIOT, smush.it...). J’ai vu une image de 70k dont le poids a été divisé par 10 comme ça ! Minifier c’est retirer les espaces, retours à la ligne et commentaires inutiles dans les CSS et JS. Les préprocesseurs CSS font ça très bien, raison de plus pour s’y mettre. Concaténer c’est créer un seul fichier regroupant le contenu de plusieurs fichiers de même type (CSS ou JS). Evite de nombreuses requêtes HTTP coûteuses. Si le site fait plus d’une page, configurer les en-têtes de cache permet au navigateur de ne pas redemander les ressources communes non modifiées entre-temps. Vanilla JS n’est pas un framework, c’est l’utilisation du DOM natif. Télécharger et exécuter un framework JavaScript est long et lourd sur mobile, pour des interactions simples il vaut mieux s’en passer.
  5. Une fois qu’on a l’indispensable, il faut faire en sorte que le navigateur puisse commencer à afficher la page le plus vite possible.
  6. Le navigateur n’affiche rien tant qu’il n’a pas reçu toutes les CSS. Les inclure dans le head pour qu’elles soient chargées le plus tôt possible (donc avant les images de contenu). Dès qu’un navigateur tombe sur un lien JS il interrompt l’analyse du HTML au cas où un `document.write` vienne s’interposer. Mettre le JS en toute fin de page, juste avant la balise body fermante. Le code de Google Analytics peut aller dans le head car il est asynchrone.
  7. Comparer les métriques permet de s’assurer que rien n’a été cassé au passage, et de montrer le retour sur investissement aux équipes marketing/communication et sysadmins.
  8. Combiner les images pour réduire le nombre de requêtes HTTP. Si les navigateurs supportés le permettent, économiser quelques requêtes en incluant certaines images dans la CSS via encodage base64. Supprimer des fichiers de police les caractères non utilisés : cyrillique, vietnamien... Pour que les liens se chargent plus vite, utiliser fastclick.js qui évite les 380ms de délai sur mobile (le temps pour le navigateur de s’assurer que ce n’est pas un double-tap).
  9. Success baby says “Page loaded in less than 1sec”.
  10. Je partage ma veille (et plus) sur Twitter. Je présente une conférence et un atelier à ParisWeb 2013. Je co-organise Sud Web. Je participe au site de traduction pompage.net.