Dossier Optimiser le temps de chargement : 2. HTML et requêtes HTTP

Publié par Gui dans Dossiers

Nous avons déjà vu comment optimiser le chargement d’une page web en travaillant correctement ses images, maintenant nous allons voir comment restructurer cette page pour grappiller encore quelques précieuses secondes de chargement.

1. Vos CSS en haut, vos Javascript en bas !

En plaçant vos fichiers de style en haut de vos pages, la navigateur aura plus de facilités à faire le rendu graphique de la page.

Par contre en ce qui concerne les fichiers javascript, il est préférable de les positionner en bas de page. La raison est simple, le navigateur ne peut faire que deux requêtes simultanées au serveur, pourquoi alors monopoliser une requête pour charger un fichier javascript relativement lourd au détriment de petites images ou portions de codes ?

D’autant plus que la plupart des scripts s’exécutent lorsque la page est complètement chargée, donc le fait de placer vos scripts en bas de page ne pose pas de problème.

2. Unifier et minimiser !

Economiser du code

Il est important de réduire le poids des fichiers à charger. Utilisez les raccourcis CSS, par exemple passer de :

#mon_div{
	padding-left:10px;
	padding-top:5px;
	padding-right:10px;
	padding-bottom:20px;
	font-size: 1em;
	line-height: 1.5em;
	font-weight: bold;
	font-style: italic;
	font-variant: small-caps;
	font-family: verdana;
}

à

#mon_div{
	padding:5px 10px 20px;
	font: 1em/1.5em bold italic small-caps verdana
}

En savoir plus sur les raccourcis CSS :

Unifier vos css et js et économiser de l’espace

Vous l’aurez compris, il est important de minimiser le nombre de requêtes faites au serveur. Il est donc déconseillé de charger beaucoup de styles css et javascript différents.

Il vaut mieux regrouper dans un seul fichier CSS l’ensemble de vos styles, même ceux qui ne sont pas utilisés, tous seront mis en cache par le navigateur. Je suis d’accord, on perd un peu en lisibilité et en flexibilité, mais le but ici est de gagner du temps de chargement !

Il suffit de « packer » tous ces fichiers afin de supprimer les espaces, les sauts de ligne etc … . Pour cela, il existe de nombreuses solutions comme :

Il y a également des plugins wordpress qui permettent de le faire pour vous !

Placer tous vos fichiers statiques sur un sous domaine

En mettant vos fichiers sur media.votredomaine.fr par exemple, vous gagnerez des requêtes serveur simultanées (celles ci se feront en parallèle). Toutes les informations de votre domaine principal (cookies notamment) ne seront pas transmises, cela apporte également un gain de temps supplémentaire.

Réduisez les redirections HTTP

Encore une fois, vous grappillerez ici quelques secondes !

Eviter au maximum les requêtes externes

Si vous utilisez beaucoup de services tiers (twitter, facebook, gravatar, flickr et j’en passe …) votre serveur devra à chaque fois résoudre une adresse DNS, effectuer des requêtes HTTP sur ces serveurs, récupérer les contenus, images, vidéos etc … Cela représente un gros trafic.

Pour résumer

  • Réorganisez votre page HTML
  • Unifiez et minimisez vos fichiers CSS et Javascript
  • Utilisez des domaines différents
  • Éviter les redirections HTTP et requêtes externes

Si vous faites l’effort d’appliquer ces différentes méthodes, vous verrez que vous avez déjà gagné quelques secondes de temps de chargement.

Pour vérifier cela, vous pouvez utiliser Firebug avec YSlow et Page Speed.

2 commentaires

  1. Jack NUMBER

    Merci pour ce post.
    Je met en pratique naturellement la plupart des conseils donnés ici mais les poser à plat tous ensemble permet de ne pas les oublier.

  2. Anthony

    Merci pour cette piqure de rappel,.

    Pour le sous domaine dédié, perso je fais ça pour partager des librairies entre différents sites ( css partagés, js, médias, … ) mais en dehors de l’avantage de centraliser ce qui doit l’être, je n’ai pas vus de différence concernant les perf’ ( en même temps, j’ai pas 10.000 visites / jours )

Laisser une réponse


Post shadow