Cara memperbaiki masalah Blog di PageSpeed Insight

Jika blog kita terdaftar di GSC (Google Search Console), pada halaman "Data Web Inti" terdapat laporan data penggunaan dalam 90 hari terakhir untuk tampilan Mobile dan Desktop blog kita.

Namun, baik untuk Mobile ataupun Desktop maupun keduanya, terkadang laporan datanya ada yang sudah terisi dan ada juga yang masih kosong. Untuk yang datanya terisi berarti bagus, sedangkan yang masih kosong kemungkinan blog kita belum memenuhi syarat untuk dianalisa.

Apa syaratnya supaya data di halaman Data Web Inti dapat terisi?

Untuk yang masih kosong biasanya disana tertulis begini: "Data penggunaan dalam 90 hari terakhir tidak memadai untuk jenis perangkat ini."

Apa penyebabnya sehingga kosong?

Penyebab pertama kemungkinan faktor kurangnya visitor yang berkunjung ke blog kita dalam 90 hari terakhir sehingga tidak memadai untuk dianalisa, penyebab kedua disebabkan oleh lambatnya kecepatan loading blog kita yang mungkin dapat menghambat proses analisa.

Untuk memperbaiki masalah pada penyebab kedua biasanya kita akan diarahkan untuk melakukan pemeriksaan blog di PageSpeed Insight, bertujuan untuk mencari tau mengapa blog kita menjadi lambat loadingnya. Kurang lebih begini prosesnya.

Cara mengecek blog di PageSpeed Insight?

1. Berhubung kita berada di GSC, pada halaman "Data Web Inti" cukup klik saja link PageSpeed Insight yang tertera disana dan otomatis akan diarahkan ke halaman PageSpeed Insight.

2. Setelah di halaman PageSpeed Insight, silakan tunggu proses loading untuk memunculkan hasil audit (kurang lebih 3 menit), jika hasil sudah muncul maka akan terlihat apa saja yang menimbulkan masalah pada blog kita, yang mana saja perlu diperbaiki dari blog kita, dan lain-lain, semua dijelaskan secara rinci disana beserta solusi cara memperbaikinya.

Setidaknya hasil pengecekan terbagi dua yaitu hasil pengecekan untuk tampilan Mobile (HP, Tablet) dan tampilan Desktop (Laptop, PC).

Masing-masing menampilkan hasil berupa nilai yang terbagi menjadi 4 diagnosa:

1. Performa

2. Aksesibilitas

3. Praktik terbaik

4. SEO

Contoh hasil penilaiannya, misalnya: untuk Performa nilainya 80, untuk Aksesibilitas nilainya 90, dan seterusnya.

Untuk nilai 0-49 ditandai dengan warna merah, dan 50-89 dengan warna orange, serta 90-100 dengan warna hijau.

Jika misalnya nilai performanya 80, itu tandanya berwarna orange yang berarti performanya sedang atau cukup bagus, sedangkan untuk merah artinya parah, dan hijau bagus banget.

Jika hasil ke 4 diagnosa ini yakni: Performa, Aksesibilitas, Praktik terbaik, dan SEO, semuanya mendapat nilai berwarna hijau, itu tandanya blog kita bagus banget, loadingnya juga berarti cepat banget, juga Seo banget, dst..

Jika blog kita mendapat nilai merah maupun orange mendekati merah, misal nilai performanya 60, ini termasuk mendekati merah yang perlu mendapat penanganan sesegera mungkin agar performa blog kita menjadi lebih baik.

Selain itu, ke 4 diagnosa tersebut juga didasarkan pada audit 5 metrik, yaitu:

1. First Contentful Paint (FCP)

2. Largest Contentful Paint (LCP)

3. Total Blocking Time (TBT)

4. Cumulative Layout Shift (CLS)

5. Speed Index (SI)

Apa maksud dari ke 5 metrik itu?

Semua penjelasan lengkapnya ada disana, 

Secara garis besarnya khusus untuk blog kita di Blogspot semua itu berkaitan dengan seluruh isi Template blog kita, mulai dari atas sampai ke bawah dalam template, kode demi kode tak luput dari analisa, semua kena audit: HTML, JavaScript, CSS, URL, atribut, teks, font, icon, gambar, dll.. hingga tampilan layout, lebar tinggi layout, pergerakan layout, dan kecepatannya. Namun berhubung kita ngeblognya di Blogger alias hanya menumpang, jadi tidak semua masalah dapat kita perbaiki, karena sebagian kontrol ada di tangan pihak Blogger, jadi pada posting ini kita hanya membahas yang berada dalam kontrol kita saja, berikut ini.

Contoh beberapa masalah yang biasanya muncul pada Template Blogspot

Dari audit ke 5 metrik diatas yang seringkali menimbulkan masalah pada blog kita adalah beberapa hal berikut ini.

1. Perantaian:

Misalnya: Dari .html ke .html?m=1.

Bagian ini sepertinya belum ada solusinya, karena tak mungkin mengubah itu di Blogspot.

2. Button icon:

Icon ada baiknya pada tampilan desktop berikuran 48×48px dan mobile 24×24px.

Namun sayangnya Button icon pada template bawaan juga mengalami masalah di PageSpeed Insight karena tidak ada titelnya dan saya belum tau cara memperbaikinya sendiri karena Button iconnya dikemas dalam kode include.

Beberapa jenis pola markup button yang disarankan:

<button id="text">Name</button>

<button id="al" aria-label="Name"></button>

<button id="alb" aria-labelledby="labeldiv"></button><div id="labeldiv">Button label</div>

<button id="combo" aria-label="Aria Name">Name</button>

<button id="buttonTitle" title="Title"></button> 

Jika punya akses ke button, perbaiki saja dengan memilih salah satu jenis pola diatas yang sesuai dengan Template kita sebagai solusi mengatasinya.

3. Gambar:

Baik "ukuran gambar" maupun atributnya yaitu "title" dan "alt". Kita dianjurkan untuk menentukan ukuran gambar berbeda-beda sesuai tampilan perangkat. Tidak hanya sebatas ukuran berbeda saja tapi juga rasionya harus selaras, hal yang terkadang menjadi masalah ketika gambar 500x500px meresize dirinya sendiri secara otomatis menjadi 600x400px, dapat menimbulkan buram karena hasil resize tidak selaras dengan ukuran asli.

Solusi yang dapat kita lakukan mungkin sebaiknya gambar yang kita upload di set ke original. Namun untuk saya pengguna hp kalau me-set gambar ke original bisa-bisa kesulitan untuk menulis posting karena layar hp tertutup gambar besar. Jika tidak di set ke original maka sama saja bakal menjadi gambar kecil juga yang berpotensi buram. Misalnya di halaman postingan kita meupload gambar ukuran 800px di set ke 'mode sedang' akhirnya berubah menjadi 300px dan ketika di halaman beranda dan label, 300px ini akan me-resize dirinya lagi secara otomatis menjadi misalnya 320px, kacau dah. Jadi sebaiknya set ke original agar saat dia me-resize dirinya kualitas tidak turun terlalu jauh.

Dan untuk "title" dan "alt" pada gambar di halaman depan dan label, jika pemasangan gambarnya menggunakan kode Background maka tidak bisa dipasangi atribut "title" dan "alt". Solusinya sepertinya cukup hanya menambahkan title pada link di depan gambar background.

Contoh:

<a href="url-post" title="title-post">

<style>background-image: url(...);</style>

</a>

Demikian juga jenis kode image responsive seperti berikut:

<a href="url-post" title="title-post">

<b:include... name="responsiveStyle"/>

</a>

Juga tidak bisa dipasangi atribut "title" dan "alt". Namun, meskipun tidak cukup memenuhi syarat, tapi kedua jenis kode gambar diatas dapat diterima sebagai title gambar meskipun menaruh titelnya di link.

Sedangkan kode gambar manual seperti ini: <img alt="nama-gambar" title="nama-gambar"..

Juga bukan tanpa kekurangan, kode jenis ini akan mengunci mati width dan height, sehingga kurang memenuhi syarat dimana ketentuannya ukuran gambar harus berbeda-beda di tampilan setiap perangkat, Mobile dan Desktop.

4. Warna teks:

Warna teks dan background juga harus diperbaiki dengan se-kontras mungkin. Jika backgroundnya putih teksnya harus hitam banget dan sebaliknya. Ada toolnya di PageSpeed Insight untuk mengetes warna.

Hal tersebut bertujuan menyempurnakan pengalaman bagi pengguna teknologi asistif, seperti pembaca layar (Tunanetra).

Dan masih banyak lagi yang perlu diperbaiki, tapi dengan memperbaiki beberapa hal diatas minimal dapat menambah sedikit score nilai blog kita.

Tiap template tentu mengalami masalah yang berbeda-beda untuk lebih jelasnya silakan periksa saja di PageSpeed Insight. Seperti yang kita tau ada yang namanya Template Modif, dan ada Template Bawaan, yang terbagi lagi menjadi dua jenis: Klasik dan Moderen, meskipun jenis Klasik tapi jangan kuatir, karena sepertinya meskipun berjenis Klasik tapi mesinnya sudah terbarukan yang sudah disesuaikan dengan standar jenis moderen, jadi aman selama masih berstatus Template Bawaan, aman karena pihak Blogger yang akan melakukan perbaikan untuk kita.

Namun jika menggunakan Template Modif yaitu menggunakan hasil dari modifikasi para kreator template maka entah itu klasik atau moderen, dua-duanya tidak ada jaminan, terlebih jika versi gratis, kita harus memperbaikinya sendiri, tapi jika para modifer sigap ikut menyesuaikan mengikuti pembaruan maka pengguna Template Modif juga bisa bersantai, tidak perlu memperbaiki sendiri, cukup menunggu update dari kreatornya saja.

Sekali lagi, jangan kuatir dan tak perlu pusing, khusus pengguna Template Bawaan kita tunggu saja pihak Blogger yang akan memperbaikinya untuk kita dan juga pengguna Template Modif, cukup tunggu saja update dari kreatornya.

Cara memperbaiki Template Blog agar sesuai standart PageSpeed Insight

# Cara memperbaiki error Button

Kesalahan pada button umumnya terjadi karena elemen tidak memiliki markup alias kosong atau terisi tapi tidak sesuai kriteria.

Seperti disebutkan sebelumnya diatas, ada lima pola markup yang lulus kriteria pengujian dan kita pilih satu yang penerapannya paling mudah, berikut ini.

Dalam kasus Template Notable elemen botton markupnya kosong jadi kita bisa menambahkannya secara manual seperti berikut ini.

Kode asli button Hamburger Menu:

<b:include data='{ button: true, iconClass: &quot;hamburger-menu&quot; }' name='menuIcon'/>

Lalu ubah menjadi seperti ini:

<button class='svg-icon-24-button hamburger-menu' id='menu' title='Main menu'><b:include name='menuIcon'/></button>

Selesai, silakan lakukan juga cara yang sama pada button lain yang memerlukan perbaikan. Cara ini berhasil pada Template Notable dan kemungkinan bisa juga diterapkan buat Contempo dan Essential karena pada dasarnya mereka sejenis.

# Cara memperbaiki Meta Description

Tag meta description terpasang tapi tidak terdeteksi oleh PageSpeed Insight sehingga dianggap kesalahan. Solusinya adalah aktifkan "Description untuk mesin telusur" di Setelan Blogger. Dan tambahkan Deskripsi secara manual untuk setiap postingan melalui "edit posting", pilih ikon gerigi dan tambahkan Deskripsi.

# Cara memperbaiki Read More

Link "Read More" atau "titik-tiga" pada kilasan postingan di beranda umumnya tidak memiliki titel dan dianggap sebagai kesalahan, untuk menambahkan titel secara manual jelas tidak memungkinkan karena kita tidak memiliki akses kesana. Solusinya adalah terpaksa menghilangkan "Link pada titik-tiga" tersebut dengan cara meng-hiddennya menggunakan css seperti berikut ini.

.post-snippet .snippet-fade{

display:none;

}

Silakan tambahkan potongan css tersebut kedalam template dan selesai. Css tersebut berlaku untuk Notable, Contempo Essential, dan template sejenisnya.