Améliorer les performances d’une application web (1er volet)

Savez vous que 47% des internautes s’attendent à ce qu’une page web s’affiche en moins de deux secondes et que 40% des gens vont fermer une page si elle met plus de trois secondes à se charger?  Sur un site de eCommerce le temps d’affichage d’une page a un impact direct sur le taux d’abandon d’un panier.

Dans ce contexte, on comprend pourquoi la performance d’un site web puisse requérir une attention toute particulière. Nous pouvons également avoir la même réflexion pour un site web interne ou un extranet ouvert aux partenaires.

Dans le processus d’amélioration des performances d’une application web on s’intéresse à la fois à ce qui se passe sur le serveur mais également dans la couche cliente (le navigateur). Dans ce premier volet, nous allons nous intéresser plus particulièrement à cette couche cliente : le navigateur.

Il y a de nombreuses technologies qui peuvent être utilisées dans cette couche qui peuvent donner lieu à une attention particulière (applet, flex…), mais nous limiterons notre sujet aux simples requêtes HTTP.

Comment réduire le temps de chargement d’une page web?

1er conseil : Réduire le nombre de requêtes

Cette technique vise à réduire le nombre de requêtes exécutées pour afficher une page. Il s’agit de l’approche la plus importante pour améliorer les performances d’affichage des pages pour les visiteurs qui accèdent au site pour la première fois.

Elle part du constat qu’une grande partie du temps consacré à l’affichage d’une page, ressenti par l’utilisateur d’un site, est passée sur le navigateur et que la majeure partie de ce temps est lié au téléchargement de tous les composants de la page: images, feuilles de style, scripts…

Cette approche met en jeu des techniques permettant de réduire le nombre de ressources à charger. Elle s’appuie notamment sur des solutions de fusion des scripts et des feuilles de style, et de combinaison des images dans un seule image (sprite).
Dans le cas du sprite, c’est à dire du regroupement des images dans une seule image, l’affichage d’une image en particulier est réalisée au travers de la définition de classes CSS qui déclarent notamment une propriété background-position qui précise la position du coin supérieur gauche de l’image que l’on veut afficher. Il faut également définir le fichier image via la propriété background-image ainsi que la taille de l’image à afficher avec les propriétés width et height.

2 ème conseil : Utiliser un CDN Content Delivery Network ou domain Sharding

Les navigateurs limitent volontairement le nombre de requêtes simultanées sur un domaine internet dans le but de ne pas surcharger les serveurs. Les anciens navigateurs autorisaient 2 connexions simultanées (IE7) tandis que les versions plus récentes permettent de réaliser entre 6 et 8 connexions simultanées. Ce dispositif n’empêche pas qu’un site internet chargeant un grand nombre de ressources statiques telles que des images, des scripts, des feuilles de style soit pénalisé par ces limites.

Il existe 2 techniques distinctes permettant d’améliorer le temps de chargement de ces ressources.

Le domain sharding est une technique qui consiste à charger les ressources statiques à partir de sous domaine. Cette technique permet donc de multiplier le nombre de requêtes simultanées par le nombre de sous domaine. L’approche consiste donc à distribuer les ressources entre différents domaines de façon à dépasser les limitations imposées par les navigateurs.
L’inconvénient est que chaque sous domaine nécessite de mettre en oeuvre une résolution de domaine qui peut ajouter un temps de latence supplémentaire. Sur les mobiles, la résolution DNS est également plus longue que pour les connexions dites conventionnelles.

La résolution DNS est le procédé de conversion d’un nom de domaine (par exemple google.com) en une adresse IP.

Il faut toutefois garder à l’esprit que cette technique peut être contre productive dans le cas ou le site web réalise peu de requêtes vers des ressources statiques. Notez également que le protocole HTTP/2.0 rend cette pratique est obsolète.

Le CDN (Content Delivery Network) est un réseau de serveurs distribués sur la planète qui délivre du contenu aux utilisateurs en fonction de la situation géographique des visiteurs. Cette approche consiste donc à distribuer les ressources sur un réseau de serveurs distribués dans le monde, et peut être intéressante pour des sites qui ont une audience internationale. Plusieurs sociétés se répartissent les parts de marché dans ce domaine citons par exemple Akamai, Amazon CloudFront….

3ème conseil : Utiliser le cache des navigateurs

L’utilisation d’un cache pour les ressources statiques a un impact majeur sur les performances et l’expérience utilisateur.  En effet bien que cette technique n’ait aucune incidence lors de la première visite d’un internaute sur la page de votre site, elle permet de réduire l’utilisation de la bande passante et le niveau de sollicitation des serveurs mais également améliore sensiblement le temps de chargement des pages lors des visites successives.
Bien entendu, l’utilisation du cache doit être réservée aux ressources statiques telles que les images, les feuilles de style, les scripts et ne doit surtout pas être utilisée pour gérer du contenu dynamique.
L’idée est de paramétrer l’entête HTTP « expires » de façon à ce que la ressource soit mise en cache sur le navigateur pendant la période déclarée. Lorsque la ressource est expirée (ou si l’utilisateur demande un rafraîchissement de la page « soft-refresh »), si les entêtes HTTP Etag ou Last-Modified sont présents sur la ressource, le navigateur lance une requête conditionnelle avec les entêtes If-None-Match ou If-Modified-Since.
Si le serveur répond avec un status HTTP 304 (Not modified) avec les entêtes relatives à la mise en cache de la ressource, le navigateur gardera la ressource dans le cache et modifiera la date d’expiration conformément aux informations renvoyées par le serveur.
La ressource est, bien entendu servie, par le cache du navigateur.

Pour les ressources statiques mises en cache qui peuvent être modifiées périodiquement, il existe des techniques de gestion de version qui permettent de prendre en compte la modification en forçant le navigateur à charger la nouvelle ressource.

4ème conseil : Compresser les contenus

Le temps de chargement d’une ressource dépend en particulier de la taille du contenu. Un navigateur prendra plus de temps pour charger une ressource de 100 Ko qu’une ressource de 10 Ko 😉 . Cette technique répond à cette exigence de réduction de la taille des ressources en utilisant une technique de compression.
Les ressources textuelles sont principalement visées par cette approche : les documents HTML, les feuilles de style, les scripts…

5ème conseil : Déplacer les scripts à la fin de la page

Cette technique consiste à déclarer les scripts juste avant la fermeture du tag BODY de la page. En effet, l’une des caractéristiques des scripts est qu’ils s’exécutent à l’emplacement exact où ils sont insérés dans le document et de fait, ils bloquent la construction du DOM (Document Object Modèle) et retarde l’affichage initial de la page. Autrement dit, un script déclaré au milieu du contenu d’une page bloque l’affichage du reste de la page tant que le script n’est pas exécuté. Cela peut provoquer des situations de page blanche, ou des effets visuels disgracieux ou l’utilisateur voit le chargement partiel de la page puis attend le rendu complet.

Plus techniquement, lorsque l’analyseur HTML rencontre une balise de script, il suspend le processus de construction du DOM, puis cède le contrôle au moteur JavaScript. Lorsque celui-ci a fini de s’exécuter, le navigateur reprend sa tâche au point où il l’a laissée, puis reprend la construction du DOM. Pourquoi la construction du DOM est-elle interrompue? Tout simplement car le script peut modifier le DOM et le CSSOM (représentation objet d’une feuille de style) qui sont tout deux nécessaires à la construction du rendu de la page.

Par ailleurs, si le navigateur n’a pas fini de construire le CSSOM au moment ou un script peut être exécuté, il retardera l’exécution du script jusqu’à ce que le CSSOM soit construit.

Il est donc nécessaire de charger les feuilles de style le plus tôt possible dans le processus de construction de la page. En fait, cette étape fait appel à une autre notion « le chemin critique du rendu » que nous aborderons dans un autre volet.

Le chemin critique du rendu fait appel à l’optimisation du schéma de dépendance entre HTML, CSS et JavaScript et, plus particulièrement, il s’agit d’améliorer les performances de sorte que le navigateur charge très rapidement tous les éléments graphiques qui sont visibles immédiatement afin que l’utilisateur ait une sensation d’instantanéité. Les éléments non visibles sont chargés d’une façon imperceptible pour l’utilisateur.

Notons simplement à ce stade qu’il existe des attributs de la balise script qui permettent de rendre un script non bloquant.

  • defer : différer l’exécution à la fin du chargement du document.
  • async : charger/exécuter les scripts de façon asynchrone (par un autre thread).

Nous reviendrons plus précisément, dans un prochain volet, sur les mécanismes mis en oeuvre lors du chargement des scripts.

6ème conseil : Externaliser les ressources

Les ressources de type feuille de style et script devraient être externalisées dans des fichiers de façon à bénéficier de l’utilisation du cache du navigateur.

7ème conseil : Réduire l’impact de la résolution DNS

Pour réduire l’impact de la résolution DNS, il est nécessaire d’utiliser la directive HTTP keep-alive et rationaliser l’utilisation des domaines différents.

La directive Keep-alive est un dispositif permettant d’utiliser une simple connexion TCP pour envoyer et recevoir de multiples requêtes et réponses.
Elle s’oppose à un fonctionnement ou chaque requête nécessite l’ouverture et la fermeture d’une connexion TCP. Avec le protocole HTTP/1.1 toutes les connexions sont considérées persistantes par défaut.

8ème conseil : Minifier les scripts

Cette opération consiste à réduire la taille des scripts en supprimant tous les caractères non indispensables (commentaires, espaces inutiles…). Elle peut venir en complément de la technique de compression pour réduire la taille de la ressource.

En synthèse

L’application de ces premières mesures devraient vous permettre d’améliorer le ressenti de l’utilisateur. Dans un prochain volet, nous nous intéresserons à la notion de chemin critique du rendu et nous entrerons plus en détails sur l’impact des scripts sur la performance de l’affichage des pages.

http://www.jperf.com

Publicités

A propos jlerbsc

founder of JavaPerf Consulting Http://www.jperf.com
Cet article a été publié dans performance. Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s