Améliorer les performances Web Les optimisations côté client 8 février 2011 Nicolas HOIZEY Directeur technique Clever Age nhoizey@clever-age.com twitter.com/nhoizey http://www.clever-age.com/ 2

LA PERFORMANCE PAIE

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

Microsoft Bing Page +1s CA -2,8%

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

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

…mais le Web n’en tire pas profit

…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 chiffre d’affaires Amélioration de la satisfaction utilisateur Economies d’infrastructure (hardware et BP) Meilleur positionnement chez Google

Sujet d’ampleur croissante, frémissements en France • WebPerf Contest 2010 – Concours international • http://webperf-contest.com/ • Novembre 2010 – Objectif • Optimisation d’une page Web • Fournie par la FNAC • http://entries.webperf-contest.com/ base-fnac-ftw/index.html

LA CASCADE, BASE DE TRAVAIL

FNAC.fr

Serveur 5% FNAC.fr Client 95%

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

FNAC.fr http://cas.im/wpt-fnac-110202

Amazon.fr http://cas.im/wpt-amazon-110202

LE « START RENDER » N’EST PAS TOUT !

FNAC.fr vs Amazon.fr http://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érentiels de bonnes pratiques • Fonctionnalités ajoutées aux navigateurs – Yahoo! YSlow – Google Pagespeed

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

Google Pagespeed • Différents outils développés par Google – http://code.google.com/intl/fr/speed/pagespeed/ • Une extension pour Firebug, similaire à Yslow – Analyse la page et donne une note – Donne des recommandations

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 – Diffé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’artisanat – Identifier les faiblesses – Prioriser les actions – Trouver les outils – Industrialiser

Microsoft Doloto • Download time optimizer – http://research.microsoft.com/en-us/projects/doloto/ • Outil dédié aux applications utilisant beaucoup de code JavaScript / Ajax • Processus opérationnel – Analyse des utilisations du code – Découpage des fonctions entre code nécessaire au lancement et code utilisé ultérieurement – Chargement dynamique selon les besoins

Google mod_pagespeed • Un module pour Apache, automatisant l’application de certaines bonnes pratiques – http://code.google.com/intl/fr/speed/pagespeed/docs/module.html – 15 filtres – Seulement 9 actifs par défaut – Les 6 autres à utiliser avec prudence

GAGNONS DU TEMPS !

Eviter les requêtes inutiles • Eviter les redirections • Pas d’erreur 404 dans les ressources liées • Pas de ressources liées non utilisées

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

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

Réduire le nombre de requêtes • Exploiter le cache du navigateur – Configurer le serveur pour indiquer la date de péremption 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% ! • Minifier les sources HTML, JavaScript et CSS – Suppression des caractères inutiles, blancs, commentaires, optimisation de la syntaxe

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

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

Répartition 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

Optimiser le rendu du navigateur • Ordonnancer le chargement des ressources – HTML et CSS au plus vite • Optimisation du « start render » • Eviter le « reflow » avec des CSS tardives • Flush de HTML partiel – JavaScript le plus tard possible • Le JS bloque le chargement pendant son exécution – Différer le chargement des ressources qui ne sont pas utiles au départ • « lazy loading »

Optimiser le rendu du navigateur • Nettoyer les CSS et JS du code inutile • Tenir compte des performances – des CSS – de JavaScript – des frameworks JavaScript

Attention aux ressources externes • Ressources provenant de tiers – Outils de statistiques – Régies publicitaires – Widgets de partenaires • http://stevesouders.com/p3pc/

PRATIQUER

Profiter du webperf contest • Bilan très instructif – http://braincracking.org/2011/01/10/concourswebperf-2010-les-bases/ – http://www.yterium.net/Ma-participation-auWebperf

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

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

Go! http://www.flickr.com/photos/expressmonorail/4601302443/

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.

Chiffres clefs 90 collaborateurs sur 4 agences Croissance régulière et rentable G3+ Banque de France

Références internet et e-Commerce 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 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/

Applications mobiles

Conseil en architecture technique 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