Di dunia digital saat ini, iklan online adalah bagian penting dari web gratis yang kita nikmati. Namun, iklan yang tidak diterapkan dengan baik dapat menyebabkan pengalaman penjelajahan yang lebih lambat, pengguna yang frustrasi, dan berkurangnya interaksi. Pelajari cara memuat iklan secara efektif tanpa memengaruhi kecepatan halaman Anda, memastikan pengalaman pengguna yang lancar, dan memaksimalkan peluang pendapatan bagi pemilik situs.
Situs web sangat bergantung pada iklan daring sebagai sumber pendapatan utama. Namun, kehadiran iklan di situs terkadang dapat mengorbankan pengalaman pengguna dan performa halaman secara keseluruhan. Oleh karena itu, penting untuk mencapai keseimbangan antara monetisasi dan performa bagi pemilik situs dan pengiklan, serta pengalaman pengguna.
Pertimbangkan situs web yang menempatkan iklan secara ekstensif dalam kontennya, yang bertujuan untuk menghasilkan pendapatan yang tinggi. Namun, banyaknya iklan yang membuat pengguna frustrasi, mengakibatkan pengalaman pengguna yang buruk dan rasio pantulan yang tinggi. Meskipun memiliki potensi pendapatan yang besar dari iklan, pengabaian sangat menghambat kesuksesan situs.
Di sisi lain, pertimbangkan situs tanpa iklan. Lingkungan bebas iklan ini menarik banyak pengguna karena waktu pemuatan yang cepat dan pengalaman menjelajah yang lancar. Namun, tanpa menerapkan strategi monetisasi, situs tersebut kesulitan untuk menghasilkan pendapatan, yang dapat menghambat keberlanjutan dan pertumbuhan jangka panjangnya.
Kedua skenario menggambarkan pentingnya menyeimbangkan monetisasi, pengguna, dan performa.
Memanfaatkan Data Web Inti
Anda harus lulus Data Web Inti dalam hal pemuatan iklan tanpa berpengaruh negatif pada kecepatan halaman. Core Web Vitals, yang terdiri dari metrik seperti Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), dan Interaction to Next Paint (INP), adalah metrik pengalaman pengguna yang mengukur kualitas pengalaman pengguna situs Anda.
Largest Contentful Paint (LCP)
Pengoptimalan LCP sangat penting, karena metrik ini mengukur waktu yang diperlukan agar elemen contentful terbesar terlihat dalam area pandang. Dengan meminimalkan waktu pemuatan konten iklan dan dengan memprioritaskan teknik pemuatan asinkron, pemilik situs dapat mengurangi LCP dan mengurangi waktu rendering elemen konten yang paling terlihat di halaman.
Interaksi dengan Next Paint (INP)
Kedua, meningkatkan INP sangat penting untuk pengalaman pengguna yang responsif. INP mengukur latensi untuk setiap klik, ketuk, dan interaksi keyboard yang terjadi di sepanjang halaman. Nilai yang dihasilkan biasanya adalah interaksi yang memerlukan waktu penyelesaian paling lama, dan mewakili kemampuan keseluruhan halaman untuk merespons interaksi pengguna dengan cepat.
Iklan yang menunda interaksi pengguna berdampak negatif pada INP. Hal ini dapat membuat pengguna frustrasi karena menciptakan pengalaman yang terasa lambat, atau bahkan rusak dalam kasus yang ekstrem. Menerapkan pemuatan lambat untuk iklan dan menunda eksekusi JavaScript yang tidak penting dapat membantu mengurangi INP halaman, sehingga meningkatkan responsivitas halaman secara keseluruhan.
Pergeseran Tata Letak Kumulatif (CLS)
Terakhir, CLS mengukur stabilitas visual halaman dengan mengukur jumlah pergeseran tata letak tidak terduga yang terjadi selama pemuatan halaman. Iklan yang dimuat atau diubah ukurannya secara dinamis dapat mengakibatkan ketidakstabilan tata letak, yang menyebabkan pengalaman pengguna yang buruk ketika pengguna tidak dapat melacak posisi mereka di halaman, atau bahkan secara tidak sengaja mengetuk elemen yang salah karena pergeseran tata letak yang tidak terduga. Untuk mengurangi hal ini, pemilik situs harus mengoptimalkan CLS untuk memastikan bahwa iklan telah memesan ruang untuk mencegah pergeseran tata letak, dan ukuran iklan harus dioptimalkan untuk menghindari perubahan posisi/geometri konten secara tiba-tiba.
Menyusun struktur halaman web Anda menjadi blok konten yang berbeda
Menyusun struktur halaman web Anda dengan blok konten untuk teks, gambar, dan konten iklan, sekaligus menggunakan properti content-visibility:
CSS, dapat meningkatkan waktu rendering keseluruhan secara signifikan di browser modern.
Dengan menerapkan properti content-visibility:
secara strategis dalam blok konten ini, Anda akan mengoptimalkan proses rendering untuk konten teks, gambar, dan iklan. Tindakan ini memastikan bahwa hanya konten yang saat ini ada di area pandang yang dirender sepenuhnya, sehingga menghasilkan pemuatan halaman awal yang lebih cepat dan interaksi pengguna yang lebih lancar. Peningkatan performa ini sangat berguna ketika menangani halaman yang panjang atau berisi banyak iklan.
Memprioritaskan slot iklan penting
Tidak semua slot iklan sama. Misalnya, slot iklan paruh atas biasanya lebih bernilai dibandingkan slot iklan paruh bawah dalam hal visibilitas dan monetisasi. Hal ini karena iklan paruh atas lebih mungkin dilihat oleh pengguna, karena iklan terlihat tanpa perlu men-scroll di area pandang pertama. Iklan paruh bawah terlihat setelah pengguna men-scroll halaman ke bawah cukup jauh untuk melihatnya.
Iklan paruh atas
![Representasi visual konsep iklan 'paruh atas'.](https://web.dev/static/articles/loading-ads-page-speed/image/fig-3.png?authuser=19&hl=id)
Slot iklan paruh atas mengacu pada bagian halaman web yang terlihat tanpa perlu men-scroll, dan memiliki nilai yang signifikan dalam iklan digital. Penempatan utama ini dianggap berharga karena beberapa alasan:
- Iklan yang ditempatkan di paruh atas akan langsung terlihat oleh pengguna setelah memuat halaman web. Pengguna lebih cenderung melihat dan berinteraksi dengan iklan ini, sehingga menghasilkan rasio klik-tayang yang lebih tinggi.
- Pengiklan sering kali menganggap bagian teratas halaman web sebagai properti yang paling berharga. Situs ini adalah kesan pertama yang didapatkan pengguna saat mengunjungi situs, menjadikannya area yang penting untuk menampilkan iklan premium dan berdampak tinggi.
- Iklan di paruh atas memiliki rasio visibilitas tertinggi karena berada di garis pandang langsung pengguna. Hal ini memastikan bahwa mayoritas pengguna yang mengunjungi halaman akan melihat iklan ini tanpa harus men-scroll ke bawah.
Namun, penting untuk menjaga keseimbangan antara monetisasi dan pengalaman pengguna saat menggunakan slot iklan paruh atas di tampilan awal. Berikut adalah beberapa pertimbangan utama.
- Slot iklan layar pertama harus dimuat secepat mungkin di area pandang awal pengguna. Iklan yang lambat dimuat dapat berdampak negatif terhadap pengalaman pengguna dan meningkatkan rasio pantulan. Mengoptimalkan waktu muat iklan sangat penting untuk menjaga kelancaran pengalaman pengguna dan penjelajahan.
- Meskipun penempatan iklan di paruh atas sangat berharga, sebaiknya Anda tidak memenuhi ruang utama ini dengan terlalu banyak iklan. Iklan yang berlebihan mengacaukan halaman, mengganggu keterbacaan konten, dan mengurangi pengalaman pengguna. Upayakan keseimbangan antara monetisasi dan mempertahankan tata letak yang rapi dan ramah pengguna.
- Pastikan slot iklan paruh atas kompatibel dengan berbagai ukuran layar dan perangkat. Praktik desain responsif dapat membantu mempertahankan tata letak yang konsisten dan menarik secara visual, terlepas dari ukuran layar pengguna.
Iklan paruh bawah
![Representasi visual konsep iklan 'paruh bawah'.](https://web.dev/static/articles/loading-ads-page-speed/image/fig-4.png?authuser=19&hl=id)
Slot iklan paruh bawah—yaitu, iklan yang ditempatkan di bagian halaman web yang hanya terlihat setelah di-scroll ke bawah—juga memiliki nilai yang cukup besar dalam dunia iklan digital. Penempatan tersebut menawarkan keuntungan unik yang melengkapi penempatan paro atas.
Iklan yang terletak di paruh bawah mendapatkan manfaat dari pengguna yang men-scroll ke bawah untuk menjelajahi lebih banyak konten. Penempatan ini menarik perhatian pengguna yang aktif mencari informasi tambahan, sehingga menjadikannya berharga bagi merek yang ingin menyampaikan pesan atau penceritaan yang lebih kompleks.
- Slot iklan yang awalnya tidak terlihat dapat disejajarkan dengan konten di sebelahnya, sehingga memberikan peluang untuk relevansi kontekstual. Penyelarasan ini dapat menghasilkan engagement pengguna yang lebih tinggi saat pengguna menemukan iklan yang terkait dengan konten yang mereka jelajahi.
- Jika didesain dengan cermat, iklan paruh bawah dapat terintegrasi secara lancar dengan konten di sekitarnya, sehingga tidak terlalu mengganggu pengguna. Integrasi ini—juga dikenal sebagai iklan native—dapat menghasilkan pengalaman pengguna yang lebih harmonis.
- Penempatan iklan yang diperlukan scroll menawarkan fleksibilitas format dan desain yang lebih kreatif, dengan ruang dan kebebasan yang cukup untuk bereksperimen. Iklan video, elemen interaktif, dan gambar yang lebih besar dapat dimuat dengan lambat untuk menarik perhatian pengguna tanpa mengganggu pengalaman mereka.
Namun, pertimbangan berikut harus diberikan untuk penempatan iklan paruh bawah:
- Meskipun penempatan iklan di paruh bawah dapat efektif, penting untuk memastikan pengguna didorong untuk men-scroll ke bawah. Menerapkan isyarat visual atau teaser konten dapat memikat pengguna untuk mengeksplorasi lebih lanjut, sehingga meningkatkan kemungkinan visibilitas iklan.
- Penempatan iklan di paruh bawah tidak boleh mengganggu kualitas konten atau keterbacaan. Menjaga keseimbangan antara iklan dan konten untuk menghindari pengguna yang kewalahan dan untuk memastikan pengalaman pengguna yang positif.
- Tidak seperti penempatan iklan paruh atas, iklan paruh bawah mungkin tidak perlu langsung dimuat. Menunda pemuatan iklan ini hingga iklan hampir memasuki area pandang pengguna dapat membantu meningkatkan kecepatan pemuatan halaman secara keseluruhan dan mengurangi waktu rendering halaman awal.
Bila digunakan secara strategis, iklan paruh bawah dapat melengkapi iklan paruh atas, dan menyediakan platform untuk format iklan materi iklan dan relevansi kontekstual. Namun, mengoptimalkan visibilitas, menyeimbangkan konten, dan mengelola waktu pemuatan iklan adalah pertimbangan utama untuk memastikan pengalaman pengguna yang positif.
Praktik terbaik Tag Google Publisher (GPT) saat ini:
- Praktik terbaik umum
- Praktik Terbaik Iklan
- Meminimalkan pergeseran tata letak
- Memantau performa
- Menghindari kesalahan umum penerapan
Iklan pemuatan lambat jika perlu
![Visualisasi resource pemuatan lambat versus bukan pemuatan lambat. Jika resource dimuat dengan lambat, bandwidth akan dihemat selama pemuatan halaman, dan resource ditangguhkan ke titik yang paling mungkin dilihat oleh pengguna.](https://web.dev/static/articles/loading-ads-page-speed/image/fig-5.png?authuser=19&hl=id)
Pemuatan lambat adalah teknik yang menunda pemuatan resource yang tidak penting hingga resource tersebut diperlukan. Menerapkan pemuatan lambat untuk iklan yang tidak langsung terlihat (yaitu iklan paruh bawah) memastikan bahwa iklan hanya dimuat saat iklan muncul, menghemat bandwidth, dan meningkatkan kecepatan halaman secara keseluruhan. Browser kini menyertakan pemuatan lambat native untuk iframe dengan atribut loading=lazy
sederhana.
Dengan menerapkan pemuatan lambat, iklan diambil secara dinamis saat akan memasuki area pandang pengguna, sehingga mengurangi waktu pemuatan awal dan Total Waktu Pemblokiran (TBT) (yang sangat berkorelasi dengan INP) di thread utama di bagian penting siklus proses halaman tersebut, sehingga meminimalkan dampak negatif pada pengalaman pengguna.
Muat ulang iklan tanpa memuat ulang halaman
![Visualisasi iklan yang dimuat ulang di halaman, tanpa halaman tingkat teratas yang dimuat ulang.](https://web.dev/static/articles/loading-ads-page-speed/image/fig-6.gif?authuser=19&hl=id)
Teknik tambahan yang dapat menyeimbangkan performa halaman dengan iklan pemuatan adalah kemampuan untuk memperbarui iklan setiap 30 hingga 240 detik1 tanpa memuat ulang seluruh halaman. Pendekatan ini memungkinkan pembaruan konten iklan secara dinamis tanpa mengganggu pengalaman penjelajahan pengguna atau menyebabkan penundaan yang tidak perlu.
Pada aplikasi seluler, memuat ulang iklan di tampilan web yang ada memberikan performa yang lebih baik dibandingkan dengan memuat ulang seluruh halaman atau membuat ulang WebView karena meminimalkan overhead data dan resource, sehingga menghasilkan pembaruan konten yang lebih cepat dan pengalaman pengguna yang lebih lancar tanpa latensi yang terkait dengan memulai dari awal.
Dengan memperbarui iklan secara asinkron, pemilik situs dapat menjaga konten halaman tetap utuh sambil memperbarui konten iklan secara langsung dan real time tanpa hambatan. Hal ini tidak hanya meningkatkan kecepatan halaman dengan menghilangkan kebutuhan untuk memuat ulang seluruh halaman, tetapi juga memastikan iklan yang ditampilkan tetap relevan dan menarik. Dengan teknik ini, pemilik situs dapat mencapai keseimbangan antara monetisasi dan performa, menayangkan konten iklan yang menarik dan tepat waktu sekaligus meminimalkan efek negatif pada pengalaman pengguna.
Memperbarui slot iklan sangat berguna di halaman tempat pengguna cenderung tinggal lebih lama, seperti halaman resep, tutorial DIY, atau situs lain yang kaya konten. Misalnya, di halaman kerajinan DIY tempat pengguna mungkin menghabiskan banyak waktu mengikuti tutorial, memperbarui slot iklan secara strategis selama jeda di antara langkah-langkah, atau saat melihat galeri gambar, dapat meningkatkan pengalaman pengguna dan pendapatan iklan. Demikian juga pada halaman resep, memuat ulang slot iklan setelah pengguna men-scroll daftar bahan atau petunjuk dapat mempertahankan minat pengguna.
Memprioritaskan pemuatan asinkron
Salah satu strategi paling berdampak untuk meningkatkan kecepatan halaman saat menayangkan iklan adalah pemuatan asinkron. Pemuatan asinkron memuat iklan yang terpisah dari konten halaman web utama memungkinkan halaman terus dirender dan menjadi interaktif tanpa menunggu iklan dimuat sepenuhnya. Hal ini secara signifikan mengurangi waktu pemuatan yang dirasakan, sehingga meningkatkan kepuasan pengguna.
Sertakan atribut async
dalam definisi tag skrip. Contoh:
AdSense:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
AdSense (iklan otomatis):
<script async data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Tag Google Publisher:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
Mengoptimalkan ukuran, posisi, dan format iklan
![Ilustrasi perangkat dengan berbagai ukuran area pandang, dengan penempatan iklan bergaya kotak hijau, yang masing-masing bertuliskan 'Iklan'.](https://web.dev/static/articles/loading-ads-page-speed/image/fig-7.png?authuser=19&hl=id)
Ukuran, posisi, dan format untuk iklan dapat sangat memengaruhi kecepatan halaman. Ukuran iklan yang besar dapat memperlambat pemuatan halaman, yang menyebabkan pengguna merasa kesal. Untuk mengurangi hal ini, pemilik situs harus bekerja sama dengan pengiklan untuk mengoptimalkan ukuran dan format iklan. Mendorong penggunaan format gambar yang dikompresi dan desain materi iklan yang efisien membantu mengurangi ukuran file tanpa mengurangi kualitas visual. Pengoptimalan ini tidak hanya meningkatkan kecepatan halaman, tetapi juga meminimalkan konsumsi data untuk pengguna dengan bandwidth terbatas.
Better Ads Standards
Mematuhi Standar Iklan yang Lebih Baik untuk menampilkan iklan tidak hanya meningkatkan pengalaman pengguna dengan mengurangi format iklan yang mengganggu dan mengganggu, tetapi juga berdampak positif pada posisi penayangan iklan dan waktu muat halaman.
Dengan mengikuti standar ini, iklan cenderung ditempatkan pada posisi yang tidak terlalu mengganggu dan tidak mengganggu, yang dapat menghasilkan interaksi pengguna dan rasio klik-tayang yang lebih tinggi.
Selain itu, mematuhi pedoman ini juga dapat mempercepat pemuatan halaman karena format iklan yang lebih ringan dan tidak sarat sumber daya lebih disukai, sehingga meningkatkan performa situs dan kepuasan pengguna secara keseluruhan.
Evaluasi strategis terhadap penyedia dan jaringan iklan
Tidak semua jaringan dan penyedia iklan memiliki performa yang sama. Untuk memastikan kecepatan halaman yang optimal, pemilik situs harus mengevaluasi dengan cermat performa berbagai jaringan iklan, penerapan bidding header, dan penyedia.
Membangun kemitraan dengan penyedia yang memprioritaskan kecepatan—dan memiliki rekam jejak dalam menayangkan konten iklan ringan secara efisien—dapat meningkatkan performa halaman dan pengalaman pengguna secara signifikan.
Kesimpulan
Mencapai keseimbangan antara monetisasi dan performa sangat penting bagi pemilik situs yang ingin memberikan pengalaman pengguna yang luar biasa sekaligus memaksimalkan pendapatan melalui iklan online.
Dengan menggunakan teknik seperti pemuatan asinkron, pemuatan lambat, mengoptimalkan format dan ukuran iklan, memanfaatkan penyimpanan cache yang cerdas dan mengevaluasi jaringan iklan dengan cermat, serta bidding header dan penyedia, pemilik situs dapat mengatasi tantangan pemuatan iklan tanpa mengorbankan performa halaman. Memprioritaskan penayangan iklan yang efisien pada akhirnya memastikan stratifikasi pengguna, peningkatan engagement, dan perolehan pendapatan yang berkelanjutan.
Catatan kaki
- Server Iklan mungkin memiliki batasan dan persyaratan yang berlaku. Sebagai contoh, Ad Manager mengharuskan penayang untuk mendeklarasikan inventaris mereka yang dimuat ulang di UI. Beberapa pembeli memerlukan pernyataan pembaruan yang lebih lama dari atau sama dengan 240 detik. Secara umum, makin lama interval antarpembaruan, makin diminati inventaris Anda bagi pembeli. baca selengkapnya