Accélérer le chargement d’une page – réduire les requêtes HTTP

Les moteurs de recherche prennent en compte la vitesse de chargement des pages, comme critère de référencement. C’est un fait, plus vos pages sont rapides à charger, plus Google apprécie et vos visiteurs aussi par la même occasion. Il faut savoir qu’un internaute aura plus facilement tendance à naviguer longtemps sur votre site s’il est plus rapide à charger.

Ceux qui ont lu mon article sur Page Speed savent que cet outil, bien que très intéressant et utile, présente certaines limites. Il permet d’optimiser une page en fonction de son contenu,  mais ça ne veut pas forcément dire qu’elle sera très rapide à charger. Alors comment faire ? Il existe tellement de possibilités et solutions pour répondre à cette problématique, qu’il me faudrait plusieurs articles pour toutes les présenter. Je vais donc commencer par la première: la réduction des requêtes HTTP.

Une requête HTTP c’est quoi ?

HTTP est un protocole de transfert de données utilisé pour le web. Concrètement, ça veut dire que votre ordinateur va utiliser un certain nombre de critères, de paramètres et de chemins pour faire transiter les données du web vers votre machine. Pour plus d’infos, je vous invite à lire la définition de commentcamarche.net.

Ce qu’on appelle une requête HTTP est en fait une simple demande de contenu faite par votre navigateur. Par exemple, lorsque vous cliquez sur un lien, votre navigateur demande au serveur (qui contient le site sur lequel vous êtes) de lui envoyer le contenu de la page correspondant au lien cliqué. Il fait cette demande sous la forme d’une requête HTTP. Le serveur lui envoie ensuite une réponse HTTP, qui correspond aux données si l’utilisateur est autorisé à visiter la page. Sinon, il lui envoie un code erreur, correspondant au motif de refus (contenu non trouvé, pas d’autorisation, serveur surchargé… etc.).

Ces requêtes peuvent aussi être automatisées. C’est à dire qu’il n’est pas nécessaire de cliquer sur quelque chose pour que la requête soit effectuée. Par exemple, lorsque vous cliquez sur un lien, une page va se charger. Mais cette page envoie elle-même d’autres requêtes pour récupérer son contenu (images, vidéos, flash, sons, publicités…), ce qui augmente considérablement le temps de chargement.

Réduire le nombre de requêtes

Vous l’aurez compris, plus le nombre de ces requêtes est important, plus la page sera longue à télécharger. Pour améliorer la vitesse de navigation, il est important de limiter leur nombre. Imaginez-vous demander des renseignements à quelqu’un par e-mail. Pour lui poser 3 questions en lui envoyant 3 mails. Si vous ne lui en envoyer qu’un seul avec les 3 questions dedans, ça prendra moins de temps. C’est un peu la même idée ici.

Pour optimiser vos pages, je vous propose donc ces quelques conseils:

• Centraliser les fichiers css et js le plus possible. Plutôt que d’avoir un fichier css pour chaque widget de votre site par exemple, utilisez le même et insérez tout dedans. Même chose pour le javascript. Evidemment, vous ne pouvez pas centraliser les fichiers externes (les js de Google Analytics par exemple), mais faites-le au moins pour vos propre fichiers.
• Utiliser la techniques des sprites en css pour charger vos images. (Je vous propose ce générateur de sprites css pour vous aider)
• Limiter au maximum la publicité sur votre site. Une seule pub représente souvent plusieurs requêtes HTTP à elle seule (la pub elle-même, son css, son js, ses images…). D’ailleurs Google prend aussi en compte ce critère pour le référencement.
• Réduire au possible la quantité de fichiers externes à charger. N’utilisez que le strict nécessaire, nul besoin d’éléments superflus. Évitez, par exemple, de modifier le curseur de la souris, de mettre de la neige ou de la pluie sur votre site, d’avoir des images qui n’enrichissent pas réellement votre contenu… etc.
• Utiliser le css plutôt qu’une image autant que possible. Par exemple pour une bordure, plutôt qu’une image d’un pixel répété à l’infini, utiliser la propriété border. Si vous avez la possibilité de réaliser votre site en CSS3, sachez que vous pouvez faire énormément de chose avec (ombres, angles arrondis, courbes, animation…).
• Pour certaines images, vous pouvez utiliser les DATA-URI (pour un motif en arrière-plan par exemple). En intégrant l’image dans votre page sous la forme d’une chaine de caractères, vous économisez une requête http.

Tags: accélérer, améliorer, chargement, http, navigation, optimiser, page, rapidité, requête, temps, vitesse