Bismillah
Alhamdulillah, Allah gerakkan hati dan mudahkan aku untuk menulis entri ini. Sebenarnya aku malas sangat-sangat mahu buat tutorial pasal ni.
Kalau buat tutorial ni banyak sangat mahu edit. Nak tulis tu boleh saja. Tapi mungkin ada sesetengah orang dia tak faham kalau tak tengok sendiri kan.
Jadi, bersyukur sangat sebab tanpa bantuan dari Allah memang tak mampu nak buat entri ini.
Hari ini apa yang aku mahu kongsikan dengan korang ialah macam mana mahu perbetulkan core web vitals kat Google Search Console.
Untuk makluman korang, cara ini bukan dapat selesaikan masalah core web vitals 100% tau. Cara ini tidak semestinya berkesan sebab semuanya bergantung dengan issues yang ada pada blog masing-masing.
Setiap blog mempunyai type of issues yang berbeza. Jadi aku cuma kongsikan secara umum sahaja tau. Please and please fahamkan tutorial ini ya. Aku tunjukkan cara selesaikan masalah core web vitals di blog kedua aku ya.
Cara Mudah Fix Core Web Vitals Google Search Console
1. Pertama sekali, pergi ke Blogger - Setting - Crawlers and indexing - Google Search Console
2. Dah masuk kat Google Search Console, korang pergi Overview. Korang akan nampak bahagian Experience ada Page Experience, Core Web Vitals, dan Mobile Usability.
Core web vitals terbahagi kepada dua iaitu mobile dan desktop. Sekiranya korang fix mobile view, so korang hendaklah buka link artikel melalui mobile. Begitu juga dengan sebaliknya.
Kalau korang nak fix desktop punya error, then boleh buka link artikel melalui pc atau laptop. Aku rasa dua bahagian inilah aku salah buat dulu. Oleh sebab itu tak dapat nak selesaikan issues kat core web vitals tu.
3. Klik ja Core Web Vitals tu. Boleh nampaklah report dia macam mana. Boleh nampaklah ZERO Poor URLs and URLs NEED IMPROVEMENTS. Maksudnya tiada issues atau masalah artikel korang tu kat mobile.
Once you get ZERO kat dua bahagian ini. Automatically korang passed core web vitals for mobile at Pagespeed Insight. Boleh rujuk gambar kat bawah.
Memandangkan Blog Inspirasi Kami ini tidak mempunyai masalah di Mobile. Kita tengok bahagian Desktop pula.
4. Jadi pada bahagian Desktop, ada 143 URLs Need Improvement. Kalau ada POOR URLs, korang utamakan fix untuk poor urls dahulu.
Kat sini type of issues that you need to fix is CLS issue: more than 0.1 (desktop). Apabila korang belum buat apa-apa (belum start fix), bahagian validation tu akan keluar "Not Started".
Apakah yang dimaksudkan dengan Cumulative Layout Shift (CLS) ?
CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.
Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.
Sumber : https://web.dev/cls/
Secara ringkas untuk korang lebih faham, CLS ini ada kaitan dengan visual (Images) ataupun kita punya pandangan terhadap page website tersebut.
Ini bukan maksud sebenar ya. Cuma aku mahu terangkan dalam ayat yang aku faham. Dalam erti kata lain, apabila kita masuk dalam website atau blog tersebut, dari segi visual apa yang mengganggu penglihatan kita terhadap halaman tersebut.
Don't worry, aku tunjukkan juga contoh dia kat blog.
5. Korang klik sahaja type of issues tu seperti CLS issue: more than 0.1 (desktop). Kat situ akan dipaparkan senarai URLs yang kita perlu perbaiki.
Walaupun 143 URLs tu nampak banyak sebenarnya tak banyak pun. Hal ini demikian kerana dia dah compilekan 1 URLs tu mempunyai masalah yang sama untuk artikel yang lain juga.
Korang nampak kan gambar link artikel kat bawah? Aku dah highlight kan yang warna hijau. Jadi apabila kita fix link tersebut, jadi artikel lain yang ada problem yang sama juga automatik akan terus fix.
6. Jadi korang pergi ja buka link artikel tersebut. Jangan klik Pagespeed Insight ya. Aku ajar korang cara lain aku selalu buat.
Copy link artikel dan paste kat google macam biasa. Dan kenal pasti apa masalah kat artikel tersebut. Macam yang aku katakan CLS ini ada kaitan dengan visual (Images) ataupun kita punya pandangan terhadap page website tersebut.
Jadi, korang fokus pada bahagian :
- Imej
- Saiz iklan
- widget lain - Bloglist, Popular post, recent post dan sebagainya
- Font & Saiz font
So far yang tu sahaja lah dulu korang tengok.
Macam mana mahu lihat apa masalah kat URLs (artikel tersebut)?
Aku bagi contoh salah satu artikel iaitu https://www.inspirasikami.com/2021/05/cara-mudah-buat-bisnes-bundle-bisnes.html
Jadi apabila korang buka saja link tu, masalah yang kita boleh lihat ialah pada bahagian Blog Achieved.
Nampak tak? Blog achieved tu mengganggu pandangan kita secara visual sebab dia list sampai kat bawah. Panjang betul list dia. Jadi aku kena fix part ini.
So, cara aku fix adalah dengan buat Scroll bar achieved. Apabila dah fix, nampak senang mata memandang gitu.
Hah! Lagi satu, cara nak fix problem ini semua korang kena cari sendiri tau. Yang penting kita dah tahu root of the problems tu saja. Mahu aku ajar juga memang susahlah. Hahaha~
Yang ini memang kena cari solusi sendiri. Sebab korang kena faham tau, setiap blog mempunyai design yang berbeza, walaupun kita guna template yang sama.
7. Kemudian korang selesaikan satu persatu link tersebut. Dah settle baru validate fix. Aku sebenarnya penat mahu buat tutorial semua. Aku kongsikan secara ringkas sahaja masalah yang kebanyakkan blogger selalu buat.
Antara masalah lain yang korang kena fix ialah :
- Bahagian imej tak lengkap - alt text, title text, tak set ke original imej
- Bila imej terlalu besar - Tak compress atau resize (secara luaran nampak okay tapi file tersebut memberatkan halaman blog korang)
- Bahagian search descriptions dan label tidak diisi.
- Font yang bercampur aduk (Ada yang medium, large) - Kalau mahu lagi kemas dan nampak tersusun sila gunakan subheading, blod, italic atau format yang ada pada blog
- Iklan menutup konten / Saiz tidak sesuai (Sebaik-baiknya guna responsive ads bukan fixed ads)
Dan banyak lagi masalah-masalah lain yang aku tidak dapat senaraikan. Tak boleh fikir dah.
Kesimpulannya
To be honest, ramai yang tanya Nurul macam mana nak fix yang nie, yang tu. Aku mahu sangat-sangat bantu korang. At the same time I just hope everyone should learn and know about this. Sekurang-kurangnya korang kena tahu sendiri jugalah apa masalah blog korang.
Kalau korang upah orang, dia boleh fix untuk korang tapi punca korang tak tahu pun dari mana? End up korang akan buat benda yang sama again and again.. Kan dah buang duit kat situ. Lepas tu korang pun hairan kenapa blog masih slow dan sebagainya.
Sebab masalah tu takkan selesai selagi kita sentiasa update blog. Akan sentiasa ada error. Nak tak nak memang kena buat juga at least sebulan sekali kita audit blog.
Walaupun aku ada servis check blog atau tengok setting blog. I don't fix it for you guys. Aku cuma bagi nasihat dan cadangan sahaja macam mana nak buat untuk selesaikan masalah korang. Selebihnya korang kena buat sendiri. Korang tanyalah sesiapa yang pernah buat blog dengan aku memang tahu lah.
Memang kena buat satu-satu. Tiada jalan shortcut. Banyaknya mahu buat? Yup memang banyak dan bertambah banyak kalau kita biarkan. Tapi hasilnya sangat puas hati. Korang yang akan dapat hasil bukan aku.
Aku sentiasa ingatkan diri aku aku berblog bukan sebab income walaupun perlu juga income dari blog. Aku mahu korang rasa apa yang aku rasa sebagai blogger sepenuh masa ini. Bukan mudah sebenarnya jadi blogger.
I really happy sebab dapat siapkan artikel ini. Alhamdulillah!
Aku sangat-sangat gembira dan senang hati apabila kita semua dapat belajar sama-sama. Jadi blogger yang lebih baik. Berkongsi ilmu dan manfaat. I really love you guys, my readers, anyone who support this blog I really appreciate it!
Doakan semoga aku diberikan ilham untuk menulis lebih banyak manfaat kepada korang. Maaf atas kekurangan dan kelemahan dalam penulisan ini. Aku kongsikan setakat mana pengetahuan yang aku ada sahaja.
Kalau ada apa-apa tambahan boleh komen ya.
Thanks Nurul share... Lepas ni dah reti dah nak fix... Dok cari tutorial lain juga... Tak bantu sangat sebab dari Indonesia atau omputih kan... Ni dah ada penerangan Gini... Lebih mudah faham
BalasPadamAlhamdulillah. Ada yang boleh dirujuk. Terima kasih sangat-sangat ya. Hal macam ni yang ganggu kelancaran blog walau rajin update blog tapi kalau ada yang tak clear pun tak OK juga.
BalasPadamThanks for sharing, Nurul.
BalasPadamthanksssss
BalasPadamTerima kasih..membantu.
BalasPadamTerima kasih atas penerangannya Nurul. Semoga dapat membantu blogger2x yang ada masalah begini untuk betulkan semula dan lajukan blog.
BalasPadamTerima kasih Nurul. Walaupun agak teknikal tapi sedikit sebanyak membantu
BalasPadamBagusnya tutorial ni.. kak net start tahun lepas guna wordpress. Tak berapa reti nak fix benda alah ni. Biar je dia dok turun naik cam gitu je.
BalasPadambagus info ni, kena fahamkan satu persatu... ada banyak yang perlu dibuat kena ikut step
BalasPadamthank nurul. sangat membantu tutorial ni. jelas
BalasPadamKena amik masa ni untuk fahamkan satu2 .. time kasih sebab kongsi ilmu ni
BalasPadamTerima kasih kerana singgah ke Blog Sii Nurul. Jika ada sebarang pertanyaan, komen, penambahbaikan, cadangan mahupun pandangan. Boleh tinggalkan jejak anda.