Delay in Loading External JavaScript file – Adsense, GTag and FB Like

Below you have a wordpress plugin with which you can insert JavaScript code for Adsense, Google Tag Manager or Facebook Like & Share Button, not when loading the page but after a certain period of time.

The advantage is that the page will load much faster and users will be able to interact faster, without waiting to load the code for either Facebook or Adsense which is very laborious and uses a lot of resources !

WP Plugin for Adsense, Gtag and Facebook Like

<?php 
/**
 * Plugin Name: ByREV InsertDelay JS Code
 * Plugin URI: http://robertvicol.com/
 * Description: Insert JS Code with Delay
 * Version: 1.0
 * Author: Emilian Robert Vicol
 * Author URI: http://robertvicol.com/
 */
 
 global $InsertDejayJS_Time, $InsertDejayJS_Interval;
 $InsertDejayJS_Time=3000;        //~~~ Delay for 1st inserted code
 $InsertDejayJS_Interval=1000;    //~~~ Interval Delay for subsequent insertions

 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Insert Google Tag Manager
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
function InsertDelayJS_gtag(string $id, int $delay=3000) {
  global $InsertDejayJS_Time, $InsertDejayJS_Interval;
?>

<script>
document.addEventListener("DOMContentLoaded", function(event) {
setTimeout(
  function()
  {
    jQuery('<script>').attr({
        async: '',
        defer: '',
        crossorigin: 'anonymous',
        src: 'https://www.googletagmanager.com/gtag/js?id=<?php echo $id; ?>',
        type: 'text/javascript'
    }).html("window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date());  gtag('config', '<?php echo $id; ?>');").appendTo('body');
  }, <?php echo $InsertDejayJS_Time; ?>);
});
</script>

<?php	
  $InsertDejayJS_Time += $InsertDejayJS_Interval;
}

 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Insert Google Adsense Code
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
function InsertDelayJS_adsense(string $id) {
  global $InsertDejayJS_Time, $InsertDejayJS_Interval;
?>

<script>
document.addEventListener("DOMContentLoaded", function(event) {
setTimeout(
  function()
  {
    jQuery('<script>').attr({
        async: '',
        defer: '',
        'data-ad-client': '<?php echo $id; ?>',
        crossorigin: 'anonymous',
        src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
        type: 'text/javascript'
    }).appendTo('body');
  }, <?php echo $InsertDejayJS_Time; ?>);
});
</script>

<?php	
  $InsertDejayJS_Time += $InsertDejayJS_Interval;
}

 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Insert Facebook Like Button
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
function InsertDelayJS_fblike(string $id) {
  global $InsertDejayJS_Time, $InsertDejayJS_Interval;
?>

<script>
document.addEventListener("DOMContentLoaded", function(event) {
setTimeout(
  function()
  {
    jQuery(".fblike").html( '<div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-layout="button_count" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div>' );
    jQuery('<script>').attr({
        async: '',
        defer: '',
        crossorigin: 'anonymous',
        src: 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2&appId=<?php echo $id; ?>&autoLogAppEvents=1',
        type: 'text/javascript'
    }).appendTo('body');
  }, <?php echo $InsertDejayJS_Time; ?>);

});
</script>

<?php	
  $InsertDejayJS_Time += $InsertDejayJS_Interval;
}

Usage example:

<?php  if (!current_user_can('administrator')) { InsertDelayJS_gtag('UA-12345-6'); } ?>

<?php  if (!is_home()) { InsertDelayJS_adsense('ca-pub-12345678901234567'); } ?>

After each code insertion, the time-delay for the next insertion will be incremented by 1000ms (1s), but that can be changed by the variable $InsertDejayJS_Interval

Note: The plugin uses jQuery for insertion, so you need to make sure it is loaded on the page!

This very simple plugin will help you a lot in getting a better score in Google PageSpeed Insight: First Contentful Paint (FCP), First Input Delay (FID), Largest Contentful Paint (LCP) and Cumulative Layout Shift ( CLS)