Memecahkan masalah CLS dan Adsense

 

Mustahil untuk membuat Google benar-benar senang. Saya sudah lama menyerah, meskipun ada masalah yang perlu diatasi, seperti CLS (Cumulative Layout Shift).

Pergeseran Tata Letak Kumulatif

Cumulative Layout Shift adalah perubahan kumulatif dari desain. Metrik ini penting karena menganalisis stabilitas visual dan frekuensi pengunjung mengalami perubahan desain yang tidak terduga.

Singkatnya, apa yang diukurnya adalah setiap perpindahan elemen di bagian atas halaman selama pemuatan.

Mencapai CLS yang rendah membantu memastikan bahwa halaman tersebut enak dipandang dan mencegah gerakan yang mengganggu yang dapat mengakibatkan pembaca kehilangan pandangan dan/atau posisi elemen navigasi yang penting.

Memecahkan masalah CLS dan Adsense

Ini dianggap sebagai pengalaman pengguna yang baik jika CLS tidak melebihi 0,1, hingga 0,25 perlu ditingkatkan dan sejak saat itu dianggap sebagai skor buruk. Hal ini, seperti yang saya kira Anda tahu, bisa diukur dengan beberapa cara. Yang paling umum digunakan adalah PageSpeed Insights.

Sebagaimana dicatat dalam dokumentasi dari Core Web Vitals,CLS yang buruk dapat disebabkan oleh berbagai elemen seperti gambar atau video dengan dimensi yang tidak diketahui, font yang ditampilkan lebih besar atau lebih kecil dari alternatifnya, atau iklan pihak ketiga atau widget atau efek animasi yang berubah ukuran secara dinamis.

Paradoksnya, beberapa elemen yang cenderung menyikat CLS adalah iklan Google Adsense. Khususnya jika Anda menggunakan pengumuman otomatis membiarkan Google memutuskan segalanya (tidak disarankan, yang terbaik adalah menggunakan iklan otomatis hanya untuk menampilkan iklan peluru dan / atau jangkar). Ada beberapa kasus di mana mereka bahkan benar-benar merusak kecepatan pemuatan.

Cara mendeteksi perpindahan

Inilah inti permasalahannya: apa sebenarnya yang harus kita cari dan bagaimana kita menemukannya? Nah, apa pun yang berubah ukuran dan/atau bergeser selama pemuatan.

Sekarang kita sedang berusaha memperbaiki masalah Adsense, kita bisa melihat elemen-elemen lainnya yang mungkin menggemukkan CLS. Ada berbagai cara untuk melakukan ini, berikut ini beberapa di antaranya.

Melihat

Metode yang paling sederhana adalah pengamatan sederhana, dengan mata. Jika perpindahan terlihat, Anda akan segera melihatnya, tetapi ada gerakan yang kurang terlihat yang memerlukan pemeriksaan lebih dekat.

Di Search Console

Di GSC, di bawah "Top web metrics", Anda bisa mendapatkan daftar URL dengan masalah CLS dan LCP untuk melihatnya lebih dekat satu per satu.

Memecahkan masalah CLS dan Adsense 1

Cumulative Layout Shift Debugger

Cumulative Layout Shift Debugger, adalah situs web di mana Anda memasukkan url yang ingin Anda analisis dan membuat GIF animasi yang menunjukkan semua perubahan desain versi seluler dan desktop.

Alat ini, yang dibuat oleh seorang insinyur Chrome, adalah salah satu alat yang paling berguna untuk menemukan masalah CLS.

Memecahkan masalah CLS dan Adsense 2

Jika sebagian besar teks pada halaman disorot, kemungkinan font Anda yang menyebabkan perubahan tata letak.

Layout Shift GIF Generator

Layout Shift GIF Generator adalah situs web lain yang melakukan hal yang sama, menghasilkan gif dengan perpindahan untuk versi seluler dan desktop. Anda bisa mencobanya untuk membandingkan hasilnya. Selalu ada sedikit perbedaan dalam pengukuran masing-masing alat dan Anda mungkin menemukan dalam satu alat, apa yang tidak dapat ditunjukkan atau tidak terdeteksi oleh alat lainnya pada waktu tertentu.

CLS Visualizer

Alat ini, sebagai salah satu yang paling sederhana, adalah alat yang dengannya saya berhasil menangkap perpindahan terbaik.

CLS Visualizer adalah ekstensi yang sangat berguna, yang seperti namanya, akan membantu Anda memvisualisasikan metrik Cumulative Layout Shift dari halaman dengan menunjukkan kepada Anda elemen mana yang berubah dan bagaimana perubahannya. Perhatikan bahwa ini juga merupakan alat lab yang menyediakan data berdasarkan perangkat, browser, resolusi layar atau jenis koneksi Anda.

Memecahkan masalah CLS dan Adsense 3
Ikon iblis itu memiliki perpindahan lokasi blok yang mengandungnya yang tidak terlihat dalam navigasi.

Ketika Anda mengaktifkan ekstensi, ekstensi ini akan menunjukkan pengukuran CLS dalam daftar dan ketika Anda mengklik masing-masing, animasi elemen yang menyebabkannya akan muncul dalam warna merah.

Berkat ekstensi ini, saya telah mencapai zero CLS pada banyak halaman. Meskipun bisa jadi banyak hal yang menyebabkannya sehingga saya membiarkannya terpasang untuk meninjau url tanpa tergesa-gesa.

Memecahkan masalah CLS dan Adsense 4

Ubah kecepatan pemuatan situs dengan Chrome Dev Tools

Chrome Dev Toolsmenawarkan kemungkinan-kemungkinan yang menarik, salah satu yang paling berguna untuk memahami CLS adalah opsi untuk mengurangi bandwidth di mana halaman dimuat sehingga Anda dapat memvisualisasikan dengan jelas kapan perubahan desain terjadi dan elemen mana yang berkontribusi terhadapnya.

Untuk melakukan ini, buka Chrome Dev Tools di browser dengan klik kanan / periksa di situs web Anda dan di Jaringan cari ikon Wifi yang ditunjukkan pada gambar dan di sebelahnya Anda akan menemukan dropdown di mana Anda dapat menambahkan kecepatan khusus.

Memecahkan masalah CLS dan Adsense 5

Buat profil baru dan tambahkan 100 Kb atau kurang untuk mengujinya dalam "gerakan lambat".

Memecahkan masalah CLS dan Adsense 6

Sekarang, berselancar dengan kecepatan dari saat internet berjalan cepat, Anda akan lebih mudah mengidentifikasi apa yang mungkin memberi Anda masalah selama pemuatan.

Rendering

Di Layout Shift Regions di Chrome Dev Tools, Anda juga dapat melihat perubahan tata letak yang disorot dengan warna biru saat Anda menavigasi halaman Anda secara real time.

Berikut ini langkah-langkah untuk mengaktifkan wilayah perubahan tata letak: Di konsol, cari "Rendering" dan centang kotak centang "Rendering" dan kotak centang lainnya yang ingin Anda coba.

Centang kotak centang Rendering regions dan kotak centang lain yang ingin Anda coba. Sekarang, ketika Anda menelusuri halaman, perubahan rendering akan disorot dengan warna biru.

Memecahkan masalah CLS dan Adsense 7

Dengan ekstensi peramban

Di Chrome, Anda bisa memasang ekstensi CLS Checker - Journey Further dan menguji semua URL yang penuh dengan tanda baca. Selain itu, ekstensi ini memberikan petunjuk dalam bentuk tag merah dan menunjukkan daftar elemen dan CLS yang mereka konsumsi. Mengklik "Toogle" menyoroti elemen yang dimaksud. Dalam kasus saya, karena saya sudah memperbaiki masalah iklan Adsense, hanya satu yang muncul.

Memecahkan masalah CLS dan Adsense 8

Webpagetest

Situs pengukuran lain di mana Anda bisa melakukan uji coba adalah di webpagetest.org dan Anda bisa menonton video dan gif animasi yang dihasilkannya.

Memecahkan masalah CLS dan Adsense 9

Menjeda video membuatnya lebih mudah untuk menemukan perpindahan kecil.

Jika Anda melihat lebih dekat, baik item menu maupun judul dan teks digeser sedikit ke kanan oleh apa yang tampaknya merupakan perubahan ukuran dan/atau penempatan huruf, tetapi ruang iklan di atas judul sudah dicadangkan, jadi tidak menggeser konten ke bawah. Hal ini dipecahkan dengan mengecilkan H1 sedikit dan memperbaiki pembungkusan teks yang menyertainya.

Memecahkan masalah CLS dan Adsense 10

Tetapi itu masalah yang berbeda, mari kita berurusan dengan perilaku iklan.

Solusi untuk memesan slot blok iklan

Mencari solusi terbaik dan tercepat, saya menemukan bahwa solusi terbaik adalah menambahkan nilai tinggi minimum ke pembungkus (div) di sekitar masing-masing blok iklan untuk memesan ruang itu dan menghindari pengguliran setelah memuat.

Namun demikian, tampaknya tidak cukup menggunakan kelas untuk menunjuk ke properti CSS ini, tetapi juga menggunakan ID untuk pembungkusnya. Tampaknya, untuk beberapa alasan yang tidak diketahui, Google AdSense JavaScript menghapus arahan tinggi minimum dari objek induk mana pun. Namun demikian, mereka tidak dihapus jika ID digunakan untuk penargetan CSS.

Hal ini dijelaskan oleh di sini dirangkum dan agak lebih rinci dalam dokumentasi Google. Karena saya merasa solusi ini sangat merepotkan, karena saya harus memeriksa semua blok, saya terus mencari alternatif sampai saya menemukan apa yang berhasil bagi saya, yaitu Ad Inserter. Inilah langkah-langkahnya.

Perubahan iklan yang dapat beradaptasi ke ukuran tetap

Memecahkan masalah CLS dan Adsense 11

Hal pertama adalah berhenti menggunakan blok iklan adaptif. Saya mengubah semua blok ke ukuran tetap.

Keputusan ini harus dipelajari dan dinilai berdasarkan kasus per kasus.

Meskipun Google mengklaim bahwa iklan yang dapat disesuaikan menghasilkan lebih banyak pendapatan (jelas karena kemampuan untuk menampilkan ukuran yang berbeda), ini cukup elastis dan dapat bervariasi sesuai dengan skenario yang berbeda. Jika Anda memilih ukuran yang paling populer, Anda akan selalu menampilkan

Nonaktifkan optimalisasi ukuran

Memecahkan masalah CLS dan Adsense 12

Meskipun blok seharusnya sudah memiliki ukuran tetap, Anda harus menonaktifkan opsi yang memungkinkan Google untuk memutuskan ukuran iklan seluler sendiri. Opsi ini dapat ditemukan di administrasi Adsense di bawah Iklan/Pengaturan Global.

Dengan cara ini kami menghindari kejutan jika kami telah meninggalkan beberapa iklan yang telah kami tempatkan dengan tangan. Bagaimanapun juga, fakta bahwa ukurannya tetap, tidak berarti bahwa mereka tidak lagi responsif.

Pesan ruang untuk iklan Anda dengan Ad Inserter

Menurut saya, Ad Inserter adalah plugin terbaik untuk manajemen iklan, yang bahkan dapat digunakan untuk menambahkan konten lain.

Untuk memesan ruang untuk setiap iklan, cukup buka "Display" dan tentukan lebar dan tinggi setiap blok.

Memecahkan masalah CLS dan Adsense 13

Jika Anda menggunakan Versi PRO, Anda juga dapat menetapkan Lazy Load, yang juga cenderung lebih membantu meringankan CLS.

Beberapa pertimbangan

Memesan ruang untuk Adsense memiliki kekurangan, di mana iklan tidak dapat ditampilkan karena tidak disajikan pada ukuran itu atau tidak ada pengiklan untuk situs Anda setiap saat, Anda bisa mendapatkan ruang kosong seukuran ruang yang dipesan.

Di Ad Inserter, hanya untuk sisipan sisi server, Anda bisa menentukan ketinggian secara langsung dengan kode CSS Khusus.

Perhatikan bahwa tinggi iklan ditentukan oleh kode iklan. Kode iklan adaptif dapat mengatur tinggi iklan sesuai dengan ruang yang tersedia.

Beberapa jaringan iklan (seperti AdSense) juga dapat menayangkan iklan yang lebih kecil dari ruang yang tersedia. Tinggi blok, seperti yang didefinisikan dalam Ad Inserter, adalah tinggi blok yang disisipkan, yaitu tinggi div yang membungkusnya. Ini adalah ruang yang disediakan untuk iklan. Hal-hal berikut ini bisa terjadi apabila memesannya:

  1. Jika tinggi iklan sama dengan tinggi ruang yang dicadangkan (tinggi blok), tidak akan ada perubahan desain dan tidak akan mempengaruhi CLS.
  2. Jika tinggi iklan lebih besar dari tinggi ruang yang disediakan (tinggi blok), desain dapat digeser ke bawah untuk mengakomodasi iklan dan mempengaruhi CLS.
  3. Jika tinggi iklan kurang dari tinggi ruang yang dicadangkan (tinggi blok), Anda akan mendapatkan ruang kosong di bawah iklan, tetapi tata letak tidak akan berubah dan tidak akan mempengaruhi CLS.

Beberapa kode iklan, seperti kode iklan adaptif AdSense, dapat mengesampingkan tinggi wadah utama. Dalam hal ini, tinggi blok akan ditimpa dan tidak akan diterapkan.

Singkatnya, dalam kasus masalah CLS mendesak yang perlu diselesaikan dengan meminimalkan perubahan desain, opsi tercepat adalah menggunakan ukuran iklan tetap bilamana memungkinkan.

Memecahkan masalah CLS dan Adsense 14

Dan selagi Anda melakukannya, Anda bisa memastikan bahwa Anda tidak memiliki dimensi yang hilang dalam gambar, ini juga bisa diperbaiki dengan sejumlah cara. Beberapa cara cepat dan mudah adalah menggunakan Perfmatters o WP Rocket (keduanya dibayar untuk).

Memecahkan masalah CLS dan Adsense 15
Memecahkan masalah CLS dan Adsense 16

Atau plugin Litespeed Cache jika Anda meng-host blog Anda di server Litespeed.

Memecahkan masalah CLS dan Adsense 17

Jika semuanya berjalan dengan baik, dalam beberapa jam Anda akan melihat penurunan CLS dalam laporan lapangan dan dalam beberapa hari dalam laporan laboratorium dariPageSpeed Insights.


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artikel terkait

GB QUERY LOOP BLOCK VERSION 1