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

Situs yang diluncurkan kembali ini juga mendapati visibilitas iklan lebih dari 75%, rasio pantulan berkurang 50%, dan kunjungan halaman naik 27%.

Martin Schierle
Martin Schierle
X GitHub

Saat Google mengumumkan inisiatif Data Web Inti, penerbit Jerman Netzwelt segera menyadari potensi metrik baru ini dalam menghasilkan pengalaman halaman yang baik dan peningkatan monetisasi berbasis iklan. Mereka melanjutkan perjalanan untuk meluncurkan kembali situs mereka, dengan menerapkan praktik terbaik performa umum sekaligus mengoptimalkan tag iklan dan penempatan secara paralel. Berkomitmen pada UX yang bagus dan halaman yang cepat terbukti menjadi jalur untuk mengoptimalkan engagement dan pendapatan iklan beriringan, dengan kunjungan halaman naik 27%, visibilitas iklan lebih dari 75%, dan pendapatan iklan meningkat sebesar 18%.

27%

Peningkatan kunjungan halaman

18%

Peningkatan pendapatan iklan

75%

Visibilitas iklan

Tantangan

Seperti banyak penerbit 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) tinggi karena pergeseran tata letak yang dipicu oleh iklan, terutama dari slot beberapa ukuran dan banner atas.
  • Largest Contentful Paint (LCP) baru dirilis karena iklan adalah paint terbesar atau dengan mengambil bandwidth dari pemuatan hero image.
  • Penundaan Input Pertama (FID) tinggi yang 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 ditambahkan ke pergeseran tata letak dan mungkin terdeteksi sebagai paint terbesar yang terlambat.

Mengoptimalkan situs berita untuk Data Web Inti

Saat Netzwelt mulai menangani data web inti, mereka dengan cepat menyadari bahwa mengoptimalkan Data Web Inti tidak perlu berdampak negatif pada iklan, 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% untuk menarik iklan yang bernilai lebih tinggi (rata-rata global untuk iklan Display kurang dari 50%).

Mengoptimalkan CLS

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

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

Iklan di paruh atas dapat menyebabkan lompatan tata letak besar-besaran karena terlambat memuat dan ukuran yang tidak diketahui. Memblokir ruang terbesar yang mungkin mereka butuhkan dapat menyebabkan UX yang buruk, sementara meminta pengiklan untuk ukuran tetap dapat mengurangi pendapatan iklan. Netzwelt mengatasi masalah ini dengan membuat iklan bagian atas melekat dan menghapus beberapa ukuran banner lebih besar yang diizinkan. Iklan overlay menghindari lompatan tata letak untuk iklan dengan ukuran yang berbeda-beda. Meskipun ukuran yang memenuhi syarat yang lebih kecil dapat memengaruhi penjualan iklan, offset visibilitas yang lebih baik akan lebih mudah diterapkan.

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 memesan ruang.

Iklan di 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 memicu lompatan konten tambahan.

Untuk mempertahankan pengalaman halaman yang baik dan visibilitas iklan yang tinggi, Netzwelt menerapkan pemuatan lambat dan ruang yang dicadangkan untuk ukuran penyebut umum terendah. Dalam zona multi-ukuran, banner yang diminta dalam ukuran 300x250 hingga 300x600, dicadangkan dengan tinggi 250 piksel. Hal ini meniadakan pergeseran tata letak untuk ukuran yang lebih kecil; dan menguranginya secara signifikan 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 yang berbeda dan strategi pemuatan lambat 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 akan menggunakan nilai proxy berdasarkan kombinasi jenis jaringan turunan IP dan perangkat. Strategi pemuatan adaptif ini sangat mengurangi CLS untuk pengguna dengan koneksi internet yang lambat.

Mengoptimalkan FID

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

  • Mengurangi skrip dan penyedia iklan, berkonsentrasi pada satu tumpukan jika memungkinkan.
  • Memuat semua skrip dengan menangguhkan atau asinkron.
  • Menggunakan webpack atau teknologi serupa untuk treeshaing dan pemisahan.
  • 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 menyempit bandwidth jaringan atau memengaruhi jalur kritis sehingga paint terbesar yang sebenarnya (misalnya, banner besar) tidak dapat dimuat dengan cukup cepat.

Netzwelt telah menghapus iklan kotak sedang dari slot iklan atas saat mengoptimalkan CLS. Ini memiliki manfaat tambahan karena iklan tidak menjadi elemen terbesar.

Netzwelt mengikuti kebijakan yang ketat untuk memprioritaskan konten daripada iklan. Netzwelt memprioritaskan gambar utama dan font yang digunakan di paruh atas serta mengoptimalkan jalur penting untuk diprioritaskan daripada skrip dan iklan iklan. Prioritas ini membantu LCP agar tidak terpengaruh oleh iklan.

Selain pengoptimalan ini, Netzwelt mengikuti praktik terbaik lainnya:

  • CSS yang terpisah untuk jalur rendering penting dan meletakkannya di header.
  • Pramuat font, skrip, dan gambar yang paling penting.
  • Menghindari gambar pemuatan lambat di paruh atas.
  • Digunakan font-display="swap".

Dialog izin sering kali berdampak negatif pada Data Web Inti. Seperti halnya iklan, ada dua cara yang dapat digunakan dialog izin untuk memengaruhi Data Web Inti:

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

Netzwelt bekerja sama dengan penyedia izin pihak ketiga, yang juga mengimplementasikan pengoptimalan. Netzwelt pertama memastikan untuk menghindari kesalahan sederhana:

  • 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 shift.
  • Meskipun iklan hanya ditampilkan setelah izin diberikan, spasi kosong yang memadai akan dipertahankan terlebih dahulu untuk menghindari pergeseran tata letak saat iklan dimuat.
  • Memastikan tampilan dan posisi dialog izin tidak memicu pergeseran tata letak. Satu masalah yang ditemukan dan diperbaiki di sini adalah opsi kunci scroll penyedia layanan, yang menonaktifkan scroll saat izin ditampilkan dengan memindahkan konten utama artikel saat men-scroll, sehingga menyebabkan pergeseran tata letak.

Setelah pekerjaan ini, masih ada perbedaan besar antara CLS kolom dan lab. Meskipun CLS lab mendekati nol, nilai kolom secara signifikan berada di atas nilai minimum. Setelah diselidiki, penyebabnya adalah pergeseran tata letak dalam iframe izin, yang saat ini hanya dicatat dengan benar di data lapangan. Netzwelt terus bekerja sama dengan penyedia izin pihak ketiga untuk meningkatkan masalah ini.

Model Langganan Berita dan Core Web Vitals

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 berharap melihat iklan di konten berbayar, tetapi menyembunyikan iklan dapat menyebabkan pergeseran tata letak. Situs harus memeriksa apakah pengguna berhak melihat konten dan apakah akan menampilkan iklan atau tidak. Pemeriksaan ini dapat menyebabkan latensi tambahan, yang menyebabkan perubahan 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 guna mengurangi latensi dan pergeseran tata letak.

Kueri awal hak selalu menyebabkan latensi, sehingga jika kueri hak memerlukan waktu terlalu lama, situs akan menampilkan status terakhir yang di-cache. Untuk pelanggan baru, hal ini berarti adanya risiko kecil bagi pengguna yang membayar untuk melihat iklan satu kali. Pengguna yang baru mengakhiri langganan mungkin akan 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 dan pergeseran tata letak tambahan selama navigasi mendatang.

Hasil Pengoptimalan

Hasil pengoptimalan Netzwelt sangatlah jelas. Skor PageSpeed Insights mereka tidak tertandingi di antara penerbit berita di seluruh dunia:

Screenshot PageSpeed Insights untuk situs Netzwelt.de, yang menampilkan skor 100.

Pengoptimalan tersebut meningkatkan pengalaman halaman, tetapi dibuat dengan mempertimbangkan bisnis serta pengalaman iklan, visibilitas iklan, dan pendapatan yang ditingkatkan. Setelah meluncurkan kembali halaman yang dioptimalkan, Netzwelt mengalami peningkatan CPM sebesar 20-30%, dengan visibilitas iklan di atas 75%. Namun, Netzwelt mengasumsikan bahwa keseluruhan peningkatan pendapatan dapat lebih tinggi. Traffic meningkat sejak peluncuran kembali, mungkin didorong oleh engagement pengguna yang lebih tinggi dan rasio pantulan yang lebih rendah karena peningkatan UX. Efek ini sulit untuk diukur dan ditetapkan dalam hubungan sebab akibat dengan peluncuran kembali, karena traffic secara alami berfluktuasi, 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. Data Web Inti dan metrik UX, yang dikombinasikan dengan semua metrik terkait iklan, memberikan gambaran nyata.

Melihat ke masa depan

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

Oleh karena itu, Netzwelt tidak berhenti dengan Data Web Inti, tetapi bekerja lebih keras dengan menerapkan banyak kemampuan web modern seperti Progressive Web App (PWA), konten offline, mode gelap, Web Share API, dan Trusted Web Activities (TWA) menggunakan Digital Products API yang baru.