Comment le chargement asynchrone améliore la vitesse de la page et les vitaux du Web de base

En tant que spécialistes du marketing, nous sommes souvent confrontés au défi de créer des sites Web rapides et réactifs tout en intégrant des éléments tiers comme les boutons de partage social, les outils d’analyse ou les données en temps réel. Ces outils peuvent avoir un impact significatif sur les performances, en particulier si elles sont chargées de manière synchrone.

Synchrone vs asynchrone

Il est essentiel de comprendre la différence entre le chargement synchrone et asynchrone si vous souhaitez optimiser à la fois pour la vitesse et l’expérience utilisateur. La façon dont vous gérez le chargement JavaScript – en particulier les scripts tiers – peut affecter directement les principaux vitaux du Web de Google (CWV), qui mesurent les performances du monde réel comme le temps de chargement, l’interactivité et la stabilité de la disposition.

Le visuel ci-dessous montre la différence:

Synchrone

Rendu de la page de blocage des scripts synchrones. Lorsqu’un script est inclus sans aucun modificateur, le navigateur doit arrêter d’analyser la page, télécharger le script et l’exécuter avant de continuer. Ce comportement peut entraîner des retards importants, en particulier lors du chargement du contenu tiers des réseaux sociaux, des serveurs d’annonces ou des plateformes d’analyse.

Asynchrone

Les scripts asynchrones, en revanche, permettent au navigateur de continuer à analyser Html Pendant que le script est téléchargé et exécuté en arrière-plan. Cela réduit l’impact sur le temps de rendu et aide le contenu critique à charger plus tôt.

Il existe deux approches principales pour charger les scripts de manière asynchrone:

1. Utilisation du navigateur soutenu async ou defer attributs
2. Injection de scripts une fois la page terminée le chargement (exécution post-charge)

Les deux approches aident à éviter de bloquer le contenu principal du rendu.

Pourquoi cela compte pour les vitaux du Web de base

Google Core Web Vitals Concentrez-vous sur trois domaines de performance:

• La plus grande peinture contenu (LCP): À quelle vitesse le contenu principal devient visible
• Premier retard d’entrée (Fid): Combien de temps la page répond à l’interaction des utilisateurs
• Shift de disposition cumulative (CLS): À quel point la disposition est stable lors du chargement

Les scripts synchrones nuisent aux trois. Ils retardent le chargement du contenu visible, des interactions de blocage et introduisent souvent des décalages de mise en page lorsque des éléments de chargement tardif comme les boutons sociaux ou les annonces sont injectés au-dessus du pli.

Les techniques asynchrones permettent aux scripts non critiques de se charger sans interférer avec le processus de rendu principal, en aidant vos scores CWV et, à leur tour, à vos performances de recherche.

Indigène async et defer Attributs

Les navigateurs modernes prennent en charge deux attributs clés qui vous permettent de charger JavaScript sans bloquer le reste de la page: async et defer. Les deux attributs sont ajoutés à un <script> Tag pour changer comment et quand le script est téléchargé et exécuté, mais ils se comportent différemment, et il est essentiel de choisir le bon en fonction de votre cas d’utilisation.

Que se passe-t-il sans aucun attribut?

Lorsque vous incluez un script comme celui-ci:

<script src="https://martech.zone/javascript-async/script.js"></script>

Le navigateur s’arrête d’analyser le HTML, récupère le script, l’exécute immédiatement, puis reprend en rendant le reste de la page. Cela bloque le chargement de la page, retarde le rendu de contenu et l’interaction des utilisateurs, en particulier mauvais pour les performances et les vitaux du Web de base.

Le async Attribut

<script async src="https://example.com/script.js"></script>

Avec asyncle navigateur télécharge le script en parallèle avec l’analyse du HTML. Cependant, dès que le script termine le téléchargement, il fait une pause HTML pour exécuter le script immédiatement.

Traits clés de async:

• Les scripts se chargent indépendamment et fonctionnent dès qu’ils sont prêts
• L’ordre d’exécution n’est pas garanti – quel script se charge d’abord en premier
• Mieux utilisé pour les scripts autonomes qui ne reposent pas sur d’autres scripts ou Dom éléments

De bons exemples: Scripts analytiques, balises de réseau publicitaire, suivi des pixels

Le defer Attribut

<script defer src="https://example.com/script.js"></script>

Avec deferle navigateur télécharge le script en parallèle comme asyncmais exploite son exécution jusqu’à ce que le HTML ait été entièrement analysé (juste avant le DOMContentLoaded incendies de l’événement).

Traits clés de defer:

• Les scripts se chargent en parallèle avec l’analyse HTML
• Les scripts s’exécutent dans l’ordre dans lequel ils apparaissent dans le HTML
• Idéal pour les scripts qui interagissent avec les éléments DOM ou qui dépendent les uns des autres

De bons exemples: Fichiers JavaScript de base de votre site, bibliothèques comme jquery.js suivi des scripts dépendants

Comparaison rapide

En comprenant et en utilisant correctement ces attributs, vous pouvez améliorer considérablement la vitesse perçue de votre site. Demandez toujours: Ce script doit-il s’exécuter immédiatement et dans l’ordre? Ou peut-il attendre que la page soit visible pour l’utilisateur?

Dans la mesure du possible, utilisez defer pour vos scripts et réserve async Pour les outils tiers isolés et non bloquants. Si un script n’offre aucune des options, envisagez de le charger manuellement à l’aide de JavaScript ou via Google Tag Manager une fois la page entièrement chargée.

Injection de script post-charge avec JavaScript

Pour contrôler complètement le chargement des scripts et éviter tout impact négatif sur les performances – vous pouvez les injecter une fois la page entièrement chargée.

(function() {
  function async_load(){
    var s = document.createElement('script');
    s.type="text/javascript";
    s.async = true;
    s.src="https://example.com/social-buttons.js"; // Replace with actual script URL
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  }

  if (window.attachEvent) {
    window.attachEvent('onload', async_load);
  } else {
    window.addEventListener('load', async_load, false);
  }
})();

Ce modèle garantit que le script ne s’exécute pas tant que tout le reste n’est pas entièrement chargé. Même si le script tiers est synchrone par nature, le charger de cette façon l’empêche de bloquer votre page.

Cas d’utilisation: Chargez les boutons de partage social, les scripts de tarification dynamique ou le suivi des pixels qui n’ont pas besoin d’être visibles immédiatement.

Exemple jQuery pour l’injection post-chargement

Si votre site utilise jqueryla même logique devient plus simple:

$(window).on('load', function() {
  $.getScript("https://example.com/social-buttons.js");
});

Ou injecter dynamiquement HTML:

$(window).on('load', function() {
  $("#placeholder").load("/ajax/live-count.php");
});

Cas d’utilisation: après le chargement de la page, insérez une statistique en direct ou un nombre d’utilisateurs dans un élément spécifique.

Google Tag Manager: chargement après la page Chargement

Google Tag Manager (GTM) Vous permet de configurer des balises à tirer une fois la page entièrement chargée, aidant à vous assurer qu’elles n’interfèrent pas avec votre LCP ou CLS.

Déclencheur chargé

1. Créer une balise HTML personnalisée: Collez votre script ou votre iframe: <script async src="https://example.com/social-buttons.js"></script>
2. Créer un déclencheur: Choisir Fenêtre chargée comme l’événement de déclenchement. Cela garantit que le script ne s’exécute pas tant que tous les actifs ne sont pas chargés.
3. Publiez vos modifications

Cas d’utilisation: Pixels de suivi de chargement, outils de contenu dynamique, ou même Test A / B scripts qui ne sont pas nécessaires pour le rendu initial.

Le mettre en pratique

Sur Martech Zone, nous avons utilisé cette approche exacte pour différer tous les scripts tiers non essentiels. Auparavant, si la source du script était en retard, la charge de page entière souffrirait. Maintenant, avec le chargement asynchrone et l’exécution post-chargement, le contenu de base rend rapidement et les fonctionnalités sociales se chargent par la suite sans affecter les performances ou la stabilité.

Nous avons vu les vitaux du Web de base s’améliorer et l’engagement des utilisateurs augmenter, car les visiteurs peuvent interagir avec la page beaucoup plus tôt.

Conclusion

Si votre site Web charge les scripts de manière synchrone, surtout des scripts – vous nuirez probablement à vos performances et à votre classement. Les performances Web modernes consistent à hiérarchiser l’expérience utilisateur: rendre d’abord, améliorer deuxième.

Le chargement asynchrone et l’injection de script post-charge sont des techniques puissantes pour équilibrer la fonctionnalité avec la vitesse. Que vous écriviez JavaScript à la main, que vous tirez parti de JQuery ou que vous configuriez Google Tag Manager, il existe des moyens accessibles d’optimiser les performances de votre site – sans abandonner les intégrations essentielles.