temps de lecture rapporté dans l'onglet Firebug net

Question

Voir cette capture d'écran de l'onglet Net Firebug:

http://www.scdi.org/~avernet/try/firefox-times.png

Je sais que:

• Le temps entre 1 et 2 est le temps pris par mon application pour générer le code HTML et pour les données à faire son chemin vers le navigateur.
• L'heure entre 3 et 4 est le temps pris par mon code d'initialisation JavaScript qui s'exécute sur DOMContentLoaded.

Mais qu'en est-il du temps entre 2 et 3? Est-ce que c'est le temps que Firefox prend pour "rendre" la page? Dans ce cas, c'est assez significatif (environ 1,5 seconde). Comment optimiser cette partie?

Answer 1

Le temps entre 2-3 est l'analyse du navigateur et le rendu du contenu du fichier téléchargé entre 1-2. Cela inclut tout le HTML et tout CSS ou javascript en ligne. Les moyens les plus simples pour raccourcir cela sont 1) envoyer moins de données pour que le navigateur analyse 2) assurez-vous que votre HTML/CSS valide et 3) faites attention aux règles/expressions CSS vraiment lentes.

En général, la plupart des gens ne se focalisent pas sur le temps nécessaire au navigateur pour rendre complètement la page, mais sur la rapidité avec laquelle il commence à effectuer le rendu côté client. Généralement appelé rendu progressif, il permet au navigateur de commencer à afficher des parties de la page avant que la page entière n'ait été rendue. L'une des raisons les plus courantes de ce que cela n'arrive pas est de mettre le contenu de la page dans un qui empêche le navigateur de le rendre jusqu'à ce qu'il soit complètement analysé. This post a quelques conseils décents sur la façon de le faire. Vous voulez probablement regarder l'extension Firefox YSlow, il peut vous donner quelques conseils décents sur la façon de rendre votre site web plus rapide.