Mémento - Performances web

Lionel Pointet, Armel Fauveau

Description

Les performances web côté client (ou WebPerf) consistent notamment à optimiser le code des pages web pour qu'elles soient plus légères et s'affichent plus vite dans le navigateur. Cette problématique qui passionne les développeurs web devient d'autant plus forte avec l'avènement du mobile.

En l'absence d'ouvrage complet en français sur le sujet, ce mémento expose les points essentiels. Il explique au lecteur comment faire des mesures en présentant les outils incontournables, mais surtout les bonnes pratiques et les règles à respecter (classées par ordre de priorité), ainsi que les méthodes et outils pour y arriver. Enfin, il donne des ressources pour aller plus loin.

• 
  Principes de base et enjeux


• 
  Audit et prise de mesures


• 
  Comment et sur quoi agir ?


• 
  Limiter le nombre de requêtes


• 
  Limiter la taille des composants


• 
  Optimiser le rendu et soulager la charge du navigateur


• 
  Priorité et complexité des règles


• 
  Aller plus loin : chargement asynchrone, chargement anticipé, parallélisation, outils et services divers


• 
  Ressources et lectures complémentaires

Sujets

• Sciences & Techniques
• Informatique
• développement

Informations

• Publié par: Editions Eyrolles
• Date de parution: 07 février 2013
• Nombre de lectures: 102
• EAN13: 9782212239706
• Langue: Français

Extrait

Principes de base et enjeux

La notion de performances web, plus simplement appelée « WebPerf », vise à une seule chose : l’amélioration du délai d’affichage d’une page (et par extension, d’un site), une fois que le serveur a terminé de la générer.
Tout part du constat que la génération d’une page web côté serveur représente au maximum 20 % du temps total de chargement de cette page. Essayons donc d’améliorer les 80 % restant.
Pourquoi réduire le temps d’affichage de votre site ? Comme l’ont déjà démontré nombre d’études et retours d’expériences, celui-ci a une influence directe sur de multiples éléments, dont le nombre de pages vues, la performance commerciale et même le positionnement sur les moteurs de recherches.

Quelques exemples
Walmart a mesuré que le temps de chargement des pages est inférieur pour les clients qui achètent que pour ceux qui n’achètent pas.
Après avoir amélioré le temps de chargement de ses pages d’environ 7 à 2 secondes, le site Shopzilla a vu son taux de conversion passer de 7 à 12 %, son nombre de pages vues augmenter de 25 %, tout en divisant par deux le nombre de serveurs nécessaires pour tenir la charge.
Les deux moteurs de recherche Google et Bing ont constaté une baisse durable des recherches, et donc des revenus, suite à une augmentation du temps de chargement de leurs pages.
Ce mémento présente les principales règles et méthodes, ainsi que les outils essentiels à disposition pour évaluer la performance d’un site, en identifier les points faibles et mettre en place les optimisations. Il ne saurait être un ouvrage de référence, mais pourra vous aiguiller tout au long de votre projet et vous accompagner dans vos optimisations.
Audit et prise de mesures

Première bonne pratique : rien ne sert d’optimiser trop tôt dans le cycle de développement d’un projet. Vous allez dépenser de l’énergie et du temps, donc de l’argent, sur des aspects qui ne seront au final pas décisifs. Pire, vous risquez d’aller à l’encontre des réelles optimisations et de tomber dans la contre-performance !
Ainsi, avec un existant pas encore performant, la première chose à faire est un audit, c’est-à-dire des prises de mesures. La base de travail est la cascade , qui présente chacune des requêtes HTTP effectuées par le navigateur en précisant à quel moment chacune a démarré et s’est terminée, ainsi que les différents temps qui la composent (requête DNS, téléchargement...).
Outils en ligne
WebPageTest : http://www.webpagetest.org
Une référence, puisqu’il permet de générer la fameuse cascade : indiquez l’URL de votre page, puis le nombre de tests à jouer et lancez la prise de mesures depuis l’un des nombreux serveurs disponibles à travers le monde.

E N PRATIQUE Serveurs disponibles en France
Même si vous êtes libre de cibler un serveur WebPageTest localisé à l’autre bout de la terre, à ce jour, 3 instances différentes de navigateurs vous sont proposées en France et plus précisément sur Paris: Internet Explorer 7 (IE 7), Internet Explorer 8 (IE 8) et Chrome. Pour aller encore plus loin et, par exemple, automatiser régulièrement la prise de mesures, l’outil est disponible librement. Vous pouvez monter votre propre instance directement chez vous : https://sites.google.com/a/webpagetest.org/docs/private-instances
Pour aller plus loin, WebPageTest permet aussi :
de visualiser des impressions d’écrans de la page auditée ou même des vidéos retraçant son affichage ;
de créer des scripts (pour envoyer un formulaire ou naviguer sur plusieurs pages, par exemple) ;
de choisir depuis quel endroit du globe, avec quelle connexion et sur quel navigateur (et sa version) vous souhaitez faire ces mesures.
Plusieurs indicateurs sont proposés pour analyser le comportement de la page : le temps de chargement complet, le temps avant le premier octet, le temps avant le début de l’affichage réel, le nombre de balises HTML présentes (nœuds DOM : Document Object Model ) et de nombreux autres.
Enfin, l’outil reprend des règles d’optimisation établies par Google (grâce à l’API de PageSpeed) et attribue une note pour chacune : vous pouvez donc facilement cibler les mauvais points.

A VANTAGE Ce sont de véritables navigateurs qui visitent vos pages, et pas seulement des émulations qui pourraient rendre les mesures moins fiables.


Exemple de cascade retournée par WebPageTest

A STUCE Centralisation des statistiques
HTTP Archive ( http://www.httparchive.org ) centralise diverses statistiques issues des mesures publiques effectuées depuis WebPageTest, afin notamment :
de comparer la performance de votre site par rapport aux concurrents ;
de se placer sur une échelle de tendance du moment.

Autres outils en ligne PageSpeed https://developers.google.com/speed/pagespeed/insights Zompf http://zoompf.com/free GTMetrix http://gtmetrix.com/ Pingdom Full Page Test http://tools.pingdom.com/fpt/ Load Impact http://loadimpact.com/page-analyzer Mobitest http://mobitest.akamai.com/m/index.cgi Le comportement des navigateurs n’est pas tout à fait identique entre les terminaux mobiles et les machines de bureau (fixes ou portables). La bande passante depuis une connexion 3G est plus étroite et le processeur moins performant. La mémoire est moins importante et la taille du cache plus réduite. Mobitest permet de faire, en ligne, les mêmes mesures que WebPageTest sur des mobiles.

A LLER PLUS LOIN Fonctions payantes
Certains de ces outils offrent des services payants, permettant soit d’automatiser les tests, soit d’obtenir plus d’informations sur les mesures effectuées. Par exemple :
avoir des rapports d’audit complets donnant des précisions sur les points à améliorer, les pratiques à adopter et des premiers résultats d’optimisation (images ou scripts avec un poids réduit) ;
suivre l’évolution de votre site en termes de WebPerf grâce à une surveillance continue ;
activer des « accélérateurs » pour mettre en œuvre quelques unes des pratiques recommandées, et ceci automatiquement et directement sur votre site.
Plug-ins clients
Les navigateurs se dotent d’outils de plus en plus poussés pour que le développeur puisse analyser le déroulement de l’affichage d’une page web : consoles de développement, mais aussi de nombreux plug-ins, notamment pour faire des mesures directement depuis le navigateur, sur votre ordinateur.
L’incontournable Firebug, pour Firefox : http://getfirebug.com
Pour visualiser le code HTML d’une page (ou plus précisément une représentation du DOM), déboguer le code JavaScript en temps réel (avec points d’arrêts, etc.), ou encore analyser les appels réseau (requêtes HTTP de type GET ou POST effectuées vers des ressources externes ou pour des appels Ajax). L’onglet dédié au réseau montre, à l’image de WebPageTest, la fameuse cascade des téléchargements, point de départ d’une analyse WebPerf.

A STUCE Si vous n’utilisez pas Firefox
La majorité des navigateurs modernes (Chrome, Safari, Opera…) proposent en standard des outils d’analyse et de débogage. Il existe aussi une version « Lite » de Firebug ( https://getfirebug.com/firebuglite/ ) , un peu limitée, utilisable depuis n’importe quel navigateur, Internet Explorer 6 compris.
Plug-ins dérivés de Firebug YSlow (yahoo !) http://developer.yahoo.com/yslow/ PageSpeed (Google) https://developers.google.com/speed/pagespeed/insights_extensions
Disponibles sous différentes formes (ligne de commande, plug-in Opera ou Chrome, bookmarklet ), on peut utiliser ces outils dans de nombreuses situations et architectures techniques.
Tous deux serviront à sonder si votre mise en œuvre des règles et bonnes pratiques de performances est satisfaisante ou non. Ils permettront de cibler les améliorations possibles grâce à une note globale, ainsi qu’à une note par règle et par bonne pratique. Ils partagent quelques règles communes mais possèdent chacun leurs spécificités : ils sont donc complémentaires !

A TTENTION ! Bonne note ne signifie pas forcément bonne performance !
http://www.clever-age.com/veille/reactions/pagespeed-et-yslow-ne-sont-pas-des-indices-de-performance.html

A STUCE Automatiser les mesures
Mettez en place des mesures automatiques et régulières afin de surveiller leur évolution dans le temps. Le faire en suivant un scénario de navigation peut également servir à surveiller d’une manière plus globale les performances de votre site.
Compuware dynaTrace AJAX : http://www.compuware.com/application-performance-management/ajax-performance-testing.html
Disponible pour Firefox et Internet Explorer, ce logiciel excelle dans l’analyse des performances du code JavaScript. À installer directement sur le poste client (et non comme plug-in du navigateur).
Il va bien plus loin en termes de données mesurées, notamment :
le temps d’exécution de chaque script ;
toutes les fonctions appelées, qu’elles soient issues de l’API DOM ou natives JavaScript ou jQuery, par exemple ;
le temps de rendu du navigateur.
Il permet d’identifier rapidement une fuite mémoire, un appel beaucoup trop souvent exécuté ou simplement une fonctionnalité lourde.
Speed Tracer : https://developers.google.com/web-toolkit/speedtracer/
Extension du navigateur Chrome, il capture, à la manière de dynaTrace, tous les événements qui se déroulent dans le navigateur lors d’une consultation du site, en les détaillant de façon chronologique.
Le niveau de détails est moins élevé que pour dynaTrace, mais les informations fournies sont tout de même d’un niveau satisfaisant : temps de rendu, de recalcul des styles, de récupération de ressources externes, etc.

Collecte de mesures locales (RUM)
Au-delà des collectes locales sur votre ordinateur, des prises de mesures plus réalistes encore peuvent être opérées directement auprès des utilisateurs de votre site. Le RUM (Real User Monitoring) peut être réalisé grâce aux outils suivants. Boomerang https://github.com/yahoo/boomerang Google Analytics http://support.google.com/analytics/bin/answer.py?hl=en&answer=120578