Technology News only at alphatechblocks.com
Software

Memperbaiki Masalah Pergeseran Tata Letak Kumulatif di DavidWalshBlog

Memperbaiki Masalah Pergeseran Tata Letak Kumulatif di DavidWalshBlog

Lebih dari 50 ribu pengembang mengunjungi DavidWalshBlog setiap bulan dari seluruh dunia untuk mempelajari trik JavaScript dan memperbaiki masalah pada kode mereka. Sayangnya, beberapa dari mereka memiliki pengalaman yang lambat di situsnya.

David melacak kinerja Data Web Inti dan kinerja keseluruhannya dengan Metrik Permintaan. Baru-baru ini, kami memperhatikan bahwa skor kinerja CLS miliknya cenderung cukup lambat baik untuk pengguna desktop maupun seluler.

Memperbaiki Masalah Pergeseran Tata Letak Kumulatif di DavidWalshBlog

Tunggu, apa itu CLS?

Pergeseran Tata Letak Kumulatif (CLS) adalah salah satu metrik kinerja Core Web Vital. Ini tidak mengukur waktu buka secara langsung, melainkan mengukur berapa banyak halaman bergeser saat sedang dimuat. Anda pasti pernah melihat ini dan merasa terganggu karenanya. Pergeseran ini membuat sebuah situs merasa lambat bagi pengguna.

CLS dan Core Web Vitals lainnya sangat penting. Bukan hanya karena mereka mengukur pengalaman pengguna, tetapi juga karena mereka mempengaruhi peringkat halaman suatu situs dalam pencarian. Dan lalu lintas pencarian adalah kehidupan bagi blogger, situs media, toko e-commerce, dan hampir semua orang yang memiliki situs web.

Jika kami dapat memperbaiki masalah CLS situs, kami akan memberikan pengalaman yang lebih cepat kepada pembaca, dan meningkatkan peringkat pencarian sehingga David dapat membantu lebih banyak orang. Kedengarannya seperti insentif yang bagus, mari kita cari tahu.

Menabrak Google Lighthouse

Untuk menemukan masalah kinerja, banyak pengembang akan menggunakan alat seperti Google Lighthouse. Saya menjalankan laporan Lighthouse di situs David, dan inilah yang saya dapatkan.

Skor sempurna! Ayo kita berkemas dan pulang.

Masalahnya adalah itu Mercusuar Google bohong. Pengguna sebenarnya tidak akan mendapatkan performa ini. Skor tersebut hanya mewakili satu tes, dari komputer saya yang sangat cepat, di AS, pada koneksi broadband yang cepat.

Pengguna David sebenarnya berasal dari seluruh dunia, di berbagai perangkat dan jaringan, dan kapan saja sepanjang hari. Pengalaman kinerja mereka jauh dari sempurna. Itu sebabnya kita perlu memantau kinerja pengguna secara nyata, jika tidak, kita mungkin tidak akan pernah tahu bahwa ada masalah.

Dimana letak permasalahan CLSnya?

David telah menulis sejak lama dan memiliki ratusan postingan di situsnya. Metrik Permintaan melacak skor CLS per halaman sehingga kami dapat mengatasi masalahnya.

Halaman dengan lalu lintas terbesar adalah halaman root, dan memiliki CLS yang bagus. Namun banyak postingannya, seperti Play Grand Poo World dan Pornhub Interview memiliki skor CLS yang meresahkan. Kami juga dapat melacak elemen yang bertanggung jawab atas CLS, dan untuk sebagian besar postingannya main > article > p. Artinya, paragraf pertama artikel tersebut mengalami pergeseran. Mengapa ia melakukan hal itu?

Apa kesamaan postingan dengan skor CLS terburuk ini? Gambar. Gambar adalah penyebab umum masalah CLS karena browser tidak selalu mengetahui seberapa besar suatu gambar hingga gambar tersebut diunduh. Browser menganggapnya 0x0 hingga ia memiliki gambarnya bergeser segala sesuatu di sekitarnya untuk memberi ruang.

Postingan dengan banyak gambar akan bergeser berkali-kali seiring setiap gambar diunduh dan artikel digeser untuk memberi ruang bagi konten baru.

Menggunakan gambar dengan benar untuk CLS

Untuk menghindari perubahan tata letak saat menggunakan gambar, kita perlu memberikan petunjuk kepada browser tentang seberapa besar gambar tersebut. Browser akan menggunakan petunjuk ini untuk menyediakan ruang pada tata letak gambar setelah selesai diunduh.


Perhatikan bahwa lebar dan tinggi ditentukan sebagai atributnya sendiri — bukan bagian dari tag gaya. Atribut ini menetapkan ukuran dasar gambar serta rasio aspek yang akan digunakan. Anda masih dapat menggunakan CSS untuk memperbesar atau memperkecil gambar dari sini.

Perhatikan juga bahwa tidak ada px satuan yang ditentukan.

Ukuran Gambar di WordPress

DavidWalsh.name dihosting di WordPress, di mana terdapat beberapa alat bawaan untuk melakukan ini. Kita bisa memanfaatkan wp_image_src_get_dimensions untuk mendapatkan dimensi gambar yang dia gunakan dan menambahkannya ke markup.

Membuktikan itu berhasil

David membuat perubahan gambar beberapa hari yang lalu, dan kami sudah melihat peningkatannya. CLS telah turun 20% menjadi 0,123. Kami sudah sangat dekat dengan kisaran CLS yang “Bagus” sekarang.

Masih ada beberapa masalah yang harus diselesaikan seputar font, tapi itu akan menjadi cerita untuk lain waktu dan postingan lain.

Jika Anda ingin meningkatkan kinerja situs Anda yang sebenarnya, atau khawatir kehilangan kekuatan SEO Anda karena masalah Core Web Vital, lihat Metrik Permintaan. Terdapat alat untuk melacak kinerja Anda dan tip yang dapat ditindaklanjuti untuk benar-benar memperbaiki masalah.

Ditambah lagi, ini gratis, jadi ada manfaatnya.

Minta Metrik pemantauan pengguna sebenarnya
Minta Metrik pemantauan pengguna sebenarnya
Todd Gardner

Tentang Todd Gardner

Todd Gardner adalah pengusaha dan pengembang perangkat lunak yang telah membangun banyak produk yang menguntungkan. Dia mendorong penggunaan alat yang sederhana, perangkat lunak yang dapat dipelihara, dan menyeimbangkan kompleksitas dengan risiko. Dia adalah salah satu pendiri TrackJS dan Request Metrics, di mana dia membantu ribuan pengembang membangun situs web yang lebih cepat dan andal. Dia juga memproduseri acara komedi perangkat lunak PubConf.