Is a good idea to put all jquery plugin code inline in the HTML?

user_2646969 0
Viewed 294

Thinking in best load performance, all JS is loaded async. But in my site I am using Google Adsense. To lazy load the Google Adsense Ads, I am using the AdsenseLoader.js. But, If I load all JS async, some banners doesn't load correctly.

If I put the jQuery plugin code and the AdsenseLoader inline in the HTML, all Adsense banners loads correclty.

The code is like that in the footer:

<script defer>
    /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */
    !function(a,b){"object"==typeof module&&" /* ......... AND ALL JQUERY PLUGIN CODE MINIFIED HERE..... */

    /* Adsense loader https://github.com/osvaldasvalutis/adsenseLoader.js */
    !function(t,n,a,e){"use strict";var o=t(n) /*  ......... AND ALL ADSENSELOADER PLUGIN CODE MINIFIED HERE..... */
</script>

<script async src="assets/js/main.js"></script> <!-- ALL OTHER JS FUNCIONS LOADED ASYNC -->

<!-- HERE I LOAD THE ADSENSE BANNERS -->
<script defer>
    $( '.adsense' ).adsenseLoader({
        'laziness': 2,
        onLoad: function( $ad ){
            $ad.addClass( 'adsense--loaded' );
        }
    });
</script>

I need to put the jQuery and AdsenseLoader inline because, if I put inside the main.js ASYNC, some adsense banners doesn't load correctly.

If I load the jQuery and AdsenseLoader as regular, like that:

<script src="assets/js/jquery.js"></script>
<script src="assets/js/adsenseloader.js"></script>

It causes a JAVASCRIPT RENDER BLOCK.

The unique way I think is to put all "critic" JS minified inline in the HTML footer, and works perfectly. But I don't know if is a good idea, because I never sawyed this in another sites.

PS.: I'm brazilian, sorry my bad english.

EDIT 1

Here is the screenshot of my footer.php

enter image description here

html jquery javascript
1 Answers

If you’re looking for lazy load try LazyHTML

The AdsenseLoader.js has issues in lazy loading ads, because it doesn’t load in order, There is an issue created in Github for it.

This is how you can use LazyHTML:

Load LazyHTML code and Adsbygoogle in Header.

<script async src="https://cdn.jsdelivr.net/npm/lazyhtml@1.0.0/dist/lazyhtml.min.js" crossorigin="anonymous"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx" crossorigin="anonymous"></script>

Wrap all the Adunits in an example wrapper like below

<div class="lazyhtml" data-lazyhtml>
  <script type="text/lazyhtml">
  <!--
  <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXX"
     data-ad-slot="YYYY"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  -->
  </script>
</div>

Here are some More ways about Lazy Loading Adsense

I would not recommend having all jQuery plugin code in-line, because when you have it externally, it will be cached by the browser and reused several times, but in-line scripts must be loaded over and over again with HTML, Which will increase the payload size.

user_18625210
Related