améliorer les performances web - les optimisations côté client
DESCRIPTION
Quand on parle d'optimiser les performances d'un site Web, le premier réflexe est de se tourner vers des tests de montée en charge et des optimisations côté serveur. Bien que celles-ci ne soient pas à négliger, si on se limite aux actions « server side » on risque de passer à côté d'une série de points à surveiller et à améliorer côté client. Dans cette session, nous introduirons les différents aspects de l'optimisation « client side » des performances Web, en attirant votre attention sur – par exemple – les téléchargements bloquants, les manières optimales d'inclure des codes JavaScript, le placement optimal des CSS (internes ou externes, …) ainsi que des différentes et particularités des différents navigateurs, et leur impact sur les performances perçues par les internautes.TRANSCRIPT
![Page 1: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/1.jpg)
![Page 2: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/2.jpg)
2
Améliorer les performances Web Les optimisations côté client
8 février 2011
Nicolas HOIZEY [email protected] Directeur technique twitter.com/nhoizey Clever Age http://www.clever-age.com/
![Page 3: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/3.jpg)
LA PERFORMANCE PAIE
![Page 4: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/4.jpg)
Amazon.com
Page +100 ms
CA -‐1%
En 2006
![Page 5: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/5.jpg)
Microso: Bing
Page +1s CA -‐2,8%
![Page 6: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/6.jpg)
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 » !
![Page 7: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/7.jpg)
Les débits augmentent*…
Fibre opFque
100 Mbps
* Pour certains privilégiés
![Page 8: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/8.jpg)
…mais le Web n’en Fre pas profit
![Page 9: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/9.jpg)
…et les pages grossissent
![Page 10: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/10.jpg)
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
![Page 11: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/11.jpg)
Avec un site plus rapide
• Les visiteurs reviennent • Ils regardent plus de pages à chaque visite • Meilleur taux de conversion
• Plus de chiffre d’affaires • AmélioraFon de la sa?sfac?on uFlisateur
• Economies d’infrastructure (hardware et BP)
• Meilleur posi?onnement chez Google
![Page 12: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/12.jpg)
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
![Page 13: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/13.jpg)
LA CASCADE, BASE DE TRAVAIL
![Page 14: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/14.jpg)
FNAC.fr
![Page 15: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/15.jpg)
FNAC.fr
Serveu
r 5%
Client 95%
![Page 16: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/16.jpg)
DécomposiFon d’une requête
DNS
Connexion TCP
Adente de la réponse
Chargement de la réponse
![Page 17: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/17.jpg)
FNAC.fr
hdp://cas.im/wpt-‐fnac-‐110202
![Page 18: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/18.jpg)
hdp://cas.im/wpt-‐amazon-‐110202 Amazon.fr
![Page 19: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/19.jpg)
LE « START RENDER » N’EST PAS TOUT !
![Page 20: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/20.jpg)
FNAC.fr vs Amazon.fr
hdp://www.youtube.com/watch?v=TUxB7JIcXvo
![Page 21: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/21.jpg)
OUTILS D’AUDIT DANS LES NAVIGATEURS
![Page 22: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/22.jpg)
IE9 Developer Tools
![Page 23: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/23.jpg)
Firefox + Firebug
![Page 24: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/24.jpg)
Webkit Developer Tools
![Page 25: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/25.jpg)
Chrome + Speed Tracer
![Page 26: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/26.jpg)
RéférenFels de bonnes praFques
• FoncFonnalités ajoutées aux navigateurs – Yahoo! YSlow – Google Pagespeed
![Page 27: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/27.jpg)
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
![Page 28: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/28.jpg)
Google Pagespeed
• Diffé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
![Page 29: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/29.jpg)
OUTILS D’AUDIT EN LIGNE
![Page 30: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/30.jpg)
webpagetest.org
![Page 31: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/31.jpg)
webpagetest.org
• La référence – WebPagetest : Projet AOL mis en open source
– De IE6 à IE9 preview 7 – Des serveurs partout dans le monde – Différentes bandes passantes – Largement paramétrable – Résultats détaillés et expliqués – Enregistrement vidéo
![Page 32: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/32.jpg)
Google Webmaster Tools
![Page 33: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/33.jpg)
OUTILS D’OPTIMISATION
![Page 34: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/34.jpg)
Les architectes et développeurs !
• Beaucoup d’arFsanat – IdenFfier les faiblesses – Prioriser les acFons – Trouver les ouFls – Industrialiser
![Page 35: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/35.jpg)
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
![Page 36: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/36.jpg)
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 filtres – Seulement 9 acFfs par défaut – Les 6 autres à uFliser avec prudence
![Page 37: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/37.jpg)
GAGNONS DU TEMPS !
![Page 38: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/38.jpg)
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
![Page 39: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/39.jpg)
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
![Page 40: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/40.jpg)
Réduire le nombre de requêtes DNS
• Limiter le nombre de domaines uFlisés – Chaque domaine implique une requête DNS
![Page 41: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/41.jpg)
Réduire le nombre de requêtes
• Exploiter le cache du navigateur – Configurer le serveur pour indiquer la date de pérempFon des ressources
– Le navigateur ne demandera la ressource que si elle a expiré
![Page 42: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/42.jpg)
Réduire le nombre de requêtes
• Concaténer les codes sources JavaScript et CSS
6 JS -‐> 1 JS
![Page 43: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/43.jpg)
Réduire le nombre de requêtes
• Combiner les images sous forme de sprites
![Page 44: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/44.jpg)
Réduire le poids des requêtes
• Compresser tout – Gzip – Gain de 50 à 80% !
• Minifier les sources HTML, JavaScript et CSS – Suppression des caractères inuFles, blancs, commentaires, opFmisaFon de la syntaxe
![Page 45: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/45.jpg)
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 !
![Page 46: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/46.jpg)
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
![Page 47: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/47.jpg)
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 »
![Page 48: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/48.jpg)
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
![Page 49: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/49.jpg)
OpFmiser le rendu du navigateur
• Ordonnancer le chargement des ressources – HTML et CSS au plus vite
• OpFmisaFon du « start render » • Eviter le « reflow » avec des CSS tardives • Flush de HTML parFel
– JavaScript le plus tard possible • Le JS bloque le chargement pendant son exécuFon
– Différer le chargement des ressources qui ne sont pas uFles au départ • « lazy loading »
![Page 50: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/50.jpg)
OpFmiser le rendu du navigateur
• Nedoyer les CSS et JS du code inuFle • Tenir compte des performances
– des CSS – de JavaScript – des frameworks JavaScript
![Page 51: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/51.jpg)
AdenFon aux ressources externes
• Ressources provenant de Fers – OuFls de staFsFques – Régies publicitaires – Widgets de partenaires
• hdp://stevesouders.com/p3pc/
![Page 52: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/52.jpg)
PRATIQUER
![Page 53: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/53.jpg)
Profiter 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
![Page 54: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/54.jpg)
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
![Page 55: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/55.jpg)
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
![Page 56: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/56.jpg)
![Page 57: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/57.jpg)
Clever Age !
c
Fondée en 2001 par des managers expérimentés, Clever Age est aujourd'hui un acteur incontournable dans le domaine du conseil et de la réalisation de projets. L'idée directrice qui a conduit à cette création et qui prévaut aujourd'hui encore est l'indépendance, aussi bien vis-à-vis des éditeurs que des investisseurs.
![Page 58: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/58.jpg)
Chiffres clefs
G3+!Banque de France
90 collaborateurs!
sur 4 agences
Croissance
régulière! et rentable
![Page 59: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/59.jpg)
Rezulteo http://www.rezulteo-pneu.fr/
MACSF http://www.macsf.fr
LVMH – DIOR PCD http://beauty.dior.com/
M6 Groupe http://www.groupem6.fr/!http://www.m6mobile.fr/
Fnac Market Place!http://goo.gl/vzZA
Nouvelles Frontières http://www.nouvelles-frontieres.fr/
Références internet et e-Commerce
![Page 60: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/60.jpg)
Vet Affaires http://www.vetaffaires.fr/
Aéroport de Bordeaux http://www.bordeaux.aeroport.fr/
Atelier BNP Paribas http://www.atelier.net/
Saint Gobain!http://www.saint-gobain.com/
Mondial Assistance US!http://www.mondial-assistance.us
Siplec – Groupe E. Leclerc http://www.siplec.com/
Références internet et e-Commerce
![Page 61: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/61.jpg)
Applications mobiles
![Page 62: Améliorer les performances Web - Les optimisations côté client](https://reader034.vdocuments.fr/reader034/viewer/2022042713/549c3646ac7959ce2a8b4688/html5/thumbnails/62.jpg)
Choix d'une solution Portail / CMS pour l'ensemble des projets internet / extranet / intranet du groupe
Conseil fonctionnel et technique pour la réalisation!d'une application de gestion des sinistres (assurances) puis réalisation de l'application (JEE / EJB / Symfony)
Mission Accompagnement POC et Processus e-Commerce dans le cadre du chantier de refonte du site internet APEC
Accompagnement dans la définition et la mise en oeuvre d'une architecture SOA dans le cadre de la refonte globale (Back-office et end-user)
Choix d'une architecture Portail / CMS / eCommerce pour le groupe et ses filiales
Conseil en architecture technique