Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix - Hallo sahabat Jendral Kancil, Pada Artikel yang anda baca kali ini dengan judul Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel SEO, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix
link : Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix

Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix

Faktor yang memengaruhi loading blog saat diatas terletak pada gambar nya, yaitu jika di test pada Gtmetrix yang menjadi loading lambat yaitu pada Add Exspaired Header. Karena saya ingin blogku agar tidak lemot saat diakses pada semua perangkat jadi cari coba mencari tutorial nya memperbaiki hal tersebut.

Cari di google karena artikel yang dibahas antara tahun 2018 / 2019 jadi belum update Cara Mengatasi Add Exspaired Header di Blogger, akhirnya saya coba bertanya di Arlinacode akhirnya dikasih tutorial nya, oleh karena itu saya akan share kepada kalian semua, bagaimana caranya ini langkah nya :

Mengatasi Add Exspaired Header di Blogger

Pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian cari dan tambahkan kode di bawah ini sebelum </body>

Kode 1

<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>

Bagi sobat yang sudah terlanjur menambahkan kode Lazysizes, cukup ganti kode tersebut dengan versi ini

Kode 2

<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>

Pilih salah satu kode di atas

Penerapannya hampir sama seperti pada postingan tentang Lazysizes, sobat hanya perlu mencari semua img di dalam tema. Kode akan terlihat seperti ini :

<img...

Contohnya :

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

Tambahkan class='lazy' untuk Kode 1 dan class='lazyload' untuk Kode 2 pada markup tersebut seperti ini :

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

Ganti src menjadi data-src dan tambahkan src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' setelah data-src

Atau contoh ini :

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' width='280'/>

Jadi seperti ini :

<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' width='280'/>

Lakukan cara di atas pada semua markup img pada tema. Bagaimana jika di dalam markup img tersebut sudah terdapat class? Maka sobat hanya perlu menambahkan lazy atau lazyload setelah class pertama, contohnya :

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

Setelah selesai, simpan tema dan lihat hasilnya di blog sobat.

Selanjutnya untuk meningkatkan bagian Expires headers yang bisa sobat cek di GTmetrix sobat perlu mengganti s1600 dan s640 pada link gambar di dalam Editor postingan. Contohnya seperti ini :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0sYg1NNeMvQcqnC20whN0iAix1xsf3_YbWi8oTgE5ZVpm9NAdx_oBchnLpW0hVGKJLYrAu2ZDbdncvOU6W6iug33y8BoPygZowxrLpgU0qzJaBlYGhiJjgY2jm25ckPTwrj5fMM6Zvz-Q/s1600/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0sYg1NNeMvQcqnC20whN0iAix1xsf3_YbWi8oTgE5ZVpm9NAdx_oBchnLpW0hVGKJLYrAu2ZDbdncvOU6W6iug33y8BoPygZowxrLpgU0qzJaBlYGhiJjgY2jm25ckPTwrj5fMM6Zvz-Q/s640/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>

Tambahkan -rw di setiap gambar postingan

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0sYg1NNeMvQcqnC20whN0iAix1xsf3_YbWi8oTgE5ZVpm9NAdx_oBchnLpW0hVGKJLYrAu2ZDbdncvOU6W6iug33y8BoPygZowxrLpgU0qzJaBlYGhiJjgY2jm25ckPTwrj5fMM6Zvz-Q/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0sYg1NNeMvQcqnC20whN0iAix1xsf3_YbWi8oTgE5ZVpm9NAdx_oBchnLpW0hVGKJLYrAu2ZDbdncvOU6W6iug33y8BoPygZowxrLpgU0qzJaBlYGhiJjgY2jm25ckPTwrj5fMM6Zvz-Q/s640-rw/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>

Demikian untuk Artikel kali ini Cara Mengatasi Add Exspaired Header di Blogger Pada Gtmetrix, semoga bermanfaat. 

Demikianlah Artikel Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix

Sekianlah artikel Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Mengatasi Add Exspaired Headers di Blogger Pada Gtmetrix dengan alamat link https://jekancil.blogspot.com/2020/09/mengatasi-add-exspaired-headers-di.html