Optimisation WEB: Partie 2 – Quickwins et les optimisations faciles

Dans cet article, nous allons passer en revue, sans forcément les détailler, les différentes améliorations qu’il est facile d’apporter sur un projet web avec d’améliorer sensiblement les performances.
Pierre LISERONMis à jour le 3 Juil 2013

Optimisation WEB: Partie 2 Quickwins et les optimisations faciles

Voici donc ce qui pourrait faire office de mémo, ou de checklist lorsque l’on souhaite améliorer les performances de son application web. La liste des optimisations fournies ici est loin d’être exhaustive mais chaque point a l’avantage d’être facile à réaliser.

Compresser les flux entre le serveur et le client (Gzip / Deflate)

Première chose à réaliser facilement et qui ne coûte presque rien à faire est de mettre en place la compression entre le serveur (Apache dans cet exemple) et le client. Pour ce faire, rien de plus simple, il suffit d’activer le module deflate d’apache ou gzip et de rajouter les instructions suivantes dans votre virtualhost. Pour info, avec cette technique, vous pouvez diviser la taille de transfert réseau par 2!

etOutputFilter DEFLATE

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

Ces instructions demandent à APACHE de compresser tous les flux avec les types suivant, text/plain, text/html.

Limiter le nombre d’appel server

Le nombre d’appel serveur est primordiale dans le temps de calcul d’une page. En effet, chaque navigateur n’effectue que quelques appels simultanés vers votre serveur. Si vous avez beaucoup d’appel, le temps d’affichage de la page peut être sensiblement ralenti. On pense souvent que séparer les css ou les js en petits fichiers est une bonne idée, en particulier pour une question de maintenance et c’est vrai. Mais d’un point de vu performance, ceci est une catastrophe, il est beaucoup performant de limiter les appels serveurs à moins de 5/6 par page et ceci est pas forcément facile à réaliser.

La technique la plus simple est de regrouper tous les CSSFeuilles de style qui permettent de mettre en forme des pages web. dans un seul fichier CSS et tous les JS dans un seul fichiers JS. Ce qui fait déjà 2 appels, si on rajoute l’appel à la page elle même, ceci fait donc déjà trois appels au serveur. Il reste encore le cas délicat des images. Que faire avec les dizaines de belles images qui sont sur votre page? Regrouper les dans une seul image sprite et utiliser le CSS pour l’affichage! Le seul défaut de cette technique est que les images ne sont plus référencées aussi bien. Il est donc recommandé de ne regrouper dans les sprites que les petites images sans plus value de référencement telque les icônes.

Compression les fichiers JS et CSS

Pour réduire la taille des JS et des CSS, il est souvent intéressant de les compresser, pour cela, il existe une multitude de petit script, tous plus ou moins efficace. Néanmois le gain est non négligeable!

Réduire la taille des images

Optimisation WEB: Partie 1 Page Speed (vitesse de la page) pour les images

Mettre en cache client les images et les contenus statiques

Optimisation WEB: Partie 1 Page Speed (vitesse de la page) pour les images

Redemmarrer vos serveurs et en particulier les serveurs JEE

Si vous utiliser des serveurs JEEJava Entreprise Edition. Pensez à les redémarrer une fois par nuit pour éviter que la mémoire s’accumule et que votre serveur soit lent.

 

Voilà donc quelques points quickwins à réaliser pour accélérer sans effort votre application WEB.