4 Tips dan Trik Mengoptimalkan Blogger

Pada artikel sebelumnya saya sudah membahas mengenai cara optimasi SEO on page, yaitu teknik optimasi SEO yang dilakukan di dalam halaman blog itu sendiri. Bagi yang belum membacanya, silahkan baca: cara optimasi SEO on page pada Blogspot.

Artikel ini merupakan hasil studi kasus saya secara pribadi, jadi silahkan dipilah-pilih sendiri sebelum diterapkan pada blog anda masing-masing.

Ada 4 tips dan trik yang akan saya bahas disini, diantaranya:

Optimasi kecepatan Blog
Menghilangkan border dan shadow pada postingan gambar Blogspot
Menghilangkan url m?=1 pada mobil view
Mengaktifkan HTTPS custom domain Blogspot (official)

1. Optimasi Kecepatan (Speed) Blog

Tanggal 26 Maret 2018 kemarin, Google secara resmi merilis algoritma mobile first indexing, jadi kecepatan blog pada tampilan mobile (mobile view) merupakan salah satu faktor pemeringkatan hasil SERP.

Ingat, hanya salah satu, bukan berarti jika speed blog kita cepat maka menang di SERP. Salah besar!

Google sendiri mengatakan "mempunyai situs mobile friendly dan cepat dalam mobil view merupakan hal yang bagus, tapi mempunyai konten yang berkualitas dan mengutamakan pengalaman pengguna adalah lebih bagus".

Untuk menganalisis kecepatan situs, parameter yang saya gunakan pada studi kasus ini adalah score PageSpeed Insight (mobile dan desktop).

Secara default, beberapa template Blogger sudah bundling dengan bundle.css dan beberapa javascript seperti plusone.js. Jika kita analisa dengan tools Google PageSpeed Insight, keduanya tentu memperlambat speed dan loading blog, dengan menampilkan pesan error "render-blocking JavaScript and CSS".

Sebagai contoh, hasil analisa Google PageSpeed Insight untuk blog ini sebelum menghilangkan render-blocking JavaScript and CSS adalah: 74 untuk tampilan mobile dan 82 untuk tampilan desktop.

Tips Blogger - Render-Blocking JavaScript and CSS

Setelah menghilangkannya, score Google PageSpeed Insight melaju cepat, lihat gambar di bawah ini.

Oiya... hasil analisa di atas sudah include dengan beberapa script auto Ads.
Jika anda tertarik mencobanya, berikut ini tips dan trik optimasi speed blog berdasarkan hasil studi kasus (wadagizig).

1.a Menghilangkan Render Blocking JavaScript dan CSS di Blogger

Buka alamat blog dan klik kanan view page source, jangan lupa backup file bundle.css, plusone.js dan widget.statics.blogger.js.
Masuk ke Dashboard Blogger: Settings > Templates > Edit HTML, cari kode <head> dan ganti menjadi seperti dibawah ini.

&lt;head&gt;

Lakukan hal yang sama untuk kode </head> dan ganti menjadi:

&lt;/head&gt;&lt;!--<head/>--&gt;

Jangan lupa mengganti kode </body> menjadi:

&lt;!--</body>--&gt;&lt;/body&gt;

Save template dan lihat hasilnya.
Cara diatas akan menghilangkan semua css dan javascript bawaan Blogger, selanjutnya silahkan tambahkan script-script tersebut secara manual.

1.b Gunakan async untuk Javascript

Cari semua kode javascript, dan ganti menjadi:

<script async src="myjavscript.js"></script>

atau seperti dibawah ini:

<script async='async' src="myjavscript.js"></script>

Selengkapnya tentang async, lihat: Fungsi async - membuat promise lebih bersahabat.

Karena kita tidak bisa menyimpan file pada Blogger, gunakanlah layanan pihak ketiga untuk melakukan penyimpanan script-script Javascript dan CSS eksternal, salah satunya: RawGit. Cara lengkapnya akan saya bahas pada artikel selanjutnya.
Catatan: anda harus mempunyai akun Github.

2. Optimasi Gambar Postingan Blogger

Banyak layanan yang bisa anda gunakan untuk melakukan optimasi gambar dengan cara mengompresnya menjadi ukuran yang lebih kecil. Salah satu cara favorit saya yaitu menggunakan Telegram desktop karena mudah, sederhana dan hasilnya bagus.

2.a Kompres Ukuran Gambar dengan Telegram Desktop

Saya asumsikan anda sudah mempunyai akun Telegram, dan menginstal Telegram versi desktop.
- Klik icon attach file, lalu pilih gambar yang akan di kompres
- Pilih opsi "Send as a photo"

Setelah terkirim, download kembali gambar tersebut, dan lihat hasilnya.
Folder penyimpanan hasil download Telegram biasanya terletak pada direktori:

Linux:

/home/nama-anda/Downloads/Telegram Desktop/

Windows:

C:\users\nama-anda\downloads\Telegram Desktop/

2.b Menghilangkan Border & Shadow pada Postingan Gambar Blogger

Secara default, postingan gambar pada beberapa template Blogger memliki border dan shadow. Bagi anda yang mengerti styling CSS, mungkin hal ini amatlah mudah. Caranya yaitu menambahkan img style pada kode CSS.

Settings > Templates > Edit HTML, cari kode: ]]></b:skin>, lalu paste kode di bawah ini tepat sebelum kode tersebut.

.post-body img, .post-body .tr-caption-container, 
.Profile img, .Image img, 
.BlogList .item-thumbnail img {
  padding: 0px !important;
  background: none !important;
  border: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

Sebagai contoh, bisa anda lihat hasilnya pada blog ini, postingan gambar terlihat lebih manis tanpa border.

3. Membuat Clean URL Tampilan Mobile Blogger

Maksudnya adalah menghilangkan kode m=1, pada tampilan mobile. Bagi anda pengguna platform Blogger pasti sering melihat struktur url seperti berikut ini:
http://domain.com/?m=1.

Kode ini biasanya mucul jika tidak mengaktikan mobile template pada settingan template Blogger.

Sebenarnya ada dua kode, yaitu m=0 untuk tampilan desktop dan m=1 untuk tampilan mobile, hanya saja tampilan m=0 jarang ditemui jika dibuka melalui desktop.

Berikut ini cara menghilangkan url m=1 Blogger [sumber: bloggertipandtrick.net]

Settings > Templates > Edit HTML, salin kode Javascript berikut ini, dan simpan di bawah kode </head> atau bisa juga di simpan sebelum kode </body>.

<script type='text/javascript'>
  var uri = window.location.toString();
  if (uri.indexOf("?m=1","?m=1") > 0) {
     var clean_uri = uri.substring(0, uri.indexOf("?m=1"));
     window.history.replaceState({}, document.title, clean_uri);
  }
</script>

Lebih tepatnya, script diatas adalah melakukan redirect, dari url http://www.domain.com/?m=1 ke http://www.domain.com/.
Meskipun demikian, tidak ada salahnya dicoba untuk membuat struktur url Blogger lebih rapi dan SEO friendly.

4. Mengaktifkan fitur HTTPS Blogger (Official)

Pada postingan yang lalu, saya sudah menulis artikel mengenai: cara mengaktifkan https blog custom domain Blogger tanpa pihak ke-tiga. Hanya saja masih fitur draft.

Saat ini Blogger sudah mendukung penggunaan https untuk custom domain secara resmi, bagi yang belum menggunakannya, atau masih menggunakan layanan https pihak ke-tiga, saya sarankan segera migrasi ke fitur official.

4.a Mengaktifkan HTTPS Blogger (secara langsung)

Caranya sama, masuke ke Dashboard Blogger:
Settings > Basics > HTTPS
HTTPS Availability : Yes
HTTPS Redirect : Yes

Cara diatas berlaku jika kita belum mengaktifkan https layanan pihak ketiga, lalu bagaimana jika sudah terlanjur menggunakan https dari layanan pihak ketiga? Misalnya Cloudflare ...

4.b Migrasi HTTPS dari Layanan Pihak Ketiga

Saya asumsikan, anda sudah menggunakan layanan https pihak ketiga misalnya Cloudflare. Ada beberapa langkah yang harus dilakukan, yaitu sebagai berikut.

Masuk ke dashboard Cloudflare, pada menu Status Overview, klik Advanced dan pilih salah satu opsi: Pause atau Delete Website.

Jika suatu saat anda ingin mengaktifkannya kembali saya sarankan pilih Pause, tapi jika tidak silahkan pilih Delete Website. Dalam artikel ini saya pilih Pause.

Tips Blogspot - Cloudflare Status Overview

Setelah itu buka email yang digunakan mendaftar Cloudflare, lalu cari inbox dari Cloudflare yang berisikan daftar nameserver domain anda sebelum menggunakan Cloudflare. Atau jika anda punya catatan nameserver anda silahkan skip langkah ini.

Masuk ke dasboard domain, sesuai dengan registrar domain anda, lalu kembalikan nameserver seperti semula.

Setelah itu kembali ke Blogger, dan lakukan langkah seperti pada poin 4.a.
Tunggu beberapa menit dan https pun aktif!

Catatan:
Jika setelah melakukan migrasi https blog anda tidak dapat diakses, tak usah khawatir, cukup tunggu kurang lebih 5-15 menit.

Demikian lah artikel mengenai 4 Tips dan Trik Mengoptimalkan Blogger, selamat mencoba!

12 comments:

Airinaa06 April, 2018
Anda tidak perlu "hack" template untuk mematikan Blogger external js & css files. Gunakan b:css='false' dan b:js='false' pada tag html untuk tidak memasukkannya.

Jika tidak, kemungkinan banyak functions di Blogger theme tidak akan berfungsi dengan baik & susah di manage oleh users.

Saya terjumpa artikel ini: Easily Disable Blogger CSS and Js Files

Terima kasih berkongsi.
Unknown24 May, 2018
Bro, saya kan pakai template yg bukan dari bloggernya. Klo itu diganti apa akan terjadi error atau semacamnya?
Admin28 November, 2018
sangat bermanfaat
Muhammad Zaenal Abidin06 May, 2020
Keren gan, jangan lupa kunbal hehe
Riski Andho Firdian26 July, 2020
mampir di blog ku bang
https://www.kabarnegeri.com/
amaterasublog24 July, 2021
Keren bang tips dan tutorialnya,,, sudah saya praktekan di blog saya dan hasilnya mantap.....
melekdoit22 February, 2022
sangat bermanfaat bagi pemulai seperti kami