Améliorer les performances Web - Les optimisations côté client

Améliorer les performances WebLes optimisations côté client8 février 2011Nicolas HOIZEY nhoizey@clever-age.comDirecteur technique twitter.com/nhoizeyClever Age http://www.clever-age.com/ 2

LA PERFORMANCE PAIE

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

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

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

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

…mais le Web n’en Fre pas proﬁt

…et les pages grossissent

La mobilité prend de l’ampleur •  Bande passante faible et variable •  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

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

Sujet d’ampleur croissante, frémissements en France •  WebPerf Contest 2010 –  Concours internaFonal •  hdp://webperf-‐contest.com/ •  Novembre 2010 –  ObjecFf •  OpFmisaFon d’une page Web •  Fournie par la FNAC •  hdp://entries.webperf-‐contest.com/ base-‐fnac-‐:w/index.html

LA CASCADE, BASE DE TRAVAIL

FNAC.fr

FNAC.fr Serveur 5% Client 95%

DécomposiFon d’une requête Connexion Adente de TCP la réponse DNS Chargement de la réponse

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

Amazon.fr hdp://cas.im/wpt-‐amazon-‐110202

LE « START RENDER » N’EST PAS TOUT !

FNAC.fr vs Amazon.fr hdp://www.youtube.com/watch?v=TUxB7JIcXvo

OUTILS D’AUDIT DANS LES NAVIGATEURS

IE9 Developer Tools

Firefox + Firebug

Webkit Developer Tools

Chrome + Speed Tracer

RéférenFels de bonnes praFques •  FoncFonnalités ajoutées aux navigateurs –  Yahoo! YSlow –  Google Pagespeed

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

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

OUTILS D’AUDIT EN LIGNE

webpagetest.org

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

Google Webmaster Tools

OUTILS D’OPTIMISATION

Les architectes et développeurs ! •  Beaucoup d’arFsanat –  IdenFﬁer les faiblesses –  Prioriser les acFons –  Trouver les ouFls –  Industrialiser

Microso: Doloto •  Download time opFmizer –  hdp://research.microso:.com/en-‐us/projects/doloto/ •  OuFl dédié aux applicaFons uFlisant beaucoup de code JavaScript / Ajax •  Processus opéraFonnel –  Analyse des uFlisaFons du code –  Découpage des foncFons entre code nécessaire au lancement et code uFlisé ultérieurement –  Chargement dynamique selon les besoins

Google mod_pagespeed •  Un module pour Apache, automaFsant l’applicaFon de certaines bonnes praFques –  hdp://code.google.com/intl/fr/speed/page-‐ speed/docs/module.html –  15 ﬁltres –  Seulement 9 acFfs par défaut –  Les 6 autres à uFliser avec prudence

GAGNONS DU TEMPS !

Eviter les requêtes inuFles •  Eviter les redirecFons •  Pas d’erreur 404 dans les ressources liées •  Pas de ressources liées non uFlisées

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

Réduire le nombre de requêtes DNS •  Limiter le nombre de domaines uFlisé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érempFon des ressources –  Le navigateur ne demandera la ressource que si elle a expiré

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

Réduire le nombre de requêtes •  Combiner les images sous forme de sprites

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 inuFles, blancs, commentaires, opFmisaFon de la syntaxe

Réduire le poids des requêtes •  Réduire le poids des images –  Suppression des métadonnées inuFles (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 inuFles –  Les cookies alourdissent les requêtes vers le serveur •  Si possible, servir les ressources staFques depuis un domaine sans aucun cookie

RéparFFon des ressources 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 praFque dans tous les navigateurs en dernières versions –  AdenFon, 2 dans IE6 & IE7 •  Mise en place de plusieurs domaines –  « Domain sharding »

RéparFFon des ressources 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

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

OpFmiser le rendu du navigateur •  Nedoyer les CSS et JS du code inuFle •  Tenir compte des performances –  des CSS –  de JavaScript –  des frameworks JavaScript

AdenFon aux ressources externes •  Ressources provenant de Fers –  OuFls de staFsFques –  Régies publicitaires –  Widgets de partenaires •  hdp://stevesouders.com/p3pc/

PRATIQUER

Proﬁter du webperf contest •  Bilan très instrucFf –  hdp://braincracking.org/2011/01/10/concours-‐ webperf-‐2010-‐les-‐bases/ –  hdp://www.yterium.net/Ma-‐parFcipaFon-‐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 hdp://cas.im/webperf-‐user-‐group •  Sur Diigo –  Groupe Web Performance hdp://groups.diigo.com/group/web-‐performance •  Sur Twider –  Suivre le compte @webperf_fr

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 GroupeMACSF http://www.groupem6.fr/! Nouvelles Frontièreshttp://www.macsf.fr http://www.m6mobile.fr/ http://www.nouvelles-frontieres.fr/

Références internet et e-CommerceVet Affaires Atelier BNP Paribas Mondial Assistance US!http://www.vetaffaires.fr/ http://www.atelier.net/ http://www.mondial-assistance.usAé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://www.clever-age.com	316
http://www.benjaminbaudouin.com	222
http://www.mauricelargeron.com	76
http://paper.li	66
http://lanyrd.com	44
http://local.clever-age.com	34
http://seenthis.net	18
http://www-2010.clever-age.com	9
https://twitter.com	5
http://localhost	2
http://stream.valeurdusage.net	2
http://bbaudouin.tumblr.com	1
http://www.google.ch	1
http://wiki	1
http://www.onlydoo.com	1
http://www.scoop.it	1

Améliorer les performances Web - Les optimisations côté client

by Nicolas Hoizey on Feb 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

16 Embeds 799

Statistics

AmÃ©liorer les performances Web - Les optimisations cÃ´tÃ© client — Presentation Transcript