Cara Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix

Salah satu faktor yang dapat mempengeruhi loading blog pada Gtmatrix menjadi lambat adalah saat terletak gambar diatas atau Add Exspaired Header. Jika kamu ingin blog kamu lancar dan tidak lemot, kamu dapat melakukan Cara Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix pada artikel kali ini.

Cara Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix


Tutorial Cara Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix ini saya dapatkan dari Arlinacode dan untuk itu saya akan mencoba membagikannya kepada semuanya, saya berharap artikel ini dapat memberikan manfaat.

Ok langsung saja kita masuk ke pembahasan tutorialnya, simak dan ikuti langkah - langkah berikut ini :

1. Pertama login ke dashboard blogger

2. Masuk ke Menu Tema kemudian klik Edit HTML

3. Cari kode </body> untuk lebih cepat mencarinya tekan tombol CTRL+F

4. Jika sudah ketemu tambahkan kode dibawah ini tepat diatas kode tersebut (yang penting berada di tag body)


<script>
//<![CDATA[
// LazyLoad
function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazyarlinas.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Untuk template yang sudah terpasang kode Lazysizes, cukup hanya mengganti kode tersebut dengan kode versi dibawah ini :


<script>
//<![CDATA[
// Lazysizes
var lazysizer=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazysizer||0!=document.body.scrollTop&&!1===lazysizer)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazysarline.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazysizer=!0)},!0);
//]]>
</script>

5. Kemudian ganti semua kode img menjadi class=lazy (jika kamu menggunakan kode 1) dan class=lazyload (jika kamu menggunakan kode 2) dan Ganti src menjadi data-src dan tambahkan src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' setelah data-src

Contohnya :


<img src='//www.blogger.com/img/icon_delete13.gif'/>

Ganti menjadi seperti ini :

Penerapan kode 1


<img class='lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Penerapan kode 2


<img class='lazyload' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

6  Kemudian simpan template.

7. Setelah itu kamu perlu melakukan edit pada gambar didalam postingan dengan menambahkan -r misalnya kode s1600 maka menjadi s1600-r


<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-6T0m8rLAJ7c/X06PP4q5nqI/AAAAAAAALE0/VSNyffwvSzA94YYGb2GI3SKHhJW_LeUBQCLcBGAsYHQ/s1600-rw/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Widget Newsletter di Blogger" class="lazyload" style="border: none;" data-original-height="800" data-original-width="1200" height="426" src="https://1.bp.blogspot.com/-6T0m8rLAJ7c/X06PP4q5nqI/AAAAAAAALE0/VSNyffwvSzA94YYGb2GI3SKHhJW_LeUBQCLcBGAsYHQ/s640-rw/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>

Demikianlah artikel Cara Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix yang sangat ribet menurut saya, mohon maaf jika kurang jelas karena saya juga bingung bagaimana cara menjelaskannya intinya begitu. Sekian dari saya terimakasih.

Ide artikel : https://www.problogbooster.com/2015/05/add-expires-headers-to-blogger-wordpress-htaccess-file-speedup-page-loading.html

Tidak ada komentar untuk "Cara Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix"