Mempercepat Loading Blog di Blogger Sampai 96%

Mempercepat loading blog merupakan salah satu upaya optimasi On Page SEO.

Apalagi di era mobile seperti sekarang, dimana banyak pembaca yang mengakses internet dengan smartphone, tentu kecepatan loading website sangat berpengaruh.

Jika anda keluar masuk sebuah blog, pasti tidak akan betah kalau loading halamannya lambat kaya siput.

Padahal kontennya bagus, tampilan blognya oke, tapi sayang loading blognya lemot.

Kalau kalian punya masalah seperti itu, saya ingin membagikan pengalaman, bagaimana cara saya mempercepat loading blog ini hingga 96%.

tes kecepatan blog di GTMetrix
Tes kecepatan blog

Cara ini efektif untuk digunakan pada platform Blogger, sementara untuk Wordpress mungkin akan ada sedikit perbedaan.

Pentingnya Kecepatan Blog

Udah banyak sekali penjelasan di Google soal pentingnya kecepatan loading sebuah blog/website.

Salah satunya datang dari pihak Google yang diutarakan langsung oleh Neil Patel.
Di era mobile seperti sekarang, para pemilik website dituntut untuk menyajikan halaman yang mudah diakses, cepat, dan kaya informasi.

Jika tidak, anda mungkin akan kehilangan visitor dari mesin pencari.

Itulah yang mendasari saya untuk selalu melakukan optimasi kecepatan blog.

Cek Kecepatan Blog

Untuk melihat kecepatan loading blog, anda bisa menggunakan beberapa tools uji kecepatan website (gratis) di bawah:
  1. GTMetrix
  2. Google Page Speed Insight
  3. Test My Site
  4. WebPageTest
  5. Pingdom
Sebagai rekomendasi, saya menyarankan anda memakai tools GTMetrix sebagai acuan.

Selain lebih umum, tools ini juga sering dipakai para blogger untuk jadi acuan optimasi web mereka.

Mempercepat Loading Blog

Setelah anda melakukan tes kecepatan di GTMetrix. Langkah selanjutnya adalah melakukan berbagai optimasi untuk mempercepat loading blog.

1. Gunakan Template Fast Loading

Langkah pertama untuk mempercepat loading blog adalah dengan memakai template yang ringan.

Template yang ringan biasanya bisa dilihat dari tampilannya yang sederhana dan fitur yang masih terbatas.

Yang perlu anda ketahui, sekarang ini banyak developer template yang memasukan berbagai fitur di template yang dia buat.

Fitur seperti Google font, Paralax, Slider, UI Design, dan sejenisnya yang mungkin saja tidak anda butuhkan.

Fitur-fitur tersebut sebenarnya hanya akan menambah beban loading blog anda.

Kalau masih bingung, saya punya beberapa rekomendasi template blogger fast loading yang bisa anda gunakan.
  1. LinkMagz (developer Sugeng.id)
  2. VioMagz (developer Sugeng.id)
  3. KompiFixed (developer KompiAjaib)
  4. NonameAMP (developer Themeindie)

2. Optimasi Semua Gambar

Sebelum upload gambar ke blog, pastikan mengkompress ukurannya terlebih dahulu.

Hal ini dilakukan untuk memadatkan ukuran gambar menjadi lebih kecil agar tidak memperberat loading halaman.

Untuk melakukan pekerjaan ini, saya terbiasa menggunakan tools kompress gambar online dari https://img2go.com.

Dengan tols ini, anda bisa melakukan kompress gambar dalam jumlah banyak secara bersamaan.

Bagaimana jika sudah terlanjur upload gambar ?


Gak masalah, sekarang anda punya 2 tugas.

Pertama, catat seluruh url postingan yang belum di kompress gambarnya.

Kedua, kunjungi GTMetrix.com dan masukan url yang tadi sudah dicatat, satu per satu.

Jika memang gambarnya perlu di kompress, anda akan menemukan pemberitahuan seperti dibawah.

Yaitu:
  • Serve scaled images
  • Optimize image
Jika tindak muncul pemberitahuan seperti diatas, maka lewati saja langkah ke 2 ini.

Tapi jika muncul pemberitahuan, berarti anda harus melakukan kompress pada gambar di halaman tersebut.

3. Batasi Jumlah Widget

Membatasi jumlah widget merupakan salah satu upaya mempercepat loading blog.

Seperti yang anda lihat di blog ini, di sidebar, saya hanya memasang 1 widget popular post. Tentu ini sangat berpengaruh pada kecepatan loading blog.

Semakin banyak widget yang dipasang, semakin berat juga beban loading blog tersebut.

4. Batasi Jumlah Iklan

Jenis iklan yang memperberat loading blog seperti iklan Google Adsense, Mgid, dan jenis iklan lain yang memiliki JQuery.

Disini saya akan gunakan iklan Google Adsense sebagai contoh.

Setiap unit iklan Adsense, punya kode JQuery seperti ini:


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle iklan_responsive"
style="display:block"
data-ad-client="ca-pub-xxx"
data-ad-slot="xxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Bayangkan jika anda memasang 5 unit iklan dalam 1 halaman, berarti akan ada 5 JQuery yang harus dimuat oleh halaman tersebut.

Untuk mengatasinya, anda harus memodifikasi kode iklan tersebut dengan cara menghapus JQuery di setiap unit iklan.

Jadi seperti ini:


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

Jika sudah, sekarang pasang 1 JQuery di dalam HTML template, taruh diatas kode </body>.

Dengan cara seperti ini, halaman blog anda hanya akan memuat satu JQuery untuk banyak iklan sekaligus. Ini akan mempercepat loading blog.

5. Gunakan Lazy Load Images Blogger

Jika anda sudah mengkompressi seluruh gambar di blog, tapi loading blog masih saja lemot, mungkin anda harus mencoba trik ini.

Memakai script lazy load images blogger.

Apa itu lazy load images ?

Script lazy load bertugas untuk menunda pemuatan gambar dalam blog.

Biasanya, ketika seseorang membuka halaman web, browser akan memuat semua gambar sekaligus.

Tapi dengan adanya script lazy load images, browser hanya akan memuat gambar satu per satu sesuai yang terlihat pada layar.

Untuk memasang script lazy load images blogger, silahkan baca disini.

6. Gunakan Lazy Load Adsense

Lazy load Adsense mempunyai fungsi yang sama seperti script lazy load images, bedanya kalau ini digunakan untuk menunda pemuatan iklan Adsense.

Dengan memakai lazy load, iklan Adsense akan muncul saat ada aktifitas scroll pada halaman blog.

Ini tentunya akan mempercepat loading halaman, terutama jika anda memasang banyak unit iklan dalam satu halaman.

Untuk memasang script lazy load Adsense di blogger, ganti JQuery Adsense yang tadi diletakan diatas kode </body>.

Jika sudah ketemu, ganti dengan kode lazy load dibawah ini.


t;&lt;/body&gt;
<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="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>

7. Minify File CSS

Minify adalah metode yang biasa digunakan untuk mengurangi load time halaman blog dengan cara meminimalkan kode-kode dalam template.

Kode template yang akan kita minify adalah kode CSS.

Untuk melihat kode CSS template, anda bisa temukan diatas </style>.

Contohnya seperti ini:

Ini adalah kode CSS sebelum di minify. Ukuranya sekitar 457 bytes.


/* CSS Note by Pebriansah */
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em
auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note.crusta{background:#F2784B}
.note.river{background:#3498db}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px
0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:
0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

Dan ini setelah di minify. Ukurannya berkurang tajam menjadi 260 bytes.


.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em
auto;color:#fff;background:#2ecc71;overflow:hidden}.note.orange{background:#f39c12}.note.crusta{background:#F2784B}.note.river{background:#3498db}.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px
0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}.note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

Untuk melakukan minify CSS, silahkan gunakan tols CSS minifyer.

8. Kurangi Pemakaian JQuery

Hapus semua file JQuery di template yang dirasa tidak perlu. Keberadaan JQuery ini tentu sangat membebani loading halaman blog.

Untuk menghapusnya, coba cek terlebih dahulu di GTMetrix.com, lihat apakah ada kode Javascript yang me-render loading blog.

Jika ada, segera hapus kodenya.

9. Gunakan Icon SVG

Bagi kalian yang suka mempercantik tampilan blog dengan icon. Sebaiknya gunakan icon yang tidak mengandung JQuery.

Karena font awesome memakai JQuery, sebaiknya ada hindari untuk menggunakannya.

Sebagai gantinya, gunakan saja font dengan format SVG yang jauh lebih cepat.

Apa bedanya font awesome dengan SVG?

Bedanya terlihat jelas dari pemakaian JQuery.

SVG (scalable vector graphics) adalah bahasa markup yang mampu menampilkan berbagai icon tanpa perlu memanggil CSS style library seperti halnya font awesome.

Contohnya bisa anda liat pada icon menu di blog ini.

Untuk memasang icon SVG, panduan dari KompiAjaib ini mungkin akan membantu anda, silahkan baca disini.

Kesimpulan

Berdasarkan pengalaman pribadi saya, beberapa cara mempercepat blog diatas sangat efektif untuk meringankan beban loading halaman web.

Setiap blog/website, terkadang memiliki perlakuan yang berbeda dalam optimasi kecepatan.

Karena itu, saya sarankan anda untuk mencari referensi lain yang jauh lebih lengkap dari ini agar hasilnya lebih maksimal.

Mungkin itu saja yang bisa saya sampaikan, selamat mencoba.