1.
Techniques d’accélération des pages Web Jean-Pierre VINCENT Consultant indépendant #WebPerf - @theystolemynick Braincracking.org

2.
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

3.
Performance Web ? Les 10 14 35 commandements http://developer.yahoo.com/performance/rules.html

4.
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

5.
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

6.
Pourquoi la performance ? ● Un administrateur système heureux

7.
Pourquoi la performance ? ● Qualité perçue $$ ● Ergonomie ● Réponse à un besoin ● Métrique : premier rendu

8.
Combien coûte une seconde ?

9.
Combien coûte une seconde ?Tunnel d’achat : 1s = -7% de conversion

10.
Combien coûte une seconde ? Vidéo :1s =-6% de vue Akamai 2012

11.
Combien coûte une seconde ? Voyage 4s = -60% de vue

12.
Combien coûte une seconde ? Search● Bing : 1 s = - 3 % de CA● Yahoo! : 1 s = + 10 % de rebond

13.
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 /

14.
Chantier Webperf Comment ne pas rater un chantier Webperf ?

15.
Chantier Webperf● Objectifs● Que voient les utilisateurs ?● Quelles techniques ?● Quel suivi ?

16.
ObjectifsInteractivité avec la fonctionnalité <5s

17.
ObjectifsInteractivité avec la fonctionnalité <5sPremier rendu <2s

18.
ObjectifsInteractivité avec la fonctionnalité <5sPremier rendu <2sRéponse HTML <1s

19.
ObjectifsInteractivité avec la fonctionnalité <5sPremier rendu <2sRéponse HTML <1sChargement de la page < 20 s ?

20.
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

21.
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

22.
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

23.
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

24.
Configuration serveur 1. Configuration du keep-alive : KeepAlive On KeepAliveTimeout 5 Timeout 10 2. Activer la compression

25.
Gérer son cache →

26.
Gérer son cache Efficace mais : 50% des sites oublient 30% ont un TTL < 30 jours

27.
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

28.
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

29.
Gérer son cacheCache : invalidation standardSert à des cas spéciaux • Polling • Revalidation de session • Environnement de dév.

30.
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

31.
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

32.
Le chemin critiqueTrouver le chemin critique Chemin critique 1er rendu

33.
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

34.
Le chemin critiqueRedirections ● Limiter à 1 max ● Jamais côté client ● Surtout sur mobile

35.
Le chemin critique ● Moyens : ● Cache serveur ● Flush() ● Page dynamiques et XHR ● Parallélisation (Big Pipe de FB)

36.
Pages statiquesCache serveur ● Fichiers plats ● Mécanismes des CMS ● memcache ● Varnish ● CDN…Paramétrage du temps de cacheContenu personnalisé

37.
Technique du Flush()● Envoyer le <head> au plus tôt

38.
Pages semi-dynamiques ● Cache sur les parties statiques ● Envoyer ASAP ● XHR ou SSI pour les parties dynamiques ● Ne pas oublier linterface Référencement

39.
Le chemin critiqueInclusion des parties dynamiques● Personnalisation : Server Side Include

40.
Pages semi-dynamiques

41.
ExtrêmesFacebook Big Pipe

42.
Le chemin critiqueDéblayer le chemin critique ● CSS ● Concaténation ● Minification ● Inline ?

43.
Le chemin critique Polices● Les supprimer …● Les valider : ● poids, ● utilisée ● compatibilité● Chargement asynchrone

44.
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

45.
SPOF-O-Matic Teste la fragilité aux ralentissements des serveurs tiers démo

46.
Pause ?

47.
Inclure JavaScriptLe choix des armes ● <script src> en haut ● <script src> en bas ● Inline ● defer ● Asynchrone

48.
Inclure JavaScript<script src> en haut ● Si : ● petit ● concaténé ● sans concurrence

49.
Inclure JavaScript<script src> en bas ● Si : ● Page rapide ● Gestion des dépendances ● Pas de document.write() ● Pas de iOS

50.
Inclure JavaScript<script defer> ● Retardé par le onload

51.
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

52.
Outils : analyse ySlow

53.
Outils : analyse Google PageSpeed

54.
Outils : analyse WebPageTest

55.
Outils : analyseWebPageTest, PageSpeed, ySwow... Ne pas se focaliser sur les notes

56.
Profilers front IE Developer tools

57.
Profilers front Dynatrace AJAX

58.
RUM✓ Collecte des temps de chargement des utilisateurs✓ Complément des tests synthétiques Peut ralentir la page

59.
RUMGratuit Commercial● Boomerang JS ● LogNormal ● Torbit● Google Analytics ● Yottaa ● New Relic ● Cedexis …

60.
RUM Google Analytics

61.
RUM Google Analytics

62.
RUM Google Analytics Données de navigateurs modernes

63.
MonitoringGratuit Commercial● WPT monitor ● Torbit ● Yottaa● ShowSlow ● GTmetrix ● Dynatrace …

64.
Résumé ● Analyse fine et méta-outils : ● WebPageTest ● Monitoring : ● WPT Monitor ● RUM : ● Boomerang, Google Analytics ● Code Front : ● IE8 F12, Chrome

65.
Les images

66.
Images Optimisations :● Ne pas les charger !● Charger à la demande● Compression manuelle● Compression automatique

67.
Ne pas charger Méthode de lazy-load : ● charger les images visibles mobiles https://github.com/fasterize/lazyload

68.
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/

69.
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/

70.
Remplacer la décoration● Coins arrondis● Ombres sur texte et boîtes● Rotation de texte● Opacité⚠ Attention aux perfs de rendu

71.
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

72.
SpritesMaintenanceOutil : Sass + Compass

73.
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é

74.
Outils de compression● PNGOUT ● pngquant● OptiPNG ● pngnq-s9● Pngcrush ● Gifsicle● JpegOptim ● jpegtran● jpegrescan● SVG : distribuer en gzip

75.
Interface● PNGGauntlet

76.
Interface● ImageAlpha (pngmini.com)

77.
Interface● ImageOptim

78.
Interface● smushit.com

79.
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

80.
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

81.
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

82.
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

83.
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

84.
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/