Optimisation WEB: Page Speed pour les images

Afin d’optimiser votre site web (ou application web), il existe un certain nombre d’actions simple à effectuer. Dans cet article nous allons passer en revue le moyen d’optimiser la vitesse de chargement de votre page web. Pour ce faire, nous allons utiliser un outil mis à disposition par GOOGLE (pagespeed) disponible à l’adresse suivante: https://developers.google.com/speed/pagespeed/

Cet outil donne un certain nombre d’indicateur simple avec des conseils pour les réaliser. Nous allons donc les parcourir et voir comment les appliquer sur votre application JEEJava Entreprise Edition.

Optimisation des images

Taille des images

Les images posent de gros problèmes de performance dans une application web. En effet, pour avoir un site agréable, les graphistes fournissent souvent de belles et grandes images d’une taille conséquente. Pour résoudre ce problème, un grand nombre d’outils permettent de compresser les images et de choisir le bon type pour l’image (PNG ou GIF). Cette étape est particulièrement importante pour la vitesse de votre page, puisqu’elle joue directement sur la taille du transfert réseau. N’oubliez pas que tout le monde n’a pas la fibre optique. Dans l’outil mis à disposition par google, cet item est situer dans « Réduire la charge utile -> Optimiser les images »

Servir les images sur un serveur de contenus statiques

Une optimisation importante est de servir les images depuis un autre sous domaine pour ainsi éviter d’avoir un cookie. Cette action peut paraitre futile mais elle permet d’augmenter sensiblement les performances de votre application. De plus ceci permettra en plus de pouvoir facilement configurer le cache par le serveur d’apache.

Le problème des chaînes de requête des ressources statiques (images)

Ceci pose un problème avec JSF 2 car en JSF, si vous utilisez des library pour les images par exemple:

<h:graphicImage library= »images » name= »logo.jpg » />

Le balise html générée ressemblera à :

javax.faces.resource/logo.jpg.xhtml?ln=images

Ce qui est mauvais et pour le référencement et pour les performances puisqu’un grand nombre de navigateur ne cache pas les ressources avec des ? et des variables.

Pour résoudre le problème, il convient de ne pas utiliser ce mécanisme et d’externaliser toutes les images sur un sous-domaine comme expliqué dans le point précédent. Ce problème se situe dans « Autres -> Supprimer les chaînes de requête des ressources statiques » dans l’outil de google.

Spécifier la taille des images

Une autre optimisation intéressante est de spécifier la taille des images dans la balise img. Cette astuce permet de limiter les appels aux commandes reflow() et repaint() et donc d’optimiser le temps de chargement de la page. Cette optimisation se trouve dans l’outil de google dans la partie « Réduire les temps de chargement des pages-> Spécifier les dimensions des images »

La mise en cache

La mise en cache peut s’effectuer sur le navigateur et/ou sur votre apache.

Mise en cache navigateur

La mise en cache sur le navigateur permet de limiter les aller-retours avec le serveur en spécifiant au navigateur que la ressource n’a pas besoin d’être recharger.

Pour ce faire, il est nécessaire de spécifier les headers HTTP soit avec apache comme ceci:

ExpiresActive On

ExpiresDefault « access plus 1 month »

Header unset ETag

FileETag None 

soit avec un filter JAVA en rajouter un header:

httpResponse.setHeader(« Cache-Control », « max-age=1204800, public »);

Mise en cache avec memcache

Un autre cache peut être réaliser avec le module mem_cache d’apache.

Nous verrons dans un autre article comment continuer d’optimiser les applications web JEE côté serveur.