• Partagez
  • E-mail
  • Intégrer
  • J'aime
  • Télécharger
  • Contenu privé
Techniques d’accélération des pages Web
 

Techniques d’accélération des pages Web

on

  • 402 vues

Vos utilisateurs, votre consultant référencement et même votre ergonome devraient déjà vous poursuivre pour accélérer l'affichage de vos pages. Si ça n'est pas le cas, c'est à l'équipe front ...

Vos utilisateurs, votre consultant référencement et même votre ergonome devraient déjà vous poursuivre pour accélérer l'affichage de vos pages. Si ça n'est pas le cas, c'est à l'équipe front de l'introduire. Nous allons voir les techniques universelles dont disposent les développeurs Web ou les exploitants pour accélérer l'affichage des pages Web, y compris sur les mobiles. C'est surtout côté code front que se passe la course à l'affichage de pixel, mais nous discuterons également des choses à prendre en compte côté backend et machines. Nous passerons également en revue les arguments à avancer pour faire prendre conscience des enjeux de qualité, d'ergonomie et de finances associés à des sites rapides.

Statistiques

Vues

Total des vues
402
Vues sur SlideShare
402
Vues externes
0

Actions

J'aime
0
Téléchargements
13
Commentaires
0

0 Ajouts 0

No embeds

Accessibilité

Catégories

Détails de l'import

Uploaded via as Microsoft PowerPoint

Droits d'utilisation

© Tous droits réservés

Report content

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire
  • Intro code / dev

Techniques d’accélération des pages Web Techniques d’accélération des pages Web Presentation Transcript

  • Techniques d’accélération despages WebJean-Pierre VINCENTConsultant indépendantCode / Développement#WebPerf - @theystolemynickBraincracking.org
  • • 5 10 13 ans de Web• PHP, JavaScript, HTML5, CSS• Ex :– startups, Yahoo!, houra.fr• Expert frontend indépendant• Veilleur :– braincracking.org– @theystolemynickBonjour, je m’appelle Jean-Pierre
  • Les 10 14 35 commandementshttp://developer.yahoo.com/performance/rules.htmlSteve Souders, like a BossPerformance Web ?
  • • Yahoo! Best Practices (35 règles)• Google PageSpeed (31 règles)• Test Opquast (41 règles)• En vrai : 500+ pratiques• Nouveaux navigateurs• Nouveaux besoins• MobileComment faire le tri ?
  • • SEO– 1 critère de référencement chezGoogle– Métrique : temps « onload »– Mesurée par les utilisateurshttp://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.htmlPourquoi la performance ?
  • • Un administrateur systèmeheureuxPourquoi la performance ?
  • • Qualité perçue• Ergonomie• Réponse à un besoin• Métrique : premier rendu$$Pourquoi la performance ?
  • Tunnel d’achat :1s = -7% deconversionCombien coûte une seconde ?
  • Vidéo :1s =-6% de vueAkamai 2012Combien coûte une seconde ?
  • Voyage4s = -60% de vueCombien coûte une seconde ?
  • Search• Bing : 1 s = - 3 % de CA• Yahoo! : 1 s = + 10 % derebondCombien coûte une seconde ?
  • Combien coûte une seconde ?Mobile• 1 s = -10% de pages vues• Après 4 s : 60% dabandonhttp://www.themediabriefing.com/article/2012-10-02/speed-is-a-feature-why-a-slow-mobile-web-experience-means-lost-revenuehttp://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster/
  • Comment ne pas rater un chantier Webperf ?
  • 1. Objectifs2. Que voient les utilisateurs ?3. Quelles techniques ?4. Quel suivi ?Chantier Webperf
  • Interactivité < 5 s1. Objectifs
  • Interactivité avec la fonctionnalité < 5 sPremier rendu < 2 s1. Objectifs
  • Interactivité avec la fonctionnalité < 5 sPremier rendu < 2 sRéponse HTML < 1 s1. Objectifs
  • Interactivité avec la fonctionnalité < 5 sPremier rendu < 2 sRéponse HTML < 1 sChargement de la page < 20 s ?1. Objectifs
  • 2. Utilisateurs
  • Sources : Akamai 2011 et 2012, Degrouptest, 60 millions de consommateurs, ARCEP• Grand public français :– IE 7 is dead !– Arrivée via réseaux mobiles– Connexions moyennes :2. UtilisateursADSL MobilesDébit 4, 8 Mb/s 2,5 Mb/sLatence 95 ms 200 ms
  • • La moyenne n’est pasreprésentative• 25% des utilisateurs ont moinsde 2,5 Mb/s< 1Mb/s 1 - 2Mb/s2 - 3Mb/s3 - 4Mb/s4 - 5Mb/s5-10Mb/s> 10Mb/sRépartition des débits(ligne fixe)2. Utilisateurs
  • • Connexion réseau à cibler :• Navigateurs à cibler :– IE 8– Safari iOS– Android 2.3.x et 4.x2. UtilisateursADSL MobilesDébit 2,5 Mb/s 2,5 Mb/sLatence 110 ms 200 ms+25% de perte
  • 3. LES TECHNIQUES
  • • Yahoo! Best Practices (35 règles)• Google PageSpeed (31 règles)• Test Opquast (41 règles)• En vrai : 500+ pratiquesPar où commencer ?
  • Sans débat : configuration serveur• Configuration du keep-alive• Activer la compression• Ressources texte : 80%KeepAlive OnKeepAliveTimeout 5Timeout 10
  • Sans débat : gérer son cache
  • • Et pourtant :– 50% des sites oublient– 30% ont un TTL < 30 joursCache
  • • Sans cache :– Phases de recette interne– Environnements dedéveloppement• Cache agressif :– Cache utilisateur– Chaîne de cache réseau« Vide ton cache »
  • • Serveur– eTag: "xxxxxx"Ou– Last-Modified: DATE_W3C• Serveur– 200 OKOu– 304 Not Modified• Client– If-None-Match: "xxxxxx"Ou– If-Modified-Since: DATE_W3CCache : invalidation standard
  • • Sert à des cas spéciaux– Polling– Revalidation de session– Environnement de dév.Cache : invalidation standard• Génère autant de requêtes
  • • Maîtrise totale des URL– HTML– CSS– JS• Processus de compilation• URL rendues uniques par :– Numéro de release– Md5 du fichierInvalidation des caches longs• Mise en cache long :Expires : +1 anCache-control : publicVary : xxx
  • API Application Cache• 1 application = 1 pack defichiers• 1 fichier de règles• 1 API de gestion du cache• Surtout sur mobilesLe super cache
  • Sans débat : moins de requêtes• La limite de HTTP : la latenceAu pire• DNS• + Ouverture TCP• + Slow Start• + 1 RTT mininum= 4 X latence= 400 ms
  • Trouver le chemin critiqueChemin critique1er rendu
  • Ressources bloquantes :• Redirections• Génération de la page• CSS• Polices• JSRessources gênantes• Images• Iframe• Objets flash / vidéoDéblayer le chemin critique
  • • Redirections :– Limiter à 1 max– Jamais côté client– Surtout sur mobileDéblayer le chemin critique
  • Génération de la page:• Caches serveur• Flush du headDéblayer le chemin critique
  • Génération de la page:• Caches serveur• Flush du head• Fonctionnalités longues :XHRDéblayer le chemin critique
  • Génération de la page:• Caches serveur• Flush du head• Fonctionnalités longues : XHR• Personnalisation :Server Side IncludeDéblayer le chemin critique
  • • CSS– Concaténation– Minification– Inline ?Déblayer le chemin critique
  • • Polices– Les supprimer ...– Chargement asynchroneDéblayer le chemin critique
  • Le choix des armes• <script src> en haut• <script src> en bas• Inline• defer• AsynchroneDéblayer le chemin critique : JavaScript
  • <script src> en haut• Si :– Petit– concaténé– Sans concurrenceDéblayer le chemin critique : JavaScript
  • <script src> en bas• Si :– Page rapide– Gestion des dépendances– Pas de document.write()– Pas de iOSDéblayer le chemin critique : JavaScript
  • <script defer>– Retardé par le onloadDéblayer le chemin critique : JavaScript
  • • Javascript asynchroneDéblayer le chemin critique : JavaScript
  • En anglais• http://www.perfplanet.com/• http://developer.yahoo.com/performance/rules.html• https://developers.google.com/speed/docs/best-practices/rules_intro• http://www.webpagetest.org/forumsEn français• http://checklists.opquast.com/webperf/• https://groups.google.com/forum/?fromgroups#!forum/performance-web• @webperf_fr et @WebperfParis• https://github.com/edas/webperf-book• http://braincracking.orgS’auto-former
  • • http://www.flickr.com/photos/themonnie/2495892146• http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/• http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostream/Crédits