Pergeseran tata letak terjadi saat elemen yang terlihat di halaman berubah posisi atau ukuran, sehingga memengaruhi posisi konten di sekitarnya. Terkadang pergeseran ini dimaksudkan, seperti saat penampung diperluas sebagai akibat dari tindakan pengguna. Namun, sifat dinamis iklan dapat menyebabkan pergeseran tata letak yang tidak terduga, yang berdampak negatif pada pengalaman pengguna dan dapat menyebabkan masalah kegunaan yang serius.
Panduan ini menjelaskan cara mengukur dan meminimalkan pergeseran tata letak saat menggunakan Tag Google Publisher (GPT).
Penyebab iklan menyebabkan pergeseran tata letak
Iklan biasanya diminta untuk menambahkan konten secara asinkron dan dinamis ke halaman Anda selama atau setelah pemuatan halaman. Saat iklan diambil, sisa halaman akan terus dimuat dan konten non-iklan dapat terlihat oleh pengguna. Jika Anda tidak mencadangkan ruang yang cukup untuk iklan yang dimuat, iklan tersebut dapat menggeser konten non-iklan yang terlihat saat pada akhirnya ditambahkan ke halaman.
Saat menggunakan Tag Google Publisher, ada beberapa titik dalam siklus proses iklan yang dapat menyebabkan pergeseran tata letak:
- Saat
display()dipanggil. Slot dapat meluas atau diciutkan, tergantung pada cara konfigurasinya. - Saat konten iklan dirender. Slot dapat diubah ukurannya jika ditayangkan iklan yang dapat menyesuaikan atau jika ruang yang tersedia tidak cukup. Slot juga dapat diluaskan atau diciutkan pada saat ini, bergantung pada cara konfigurasinya.
- Setelah konten iklan dirender. Jenis materi iklan tertentu dirancang untuk diperluas setelah muncul di halaman.
Perlu diingat bahwa semakin tinggi slot iklan dalam area pandang, semakin banyak konten yang berpotensi untuk dipindahkan. Berhati-hatilah dengan slot di dekat bagian atas area pandang awal (di atas lipatan). Slot ini dapat menyebabkan jumlah pergeseran tata letak yang tidak proporsional karena lebih cenderung terlihat saat konten iklannya dimuat.
Mengukur pergeseran tata letak
Pergeseran Tata Letak Kumulatif (CLS) adalah metrik Data Web Inti yang dapat Anda gunakan untuk mengukur dampak pergeseran tata letak di situs Anda, baik di lab maupun di lapangan.
Di laboratorium
Alat lab mengukur CLS secara sintetis. Artinya, aplikasi tersebut tidak bergantung pada interaksi pengguna yang sebenarnya, sehingga sangat cocok untuk digunakan dalam alur kerja continuous integration dan pengembangan lokal. Namun, alat ini biasanya hanya mengukur performa selama pemuatan halaman dan terbatas dalam kondisi yang dapat disimulasikan, sehingga nilai yang dilaporkan mungkin lebih rendah daripada yang akan dialami pengguna sungguhan.
Audit Iklan Penayang untuk Lighthouse adalah alat yang dapat digunakan untuk mengukur CLS yang secara khusus diatribusikan ke iklan GPT. Untuk mengetahui detailnya, lihat dokumentasi audit mengurangi pergeseran tata letak terkait iklan.
Chrome DevTools juga dapat dikonfigurasi untuk menandai pergeseran tata letak saat Anda membuka situs. ID ini dapat digunakan untuk secara manual mengidentifikasi pergeseran tata letak yang terjadi di dekat slot iklan di halaman Anda.
Di lapangan
Alat kolom mengukur CLS yang dialami oleh pengguna sungguhan saat berinteraksi dengan situs Anda. Proses ini biasanya dikenal sebagai pemantauan pengguna nyata (RUM). RUM memungkinkan Anda mengamati pengaruh faktor-faktor di dunia nyata, seperti kemampuan perangkat, kondisi jaringan, interaksi pengguna, dan personalisasi halaman, yang sering kali sulit atau tidak mungkin disimulasikan dengan pengujian sintetis.
Meminimalkan pergeseran tata letak
Satu-satunya cara yang dijamin untuk menghindari pergeseran tata letak adalah dengan menyediakan ruang yang cukup untuk slot iklan tertentu menggunakan CSS. Menetapkan tinggi dan lebar tetap
langsung pada slot iklan div adalah cara paling efektif untuk melakukannya. Namun,
meskipun skenario ini berfungsi dengan baik untuk slot iklan statis berukuran tetap, skenario yang lebih rumit
mungkin memerlukan pendekatan yang lebih spesifik. Beberapa skenario umum
dijelaskan di bagian berikut.
Slot iklan multi-ukuran
Untuk slot iklan yang menerima beberapa ukuran, kami merekomendasikan salah satu pendekatan berikut:
- Sediakan ruang untuk ukuran terbesar yang dikonfigurasi untuk menayangkan iklan.
- Sediakan ruang untuk ukuran terkecil yang dikonfigurasi untuk menayangkan iklan.
- Sediakan ruang untuk ukuran yang paling mungkin ditayangkan, ditentukan dengan memeriksa data pengisian historis dari pelaporan Google Ad Manager.
Memilih pendekatan yang tepat
Menghemat ruang untuk ukuran terbesar yang dikonfigurasi untuk menyajikan layanan adalah cara paling efektif untuk menghilangkan pergeseran tata letak. Namun, metode ini dapat menghasilkan ruang kosong ekstra di sekitar iklan, jika materi iklan yang lebih kecil dari ukuran yang dipesan ditayangkan. Menyingkat slot iklan agar sesuai dengan ukuran materi iklan yang ditayangkan akan menyebabkan pergeseran tata letak tambahan, sehingga sebaiknya jangan lakukan hal ini. Sebagai gantinya, pemusatan vertikal dan horizontal dapat digunakan untuk mengurangi dampak visual dari ruang kosong yang berlebihan.
Di sisi lain, memesan ruang untuk ukuran terkecil yang dikonfigurasi untuk ditayangkan akan menghindari kelebihan ruang kosong di sekitar iklan Anda. Tindakan ini dapat menjadi opsi yang bagus jika slot iklan Anda biasanya diisi dengan materi iklan yang lebih kecil, atau jika semua ukuran yang didukung slot serupa. Namun, metode ini menyebabkan pergeseran tata letak jika materi iklan yang lebih besar dari ukuran yang direservasi ditayangkan (meskipun pergeseran tersebut umumnya lebih kecil jika dibandingkan dengan tidak mereservasi ruang sama sekali).
Untuk mencapai keseimbangan antara ruang kosong dan pergeseran tata letak, Anda dapat mencadangkan jumlah "rata-rata" ruang untuk slot iklan. Misalnya, pemesanan 100px
secara vertikal menimbulkan sedikit ruang kosong saat materi iklan 320x50 ditayangkan, tetapi
mengurangi skor CLS dibandingkan dengan tidak mereservasi ruang sama sekali. Anda harus bereksperimen dengan berbagai ukuran untuk menemukan keseimbangan terbaik bagi situs Anda sendiri.
Saat menentukan jumlah ruang yang akan direservasi untuk slot tertentu, memeriksa data pengisian historis dari pelaporan Google Ad Manager dapat membantu Anda membuat keputusan yang lebih tepat. Hal ini dapat diilustrasikan dengan baik dengan mengeksplorasi beberapa contoh.
Contoh #1
| Ukuran materi iklan (ditayangkan) | Tayangan Server Iklan (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
Dalam hal ini, memesan 250px secara vertikal dapat mengurangi CLS secara signifikan karena
sebagian besar materi iklan yang ditayangkan adalah 300x250.
Contoh #2
| Ukuran materi iklan (ditayangkan) | Tayangan Server Iklan (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
Dalam hal ini, sebagian besar iklan memiliki tinggi maksimal 90px, sehingga melakukan reservasi 90px
secara vertikal akan sering kali menghindari pergeseran tata letak.
Cara mereservasi tempat
Sebaiknya atasi masalah ini dengan menentukan ukuran slot iklan Anda melalui
properti CSS min-height dan min-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
Dengan menggunakan atribut tinggi min dan lebar minimum, Anda dapat mencadangkan jumlah minimum ruang untuk slot iklan, sambil tetap memungkinkan browser meningkatkan ukuran penampung sesuai kebutuhan. Hal ini memastikan bahwa tidak ada konten yang terpotong jika materi iklan yang lebih besar ditayangkan.
Anda dapat menggabungkan teknik ini dengan kueri media CSS untuk menentukan ukuran minimum yang berbeda untuk ukuran layar yang berbeda:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Pemesanan ruang dengan JavaScript harus dihindari, karena hal itu dapat menyebabkan pergeseran tata letak pada saat skrip dimuat. Melakukan pemesanan ruang dengan CSS dapat menghindari risiko ini.
Slot iklan yang dapat menyesuaikan
Slot iklan yang dapat menyesuaikan tidak menentukan kumpulan ukuran tetap yang didukungnya. Sebagai gantinya, slot ini otomatis diubah ukurannya agar sesuai dengan konten materi iklan yang ditayangkan kepadanya, sehingga dapat mendukung materi iklan dengan ukuran yang tidak pasti. Akibatnya, Anda tidak dapat mereservasi ruang untuk slot ini sebelum meminta konten iklan, dan iklan berukuran dapat menyesuaikan selalu menyebabkan pergeseran tata letak.
Untuk mengurangi efek pergeseran tata letak saat menggunakan slot iklan yang dapat menyesuaikan, sebaiknya lakukan hal berikut:
- Hanya gunakan ukuran
fluiduntuk slot di paruh bawah. - Ambil slot yang dapat disesuaikan sedini mungkin untuk meminimalkan peluang pengguna men-scroll hingga terlihat sebelum ukuran slot diubah.
Slot iklan yang diciutkan dan diperluas
Metode collapseEmptyDivs() memungkinkan Anda
menciutkan div slot iklan sehingga tidak menghabiskan ruang di halaman ketika
tidak ada konten iklan yang dapat ditampilkan. Namun, fitur ini harus digunakan dengan hati-hati
karena dapat menyebabkan pergeseran tata letak yang tidak diinginkan. Seperti disebutkan di
bagian sebelumnya, menciutkan dan meluaskan slot iklan dapat menyebabkan pergeseran
tata letak pada dua titik yang berbeda dalam siklus proses iklan.
Jika perlu menggunakan fitur ini, Anda dapat mengurangi dampak pergeseran tata letak dengan menggunakan data pengisian historis dari pelaporan Ad Manager untuk menerapkan praktik terbaik berikut:
- Slot yang kemungkinan akan diisi harus selalu dimulai dengan diperluas.
- Slot yang tidak mungkin terisi harus selalu dimulai dengan diciutkan.
Untuk contoh implementasi, lihat contoh Menciutkan slot iklan kosong.