• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Techniques d'accélération des pages web
 

Techniques d'accélération des pages web

on

  • 1,299 views

2 heures de présentation sur les techniques de performance Web, leurs limites et la raison de le faire

2 heures de présentation sur les techniques de performance Web, leurs limites et la raison de le faire

Statistics

Views

Total Views
1,299
Views on SlideShare
1,283
Embed Views
16

Actions

Likes
8
Downloads
29
Comments
1

1 Embed 16

https://twitter.com 16

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Techniques d'accélération des pages web Techniques d'accélération des pages web Presentation Transcript

    • Techniques d’accélération des pages Web Jean-Pierre VINCENT Consultant indépendant #WebPerf - @theystolemynick Braincracking.org
    • Bonjour, je m’appelle Jean-Pierre ● 5 10 13 ans de Web ● PHP, JavaScript, HTML5, CSS ● Ex : – startups, Yahoo!, houra.fr ● Expert frontend indépendant ● Veilleur : – braincracking.org – @theystolemynick
    • Performance Web ? Les 10 14 35 commandements http://developer.yahoo.com/performance/rules.html
    • Comment faire le tri ?● Yahoo! Best Practices (35 ● Nouveaux navigateurs ● Nouveaux besoins règles) ● Mobile● Google PageSpeed (31 règles)● Test Opquast (41 règles)● En vrai : 500+ pratiques
    • Pourquoi la performance ? ● SEO – 1 critère de référencement chez Google – Métrique : temps « onload » – Mesurée par les utilisateurshttp://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.html
    • Pourquoi la performance ? ● Un administrateur système heureux
    • Pourquoi la performance ? ● Qualité perçue $$ ● Ergonomie ● Réponse à un besoin ● Métrique : premier rendu
    • Combien coûte une seconde ?
    • Combien coûte une seconde ?Tunnel d’achat : 1s = -7% de conversion
    • Combien coûte une seconde ? Vidéo :1s =-6% de vue Akamai 2012
    • Combien coûte une seconde ? Voyage 4s = -60% de vue
    • Combien coûte une seconde ? Search● Bing : 1 s = - 3 % de CA● Yahoo! : 1 s = + 10 % de rebond
    • 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 /
    • Chantier Webperf Comment ne pas rater un chantier Webperf ?
    • Chantier Webperf● Objectifs● Que voient les utilisateurs ?● Quelles techniques ?● Quel suivi ?
    • ObjectifsInteractivité avec la fonctionnalité <5s
    • ObjectifsInteractivité avec la fonctionnalité <5sPremier rendu <2s
    • ObjectifsInteractivité avec la fonctionnalité <5sPremier rendu <2sRéponse HTML <1s
    • ObjectifsInteractivité avec la fonctionnalité <5sPremier rendu <2sRéponse HTML <1sChargement de la page < 20 s ?
    • Les utilisateurs ● Grand public français : ● IE 7 is dead ! ● Arrivée via réseaux mobiles ● Connexions moyennes : ADSL Mobiles Débit 4, 8 Mb/s 2,5 Mb/s Latence 95 ms 200 ms
    • Les utilisateurs Répartition des débits (ligne fixe)• La moyenne n’est pasreprésentative 5-10 Mb/s > 10 Mb/s < 1 Mb/s 1 - 2 Mb/s● 25% des utilisateurs ont moins de 2,5 Mb/s 4 - 5 Mb/s 2 - 3 Mb/s 3 - 4 Mb/s
    • Les utilisateursConnexion réseau à cibler : ADSL Mobiles Débit 2,5 Mb/s 2,5 Mb/s Latence 110 ms 200 ms +25% de perteNavigateurs à cibler :IE 8Safari iOSAndroid 2.3.x et 4.x
    • Les techniques Par où commencer ? Yahoo! Best Practices (35 règles) Google PageSpeed (31 règles) Test Opquast (41 règles) En vrai : 500+ pratiques
    • Configuration serveur 1. Configuration du keep-alive : KeepAlive On KeepAliveTimeout 5 Timeout 10 2. Activer la compression
    • Gérer son cache →
    • Gérer son cache Efficace mais : 50% des sites oublient 30% ont un TTL < 30 jours
    • Gérer son cache« Vide ton cache » Sans cache : • Phases de recette interne • Environnements de développement Cache agressif : • Cache utilisateur • Chaîne de cache réseau
    • Gérer son cacheCache : invalidation standard● Serveur eTag: "xxxxxx" Ou Last-Modified: DATE_W3C • Client If-None-Match: "xxxxxx" Ou If-Modified-Since: DATE_W3C• Serveur 200 OK Ou 304 Not Modified
    • Gérer son cacheCache : invalidation standardSert à des cas spéciaux • Polling • Revalidation de session • Environnement de dév.
    • Gérer son cacheInvalidation des caches longs ● Maîtrise totale des URL Mise en cache long : ● HTML ● CSS Expires : +1 an ● JS Cache-control :  ● Processus de compilation public ● URL rendues uniques par : Vary : xxx ● Numéro de release ● Md5 du fichier
    • Gérer son cacheLe super cacheAPI Application Cache● 1 application = 1 pack de fichiers● 1 fichier de règles● 1 API de gestion du cache● Surtout sur mobiles
    • Le chemin critiqueTrouver le chemin critique Chemin critique 1er rendu
    • Le chemin critiqueCôté clientRessources bloquantes : Ressources gênantes :● Redirections ● Images● Génération de la page ● Iframe● CSS ● Objets flash / vidéo● Polices● JS
    • Le chemin critiqueRedirections ● Limiter à 1 max ● Jamais côté client ● Surtout sur mobile
    • Le chemin critique ● Moyens : ● Cache serveur ● Flush() ● Page dynamiques et XHR ● Parallélisation (Big Pipe de FB)
    • Pages statiquesCache serveur ● Fichiers plats ● Mécanismes des CMS ● memcache ● Varnish ● CDN…Paramétrage du temps de cacheContenu personnalisé
    • Technique du Flush()● Envoyer le <head> au plus tôt
    • Pages semi-dynamiques ● Cache sur les parties statiques ● Envoyer ASAP ● XHR ou SSI pour les parties dynamiques ● Ne pas oublier linterface Référencement
    • Le chemin critiqueInclusion des parties dynamiques● Personnalisation : Server Side Include
    • Pages semi-dynamiques
    • ExtrêmesFacebook Big Pipe
    • Le chemin critiqueDéblayer le chemin critique ● CSS ● Concaténation ● Minification ● Inline ?
    • Le chemin critique Polices● Les supprimer …● Les valider : ● poids, ● utilisée ● compatibilité● Chargement asynchrone
    • SPOFDépendances à des serveurs tiers qui peuventbloquer le renduUsual suspect :●http://platform.twitter.com/widgets.js●https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/j query.min.js●http://html5shiv.googlecode.com/svn/trunk/html5.js
    • SPOF-O-Matic Teste la fragilité aux ralentissements des serveurs tiers démo
    • Pause ?
    • Inclure JavaScriptLe choix des armes ● <script src> en haut ● <script src> en bas ● Inline ● defer ● Asynchrone
    • Inclure JavaScript<script src> en haut ● Si : ● petit ● concaténé ● sans concurrence
    • Inclure JavaScript<script src> en bas ● Si : ● Page rapide ● Gestion des dépendances ● Pas de document.write() ● Pas de iOS
    • Inclure JavaScript<script defer> ● Retardé par le onload
    • Inclure JavaScriptJavascript asynchrone Conditions : ● Chargeur mis inline ● Gestion dune file de téléchargement ● Remplacer les dépendances inline par des callback ● Découpe par module ● Téléchargement dépriorisé ● Au top: concaténation + module + asynchrone
    • Outils : analyse ySlow
    • Outils : analyse Google PageSpeed
    • Outils : analyse WebPageTest
    • Outils : analyseWebPageTest, PageSpeed, ySwow... Ne pas se focaliser sur les notes
    • Profilers front IE Developer tools
    • Profilers front Dynatrace AJAX
    • RUM✓ Collecte des temps de chargement des utilisateurs✓ Complément des tests synthétiques Peut ralentir la page
    • RUMGratuit Commercial● Boomerang JS ● LogNormal ● Torbit● Google Analytics ● Yottaa ● New Relic ● Cedexis …
    • RUM Google Analytics
    • RUM Google Analytics
    • RUM Google Analytics Données de navigateurs modernes
    • MonitoringGratuit Commercial● WPT monitor ● Torbit ● Yottaa● ShowSlow ● GTmetrix ● Dynatrace …
    • Résumé ● Analyse fine et méta-outils : ● WebPageTest ● Monitoring : ● WPT Monitor ● RUM : ● Boomerang, Google Analytics ● Code Front : ● IE8 F12, Chrome
    • Les images
    • Images Optimisations :● Ne pas les charger !● Charger à la demande● Compression manuelle● Compression automatique
    • Ne pas charger Méthode de lazy-load : ● charger les images visibles mobiles https://github.com/fasterize/lazyload
    • Remplacer les icônes Caractères unicode ►★✓⇢✎♥☎♻⚠☻☺⇨●Taille et couleur adaptable⚠ servir en UTF-8⚠ dépend du couple OS / navigateur http://ikwebdesigner.com/special-characters/
    • Remplacer les dégradésbackground: linear-gradient(top bottom, #ffffff 0%,#131313 100%);● Taille automatique IE : dégradés simples● Syntaxe lourde http://www.colorzilla.com/gradient-editor/
    • Remplacer la décoration● Coins arrondis● Ombres sur texte et boîtes● Rotation de texte● Opacité⚠ Attention aux perfs de rendu
    • Limiter les requêtes● Encodage en base64 <img src="data:image/png;base64,<?= base64_encode( file_get_contents( ./image.p ng )); ?>">●IE < 8 : MHTML⚠ Performance de rendu
    • SpritesMaintenanceOutil : Sass + Compass
    • Compression manuelle Connaître les formats● PNG toujours meilleur que GIF● PNG : ultra efficace avec des aplats de couleur● JPG : mauvais pour le texte si il est en couleurs● Jamais de PNG entrelacé● PNG8 alpha● WebP : mal supporté
    • Outils de compression● PNGOUT ● pngquant● OptiPNG ● pngnq-s9● Pngcrush ● Gifsicle● JpegOptim ● jpegtran● jpegrescan● SVG : distribuer en gzip
    • Interface● PNGGauntlet
    • Interface● ImageAlpha (pngmini.com)
    • Interface● ImageOptim
    • Interface● smushit.com
    • Rendu fluideAlléger le DOM Surveiller 2 métriques ● La profondeur max et moyenne ( < 12 ) ● Le nombre de nœuds (< 1500 ) Outil : DOM Monster, WPT ● Long et périlleux si fait après coup ● Sensibilisation des intégrateurs
    • Rendu fluide - JavaScript ● Bonnes pratiques ● Peu de requêtes DOM ● Caching ● En dehors des boucles ● Manipulation du DOM par batch ● Application de classes VS $.css() ● Limiter la taille des requêtes ● $(doc.ById(monID)).find(> div.maClasse); ● Privilégier document.querySelector() ● JavaScript lui même est rarement un problème
    • Rendu fluideLa technique du setTimeout( 0 ) En cas de blocage de linterface : ● « casser » les boucles toutes les 50 ms ● Y revenir lorsque le navigateur est libre
    • Rendu fluide - Web Worker Pour du calcul lourd ● Crée un nouveau thread ● Communication par événements var worker = new Worker(my_task.js); worker.onmessage = function(event) { console.log("Called !n"); }; ● Compatibilité navigateurs ● Organisation du code spécifique
    • S’auto-forme r En anglais En français ● http● http://www.perfplanet.com/ ://checklists.opquast.com/webper● http f/ ://developer.yahoo.com/perfo ● https://groups.google.com/foru rmance/rules.html m/?fromgroups#!forum/performan● https:// ce-web developers.google.com/speed/ ● @webperf_fr docs/best-practices/rules_in et tro ● @WebperfParis● http:// ● https:// www.webpagetest.org/forum github.com/edas/webperf-book s ● http://braincracking.org
    • Crédits● 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/photostre m/