Comment connaître les fonctions javascript au-dessus du pli?
Il existe de nombreux outils pour obtenir des règles CSS au-dessus du pli (chemin css critique), comme this un. Mais comment savoir quelles fonctions javascript sont nécessaires au-dessus de la zone de repliement?
La situation n'est pas rare: on a 10-20 fichiers css et javascript et on veut les déplacer jusqu'au bout du fichier html. Lors du déplacement de fichiers CSS, est-il assez simple de savoir quels styles doivent rester dans la tête, mais comment se fait-il avec les javascripts?
La raison pour laquelle les fichiers Javascript bloquent le rendu est qu'ils peuvent manipuler le DOM (HTML), et c'est pourquoi les navigateurs attendent que les fichiers Javascript soient téléchargés et a été exécuté avant que le navigateur ne reprenne le focus sur les éléments suivants de la file d'attente.
Cela dépend au cas par cas, mais vous devez commencer par déplacer toutes les balises de script à la fin du corps pour voir comment la page se charge. Je recommande d'utiliser un accélérateur réseau pour ralentir la 3G dans Chrome pour ce test. Si vous constatez des modifications importantes du navigateur après avoir suivi cette étape, cela signifie que certains des éléments situés au-dessus du pli reposent sur un fichier javascript pour un rendu initial correct.
Quelques suggestions sur les moyens courants de repérer les scripts que vous devez déplacer en tête et les rendre bloquant le rendu pour éviter les effets visuels désagréables:
si vous avez un carrousel au début, vous voudriez passer à la tête du script du carrousel et de toutes les bibliothèques dont il dépend (jQuery apparaît souvent comme une dépendance).
si un menu de hamburger scintille pour être visible et ne se cache qu'après le chargement des scripts, cela signifie qu'il dépend également de javascript et que vous devez déplacer le script correspondant (et ses dépendances) vers la tête.
Si vous avez du mal à trouver quel fichier JS touche ces éléments, essayez de rechercher dans ces fichiers le sélecteur d’élément OR tous les attributs qui vous distinguent lors de l’inspection de l’élément.
La découverte peut être effectuée en supprimant des fichiers JS individuels afin de déterminer lequel est à l'origine du mauvais comportement de cet élément spécial, ce qui vous donne un bon point de départ.
Il n’existe pas d’outil automatisé pour cela, car les scénarios d’utilisation peuvent être très prudents, c’est toujours un processus d’essai et de test pas à pas.
Vous pouvez également tiliser l'attribut defer sur les balises de script .
Lorsque vous utilisez l'attribut différé, ces balises de script ne bloquent plus le rendu, quel que soit leur emplacement (en tête ou à la fin du corps).
Le report a essentiellement le même effet que de déplacer les balises de script à la fin du corps et est bien pris en charge - prise en charge du navigateur d'attributs
Vous voudrez déplacer le contenu de blocage de rendu en haut de vos pages tout en mettant autant de javascript et de css en bas de vos pages qui ne bloquent pas le rendu du contenu situé au-dessus du pli.
La plupart des sites Web chargent leur css en haut de leur page car il contient un style essentiel au reste de la page. Mais si css n’est utile que pour le pied de page d’une page, il est judicieux de le charger en bas du code HTML si cela prend un certain temps à l’utilisateur pour faire défiler la page vers le bas. Cela peut réellement rendre votre site plus rapide.
Le langage Javascript est similaire, sauf qu'il n'est généralement pas nécessaire qu'une page affiche son interface visuelle initiale à l'utilisateur. En conséquence, les sites Web chargent généralement cela au bas du code HTML afin que la page puisse se charger plus rapidement.
Lorsque le code JavaScript est essentiel au rendu visuel de votre page, en particulier au-dessus du pli, vous souhaitez certainement charger le code javascript en haut de vos pages.
Le code HTML est classé dans l'ordre chronologique de manière à ce que le code antérieur soit téléchargé et traité par le navigateur avant le code ultérieur. Donc, vous voulez mettre le code nécessaire pour charger votre page plus haut sur la page, et le code qui n’est pas aussi important en bas.