Optimiser le temps de chargement pour le web mobile avec iPhone, jQTouch, Struts 2 et Tomcat

Je développe depuis quelques mois une application web mobile à destination des plateformes Android et iPhone. Ces deux plateformes ont les (quasi-)mêmes propriétés web, car elles utilisent toutes les deux le même moteur de rendu HTML: WebKit. L’ADSL m’a fait perdre mes bonnes habitudes du début des années 2000, où je tentais d’optimiser chaque bout de code HTML. L’objectif à l’époque était que le temps de chargement d’une page n’excède pas les 30 secondes avec un 56K. Les connections ont évolués, et nous nous quittons les simples pages HTML vers des applications Internet  riche.

Un plugin de jQueryjQtouch vous permet de réaliser un look and feel à votre application web digne d’une application native iPhone. Ce plugin est en train de devenir une référence dans le monde du web mobile. Rançon de l’ergonomie, le temps de chargement de votre application s’en trouve rallonger. Les connexions UMTS (dites 3G) de nos téléphones actuels dépassent allégrement les 56K, en atteignant (selon une équipe de Yahoo!) les 82 à 150Kb/s en pratique. Néanmoins le temps de latence reste assez élevé et son temps de chargement est aléatoire. Il peut être difficile de charger une page en moins de dix secondes. Voici quelques opérations à réaliser sur votre serveur et sur votre application web afin de diminuer le temps de chargement de vos pages.

Activer la possibilité de mettre en cache vos fichiers statiques par le navigateur

Un serveur HTTP est capable de demander recommander au client web de mettre en cache certains fichiers.

A ce sujet, il y a plusieurs petites chose à savoir sur le cache de l’iPhone:

  • L’iPhone stocke des éléments décompressés en cache, uniquement inférieur à 15Ko
  • le cache web total de l’iPhone ne dépasse pas 1.5Mo
  • La fermeture de tous les onglets de Safari ou l’extinction de l’iPhone suppriment toutes les données du cache.
  • Les éléments sont mis en cache uniquement si le header HTTP du serveur web le “lui dit”, avec un champ comme Cache-Control vous trouverez plus d’explications, sur ce précédent billet

Notez qu’Apple ne communique pas ces informations, elles ont été mesurées et ces mesures varient selon la version de l’iPhone.

A noter que le HTML 5 propose aussi un intéressant mode offline. Nous en reparlerons certainement dans un prochain article.

Activer la compression GZIP

La quasi totalité des navigateurs sont capables d’accepter des flux de données compressées au format GZipLes temps de transferts en sont drastiquement diminués! Des ressources supplémentaires sont demandés au serveur (pour la compression) et au client (pour la décompression).  Toutefois la taille des données et la puissance des smartphones ou des serveurs est telle que cette consommation CPU supplémentaire est négligeable, par rapport au gain en temps de transmission.

Pour savoir comment activer la compression GZIP sur votre serveur Tomcat, je vous recommande de lire ce précédent billet.

Compresser vos images, vos CSS et vos JavaScripts

Nous allons voir comment réduire vos données binaires compressées et comment réduire vos données texte.

Réduire l’incompressible

Des outils comme PhotoshopFireworks, ou encore The Gimp sont capables de diminuer la taille de vos images JPEG et autres PNG. Vous pensez que leur systeme de compression est suffisant ? Il existe un outil qui est capable de faire encore mieux: Smushit de Yahoo!. En effet, même aprés une optimisation avec un des logiciels de PAO que j’ai cité, Smushit trouve encore de quoi optimiser l’image. Ce compresseur/optimiseur est online, et vous pouvez y accéder à cette adresse: http://www.smushit.com/ysmush.it/ . Gardez la dans vos favoris, elle est est très utile!

Je vous conseille d’ailleurs d’appliquer le traitement de Smushit aux images des thèmes de jQTouch: leur dernière release n’offre pas d’images totalement optimisée.

Réduire vos CSS et JavaScripts au format texte

Comme nous l’avons vu dans le paragraphe précédent, ces fichiers seront GZippés et envoyés au client web. Néanmoins, avant même qu’ils soient envoyés, nous allons les compresser en supprimant toute information inutile. La taille et le temps d’exécution en seront améliorés. Encore une fois, Yahoo! nous propose un outil pour faire cela: le YUI compressor. Cet outil, va supprimer tous les caractères/formatages inutiles de vos fichiers JavaScripts et CSS. Par exemple, entre le fichier de développement de jQTouch et sa version compressée par YUI, vous passez d’un fichier de 24Ko à un fichier de 8Ko (imaginez sa taille une fois GZippé  )

Cet outil est gratuit, et il peut être téléchargé sur le site de Yahoo Developper. Un service en ligne se basant sur ce compresseur est disponible à l’adresse suivante: http://refresh-sf.com/yui

Comme vous pouvez le constater Yahoo! fait figure de référence dans l’optimisation des pages web.

Maitrisez vos requêtes HTTP

Evitez les CDN et domaines multiples

Une requête sur un nouveau domaine se traduit par une requête DNS, afin de traduire le nom du serveur en une adresse IP. Faites confiance au cache DNS de votre iPhone: fournissez lui le moins de noms de domaines différents dans un seul et même fichier. Ainsi il ne perdra pas son temps à envoyer sur le réseau de multiples requêtes. Ces dernières échangent très peu de données: mais le temps de latence du réseau mobile plombera le temps de chargement de votre application web.

Faire héberger son fichier jQuery sur de CDN de Google peut paraitre une bonne idée. Sur un ordinateur de bureau, on peut espérer que ce fichier soit déjà en cache, mais les 69Ko de jQuery ne le rendent pas éligible au cache de l’iPhone. Si votre serveur peut supporter la charge et atteindre un temps de réponse inférieur à TPS DE REQUETE DNS + TEMPS DE REQUETE GOOGLE, hébergez vos fichiers statiques sur le même domaine que votre application.

Regroupez vos fichiers de ressources

Vos fichiers JavaScripts et CSS peuvent être regroupés, afin d’éviter de multiple requêtes. Par exemple pour jQTouch, le fichier CSS principal et celui propre au thème de votre application peuvent être réuni en un seul et même fichier.

De même pour les fichiers JavaScripts et les différents modules que vous utilisez. Mais limitez vous à 15Ko (taille des composants mis en cache).

Évitez les redirection HTTP 302

Attention aux redirections d’Action dans Struts par exemple. Elles vous renvoient une redirection HTTP 302, nécessitant une nouvelle requête HTTP vers la nouvelle page de la part de votre navigateur.

Bannissez le redirectAction dans le result de vos Actions:

<result type="redirectAction" name="success"> <param name="actionName">displayStore</param> <param name="namespace">/frontoffice/securitycompliant</param> </result>

Préférez le chain, permettant le chainage de vue, interne au framework Struts 2:

<result type="redirectAction" name="success"> <param name="actionName">displayStore</param> <param name="namespace">/frontoffice/securitycompliant</param> </result>

L’optimisation de routine pour Tomcat ?

N’oubliez pas qu’une bonne optimisation de votre container web Tomcat vous permettra globalement une meilleure web application

  • Installer Apache Native. permet à Tomcat d’utiliser des fonctions natives à votre OS au lieu d’une ré-implémentation générique. Le gain se verra principalement au niveau des I/O, et votre temps de latence en sera réduit.
  • Démarrer votre JVM en mode -server. Le mode client par défaut est uniquement adapté pour des applications avec un cycle de vie court (aussitôt ouvertes, aussitôt fermées). Le mode server permettra une meilleure optimisation de votre application, mais aura un temps de démarrage plus long.
  • Le paramétrage de la mémoire n’améliore pas forcément sa vélocité. Votre JVM sait ce qu’elle fait et sait mieux que vous dans la plupart des cas l’état de sa mémoire. Elle sait donc mieux que vous ce qu’elle doit faire.

Sources: