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

10 avril 2011 | Par Christophe-Chaudey | Astuces

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 ?

location_httpHTTP 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 technique 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: , , , , , , , , , ,

3 commentaires pour “Accélérer le chargement d’une page – réduire les requêtes HTTP”

  1. G. dacunto dit :

    Très bon article, de toute façon, comme je l’ai expliqué sous divers pseudos ici, je suis complètement fan de l’optimisation de site web, j’estime qu’il n’est jamais assez optimisé et qu’il reste toujours un point à améliorer, pour une meilleure expérience des utilisateurs et des robots.

    Réduire les requêtes HTTP est un bon moyen d’accélérer le temps de chargement des pages et réduire la charge serveur, on peut y procéder en unissant par exemple plusieurs fichiers CSS ou plusieurs images sur la même image (utilisant le CSS sprite comme expliqué dans l’article).

    Mais ça ne se limite pas là.
    Si vous faites du SEO, par exemple, et que vous devez ajouter une image à votre description, veillez à ne pas mettre l’URL vers le fichier présent sur votre serveur.
    En effet, à chaque fois que l’image sera appelée pour afficher la page (même dans des résultats de recherches), l’image se trouvera sur votre serveur et le sollicitera.

    Si vous imaginez maintenant que vous êtes inscris dans 500 annuaires, cela vient solliciter inutilement votre serveur un grand nombre de fois.

  2. Grooveek dit :

    Un petit lien vers un outil gratuit qui permet de suivre au cours du temps l’évolution du nombre des requêtes HTTP, ainsi que les temps de chargement de chaque requête : http://www.monitoring-transactionnel.com/performance (c’est en libre service, pas besoin de rentrer ses coordonnées)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recevoir une notification de réponse à votre commentaire.