À propos des conseils de chargement différé de JavaScript_javascript

Le chargement paresseux de JavaScript fait partie de ces problèmes sur le Web qui peuvent vous rendre fou en essayant de trouver une solution.

Beaucoup de gens disent "puis utilisez defer" ou "async", et certains disent même "puis mettez votre code javascript en bas du code de la page".

Aucune des méthodes ci-dessus ne peut résoudre le problème du chargement de js externes une fois la page Web entièrement chargée. La méthode ci-dessus vous amènera également occasionnellement à recevoir des avertissements de « chargement retardé du javascript » de la part de l'outil de test de vitesse des pages de Google. La solution ici sera donc la solution recommandée sur la page d'aide de Google.

Comment charger paresseux JavaScript

Ce qui suit est le code recommandé par Google. Ce code doit être placé avant la balise (près du bas du fichier HTML). De plus, j'ai mis en évidence le nom du fichier JS externe.

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Que fait-on ici ?
Ce code signifie attendre que l'intégralité du document soit chargée avant de charger le fichier externe "defer.js".

Consignes spécifiques

1. Copiez le code ci-dessus

2. Collez le code avant la balise du HTML (près du bas du fichier HTML)

3. Modifiez "defer.js" en le nom de votre fichier JS externe

4. Assurez-vous que le chemin de votre fichier est correct. Par exemple : Si vous saisissez uniquement « defer.js », alors le fichier « defer.js » doit être dans le même dossier que le fichier HTML.

Où ce code peut-il être utilisé (et où ne peut-il pas être utilisé)

Ce code ne chargera pas le fichier JS externe spécifié tant que le document n'est pas chargé. Par conséquent, le code JavaScript qui dépend du chargement normal de la page ne doit pas être placé ici. Au lieu de cela, le code JavaScript doit être séparé en deux groupes. Un groupe est le code javascript qui est chargé immédiatement parce que la page en a besoin, et l'autre groupe est le code javascript qui fonctionne après le chargement de la page (comme l'ajout d'un événement de clic ou d'autres choses). Le code JavaScript qui doit attendre le chargement de la page avant de s'exécuter doit être placé dans un fichier externe puis importé.

Par exemple, sur cette page, j'utilise les fichiers ci-dessus pour un chargement paresseux : Google Analytics, Viglink (comment je gagne de l'argent) et le badge Google qui apparaît en bas (mes réseaux sociaux). Pour moi, il n'y a aucune raison de charger ces fichiers lors du chargement initial de la page, car il n'est pas nécessaire de charger le contenu non pertinent ci-dessus au stade initial. Peut-être avez-vous un fichier de même nature sur votre page. Voulez-vous alors que les utilisateurs attendent que ces fichiers se chargent avant de voir le contenu de la page Web ?

Pourquoi ne pas utiliser d’autres méthodes ?

Insérer du code directement, placer des scripts en bas et utiliser « defer » ou « async » ne peut pas atteindre l'objectif de charger d'abord la page, puis de charger le JS, et ils ne fonctionneront certainement pas de manière cohérente sur tous les navigateurs.

Pourquoi est-ce important ?

Son importance est due au fait que Google utilise la vitesse des pages comme l'un des facteurs de classement et que les utilisateurs souhaitent également que les pages se chargent rapidement. C’est également très important pour l’optimisation des moteurs de recherche mobiles. Google mesure la vitesse de la page en fonction du temps nécessaire à son chargement initial. Cela signifie que vous devez obtenir l'événement de chargement de la page le plus rapidement possible. Le temps de chargement initial de la page est la façon dont Google évalue la qualité de vos pages Web (et n'oubliez pas que les utilisateurs attendent que la page se charge). Google promeut et recommande activement d'organiser le contenu non pertinent ci-dessus par ordre d'importance et de garder toutes les ressources (js, CSS, images, etc.) hors du chemin de rendu critique, et cela en vaut la peine. Si cela plaît aux utilisateurs et rend Google heureux, vous devriez le faire.

Exemple d'utilisation

J'ai créé une page où vous pouvez voir ce code utilisé.

Exemples de fichiers à tester

D'accord, pour illustrer, j'ai réalisé quelques exemples de pages à tester. Chaque page fait la même chose. Il s'agit d'une page HTML ordinaire, contenant un script javascript qui attend 2 secondes puis affiche "hello world". Vous pouvez tester ces fichiers et vous verrez qu'il n'y a qu'une seule méthode et que son temps de chargement exclut le temps d'attente de 2 secondes.

Page pour insérer directement le script – Cliquez ici

Pages avec des scripts externes utilisant "defer" – Cliquez ici
Pages utilisant le code de parrainage ci-dessus – Cliquez ici

Points clés

La priorité absolue devrait être de fournir du contenu aux utilisateurs le plus rapidement possible. Et nous n'avons jamais réfléchi à la manière de traiter notre code javascript. Mais les utilisateurs ne devraient pas être obligés d’attendre le contenu d’un script insignifiant. Peu importe à quel point votre pied de page est cool, il n'y a aucune raison pour qu'un utilisateur qui ne fait jamais défiler jusqu'au pied de page charge les fichiers JavaScript qui le rendent cool.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.