Google Lighthouse - 'Sempurna'

wahyunanangwidodo

wahyunanangwidodo Rabu, 24 Februari 2021

Google Lighthouse - 'Sempurna'

Gambar diatas adalah hasil dari tes performa dan tiga kategori lainnya yang saya lakukan melalui google lighthouse terhadap salah satu postingan di blog ini. Tanpa terpasang elemen atau script tambahkan dari luar, seperti iklan yang tidak bisa di optimasi.

Meskipun hasil dari tes tersebut tidak semuanya 100%, tapi saya bisa katakan hasil tersebut 'sempurna'.

Once upon a time

Saya ingin sedikit bercerita tentang bagaimana bisa mendapat hasil skor seperti gambar diatas. Sekedar bercerita.

Jujur awalnya saya tidak terlalu mempedulikan semua aspek dari kategori yang ada selain 'seo'. Namun karena terdapat suatu hal yang ingin saya perbaiki yang juga berhubungan dengan seo dan marupakan salah satu faktor penting yang dianggap google, saya harus memperbaikinya.

Yang ingin saya perbaiki pada awalnya adalah soal Core Web Vitals di Google Search Console, dimana beberapa url skor CLS (cumulative layout shift) yang tinggi. Nilai atau skor CLS yang tinggi inilah yang membuat saya memperbaiki strktur elemen pada blog hingga akhirnya redesign template.

Cumulative Layout Shift atau Pergeseran Tata Letak Kumulatif sendiri meruapakan suatu metrik penilaian dari perubahan letak suatu elemen akibat dari interaksi kita terhadap element terebut. Perubahan tata letak yang menjadi pergeseran suatu elemen akan dihitung dan dinilai yang akan muncul pada Core Web Vitals.

Ketika ada penilaian, ada beberapa kategori nilai / skor yang diberikan, diantaranya:

  • Good - Nilai dibawah 0.1
  • Needs improvement - Nilai antara 0.1 - 0.5
  • Poor - Nilai diatas 0.5

Dan inilah skor yang saya dapat sebelum saya lakukan optimasi:

Google Lighthouse - 'Sempurna'

Untuk skor setelah di optimasi sendiri belum dapat dilihat karena harus menggungu 28 hari setelah di validasi ulang.

Dan ini hasil setelah optimasi yang dilihat dari tes google lighthouse dari blog:

Google Lighthouse - 'Sempurna'

Hasil optimasi saya mendapat skor 0. Namun saya ingin tekankan sekali lagi, bahwa hasil test tersebut dilakukan tanpa adanya unit iklan yang terpasang.

Oleh karena itu meskipun dari tes lighthouse skor yang didapat 0, saya tidak yakin hasilnya pada Core Web Vitals nantinya akan sama. Karena unit iklan yang terpasang yang menjadi elemen tambahan sedikit sulit untuk diprediksi dan di optimasi.

Lihat saja nanti...

Saya ingin lanjut bercerita.

Berawal dari memberbaiki elemen-elemen yang perlu diperbaiki demi cls, saya juga berfikir untuk mengoptimalkan kecepatan blog dan akhirnya harus membuang script javascript/jquery yang tidak perlu dan atau menggatinya dengan cara lain, seperti mengambil elemen dari halaman / url yang berbeda menggunakan ajax.

Yang saya maksud adalah komponen paginasi dibawah ini.

Google Lighthouse - 'Sempurna'

Sebelumnya saya menggunakan ajax untuk load 2 url halaman berbeda dan mengambil element title di setiap url dan di pasang pada paginasi tersebut. Oleh karena beban dan waktu muat semakin banyak, jadi saya menghapus ajax tersebut dan menggunakan cara lain.

Cara ini mungkin bisa dibilang cara trik ya menurut saya. Karena yang saya lakukan adalah mengambil string pathname dari url dan memasangnya pada element paginasi.

var url = "https://www.wahyunanangwidodo.com/2020/11/cara-seeding-data-di-laravel.html";

var urlSubs = url.substr(url.lastIndexOf('/') + 1).replace(/-/g, ' ');

$(".pagination").text(newStr);

//cara seeding data di laravel

Dan dengan cara seperti itu dapat mengurangi bandwidth dan waktu muat halaman yang bertambah.

Lanjut sedikit

Selain optimasi peforma, kita juga perlu mengoptimasi postingan atau artikel kita. Contohnya seperti rasio warna element dan urutan heading.

Rasio warna misalnya antara text / warna depan dan backround / warna latar belakang. Jika warna text ataupun link kita berwarna putih dan backgound juga berwarna putih, maka rasio kontras tidak pas dan akan mengurangi nilai Accessibility pada google lighthouse

Kemudian soal heading. Heading juga perlu menjadi perhatian, yang juga menjadi penilaian Accessibility.

Yang diperhatikan pada pemberian heading adalah urutan penulisannya. Jadi heading harus berurut menurun seperti h1>h2>h3 dst, juga atau heading dan sub heading.

Ceritanya sampai disini

Cukup singkat cerita singkat yang ingin saya ceritakan. Ini bukan untuk pamer atau menyombong; hal tersebut tidak baik.

Banyak sebenarnya hal-hal yang harus diperhatikan demi kesempurnaan yang diminta. Terkadang bikin capek, apa lagi harus merubah apa yang sudah ada.

Tapi juga tapi ada baiknya juga memperhatikan apa yang juga perlu diperhatikan yang juga membutuhkan perhatian.

Bubarr!!!

Satu bulan kemudian

Update terbaru setelah 28 hari lebih.

Akhirnya setelah satu bulan lebih menunggu ternyata hasilnya memuaskan dan mendapat nilai yang baik.

Google Lighthouse - 'Sempurna'

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Berlangganan

Berlangganan untuk mendapat pemberitahuan artikel terbaru via email.