Impact du code tiers

Qu'est-ce que le code tiers ?

Le code tiers est l'ensemble des scripts  provenant d'autres sites et plus précisément de CDN (Réseau de diffusion de contenu) pouvant être directement intégrés à la page. Ces scripts sont dans la plupart des cas indispensables au bon fonctionnement de celle-ci. Ils servent, par exemple, à analyser le traffic, fournir des boutons de partage pour les réseaux sociaux, mettre en place de la publicité etc.

Pourquoi est-il important de minimiser son impact ?

Les scripts tiers apportent un ensemble de fonctionnalités utiles aux sites WEB mais leur utilisation peut également dégrader les performances de la page si ceux-ci sont nombreux et non optimisés. Les aspects pouvant être impactés sont :

• le délai de chargement du fait de leur poids et des ressources sous-jacentes qu'ils téléchargent
• le délai du rendu du fait d'un blocage éventuel provoqué par l'attente de ressources critiques ou d'une sollicitation du navigateur trop importante
• le délai d'intéractivité du fait de l'analyse, le compilation et l'exécution du code JavaScript nécessaire

Comment le minimiser ?

Au delà d'un délai de blocage de 250ms provoqué par du code tiers, il est nécessaire d'intervenir et de réduire son impact sur les performances de la page :

• différer le chargement des scripts grâce aux attributs "defer" ou "async" pour éviter le blocage du rendu

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

• charger les scripts dynamiquement via du code JavaScript lorsqu'ils sont utiles lors d'intéraction uilisateur

function charger(event) {
    event.target.removeEventListener(event.type, arguments.callee);

    var script = document.createElement('script');
    script.src = 'https://cdn.exemple.com/script.js';
    document.head.appendChild(script);
}
document.getElementById("bouton").addEventListener("click", charger);

• héberger le script sur votre serveur si le serveur du fournisseur est lent

<script src="https://cdn.exemple.com/script.js"></script>
<script src="/js/script.js"></script>

• retirer les scripts non essentiels

<script src="https://cdn.exemple.com/inutile.js"></script>

• préconnecter les origines afin d'initier une connexion précoce aux origines externes

<link rel="preconnect" href="https://cdn.exemple.com">