Optimisation des pages web

Attendre plusieurs secondes le temps que s’affiche une page ou voir apparaitre péniblement une à une les images d’un site web n’est jamais très agréable. Certaines pages étant critiques pour intéresser et accrocher l’internaute, notamment l’accueil qui permet de donner tout de suite à l’internaute une bonne ou mauvaise impression sur l’expérience de navigation à suivre, un soin tout particulier doit y être apporté.

Pour nous aider dans notre quête d’allégement de page, Google met à disposition un outil fort pratique : http://developers.google.com/speed/pagespeed/insights/.

Cet outil propose pour une url donnée une liste d’améliorations à effectuer selon des niveaux de criticité afin d’améliorer le chargement de la page.

Parmi ces améliorations, nous trouvons des améliorations aussi bien côté plateforme (gestion des caches navigateurs, compression des ressources …) que côté code (optimisation d’image, gestion des ressources css/js/html).

Intéressons-nous à l’aspect « intégrateur » de l’optimisation web. Sachez d’ailleurs qu’une extension chrome de l’outil de Google existe (https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli?hl=fr) et à l’avantage de proposer des versions améliorées des ressources à optimiser.

Le chargement et l’exécution du javascriptsont des facteurs importants de ralentissement du chargement de la page, en effet rappelons que tout navigateur rencontrant une balise « <script> » stop le chargement des autres éléments html le temps de charger le fichier externe puis de l’exécuter car il ne sait pas si ce fichier contiendra des instructions à exécuter immédiatement et ayant des impacts sur le code html/css suivant.

Présent pré – html5 l’attribut defer, compatible avec d’anciennes versions d’internet explorer, permet de charger de manière parallèle le script javascript et de l’exécuter une fois le parsing html terminé.

<script src="script.js" defer></script>

Les dernières versions des navigateurs récents chargent par défaut les ressources en parallèle ce qui rend defer moins attractif.

Mais depuis L’html5, les balises scripts disposent d’un nouvel attribut : async. Cet attribut permet de charger de manière asynchrone un script et de l’exécuter une fois chargé (avant l’événement load de window). Attention ceci n’est valable que pour les scripts externes au document (avec un « src » renseigné).

<script src="code.js" async></script>

Autre chose à prendre en compte, du fait de son chargement asynchrone, le script n’attendra pas le chargement d’un autre script même si celui-ci comporte une fonction qu’il utilise (notamment faisant appel à des framework jQuery ou autre)

Outre la gestion du chargement des scripts il faut penser à optimiser leur contenu. Pensez à « minifier » vos codes ! En remplaçant le nom des variables et des fonctions par des lettres, en supprimant les commentaires et les espaces, minifier votre code permettra de réduire considérablement la taille de votre fichier de ressource et facilitera son chargement par le navigateur.

Pour ce faire je vous conseille le site http://closure-compiler.appspot.com/home qui vous permettra de choisir le degré d’optimisation du code.

Petite parenthèse, le site http://cssminifier.com/, permet d’effectuer une opération similaire sur vos ressources css (suppression espace, retour à la ligne et commentaire).

Avant de minifier vos fichiers, je ne saurais que trop vous conseiller de garder précieusement de côté une version non minifiée de ces derniers afin de que vous gardiez une version commentée, indentée et lisible pour de futures opérations de maintenances/évolutions.

Attaquons probablement ce qui ralenti le plus nos pages : Les images.

Un site plein d’images, de toute taille, de grosses résolutions (hmmm) c’est beau ! Mais c’est d’autant plus long à charger surtout pour les plus petites configurations.

Première chose à faire, regrouper les petites et moyennes images en sprites, c’est-à-dire en une seule image regroupant plusieurs images de taille plus ou moins similaire ce qui permet de demander aux navigateurs de ne charger qu’une image là où il faudrait en charger une dizaine. A vous ensuite d’indiquer via css la position des images que vous souhaitez afficher.

sprite

Si comme moi vous n’avez aucune notion/affinité avec la retouche d’image, utilisez un site comme http://fr.spritegen.website-performance.org/ pour construire vos sprites.

Ensuite pour les pages ayant des images non visibles immédiatement (carrousel, scrolling, déplié etc….), inutile de charger et afficher toutes les images dès le début. N’affichez que les images que l’internaute verra lorsqu’il arrivera sur la page.

Pour les autres images usez de javascript pour charger et afficher les images une fois la page chargée ou lorsque l’internaute sera susceptible de les voir (au défilement par exemple). Il existe des plugins tels que lazyloader qui permettent de configurer le chargement des images.

Maintenant il ne reste qu’à s’occuper de la taille des images. Une image trop grosse c’est une image difficile à charger. Choisissez un format malléable de préférence comme le png, (jpg pour les mobiles)

Et utilisez des logiciels tels que paint.NET ou Gimp pour diminuer leur poids, il faut trouver le juste équilibre entre la taille de l’image et sa qualité. L’extension chrome pageSpeed Insight vous propose des équivalents optimisé de vos images trop lourdes, si vous utilisez des images png je vous conseille ce site : https://tinypng.com/ qui réduira considérablement la taille des images sans altérer la qualité.

Voilà, bien sûr il reste une myriade de choses à faire pour faciliter le chargement de vos pages web mais une fois ces points traités vous verrez déjà une grosse différence.