Performance d'un site web

Performance d’un site web : étude d’un cas pratique et exemples d’optimisations

31 décembre 2012
Tags : HTML, Performance, Qualité, Tutorial
1 commentaire

La vitesse d’affichage d’un site web est aujourd’hui un critère très important pour le référencement naturel et la réussite d’un projet web. La barrière maximale de 3 secondes de chargement par page est devenue un seuil obligatoire à respecter. L’augmentation des visites depuis les smartphones et tablettes est un facteur de difficultés supplémentaires pour rester en dessous de ces 3 secondes de chargement.

L’enjeu est simple : si votre site est trop lent le visiteur ne restera pas. Nous pensons clairement chez Kiwano que le critère de performance du site côté client est un critère encore trop sous estimé par les créateurs de sites. Si vous avez aujourd’hui un investissement à faire sur votre site : faîtes le pour améliorer la vitesse ressentie par les utilisateurs. Vous gagnerez des visiteurs fidèles et des places dans les résultats de recherche Google.

Nous vous proposons donc de revoir les techniques pour améliorer la performance de votre site au travers d’un cas concret pour partager avec vous ce qui a été fait sur un autre site.
N’hésitez pas à donner votre avis et partagez votre expérience.

Présentation du sujet d’étude : le site de location de camping-car CampiLoc

CampiLoc est un site de location de camping-cars de particulier à particulier. Il propose aux propriétaires de camping-cars de mettre gratuitement une annonce de location sur le site et aux amateurs de locations de camping-car de trouver un camping-car dans la région qu’ils souhaitent.

CampiLoc est un site utilisant une technologie serveur moderne avec un code créé sur mesure ce qui est un vrai atout pour intégrer facilement des optimisations.

Performance côté client

Quand nous parlons de performance d’un site web il est important de rappeler que nous voulons mesurer et améliorer la performance ressentie par le visiteur. Nous ne mesurons donc pas le temps mis par le serveur pour générer la page mais le temps total d’affichage de la page dans le navigateur client (temps serveur + temps total de téléchargement des éléments).

Premier réflexe : vérifier le code serveur

Alors oui, nous allons beaucoup parler de techniques côté client mais il faut également vérifier que le serveur n’est pas lent. Sur le site CampiLoc, l’hébergement est en France sur un serveur dédié suffisamment puissant. Des techniques de cache applicatif serveur des informations ont été employées pour avoir des pages qui répondent au plus vite.

News en page d’accueil

Concernant la page d’accueil, un extrait des dernières news du blog est affiché en bas de page. Cette information n’est pas essentielle pour l’utilisateur (et pour Google) car elle reprend un contenu déjà présent sur le blog. Par contre charger un flux RSS externe augmente le temps de génération de la page côté serveur. Il a donc été décidé de charger ce contenu en asynchrone via une requête Ajax.

Réduire le poids des éléments

L’étape suivante consiste à réduire au maximum le poids de tous les éléments renvoyés au client. Selon le site HTTP Archive, pour le top 1000 actuel des sites web, le poids total d’une page fait en moyenne 1137 Ko dont 204 Ko pour le JavaScript, 36 Ko pour le code CSS, 46 Ko pour le code HTML et 614 Ko pour les images.

Concernant le code HTML, CSS et JavaScript, le site n’utilise pas de progiciel ou de thème. Seule la librairie Telerik (basée sur jQuery) est utilisé pour les composants d’interfaces comme les grilles, les calendriers, les sélecteurs de dates, les onglets…
Nous avons donc un code HTML, CSS et JavaScript réduit naturellement car écrit spécifiquement pour les besoins du site.

Minify & GZip CSS

Le code CSS est minifié, c’est à dire que l’ensemble des commentaires ont été supprimés ainsi que les éléments non nécessaires comme les espaces, les points-virgules, les retours à la ligne…

L’outil en ligne YUI Compressor permet de réduire facilement le code CSS tout en garantissant les mêmes fonctionnalités.

Ensuite le code est gzippé automatiquement par le serveur et renvoyé au navigateur qui le décompressera.

Ces techniques ont permis de réduire le code CSS de 99,4 Ko à 79,1 Ko une fois minifié puis enfin à 25,3 Ko une fois compressé soit un gain de 74,1 Ko !

Minify & GZip JavaScript

Côté JavaScript, nous passons de 595,7 Ko à 259,6 Ko une fois minifié puis enfin à 83,6 Ko une fois compressé soit un gain de 512,1 Ko !

Minify HTML et réduction du code HTML

La minification du code HTML n’est pas une opération facile car un retour chariot ou un espace est interprété et affiché par le navigateur. Supprimer un espace ou un retour chariot peut donc avoir des conséquences sur votre affichage.
Une petite optimisation a cependant été faite en supprimant les tabulations et espaces en début de ligne ainsi que les lignes vides.

Le site n’utilise pas HTML5 pour des questions de rétrocompatibilité (et pour éviter de charger un script en plus) mais charge quand même le doctype HTML5 car les navigateurs récents utilisent un moteur HTML5 plus rapide que le moteur HTML4.

Le code HTML est sémantique avec peu de code de structure. Ceci a permis de réduire le poids de l’HTML tout en ayant un bon ratio contenu/structure.

Enfin, le code HTML final est renvoyé compressé au navigateur client.

Réduire le poids des images

Toutes les images utilisées sur le site ont été générées à la bonne taille. Nous voyons encore trop souvent, pendant nos audits de sites, des images trop grandes et réduites dans le code HTML ou CSS. Nous avons donc vérifié que toutes les images étaient fournies à leur taille d’affichage (et ne nous parlez pas d’écran retina svp).

Ensuite, toutes les images ont fait un tour dans un outil d’optimisation en ligne pour réduire leurs poids au maximum sans impacter leur qualité.

Nous vous conseillons l’excellent outil Kraken Image Optimizer pour optimiser vos images en ligne.

Images des camping-cars

Le site CampiLoc, comme tout site d’annonces en ligne, propose aux propriétaires d’uploader des images pour agrémenter leurs annonces.
Les images chargées par les propriétaires sont des images lourdes et non optimisées pour le web.

Plutôt que rajouter des contraintes de taille et de poids aux propriétaires, l’idée a été de garder les originaux chargés par les propriétaires et de régénérer à la demande, selon la page du site, des images optimisées à la bonne taille pour qu’elles soient les plus légères possibles.

Réduire le nombre de requêtes HTTP

L’étape suivante est de réduire le nombre de requêtes effectuées par le navigateur. Selon le navigateur le nombre de requêtes maximum effectuées en parallèles est variable mais ce nombre n’est jamais important. De plus le délai peut être long (surtout avec une connexion mobile) entre la demande de téléchargement d’un nouvel élément et le début du téléchargement de cet élément. Il est donc recommandé de combiner les requêtes pour réduire au maximum leur nombre nécessaires à l’affichage de la page.

Combiner le code CSS & JavaScript

L’ensemble du code CSS est combiné côté serveur et renvoyé côté client avec dans le nom du fichier combiné avec un hash des noms de fichiers CSS originaux (nous verrons plus loin pourquoi ce hash est important).
La même technique est utilisée pour combiner le code JavaScript.

Nous avons donc réduit le nombre de fichiers pour passer de 10 fichiers CSS à un seul fichier et de 13 fichiers JavaScript à un seul fichier !

Utilisation de sprites pour les images

Les images utilisées par le code CSS doivent être regroupées dans un sprite, c’est à dire une seule grosse image combinant toutes les petites images. Avec un sprite CSS il suffit simplement de modifier la propriété background-position de l’image combinée pour déplacer la zone visible pour avoir l’image finale souhaitée (il faut voir le bloc HTML comme une fenêtre qui ne rend visible qu’une partie du sprite qui est déplacé comme on le souhaite).

Les composants Telerik utilisent déjà un sprite CSS.
Nous avons donc créé un sprite supplémentaire pour l’ensemble des images spécifiques au site CampiLoc. Nous vous recommandons de construire vos sprites « à la main » car l’utilisation d’un outil automatique créera des zones vides qui augmentent légèrement le poids du sprite.
Ce sprite est ensuite passé entre les mains de Kraken pour réduire son poid au maximum .

Cas particulier de la carte de France

Le site CampiLoc propose une carte de France pour faire une recherche rapide des camping-cars disponibles pour une région de France. L’utilisation de la balise Map et Area permet facilement d’avoir des urls différentes (et donc des recherches différentes) en fonction de la zone cliquée sur la carte. Par contre il est important d’avoir un retour utilisateur au survol de la carte pour comprendre quelle recherche va être lancée en fonction de la zone activée.

La méthode habituelle pour changer une image en fonction du survol est de le faire au hover en CSS. Par contre en CSS impossible de récupérer l’Area survolée pour modifier l’image en conséquence. Pour garder cette information, on passe donc par du code JavaScript.

La solution en JavaScript est de modifier l’image en fonction de la zone survolée mais pour éviter le chargement de la nouvelle image il faut précharger l’ensemble des images pour chaque région (c’est la technique employée par leboncoin par exemple).

Comme évoqué précédemment, nous voulons éviter de charger trop d’objets. Nous avons donc créé un sprite contenant l’ensemble des survols (et ne contenant que les survols en orange) que nous positionnons au-dessus de la carte normale. Au survol de la carte, un code JavaScript modifie le background-position pour avoir la bonne image au survol.

Voici un extrait du code JavaScript :

$('area[id^="Map"]').hover(
	function () {
		var nb = ($(this).attr('id').substr(3, 5));
		$("#RealMap").css("background-position", "0 -" + 274 * nb + "px");
	},
	function () {
		$("#RealMap").css("background-position", "0 0");
	}
);

Définir un cache client pour l’ensemble des objets

L’ensemble des éléments CSS, JavaScript et images du site CampiLoc ont un cache client positionné pour 1 an. Ceci permet au visiteur de n’avoir à charger que le code HTML une fois la première page chargée.

Pour invalider le cache client d’un élément, il suffit de renommer le fichier source, dans le cas d’un fichier CSS ou JavaScript le hash calculé par le serveur change et le navigateur chargera le nouveau CSS ou JavaScript combiné dans son cache.

Quelques optimisations complémentaires et statistiques finales

En vrac, voici quelques optimisations supplémentaires appliquées sur le site :

• Plus de redirection DNS.
• Le chargement du fichier CSS combiné a été placé dans le <head> de la page et le fichier JavaScript juste avant la balise fermante </body>.
• Le fichier favicon a été optimisé et peut-être mis en cache par le navigateur.
• Les tailles des images de contenu ont été définies dans le code HTML.

Avec le code JavaScript Google Analytics, le chargement de la page d’accueil complète représente au total 406,2 Ko pour 19 requêtes HTTP.

Le site obtient donc le grade A (92/100) sur YSlow et la note de 96/100 sur Page Speed.

Conclusion

L’ensemble de ces optimisations permet au site CampiLoc d’avoir un poids assez faible et un chargement rapide des ses pages. Nous pensons que ces optimisations améliorent l’expérience utilisateur et contribueront ainsi à améliorer le positionnement du site sur Google.

Vous pouvez analyser votre propre site pour regarder le poids des éléments, le nombre de requêtes HTTP et le cache client. Vous pouvez aussi consulter les conseils de Yahoo et les conseils de Google.
Si vous souhaitez vous aussi un audit complet de votre site n’hésitez pas à nous contacter.

L’amélioration des performances d’un site est un travail quotidien. Il reste bien sûr des optimisations possibles, si vous voyez un point qui pourrait être corrigé n’hésitez pas à le partager dans les commentaires.

- See more at: http://www.kiwano.fr/performance-site-web-vitesse/#sthash.uBfgq5gt.dpuf