How to Reduce the impact of third-party code in page speed insight

 If you are using Blogger or Wordpress and tested your site in the page speed insight tool then you may come across an error called to reduce the impact of third-party codes. 

This is a common page speed error that occurs due to third-party scripts used on the website. Third-party scripts like Adsense, Google Analytics, Facebook pixel, etc caused the maximum impact on page speed. 

Those types of scripts will block the main thread and load the page much slower. Due to the heavy script, the browser will take a longer time to render the page and it will impact your core web vitals score. 

So, you can either lazyload the script or delay the script to fix this issue. 

I have already made several tutorials on Lazyload Adsense, Lazyload Google analytics, and lazyload images. 

In this article, I will show you how you can delay an external script like AdSense and solve the “reduce the impact of third party codes” error in page speed insight, and speed up your website loading speed. 

How does third-party code affect page performance?

Whenever a page is loaded in the browser, it needs to download and parse the HTML code line-by-line. In this process, it may come across third-party scripts like Adsense, Analytics, etc that are likely to block the main thread.

By default, JavaScript runs on the main thread and may take a long time to execute, preventing all other crucial tasks from being executed.

There are several effects on the user experience due to these types of javascript users may see a blank page for an extended period, users cannot interact with the browser until the scripts have finished executing, and more data and bandwidth will consume and load in the browser will increase.

Although we can’t remove all external Javascript files, we can delay the loading of these scripts so the other critical asset will load in the browser first and provide a better user experience to the readers.

It also helps us pass the core web vitals which is very important for SEO.

How to delay external Javascript?

So, to delay an external script you need to first get the source URL of that javascript code and then replace it with the given code. 

<script type='text/javascript'>   setTimeout(function() {
    var headID = document.getElementsByTagName("head")[0];         
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = '//example.js';
    headID.appendChild(newScript);
}, 5000);
</script>

Here, note that you can change the delay time in milliseconds. Here 5000ms means 5 sec. So, if you want to delay the script for 3 seconds then change it to 3000

Now if you want to delay the external script like Adsense then you need to remove all previous js code and replace it with the given codes. Otherwise, if the same js code is present before this script then it will not work

If you are using Blogger then you can paste this code into your footer or header section by going to the Theme > Edit HTML.

If you are using wordpress then you can paste the script in the footer section by going to Appearance — Theme editor — footer.php and find the closing </body> tag. You can also use some code manager plugin to insert the code in the header or footer section.

Performance plugin like perfmatters also gives you the functionality to delay any particular script in WordPress. You can check the complete review and setup of the perfmatters plugin here.

I hope this article help you solve reduce the impact of third-party codes on Blogger and WordPress website. I recommend you to follow the page speed improvement playlist on YouTube to solve your issues. 

If you have any doubts then you can ask me in our Telegram group or over Email. Thank You. 

Note: If you want me to speed up your Blogger or WordPress website then you can hire me on Fiverr or contact me directly on social media platforms.