Requêtes HTTP et vitesse de chargement d’un site

La vitesse de chargement d’un site est un facteur pris en compte dans le classement de Google. Plus précisément, la vitesse d’affichage du contenu au dessus de la ligne de flottaison. Si il existe plusieurs petites astuces pour accélérer la vitesse de chargement d’une page, nous parlerons aujourd’hui du nombre de requêtes HTTP. Pour ceux qui ne savent pas encore ce qu’est une requête HTTP, j’ai écris un article présentant le fonctionnement d’internet et des sites web.

L’obsession de la ligne de flottaison

Commençons d’abord par définir ce qu’est la ligne de flottaison. Placez vous en haut de la page et regardez votre écran. Ce que vous voyez à l’écran est situé au dessus de la ligne de flottaison. Ce qui se trouve plus bas, ce que vous ne pouvez voir qu’en scrollant vers le bas, est en dessous de la ligne de flottaison. Autrement dit, le bas de votre écran est la ligne de flottaison.

Google est obsédé par cette ligne de flottaison, et vous devriez aussi. Un fichier HTML est un fichier texte, lu de haut en bas par votre navigateur. Ce dernier va traiter ce qu’il voit (css et js à charger, textes, images …) dans l’ordre du document. Il n’attend pas d’avoir tout chargé pour commencer à afficher. Il y a donc plusieurs étapes entre la page blanche du chargement et le moment où l’affichage de la page est terminé. Vous devez faire en sorte que du contenu apparaisse rapidement sur le navigateur de votre visiteur, remplir rapidement ce qui se trouve au dessus de la ligne de flottaison.

Faisons un peu de cuisine

Comme d’habitude, nous allons illustrer la logique avec une situation quotidienne. Imaginez que vous ayez très envie de faire des cookies (parce que les cookies c’est bon, surtout quand la pâte n’est pas encore cuite), mais que vous n’avez absolument rien chez vous pour en faire. Pas de sucre, pas d’œufs, pas de chocolat. Bref, des courses s’imposent ! Imaginons deux scénarios.

Dans le premier, vous vous comportez un peu comme un navigateur. Vous voyez qu’il vous faut de la farine, vous allez au supermarché pour en acheter, et vous reprenez où vous en étiez. Vous retournez au supermarché pour acheter des œufs, avant d’y retourner pour du chocolat et ainsi de suite. Vous y passez la journée.

Second option, vous arrivez au supermarché et on vous donne un panier avec tout ce qu’il faut pour faire vos cookies. Vous y passez tout de suite beaucoup moins de temps.

Diminuez le nombre de requêtes HTTP

Vous avez compris la logique ? Un aller retour, une seule requête pour tout ce dont on a besoin. Dans l’idéal, une seule requête pour nos fichiers CSS. Ou plus, mais pas cinquante. Plus vous aurez de requêtes HTTP dans votre balise head, plus votre site sera long à charger. Idem en dehors du head, mais c’est un peu moins grave. Certains outils, comme Assetic, permettent aux développeurs de continuer à travailler simplement sur plusieurs fichiers et de ne regrouper ces fichiers qu’en production.

Retardez certaines requêtes HTTP

Tous les appels de ressources n’ont pas besoin de se faire dans le head. Je pense notamment aux appels de fichiers JS, mais aussi aux fichiers CSS ! Pensez aussi en terme de poids. Par exemple, avez-vous vraiment besoin de charger vos icônes tout de suite ? Probablement pas.  Faut-il forcément envoyer un fichier très lourd avec tout votre CSS et toutes vos icônes en une seule fois ? La bonne solution peut être de condenser le design important (votre framework CSS de base et votre fichier CSS perso) en un seul fichier dans le head, puis de charger toutes les icônes plus tard.

Comment retarder le chargement des fichiers CSS ?

Rassurez vous, je ne vais pas vous abandonner comme ça dans la nature :) Code fourni directement par Google himself ! (à placer dans la partie basse de votre document HTML)

<noscript id="deferred-styles">
	<link href="monfichier.css" rel="stylesheet" />
</noscript>

<script>
	var loadDeferredStyles = function () {
		var addStylesNode = document.getElementById("deferred-styles");
		var replacement = document.createElement("div");
		replacement.innerHTML = addStylesNode.textContent;
		document.body.appendChild(replacement)
		addStylesNode.parentElement.removeChild(addStylesNode);
	};
	var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
		window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
	if (raf)
		raf(function () {
			window.setTimeout(loadDeferredStyles, 0);
		});
	else
		window.addEventListener('load', loadDeferredStyles);
</script>

On résume

• Regroupez vos fichiers CSS en un minimum de fichiers
• Idem pour vos JS
• Ne chargez pas vos fichiers JS dans la balise head
• Retardez le chargement de certains fichiers CSS, comme les icônes

J’ai comme une petite faim …