Bagaimana komitmen pada Data Web Inti meningkatkan pendapatan iklan Netzwelt sebesar 18%

Situs yang diluncurkan ulang juga memiliki visibilitas iklan lebih dari 75%, rasio pantulan berkurang 50%, dan kunjungan halaman meningkat 27%.

Martin Schierle

Saat Google mengumumkan inisiatif Core Web Vitals, penayang Jerman Netzwelt dengan cepat menyadari potensi metrik baru ini untuk memberikan pengalaman halaman yang baik dan meningkatkan monetisasi berbasis iklan. Mereka melakukan perjalanan untuk meluncurkan kembali situs mereka, menerapkan praktik terbaik performa umum sekaligus mengoptimalkan tag dan penempatan iklan secara paralel. Berkomitmen untuk UX yang luar biasa dan halaman yang cepat terbukti menjadi jalan untuk mengoptimalkan interaksi dan pendapatan iklan secara bersamaan, dengan kunjungan halaman meningkat 27%, visibilitas iklan lebih dari 75%, dan pendapatan iklan meningkat 18%.

27_%

Peningkatan kunjungan halaman

18_%

Peningkatan pendapatan iklan

75_%

Visibilitas iklan

Tantangan

Seperti banyak penayang berita lainnya, Netzwelt kesulitan menemukan keseimbangan yang tepat antara mengoptimalkan pengalaman pengguna dan kecepatan halaman sekaligus mempertahankan pendapatan iklan yang tinggi. Tantangan utama yang mereka hadapi adalah:

• Pergeseran Tata Letak Kumulatif (CLS) yang tinggi karena pergeseran tata letak yang dipicu oleh iklan, terutama dari slot multiukuran dan banner atas.
• Largest Contentful Paint (LCP) terlambat karena iklan adalah paint terbesar atau dengan menggunakan bandwidth dari pemuatan gambar hero.
• Penundaan Input Pertama (FID) yang tinggi disebabkan oleh JavaScript pihak ketiga yang diperlukan untuk iklan, bidding header, dan tujuan lainnya.
• Efek samping pada Core Web Vitals dari dialog izin yang dikontrol oleh vendor pihak ketiga, yang juga berkontribusi pada pergeseran tata letak dan mungkin terdeteksi sebagai late largest paint.

Mengoptimalkan situs berita untuk Core Web Vitals

Saat Netzwelt mulai mengerjakan data web inti, mereka dengan cepat menyadari bahwa mengoptimalkan Data Web Inti tidak perlu memengaruhi iklan secara negatif, tetapi dapat digunakan sebagai peluang untuk meningkatkan visibilitas iklan. Oleh karena itu, tim Netzwelt mengoptimalkan Data Web Inti untuk meningkatkan visibilitas iklan di atas 75% guna menarik iklan bernilai lebih tinggi (rata-rata global untuk iklan Display kurang dari 50%).

Mengoptimalkan CLS

Iklan sering kali dimuat terlambat (terkadang secara sadar melalui pemuatan lambat), dan ukuran sebenarnya sering kali tidak diketahui sebelumnya karena penempatan iklan multiukuran dan fleksibel.

Masalah ini dapat dibagi menjadi dua—iklan di paruh atas dan paruh bawah.

Iklan di atas lipatan dapat menyebabkan lompatan tata letak yang besar karena dimuat terlambat dengan ukuran yang tidak diketahui. Memblokir ruang terbesar yang mungkin mereka butuhkan dapat menyebabkan UX yang buruk, sedangkan meminta pengiklan untuk ukuran tetap dapat mengurangi pendapatan iklan. Netzwelt mengatasi masalah ini dengan membuat iklan atas tetap berada di tempatnya dan menghapus beberapa ukuran banner yang lebih besar yang diizinkan. Iklan yang di-overlay menghindari pemicuan lompatan tata letak untuk iklan dengan berbagai ukuran. Meskipun pengurangan ukuran yang memenuhi syarat akan memengaruhi penjualan iklan, visibilitas yang lebih baik akan dengan mudah mengimbanginya.

Data historis dan pengujian A/B membantu Netzwelt menemukan ukuran dan posisi yang tepat untuk berbagai perangkat dan ukuran layar, serta aturan media CSS yang digunakan untuk mencadangkan ruang.

Iklan paruh bawah menawarkan ruang untuk peningkatan yang signifikan:

• Banner yang tidak terlihat tetapi dimuat akan menghasilkan visibilitas iklan yang buruk dan memperburuk pengalaman halaman.
• Banner yang dimuat saat pengguna men-scroll-nya dapat menyebabkan lompatan konten tambahan.

Untuk mempertahankan pengalaman halaman yang baik dan visibilitas iklan yang tinggi, Netzwelt menerapkan pemuatan lambat dan ruang yang dicadangkan untuk ukuran denominator umum terendah. Di zona multiukuran, banner yang diminta dalam ukuran 300x250 hingga 300x600, memiliki tinggi 250 piksel. Hal ini menghilangkan pergeseran tata letak untuk ukuran yang lebih kecil; dan menguranginya secara besar-besaran untuk banner yang lebih besar. Pendekatan ini tidak optimal, tetapi merupakan awal dan kompromi yang baik.

Untuk mengoptimalkan lebih lanjut, Netzwelt menggunakan Intersection Observer dan Network Information API untuk mengontrol penempatan iklan dan mengurangi pergeseran tata letak. Posisi iklan dan strategi pemuatan lambat yang berbeda digunakan bergantung pada posisi scroll dan kualitas koneksi jaringan, dan iklan dapat diubah dari beberapa ukuran menjadi ukuran tetap. Tujuan algoritma ini adalah selalu memaksimalkan visibilitas iklan sekaligus meminimalkan pergeseran tata letak. Browser yang tidak mendukung NetworkInfo API menggunakan nilai proxy berdasarkan kombinasi jenis jaringan yang berasal dari perangkat dan IP. Strategi pemuatan adaptif ini terutama mengurangi CLS untuk pengguna dengan koneksi internet yang lambat.

Mengoptimalkan FID

Penundaan Input Pertama mungkin tampak menjadi masalah bagi penayang berita, karena iklan sering kali dilengkapi dengan banyak library JavaScript tambahan. Dan tampaknya ada dampak negatif saat melihat data lab seperti Lighthouse. Namun, melihat data lapangan di Almanak Web 2020, banyak situs memiliki respons yang cukup cepat. Sebagian hal ini disebabkan oleh JavaScript iklan yang dimuat terlambat (setelah input pertama), menyimpan cache dengan baik (misalnya mendapatkan perlakuan penyimpanan cache kode v8), atau dioptimalkan dengan baik oleh vendor iklan. Pelacak visibilitas vendor memastikan untuk menghindari tugas yang lama—sehingga meskipun jumlah runtime lama, Total Blocking Time (TBT) dan FID tidak akan terpengaruh. Meskipun FID bukan masalah besar bagi Netzwelt, masih ada beberapa pengoptimalan yang perlu dilakukan:

• Mengurangi skrip dan penyedia iklan, dengan berkonsentrasi pada satu stack jika memungkinkan.
• Memuat semua skrip dengan menunda atau asinkron.
• Menggunakan webpack atau teknologi serupa untuk treeshaking dan unbundling.
• Menggunakan aturan CSS sederhana seperti BEM.
• Menghindari tugas yang berjalan lama, dan menggunakan pola idle-until-urgent.
• Bekerja dengan RequestAnimationFrame di mana pun tata letak terpengaruh.

Mengoptimalkan LCP

Largest Contentful Paint dapat dipengaruhi oleh iklan dengan dua cara—secara eksplisit dengan mengenali iklan sebagai paint terbesar, dan secara tidak langsung dengan memadatkan bandwidth jaringan atau memengaruhi jalur kritis sehingga paint terbesar sebenarnya (misalnya gambar hero) tidak dapat dimuat dengan cukup cepat.

Netzwelt telah menghapus iklan persegi panjang sedang dari slot iklan teratas sambil mengoptimalkan CLS. Hal ini memiliki manfaat tambahan karena iklan tidak menjadi elemen terbesar.

Netzwelt mengikuti kebijakan ketat untuk memprioritaskan konten di atas iklan. Netzwelt memprioritaskan gambar dan font hero yang digunakan di atas fold dan mengoptimalkan jalur kritis agar lebih diutamakan daripada skrip dan iklan iklan. Prioritas ini membantu LCP agar tidak terpengaruh oleh iklan.

Selain pengoptimalan ini, Netzwelt mengikuti praktik terbaik lainnya:

• Memisahkan CSS untuk jalur rendering penting dan menempatkannya di header.
• Memuat font, skrip, dan gambar yang paling penting.
• Menghindari pemuatan lambat gambar di paruh atas.
• Menggunakan font-display="swap".

Izin GDPR dan Core Web Vitals

Dialog izin sering kali berdampak negatif pada Data Web Inti. Seperti iklan, dialog izin dapat memengaruhi Core Web Vitals dengan dua cara:

• Secara eksplisit jika terdeteksi sebagai cat terbesar, atau menyebabkan pergeseran tata letak.
• Secara implisit, dengan mencuri bandwidth dari paint terbesar yang sebenarnya, memblokir jalur kritis ke paint terbesar, atau menunda iklan hingga izin diberikan, yang pada akhirnya dapat memicu pergeseran tata letak.

Netzwelt bekerja sama dengan penyedia izin pihak ketiga, yang juga menerapkan pengoptimalan. Pertama, Netzwelt memastikan untuk menghindari kesalahan yang mudah:

• Skrip izin dimuat secara asinkron, agar tidak memblokir resource penting.
• Izin diformat sehingga elemen besar tidak memenuhi syarat sebagai elemen terbesar dalam LCP.
• Overlay izin menggunakan position: fixed untuk menghindari pergeseran.
• Meskipun iklan hanya ditampilkan setelah izin diberikan, ruang kosong yang memadai akan dipertahankan sebelumnya untuk menghindari pergeseran tata letak saat iklan dimuat.
• Memastikan tampilan dan pemosisian dialog izin tidak memicu pergeseran tata letak. Satu masalah yang ditemukan dan diperbaiki di sini adalah opsi kunci scroll dari penyedia layanan, yang menonaktifkan scroll saat izin ditampilkan dengan memindahkan konten utama artikel saat di-scroll, sehingga menyebabkan pergeseran tata letak.

Setelah pekerjaan ini, masih ada perbedaan besar antara CLS lapangan dan lab. Meskipun CLS lab mendekati nol, nilai kolom jauh di atas nilai minimum. Setelah penyelidikan, penyebabnya adalah perubahan tata letak dalam iframe izin, yang saat ini hanya ditangkap dengan benar dalam data kolom. Netzwelt terus bekerja sama dengan penyedia izin pihak ketiga untuk memperbaiki masalah ini.

Model Langganan Berita dan Data Web Inti

Penerbit berita beralih ke model langganan untuk mendanai jurnalisme. Model ini relevan untuk Data Web Inti karena orang tidak akan berlangganan situs dengan pengalaman pengguna yang buruk. Selain itu, pelanggan tidak mengharapkan untuk melihat iklan dalam konten berbayar, tetapi menyembunyikan iklan dapat menyebabkan pergeseran tata letak. Situs harus memeriksa apakah pengguna berhak melihat konten dan apakah akan menampilkan iklan. Pemeriksaan ini dapat menyebabkan latensi tambahan, yang menyebabkan pergeseran konten atau pengalaman pengguna yang buruk.

Netzwelt menggunakan model yang kontennya selalu gratis, tetapi pelanggan tidak akan melihat iklan. Mereka menyelidiki berbagai cara untuk membuat kueri dan menyimpan hak untuk mengurangi latensi dan pergeseran tata letak.

Kueri awal hak selalu menyebabkan latensi, sehingga jika membuat kueri hak memerlukan waktu terlalu lama, situs akan menampilkan status terakhir yang di-cache. Untuk pelanggan baru, hal ini berarti risiko kecil bagi pengguna yang membayar untuk melihat iklan sekali. Pengguna yang baru saja mengakhiri langganan mungkin melihat satu pemuatan tanpa iklan sebelum hak yang disimpan secara lokal diperbarui. Setelah diketahui, hak akan disimpan secara lokal menggunakan LocalStorage API, untuk menghindari latensi tambahan dan perubahan tata letak selama navigasi mendatang.

Hasil Pengoptimalan

Hasil pengoptimalan Netzwelt sudah berbicara sendiri. Skor PageSpeed Insights mereka tidak tertandingi di antara penayang berita di seluruh dunia:

Pengoptimalan ini meningkatkan pengalaman halaman, tetapi dibuat dengan mempertimbangkan bisnis dan meningkatkan pengalaman iklan, visibilitas iklan, dan pendapatan. Setelah meluncurkan kembali halaman yang dioptimalkan, Netzwelt mengalami peningkatan CPM sebesar 20-30%, dengan visibilitas iklan di atas 75%. Namun, Netzwelt mengasumsikan peningkatan pendapatan secara keseluruhan akan lebih tinggi. Traffic meningkat sejak peluncuran ulang, mungkin didorong oleh engagement pengguna yang lebih tinggi dan rasio pantulan yang lebih rendah karena UX yang lebih baik. Efek ini sulit diukur dan ditetapkan dalam hubungan kausal dengan peluncuran ulang, karena traffic berfluktuasi secara alami, dan ada juga efek dari pandemi global. Efek tidak langsung ini adalah salah satu alasan mengapa Netzwelt selalu melihat semua angka saat meninjau situsnya, bukan hanya CPM, yang mungkin menyesatkan. Core Web Vitals dan metrik UX, dikombinasikan dengan semua metrik terkait iklan, memberikan gambaran yang sebenarnya.

Menengok ke masa depan

Netzwelt yakin bahwa di masa mendatang tanpa cookie pihak ketiga, penargetan kontekstual melalui konten, dikombinasikan dengan UX dan pengalaman halaman yang baik (termasuk visibilitas iklan), adalah kunci kesuksesan sebagai penayang berita.

Oleh karena itu, Netzwelt tidak berhenti dengan Data Web Inti, tetapi melakukan upaya ekstra dengan menerapkan banyak kemampuan web modern seperti Progressive Web App (PWA), konten offline, mode gelap, Web Share API, dan Aktivitas Web Tepercaya (TWA) menggunakan Digital Goods API baru.