Ceci est un brouillon, sur les vitesse de chargement des pages en fonction du code CSS

J’ai étudié les temps de chargement des CSS :

La feuille de style apporte un gain de performance du temps de chargement de la page si :

Solution la plus performante :

La CSS est un fichier externe et
La CSS est dans le cache du navigateur (avec Cache-control)
Il n’est pas possible de savoir qu’un fichier est dans le cache, la premiere visite sur le site ne peu pas faire confiance à cette solution. (cf liens 2)

Solution 2 :

La CSS est un fichier externe et
Temps du téléchargement + parsing du HTML de la page > Temps de Connexion au serveur de la CSS ( incluant l’éventuel dns?) + Taille de la css
(Taille de la CSS vaux 0.2KB si la CSS si cache Entity Tags Or Last-Modified )

Cela reste valable si vous n’utilisez pas de balise IMG.
Les téléchargement des images commence pendant le téléchargement du HTML, si vous n’avez pas de CSS pour FF et IE (chrome ne le fait pas par contre)

Ce cas est donc rare, il peut arriver si le HTML est servit d’un point central et la CSS est sur un CDN. Le HTML sera long à télécharger et la CSS rapide.

Solution 3 :

Mettre la CSS dans votre page web
Cela alourdit l’encodage gzip et la taille de la page, il faut bien optimiser et ne mettre que le css nécéssaire.

Solution 4 :

Un simple fichier CSS :
Il se lance en parallele du HTML
Tant que ce téléchargement n’est pas finit :
Les images de fond ne commencerons pas a ce charger
IE ne téléchargera pas non plus les <img/>
Cela utilisera la solution 1 une fois en cache.

Conclusion :
A la Première visite de l’utilisateur mettez la CSS dans le HTML
Utiliser Javascript pour charger le fichier
Utiliser le cache-control sur le reste de la visites

Liens de réfléxions sur l’inclusion du code CSS dans la page
Liens de refléxion sur les caches