Toujours dans un soucis d'amélioration de la vitesse d'affichage des pages web, je suis face à un petit dilemme : faut-il mieux intégrer les CSS et JS directement dans la page HTML ou faut-il les garder en fichier séparés ?

En ce qui me concerne, ça ne changera rien : les fichiers seront physiquement séparés, car j'intègre les fichiers via PHP. C'est pour le chargement des pages que ça va changer beaucoup de choses. Avec les deux choix ci dessus, j'ai des avantages et des inconvénients :

fichiers séparés par type un seul fichier tout en un
Les PLUS :
  • Fichiers séparés : possibilité de faire un lien vers le CSS ou le script.
  • Conforme aux recommandations du W3C.
  • Code plus propre.
  • Plus lisible si vous regardez le code source.
  • Possibilité de mise en cache du CSS/JS : gain de vitesse et de bande passante.
  • On peut faire un fichier CSS pour plusieurs pages.
Les MOINS :
  • Sur mon hébergeur : la compression Gzip des pages ne peut se faire pour fichiers externes.
  • D'où : page moins légère.
Les PLUS :
  • Si j'intègre : le CSS/JS sera lui aussi compressé : gain en poids de la page (supérieurs à 10%).
  • Donc : page plus légère (affichage plus rapide, mais aussi ma bande passante qui diminue :-)
  • Moins de requettes HTTP : plus rapide pour vous et moi.
Les MOINS :
  • Code source moins propres.
  • Le CSS/JS sera télécharger à chaque visite du site : pas de mise en cache du CSS chez vous.
  • D'où : téléchargement de code inutile : le gain gagné par GZip est reperdu à la longue.

Vous constatez que chaque solution a ses avantages et inconvénients (comme toujours). On peut voir une chose cependant, c'est que c'est une question de sémantique (code propre, etc.) versus une question de performances techniques. Je dois donc choisir.

Si je voulais pousser encore plus, je devrais voir en fonction des visiteurs : sont-ce les mêmes qui reviennent (dans ce cas, les fichiers séparés est mieux : mise ne cache) ou est-ce je n'ai que des visiteurs uniques (auquel cas, l'intégration est mieux).
Les visiteurs visitent-ils plusieurs pages (et il vaut mieux séparer) ? Ou ne passent-il que sur une page ?

Bah, même si je chercherais une solution idéale (Gzip sur les fichiers externes qui marche pour mon hébergeur), je laisse comme c'est : les fichiers séparés. C'est pas comme si je manquais critiquement de bande passante ou si la page était super lourde. Mais j'ai trouvé intéressant de voir un peu la comparaison, et je voulais vous montrer ça.

6 commentaires

gravatar
Le Hollandais Volant a dit :

@Fayçal : idem, tout est séparé. Oui, mieux faut faire un seul fichier du CSS et un des scripts (pour une page en tout cas, ensuite sur l'ensemble du site, on peu en avoir plein). C'est pour diminuer le nombres de requetes HTTP.

@Alz, merci pour les liens ! En fait, j'ai déjà le Gzip sur le PHP (=html) directement dans les pages, mais comme mon hébergeur dépend d'OVH, et que OVH ne fait pas comme les autres en ce qui concerne la compression Gzip, utiliser un fichier .httaccess pour ça me donne une erreur 500… :(
J'ai tenté aussi le coup du fichier php qui importait le CSS et le renvoyait ensuite en compressé au navigateur… ça marche pô :/

M'enfin, je trouverais bien une solution.

gravatar
Alz a dit :

Changer d'hébergeur ? :P

Sinon l'extension YSlow pour Firebug analyse et suggère des solutions pour optimiser le temps de chargement des pages web. (yslow que sous firefox pas sous chromium dommage..), ça m'a bien aidé.

gravatar
Knah Tsaeb a dit :

Je pense que la première solution est la meilleur à long terme. Comme le souligne Alz, dans un premier temps installe toi Yslow ou Page Speed, il te donnerons de précieuse piste pour optimiser ton site (comme de compresser tes fichiers CSS et JS (minify)).

Pour installer Yslow et/ou Page Speed tu aura besoin de Firebug

- Firebug
- Yslow
- Page Speed

gravatar
Le Hollandais Volant a dit :

Merci à vous deux !

Mais je ne changerais pas d'hébergeur, l'actuel est très bon :)
Pour YSlow, j'ai déjà quelques outils, comme GLMetrix ou l'outil fournit dans Google Webmaster (qui donne l'évolution de la performance, les liens morts, les pages à optimiser en priorité, etc.).

Bah, Google me dit que mes pages sont plus rapides que 90% des sites web, et GLMatrix m'affiche un 94 en vitesse, et 78 en Yslow (qui est due en grande partie des scriptes Google Adsence :p)
Autrement dit : mes pages sont suffisamment rapides (je pense) pour que je n'ai pas à m’inquiéter^^.

Si je trouve une solution, ce sera bien, mais y'a pas le feu^^

Les commentaires sont fermés pour cet article