Pergeseran tata letak terjadi saat elemen yang terlihat di halaman Anda mengubah posisi atau ukuran, yang memengaruhi posisi konten di sekitarnya. Terkadang pergeseran ini dilakukan dengan sengaja, seperti saat penampung diperluas sebagai hasil dari tindakan pengguna. Namun, sifat dinamis iklan dapat menyebabkan perubahan tata letak yang tidak terduga, yang memiliki efek 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).
Cara iklan menyebabkan pergeseran tata letak
Iklan biasanya diminta secara asinkron dan menambahkan konten secara dinamis ke halaman Anda selama atau setelah pemuatan halaman. Saat iklan diambil, bagian lain halaman akan terus dimuat dan konten non-iklan dapat terlihat oleh pengguna. Jika Anda tidak menyediakan ruang yang memadai untuk iklan yang dimuat, iklan tersebut dapat menggantikan konten non-iklan yang terlihat saat akhirnya ditambahkan ke halaman.
Saat menggunakan Tag Penayang Google, ada beberapa titik dalam siklus proses iklan tempat pergeseran tata letak dapat terjadi:
- Saat
display()dipanggil. Slot dapat diperluas atau diciutkan, bergantung pada cara konfigurasinya. - Saat konten iklan dirender. Slot dapat diubah ukurannya jika menayangkan iklan yang dapat menyesuaikan atau jika ruang yang tersedia tidak cukup. Slot juga dapat diperluas atau ditutup pada tahap ini, bergantung pada cara konfigurasinya.
- Setelah konten iklan dirender. Jenis materi iklan tertentu dirancang untuk diperluas setelah muncul di halaman.
Perlu diingat bahwa makin tinggi slot iklan dalam area tampilan, makin 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 perubahan tata letak yang tidak proporsional karena lebih cenderung terlihat saat konten iklan 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, alat ini tidak mengandalkan interaksi pengguna yang sebenarnya, sehingga cocok untuk digunakan dalam alur kerja continuous integration dan pengembangan lokal. Namun, alat ini biasanya hanya mengukur performa selama pemuatan halaman dan terbatas pada kondisi yang dapat disimulasikan, sehingga nilai yang dilaporkan mungkin lebih rendah dari yang akan dialami pengguna sebenarnya.
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 menjelajahi situs. Hal ini dapat digunakan untuk mengidentifikasi secara manual pergeseran tata letak yang terjadi di dekat slot iklan di halaman Anda.
Di lapangan
Alat lapangan mengukur CLS yang dialami oleh pengguna sebenarnya saat mereka berinteraksi dengan situs Anda. Proses ini biasanya dikenal sebagai pemantauan pengguna nyata (RUM). RUM memungkinkan Anda mengamati bagaimana CLS dipengaruhi oleh 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 mencadangkan ruang yang cukup
untuk slot iklan tertentu menggunakan CSS. Menetapkan tinggi dan lebar tetap
langsung di div slot iklan adalah cara paling efektif untuk melakukannya. Namun,
meskipun ini berfungsi dengan baik untuk slot iklan statis berukuran tetap, skenario
yang lebih rumit mungkin memerlukan pendekatan yang lebih mendetail. Beberapa skenario umum
dijelaskan di bagian berikut.
Slot iklan multiukuran
Untuk slot iklan yang menerima beberapa ukuran, sebaiknya gunakan salah satu pendekatan berikut:
- Menyisakan ruang untuk ukuran terbesar yang dikonfigurasi untuk ditayangkan.
- Menyisakan ruang untuk ukuran terkecil yang dikonfigurasi untuk ditayangkan.
- Menyisakan ruang untuk ukuran yang kemungkinan besar akan ditayangkan, yang ditentukan dengan memeriksa data pengisian historis dari pelaporan Google Ad Manager.
Memilih pendekatan yang tepat
Menyisakan ruang untuk ukuran terbesar yang dikonfigurasi untuk ditayangkan adalah cara paling efektif untuk menghilangkan pergeseran tata letak. Namun, metode ini dapat menyebabkan ruang kosong tambahan di sekitar iklan, jika materi iklan yang lebih kecil dari ukuran yang direservasi ditayangkan. Memperkecil slot iklan agar cocok dengan ukuran materi iklan yang ditayangkan akan menyebabkan pergeseran tata letak tambahan, jadi sebaiknya hindari hal ini. Sebagai gantinya, pemusatan vertikal dan horizontal dapat digunakan untuk mengurangi dampak visual dari kelebihan ruang kosong.
Di sisi lain, dengan mencadangkan ruang untuk ukuran terkecil yang dikonfigurasi untuk ditayangkan, Anda dapat menghindari ruang kosong yang berlebihan di sekitar iklan. Ini bisa menjadi opsi yang baik jika slot iklan Anda biasanya diisi dengan materi iklan yang lebih kecil, atau jika semua ukuran yang didukung slot serupa. Namun, metode ini akan mengakibatkan pergeseran tata letak jika materi iklan yang lebih besar dari ukuran yang dicadangkan ditayangkan (meskipun perubahan tersebut umumnya lebih kecil jika dibandingkan dengan tidak memesan ruang sama sekali).
Untuk menyeimbangkan antara ruang kosong dan pergeseran tata letak, Anda dapat mencadangkan
jumlah ruang "rata-rata" untuk slot iklan. Misalnya, mencadangkan 100px
secara vertikal akan menimbulkan sedikit ruang kosong saat materi iklan 320x50 ditayangkan, tetapi
akan mengurangi skor CLS dibandingkan dengan tidak mencadangkan ruang sama sekali. Anda harus
bereksperimen dengan berbagai ukuran untuk menemukan keseimbangan terbaik bagi situs Anda sendiri.
Saat menentukan jumlah ruang yang akan dicadangkan 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 mempelajari beberapa contoh.
Contoh #1
| Ukuran materi iklan (ditayangkan) | Tayangan Server Iklan (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
Dalam hal ini, mencadangkan 250px secara vertikal dapat sangat mengurangi CLS 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 maksimum 90px, sehingga mencadangkan 90px
secara vertikal akan menghindari pergeseran tata letak sebagian besar waktu.
Cara memesan ruang
Sebaiknya tangani masalah ini dengan menentukan ukuran slot iklan melalui
properti CSS min-height dan min-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
Dengan menggunakan atribut tinggi minimum dan lebar min, Anda dapat memesan ruang minimum untuk slot iklan, sambil tetap mengizinkan 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 nilai minimum yang berbeda untuk berbagai ukuran layar:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Pemesanan ruang dengan JavaScript harus dihindari, karena hal ini dapat mengakibatkan pergeseran tata letak saat skrip dimuat. Dengan memesan ruang menggunakan CSS, risiko ini dapat dihindari.
Slot iklan fleksibel
Slot iklan yang dapat menyesuaikan tidak menentukan kumpulan ukuran tetap yang didukungnya. Sebagai gantinya, slot ini otomatis mengubah ukuran agar sesuai dengan konten materi iklan yang ditayangkan ke slot tersebut, sehingga slot ini dapat mendukung materi iklan dengan ukuran yang tidak ditentukan. Akibatnya, Anda tidak dapat mereservasi ruang untuk slot ini sebelum meminta konten iklan, dan iklan yang berukuran dapat disesuaikan akan 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 bawah lipatan. - Ambil slot yang dapat disesuaikan sedini mungkin untuk meminimalkan kemungkinan pengguna men-scroll ke tampilan sebelum slot diubah ukurannya.
Slot iklan diciutkan dan diluaskan
Metode collapseEmptyDivs() memungkinkan Anda
menciutkan div slot iklan sehingga tidak menghabiskan ruang di halaman saat
tidak ada konten iklan yang ditampilkan. Namun, fitur ini harus digunakan dengan hati-hati
karena dapat menyebabkan pergeseran tata letak yang tidak diinginkan. Seperti disebutkan di
bagian sebelumnya, slot iklan yang diciutkan dan diluaskan dapat menyebabkan pergeseran tata letak
di dua titik 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 terisi harus selalu dimulai dengan diperluas.
- Slot yang tidak mungkin terisi harus selalu dimulai dalam keadaan diciutkan.
Untuk contoh implementasi, lihat contoh Menciutkan slot iklan kosong.