Third-party code impact

What is the third-party code ?

Third-party code is all the scripts from other sites and more precisely from CDN (Content Delivery Network) that can be directly integrated into the page. These scripts are in most cases essential to the proper functioning of the page. They are used, for example, to analyze traffic, provide sharing buttons for social networks, set up advertising, etc.

Why is it important to minimize its impact ?

Third-Party scripts bring a set of useful features to websites but their use can also degrade the page performance if they are numerous and not optimized. The aspects that can be impacted are :

• the loading time due to their weight and the underlying resources they download
• the delay of the rendering due to a possible blocking caused by waiting for critical resources or a too important solicitation of the navigator
• the delay of interactivity due to the analysis, compilation and execution of the necessary JavaScript code

How to minimize it 

Beyond a blocking delay of 250ms caused by third party code, it is necessary to intervene and reduce its impact on page performance:

• defer the loading of scripts thanks to the "defer" or "async" attributes to avoid blocking the rendering

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

• load scripts dynamically via JavaScript code when they are useful for user interaction

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

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

• host the script on your server if the provider's server is slow

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

• remove non-essential scripts

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

• pre-connect origins in order to initiate an early connection to external origins

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