Web UX - Performance Web

Performance Web Nicolas Hoizey Co-‐fondateur & directeur technique Clever Age @nhoizey

Le visage du Web change

Les débits augmentent*… Fibre opDque 100 Mbps * Pour certains privilégiés

…les pages grossissent

Mais les apparences sont trompeuses

Le Web ne Dre pas proﬁt du débit

La mobilité prend de l ampleur •  Bande passante faible, variable et instable •  Faiblesses intrinsèques des navigateurs mobiles –  Faible puissance de calcul pour le rendu –  Faible puissance de calcul pour le JavaScript –  Taille réduite du cache

L u;lisateur n aime pas a<endre

Etude Akamai en 2009 47% des clients e-‐commerce veulent la page en 2s 4s en 2006 8s en 1999

Expérience pour CA au Glasgow Caledonian University Site peu performant ConcentraDon +50% AgitaDon, stress

Amazon.com Page +100 ms CA -‐1% En 2006

Microso_ Bing Page +1s CA -‐2,8%

Google Search Page +0,4 s Recherches par uDlisateur -‐0,76% Après arrêt de l expérience Toujours -‐0,21% Pas de retour à la « normale » !

Plus que la performance réelle, c’est sa percep;on qui compte !

La percepDon de la vitesse réelle espérée perçue +15% mémorisée +35% @stoyanstefanov

Avec un site plus rapide •  Les visiteurs reviennent •  Ils regardent plus de pages à chaque visite •  AmélioraDon de la sa;sfac;on uDlisateur •  Meilleur taux de conversion •  Plus de chiﬀre d aﬀaires •  Economies d infrastructure (hardware et BP) •  Meilleur posi;onnement chez Google

La cascade, base de travail

FNAC.fr

FNAC.fr Serveur 5% Client 95%

FNAC.fr hnp://cas.im/wpt-‐fnac-‐110202

DécomposiDon d une requête Connexion Anente de TCP la réponse DNS Chargement de la réponse

DécomposiDon d une requête •  Requête DNS •  Etablissement de la connexion •  Envoi de la requête du client vers le serveur •  Calcul de la page côté serveur –  Pour ce qui est dynamique •  Envoi de la réponse du serveur vers le client •  Calcul du rendu –  HTML + CSS •  Traitements dynamiques –  JavaScript, expressions CSS

FNAC.fr Document Complete ~ 7,7s Start Render ~ 1,8s

Amazon.fr hnp://cas.im/wpt-‐amazon-‐110202 Document Complete ~ 4,3s Start Render ~ 1,75s

FNAC.fr vs Amazon.fr

Le « Start render » n est pas un indicateur suﬃsant

FNAC.fr vs Amazon.fr

Above the Fold Time •  The fold –  Linéralement, « le pli » –  La « ligne de flonaison » du site •  AFT –  (tentaDve de déterminer) quand toute la parDe visible du site est affichée –  Un délai clé foncDon du débit –  Une classificaDon pixels dynamiques / staDques •  A uDliser avec précauDon

W3C : Resource Timing •  InstrumentaDon intégrée aux navigateurs –  Travaux de Microso_ et Google •  Working Dra_ depuis le 24 mai 2011 ! –  hnp://www.w3.org/TR/2011/WD-‐resource-‐Dming-‐20110524/

Que mesurer ? •  Chargement sans cache, première visite –  Important pour capter de nouveaux visiteurs •  Chargement avec cache opDmal, nouvelle visite sur une même page –  L’uDlisateur s’anend à récupérer la page instantanément •  Chargement avec cache parDel, en cours de navigaDon –  96% des pages vues

Quelques ou;ls

Quelques ouDls •  Diﬀérents types d ouDls –  VériﬁcaDon de la cascade –  Audit de suivi de bonnes praDques et recommandaDons –  OpDmisaDon •  AnenDon, ce ne sont que des ouDls –  La percep;on humaine et le bon sens doivent rester de rigueur

webpagetest.org

webpagetest.org •  La référence –  WebPagetest : Projet AOL mis en open source –  De IE6 à IE9, Chrome en cours –  Des serveurs partout dans le monde –  Diﬀérentes bandes passantes –  Largement paramétrable –  Résultats détaillés et expliqués –  Enregistrement vidéo –  ExpérimentaDon AFT

Les navigateurs IE9 Developer Tools Chrome + Speed Tracer Webkit Developer Tools Firefox + Firebug

Yahoo! YSlow •  Extension de Firebug développée par Yahoo! –  hnp://developer.yahoo.com/yslow/ •  Analyse la page et détermine l usage des bonnes praDques –  23 critères –  Donne un « grade » de A à F –  Donne des recommandaDons Voyages-‐sncf.com

Google Pagespeed •  Diﬀérents ouDls développés par Google –  hnp://code.google.com/intl/fr/speed/page-‐ speed/ •  Une extension pour Firebug, similaire à Yslow –  Analyse la page et donne une note –  Donne des recommandaDons

Google Pagespeed Online

Google Webmaster Tools

Et les autres…

OuDls d’opDmisaDon •  Les architectes et développeurs ! •  Beaucoup d arDsanat –  IdenDﬁer les faiblesses –  Prioriser les acDons –  Trouver les ouDls –  Industrialiser

Google mod_pagespeed •  Un module pour Apache, automaDsant l applicaDon de certaines bonnes praDques –  hnp://code.google.com/intl/fr/speed/page-‐ speed/docs/module.html –  15 ﬁltres –  Seulement 9 acDfs par défaut –  Les 6 autres à uDliser avec prudence

Microso_ Doloto •  Download time opDmizer –  hnp://research.microso_.com/en-‐us/projects/doloto/ •  OuDl dédié aux applicaDons uDlisant beaucoup de code JavaScript / Ajax •  Processus opéraDonnel –  Analyse des uDlisaDons du code –  Découpage des foncDons entre code nécessaire au lancement et code uDlisé ultérieurement –  Chargement dynamique selon les besoins

Au travail !

Eviter les requêtes inuDles •  Eviter les redirecDons •  Pas d’erreur 404 dans les ressources liées •  Pas de ressources liées non uDlisées

Réduire la latence •  Réduire la latence réseau –  Rapprocher le client du serveur –  CDN •  Content Delivery Network –  PerDnent en cas de public internaDonal

Réduire le nombre de requêtes DNS •  Limiter le nombre de domaines uDlisés –  Chaque domaine implique une requête DNS

Réduire le nombre de requêtes •  Exploiter le cache du navigateur –  Conﬁgurer le serveur pour indiquer la date de pérempDon des ressources –  Le navigateur ne demandera la ressource que si elle a expiré

Réduire le nombre de requêtes •  Concaténer les codes JavaScript et CSS 6 JS -‐> 1 JS

Réduire le nombre de requêtes •  Combiner les images sous forme de sprites •  AnenDon à l’accessibilité

Réduire le nombre de requêtes •  Passez tout de suite au slide suivant… •  Intégrer du JS ou CSS au HTML –  Uniquement si gain de performance conséquent •  A réserver aux « landing pages » –  Fait perdre la mise en cache des JS ou CSS externes •  Intégrer des images au CSS, JS ou HTML –  UDlisaDon des data:uri –  Encodage en base64

Réduire le poids des requêtes •  Compresser tout –  Gzip –  Gain de 50 à 80% ! •  Miniﬁer les sources HTML, JavaScript et CSS –  Suppression des caractères inuDles, blancs, commentaires, opDmisaDon de la syntaxe

Réduire le poids des requêtes •  Réduire le poids des images –  Suppression des métadonnées inuDles (EXIF, IPTC) –  Choix des bons formats •  GIF •  JPEG : quelle compression ? •  PNG : quel format ? 8, 24, 32 –  Jusqu à 90% de gain !

Réduire le poids des requêtes •  Eviter les cookies inuDles –  Les cookies alourdissent les requêtes vers le serveur •  Si possible, servir les ressources staDques depuis un domaine sans aucun cookie

RéparDr sur plusieurs domaines •  Les navigateurs ont une limite de téléchargements simultanés PAR DOMAINE –  2 requêtes selon HTTP/1.1 –  6 à 8 en praDque dans tous les navigateurs en dernières versions –  AnenDon, 2 dans IE6 & IE7 •  Mise en place de plusieurs domaines –  « Domain sharding »

RéparDr sur plusieurs domaines •  Téléchargements en parallèle •  Si trop de domaines –  Trop de requêtes DNS •  Consensus pour 2 à 4 domaines selon usages

OpDmiser le rendu du navigateur •  Ordonnancer le chargement des ressources –  HTML et CSS au plus vite •  OpDmisaDon du « start render » •  Eviter le « reﬂow » avec des CSS tardives •  Flush de HTML parDel –  JavaScript le plus tard possible •  Le JS bloque le chargement pendant son exécuDon –  Diﬀérer le chargement des ressources qui ne sont pas uDles au départ •  « lazy loading »

OpDmiser le rendu du navigateur •  Nenoyer les CSS et JS du code inuDle •  Tenir compte des performances –  des CSS –  de JavaScript –  des frameworks JavaScript

AnenDon aux ressources externes •  Ressources provenant de Ders –  OuDls de staDsDques –  Régies publicitaires –  Widgets de partenaires •  hnp://stevesouders.com/p3pc/

Il faut pra;quer pour progresser !

Proﬁter du webperf contest •  WebPerf Contest 2010 –  Concours internaDonal •  hnp://webperf-‐contest.com/ •  Novembre 2010 –  ObjecDf •  OpDmisaDon d une page Web •  Fournie par la FNAC •  hnp://entries.webperf-‐contest.com/ base-‐fnac-‐_w/index.html

Proﬁter du webperf contest •  Bilans très instrucDfs –  hnp://braincracking.org/2011/01/10/concours-‐ webperf-‐2010-‐les-‐bases/ –  hnp://www.yterium.net/Ma-‐parDcipaDon-‐au-‐ Webperf

Avant Start Render : 2.441 s Document Complete : 11.028 s Fully Loaded : 17.261 s Après Start Render : 1.639 s Document Complete : 1.214 s Fully Loaded : 6.083 s

Une veille permanente •  Dans la vraie vie –  Evénements du Web Perf User Group hnp://cas.im/webperf-‐user-‐group •  Sur Diigo –  Groupe Web Performance hnp://groups.diigo.com/group/web-‐performance •  Sur Twiner –  Suivre le compte @webperf_fr

A vous de jouer ! Illustrations : hnp://iwdrm.tumblr.com/ & hnp://fromme-‐toyou.tumblr.com/

Clever Age! cFondée en 2001 par des managers expérimentés, Clever Age est aujourdhui un acteurincontournable dans le domaine du conseil et de la réalisation de projets. Lidée directrice qui aconduit à cette création et qui prévaut aujourdhui encore est lindépendance, aussi bien vis-à-visdes éditeurs que des investisseurs.

Chiffres clefs90 collaborateurs!sur 4 agencesCroissance régulière! et rentableG3+!Banque de France

Références internet et e-CommerceRezulteo LVMH – DIOR PCD Fnac Market Place!http://www.rezulteo-pneu.fr/ http://beauty.dior.com/ http://goo.gl/vzZA ! M6 Groupe MACSF http://www.groupem6.fr/! Nouvelles Frontières http://www.macsf.fr http://www.m6mobile.fr/ http://www.nouvelles-frontieres.fr/

Références internet et e-Commerce Vet Affaires Atelier BNP Paribas Mondial Assistance US! http://www.vetaffaires.fr/ http://www.atelier.net/ http://www.mondial-assistance.us ! Aéroport de Bordeaux Saint Gobain! Siplec – Groupe E. Leclerchttp://www.bordeaux.aeroport.fr/ http://www.saint-gobain.com/ http://www.siplec.com/

Applications mobiles

Conseil en architecture techniqueChoix dune solution Portail / CMS pour lensemble des projetsinternet / extranet / intranet du groupeConseil fonctionnel et technique pour la réalisation!dune application de gestion des sinistres (assurances) puisréalisation de lapplication (JEE / EJB / Symfony)Mission Accompagnement POC et Processus e-Commercedans le cadre du chantier de refonte du site internet APECAccompagnement dans la définition et la mise en oeuvre dunearchitecture SOA dans le cadre de la refonte globale (Back-office et end-user)Choix dune architecture Portail / CMS / eCommerce pour legroupe et ses filiales

http://lanyrd.com	196
http://www.buzz-and-play.com	141
http://flavors.me	86
http://blog.piaction.com	43
http://gasteroprod.com	37
http://www.scoop.it	29
http://coderwall.com	4
url_unknown	3
https://twitter.com	3
http://feeds.feedburner.com	3
http://blog.pia-conseil.com	2
http://twitter.com	2
http://paper.li	2
http://doc.nicolaspaic.fr	2
http://de.flavors.me	1
http://fr.flavors.me	1
http://www.linkedin.com	1
http://gasteroprod.dev	1

Web UX - Performance Web

by Nicolas Hoizey

Accessibility

Categories

Upload Details

Usage Rights

18 Embeds 557

Statistics

Web UX - Performance Web Presentation Transcript