Tips Sederhana Mempercepat Page Atau Halaman Loading Blog


Mempercepat Loading Blog - Banyak cara yang dilakukan orang untuk meningkatkan kualitas user Exprience yang baik, karena itu merupakan salah satu bagian dari SEO. Tahukah kamu page speed load blog mu juga menjad tolak ukur keberhasilanmu dalam mengembangkan blog. Jadi tak heran banyak orang menggunakan Amp untuk mempercepat page load blog mereka. Tapi kali ini kita tidak akan membahas seputar Amp, melainkan memodifikasi struktur penulisan template dan menambahkan beberapa kode pendukung seperti lazyload adsense.

Tips Sederhana Mempercepat Page Atau Halaman Loading Blog


Ada banyak cara yang bisa kamu lakukan untuk membuat blog yang memiliki page load yang cepat, berikut ini tips yang bisa kamu lakukan untuk mempercepat page load:


Pilih template yang sederhana

Template yang sederhana, mobile friendly serta tidak banyak menggunakan javadcript akan membuat halaman blogmu bisa diload dengan cepat. Saya merekomendasikan template Brosense, Simple Blogku, ataupun template premium seperti KompiAjaib, KompiTextAja, Viomagz walaupun sudah menggunakan javascript tetapi template ini sudah ter-uji secara SEO.

Jika kamu memnggunakan blog hanya untuk menulis teks dan gambar biasa maka template amp cocok untuk kamu gunakan. Halaman yang dibangun dengan amp mampu meload halaman 5x jauh lebih cepat daripada halaman web biasa. Jika kamu sudah mempunyai template sendiri, tetapi tidak ingin menggantinya dengan tema yang lebih baik. Kamu bisa mendesain ulang penyusunan koding pada templatemu.

Baca Juga : 7 Cara Untuk Mempercepat Loading Blogger Dengan Sempurna

Hapus css dan javascript bawaan

kurangi penggunaan javascript, matikan semua css eksternal yang ditambahkan otomatis oleh blogger.

Caranya cukup simple, masuk ke dahsboard blog kamu. Pilih menu tema lalu klik Edit HTML atau kamu bisa mengunduhnya dan mengeditnya secara offline dengan hape maupun pc kesayanganmu.

Cari dan temukan kode </head> gunakan kotak pencarian untuk menemukanya dengan cepat CTRL + F, jika kamu sudah menemukanya hapus semua kode tersebut dan ganti dengan kode berikut ini:
&lt;!--</head>--&gt;&lt;/head&gt;


Selanjutnya temukan lagi kode </body> lalu hapus semua kode itu dan ganti dengan kode dibawah ini:
&lt;!--</body>--&gt;&lt;/body&gt;



Kurangi penggunaan materi berat

Seperti yang kita ketahui penggunaan javascript dan css yang berlebihan akan membuat browser merender halaman web kamu terlalu lama, maka dari itu kamu harus mengurangi bagian yang tidak diperlukan. Pastikan kamu mengetahui bagian apa saja yang tidak dibutuhkan pada tema mu, setiap template mempunyai css yang berbeda-beda tergantung dari komponen pembentuknya.

Untuk file yang berat seperti fontawessome, font google, Jquery, kamu bisa memindahkanya ke bagian bawah halaman. Tepatnya diatas tag </body>

Baca Juga : Cara Paling Mudah Mempercepat Loading Blog dengan Lazy Load Gambar di Blogger

Buat Struktur penulisan baru

Cara ini saya biasa gunakan dalam pengeditan template yang berat, kamu tinggal memindahkan bagian yang berat-berat yang dapat menunda proses rendering halaman ke bahian bawah tepatnya sebelum kode </body> atau dibawah footer.

Kode Jquery, font eksternal, Js adsense, LazyLoad, Scrip Eksternal umumnya wajib diletakan dibagian bawah halaman agar tidak membebani loading halaman.

Gunakan JavaScript LazyLoad

Script lazyload adalah javscript yang dirancang untuk membuat penundaan load komponen yang berat pada saat halaman sedang dimuat. Cara ini sangat ampuh untuk meningkatkan kecepatan loading halaman dan seo website kamu, blog seperti igniel.com juga jauh lebih banyak menggunakan lazyload. Itulah kenapa blognya mempunyai pageload yang sangat cepat.

Baca JugaCara membuat page safelink anti BrokenLink


Ada dua jenis script lazyload yang kita kenal, yaitu lazy afterload, dan lazy load on scroll. Semuanya mempunyai kelebihan dan kekurangan masing-masing. Lazy load on scroll akan memuat javascript eksternal ketika ada pergerakan scrolling halaman, sedangkan javascript lazy onload akan meload script maupun dokumen lainya setelah halama selesai dimuat sepenuhnya.

Berikut ini ada beberapa script lazyload yang saya gunakan pada template EvoMagz milik saya beserta fungsi dan cara kerjanya. Untuk pemasangan, sama seperti diatas kamu harus mengedit template dalam bentuk Edit HTML atau edit kode nya secara Offline.

Baca juga : Cara Mempercepat Loading Blog dengan Lazy Load Iklan Adsense di Blogger


Kode LazyLoad Iframe & Gambar On Scroll

Pada template kamu silakan cari kode </body>, diatas nya tambahkan kode lazyload berikut ini:
<!-- JavaScript LazyLoad Image & Iframe -->
<script async='async' src='https://cdn.statically.io/gh/ryanlikeer/lazyload/master/lazysizes.min.js' type='text/javascript'/>
<script>
//<![CDATA[
for(var imgEl=document.getElementsByTagName("img"),i=0;i<imgEl.length;i++)imgEl[i].getAttribute("src")&&(imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src")),imgEl[i].className+=" lazyload",imgEl[i].setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));
$(document).ready(function() {
    $('iframe[src*="youtube.com"]').wrap('<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%"></div>').css({
        "position": "absolute",
        "top": "0",
        "left": "0",
        "width": "100%",
        "height": "100%",
        "border": "0"
    }).addClass("lazyload").each(function() {
        $(this).attr("data-src", $(this).attr("src"));
        $(this).removeAttr("src", "")
    });
});
//]]>
</script>



Kode LazyLoad Iklan Mgid

Iklan Mgid biasanya menggunakan satu javascript eksternal setiap satu iklan. Jadi kamu harus bisa mengurangi penggunaan terlalu banyak iklan pada blog mu, cukup satu saja karena bisa membuat blogmu trasa lebih ringan saat diakses.

Untuk kode lazy mgid kamu diharuskan mengganti beberapa konfigurasi yang sudah saya beri tanda warna merah dengan, kode iklan milikmu.
<!-- MGID Untuk Satu Iklan --> 
 <div id='M493082ScriptRootC74295'>  
     <div id='M49302PreloadC74292'/>
     </div> 
<script type='text/javascript'>
//<![CDATA[
// Lazy Load Mgid
var lazymgid=!1;window.addEventListener('scroll',function(){(0!=document.documentElement.scrollTop&&!1===lazymgid||0!=document.body.scrollTop&&!1===lazymgid)&&(!function(){var e=document.createElement('script');e.type='text/javascript',e.async=!0,e.src='https://jsc.mgid.com/r/y/ryanjhr350.blogspot.com.742952.js';var a=document.getElementsByTagName('script')[0];a.parentNode.insertBefore(e,a)}(),lazymgid=!0)},!0);
//]]>
</script>



Kode LazyLoad Iklan Google Adsense

Untuk menggunakan ini pastikan kamu sudah menghapus semua kode js adsense. Termasuk kode iklan otomatis yang ada pada bagian head template blogmu. Dan untuk penggunaanya kamu tinggal memasang iklan menggunakan kode tag <ins></ins> saja. JavaScriptnya tidak perlu disertakan dan kita ganti dengan lazyload diawah ini.

Tempatkan kode ini diatas </body>
<script type='text/javascript'>
//<![CDATA[
// Lazy Load AdSense
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//Pemanggil Adsense
for (var ads = document.querySelectorAll('ins.adsbygoogle'), i=0; i<ads.length; i++){
    if (ads[i]) {
      (adsbygoogle = window.adsbygoogle || []).push({});
    }
  }
//]]>
</script>


Masih banyak kode lazyload lainya yang bisa kamu terapkan di blog, tapi saya tidak mungkin membagikan semuanya dihalaman ini. Untuk kode-kode lselanjutnya kamu bisa cek blog saya dibagian bawah artikel ini. Oh iya kode yang saya bagikan ini bersifat open source, kamu bebas memodifikasinya sesuai dengan keinginanmu sendiri.


Memaksimalkan Penggunaan Cookies

Cookies adalah sebuah file kecil yang ditanamkan pada browser, biasanya cookies digunakan pada halaman yang dilindungi seperti web login, kamu bisa menggunakan cookies untuk mempercepat load halaman. Cookie juga sangat berperan dalam mempercepat loading blog, pada halaman amp juga seperti itu.

Caranya kita cukup membuat pengaturan sessi cooki lebih lama pada browser pengguna. Tujuanya agar file seperti gambat, css, dan javascript bisa disimpan pada browser sementara. Sehingga ketika orang itu mengunjungi situs kedua kalinya akan terasa lebih ringan karena browser tidak perlu mengunduh materi lain dari server. Dan berikut ini adalah meta tag yang dipercaya bisa memperlama durasi cookie, tempatkan kode ini diantara tag <head> </head> :
<!-- Fast Loading Tag -->
<include expiration='7d' path='*.css'></include>
<include expiration='7d' path='*.js'></include>
<include expiration='2d' path='*.gif'></include>
<include expiration='2d' path='*.jpeg'></include>
<include expiration='2d' path='*.jpg'></include>
<include expiration='2d' path='*.png'></include>
<include expiration='1d' path='*.webp'></include>
<include expiration='1d' path='*.ico'></include>


Demikianlah tutorial singkat cara mempercepat loading blog kali ini, jika ada pertanyaan atau masih kebingungan silakan tanyakan saja dikolom komentar. Terimakasih telah membaca Tips Sederhana Mempercepat Page Atau Halaman Loading Blog.

0 Response to "Tips Sederhana Mempercepat Page Atau Halaman Loading Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel