Mustahil untuk membuat Google benar-benar senang. Saya sudah lama menyerah, meskipun ada masalah yang perlu diatasi, seperti CLS
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.
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
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.
Cumulative Layout Shift Debugger Cumulative Layout Shift Debugger,
Alat ini, yang dibuat oleh seorang insinyur Chrome, adalah salah satu alat yang paling berguna untuk menemukan masalah CLS.
Jika sebagian besar teks pada halaman disorot, kemungkinan font Anda yang menyebabkan perubahan tata letak.
Layout Shift GIF Generator Layout Shift GIF Generator
CLS Visualizer Alat ini, sebagai salah satu yang paling sederhana, adalah alat yang dengannya saya berhasil menangkap perpindahan terbaik.
CLS Visualizer
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.
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.
Buat profil baru dan tambahkan 100 Kb atau kurang untuk mengujinya dalam "gerakan lambat".
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.
Dengan ekstensi peramban Di Chrome, Anda bisa memasang ekstensi CLS Checker - Journey Further
Webpagetest Situs pengukuran lain di mana Anda bisa melakukan uji coba adalah di webpagetest.org
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.
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 lebih rinci Ad Inserter
Perubahan iklan yang dapat beradaptasi ke ukuran tetap 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 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.
Jika Anda menggunakan Versi PRO
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:
Jika tinggi iklan sama dengan tinggi ruang yang dicadangkan (tinggi blok), tidak akan ada perubahan desain dan tidak akan mempengaruhi CLS. Jika tinggi iklan lebih besar dari tinggi ruang yang disediakan (tinggi blok), desain dapat digeser ke bawah untuk mengakomodasi iklan dan mempengaruhi CLS. 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.
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 WP Rocket
Atau plugin Litespeed Cache
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
