Blogger, Lazy Load, MGID, SEO, Tutorial

Lazy Load MGID Script untuk Mempercepat Loading

Jika telah menggunakan atau sedang mempertimbangkan MGID, maka tulisan lazy load MGID script untuk mempercepat loading ini akan membantu menjaga agar skor SEO laman tidak turun. Setiap penambahan script ke dalam template, tentu beresiko memperlambat loading dan berpengaruh pada SEO.

Meskipun sudah melihat cukup lama banner MGID di sejumlah blog, dengan judul artikel cenderung agak bombastis yang bertujuan agar pembaca mengklik tautannya, semacam click-bait, namun baru beberapa hari terakhir saya memutuskan untuk mencoba menggunakannya.

Keputusan itu muncul setelah merasa yakin bahwa script MGID bisa dibuat menjadi lazy load, sehingga tidak sampai mengganggu kecepatan loading blog. Selain itu memang ada keinginan untuk mengetahui seberapa besar potensi layanan yang satu ini.

Lazy Load MGID Script untuk Mempercepat Loading

MGID menyebut dirinya agai sebpelopor inovatif global dalam native advertising. Sejak didirikan pada tahun 2008, perusahaan ini telah berkembang menjadi platform penemu konten terkemuka yang menargetkan 850 juta pembaca unik dengan 165 miliar rekomendasi setiap bulannya. Cukup mengesankan.

Dalam batas tertentu MGID bisa disamakan dengan Matched Content di AdSense. Bedanya adalah jika judul artikel di Matched Content (MC) cenderung sopan dan tidak ada tendensi click-bait yang telanjang, maka judul artikel di MGID umumnya lebih berani, yang jika tak kuat 'iman' maka orang akan terdorong untuk meng-kliknya.

Perbedaan lain adalah, jika di MC ada pilihan untuk memonetasi atau tidak, dan ada taut artikel di blog kita yang ikut ditampilkan pada rekomendasi, maka di MGID pilihan itu tidak ada. Konsep periklanan keduanya memang berbeda, sehingga tabrakan kepentingan tidak terlalu frontal.

Pengalaman saya, proses approval MGID bisa dibilang cepat, yaitu 3 hari dari sejak saya mendaftar di laman mgid.com. Boleh jadi karena sepertinya mereka menyediakan dukungan lokal bagi para pengguna, baik untuk advertiser maupun publisher.

Interface untuk membuat script widget guna dipasang di template blog juga mudah digunakan, meski baru pertama kali memakainya. Secara keseluruhan, kesan yang saya terima cukup baik.

Nah, setelah memiliki script MGID, maka langkah berikutnya adalah bagaimana cara menggunakan lazy load MGID untuk mempercepat loading blog, yang penerapannya bisa dilihat di bawah ini. Kode yang saya buat adalah untuk Blogger, dan perlu sedikit modifikasi jika hendak digunakan di WordPress.

Kode lazy load MGID script adalah sebagai berikut:


<b:if cond='data:view.isMultipleItems'><div class='post-outer'>
<div id='zzzzzzzzzzzzzzzzzzzzzzzz'></div>
<script>
//<![CDATA[
var lazymg = false;window.addEventListener('scroll', function(){if ((document.documentElement.scrollTop != 0 &amp;&amp; lazymg === false) || (document.body.scrollTop != 0 && lazymg === false)) {(function() { var admg = document.createElement('script'); admg.async = true; admg.src ='https://jsc.mgid.com/a/r/xxxxxxxxx.com.yyyyy.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(admg, sc); })();lazymg = true;}}, true);
//]]>
</script>
</div></b:if>

Ganti warna merah dengan data MGID Anda. Namun agar bisa berfungsi di Blogger, maka kode di atas harus diubah dulu dengan menggunakan tools Code Converter untuk Blogger. Setelah diubah maka kodenya menjadi seperti ini,


<b:if cond='data:view.isMultipleItems'><div class='post-outer'>
&lt;div id=&#39;zzzzzzzzzzzzzzzzzzzzzzzz&#39;&gt;&lt;/div&gt;
&lt;script&gt;
//&lt;![CDATA[
var lazymg = false;window.addEventListener(&#39;scroll&#39;, function(){if ((document.documentElement.scrollTop != 0 &amp;&amp; lazymg === false) || (document.body.scrollTop != 0 &amp;&amp; lazymg === false)) {(function() { var admg = document.createElement(&#39;script&#39;); admg.async = true; admg.src =&#39;https://jsc.mgid.com/a/r/xxxxxxxxx.com.yyyyy.js&#39;; var sc = document.getElementsByTagName(&#39;script&#39;)[0]; sc.parentNode.insertBefore(admg, sc); })();lazymg = true;}}, true);
//]]&gt;
&lt;/script&gt;
</div></b:if>

Jika hendak memasang script MGID di laman Post dan Page, gunakan kode di bawah ini,


<b:if cond='data:view.isSingleItem'>
&lt;div id=&#39;zzzzzzzzzzzzzzzzzzzzzzzz&#39;&gt;&lt;/div&gt;
&lt;script&gt;
//&lt;![CDATA[
var lazymg = false;window.addEventListener(&#39;scroll&#39;, function(){if ((document.documentElement.scrollTop != 0 &amp;&amp; lazymg === false) || (document.body.scrollTop != 0 &amp;&amp; lazymg === false)) {(function() { var admg = document.createElement(&#39;script&#39;); admg.async = true; admg.src =&#39;https://jsc.mgid.com/a/r/xxxxxxxxx.com.yyyyy.js&#39;; var sc = document.getElementsByTagName(&#39;script&#39;)[0]; sc.parentNode.insertBefore(admg, sc); })();lazymg = true;}}, true);
//]]&gt;
&lt;/script&gt;
</b:if>

Jika hendak memasang di Post saja, maka ganti <b:if cond='data:view.isSingleItem'> dengan <b:if cond='data:view.isPost'>.

Lihat Video

Demikian cara membuat lazy load MGID untuk mempercepat loading laman blog agar tidak berpengaruh negatif pada SEO. Selamat mencoba.


Bagikan ke:
Facebook, Twitter, WhatsApp, Telegram, Email. Print!.

, seorang pejalan musiman dan penyuka sejarah. Penduduk Jakarta yang sedang tinggal di Cikarang Utara. Traktir BA secangkir kopi. Secangkir saja ya! Juni 13, 2020.