Cara Mengurangi Waktu Eksekusi Java Script Doubleclick Ads

 

Meningkatkan waktu muat halaman dan mengurangi dampak pemuatan iklan adalah langkah penting dalam meningkatkan pengalaman pengguna di situs web, terutama di perangkat mobile. Salah satu faktor utama yang mempengaruhi kecepatan halaman adalah pemuatan iklan eksternal, seperti iklan Google AdSense. Meskipun iklan dapat menghasilkan pendapatan yang signifikan, jika tidak ditangani dengan benar, mereka dapat memperlambat pemuatan halaman dan mengganggu pengalaman pengguna. Untuk mengatasi masalah ini, ada beberapa teknik optimasi yang dapat Anda terapkan untuk memastikan bahwa iklan dimuat secara efisien tanpa mengurangi kinerja halaman, terutama di perangkat mobile.

Teknik Optimasi Pemuatan Iklan

1. Penggunaan defer untuk Skrip Iklan

Cara pertama untuk mengoptimalkan pemuatan iklan adalah dengan memanfaatkan atribut defer pada skrip iklan. Atribut ini memastikan bahwa skrip iklan dimuat setelah semua elemen penting lainnya di halaman selesai dimuat. Ini sangat berguna karena skrip iklan eksternal seperti Google AdSense bisa memblokir pemuatan halaman jika ditempatkan terlalu awal. Dengan menambahkan atribut defer, skrip iklan akan dimuat secara paralel dengan elemen lainnya, tanpa menghalangi render halaman.

Contoh Penerapan:

<!-- Skrip Iklan Google dengan defer -->
<script defer='defer' crossorigin='anonymous' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx'></script>

Tempatkan skrip ini di bagian footer halaman Anda, tepat sebelum tag penutup </body>. Dengan demikian, skrip iklan baru akan dimuat setelah seluruh konten halaman lainnya selesai.

2. Memuat Skrip Iklan Secara Dinamis

Teknik kedua yang bisa Anda terapkan adalah memuat skrip iklan secara dinamis menggunakan JavaScript. Dengan cara ini, skrip iklan hanya dimuat setelah seluruh halaman selesai dimuat, mengurangi waktu yang dibutuhkan untuk memuat iklan dan memastikan bahwa tidak ada gangguan pada elemen-elemen utama halaman.

Contoh Penerapan:

<!-- Skrip dinamis untuk memuat iklan setelah halaman dimuat -->
<script>
  window.addEventListener('load', function() {
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx';
    
    document.body.appendChild(script);
  });
</script>

Dengan menempatkan skrip ini di bagian footer, Anda memastikan bahwa pemuatan iklan tidak menghalangi pemuatan elemen lain di halaman. Ini sangat penting terutama pada halaman mobile di mana kecepatan sangat berpengaruh terhadap pengalaman pengguna.

3. Kode Iklan Responsif

Iklan responsif memastikan bahwa iklan ditampilkan dengan ukuran yang sesuai untuk berbagai perangkat, baik desktop maupun mobile. Ini membantu menjaga agar layout halaman tetap rapi dan iklan tidak mengganggu tampilan. Anda dapat menempatkan kode iklan responsif di dalam elemen seperti <div> atau <section> yang ada di halaman Anda. Kode ini akan menyesuaikan ukuran iklan berdasarkan lebar viewport.

Contoh Penerapan:

<!-- Iklan Responsif -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     
     data-ad-slot="1234567890"
     data-ad-format="auto"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

>Penempatan elemen iklan ini dapat disesuaikan dengan layout halaman Anda. Misalnya, Anda dapat menambahkan iklan di bagian atas, tengah, atau bawah halaman sesuai dengan preferensi desain Anda. Pastikan untuk menambahkan properti data-ad-format="auto" untuk membuat iklan menyesuaikan dengan ukuran layar perangkat yang digunakan.

4. Lazy Loading Iklan

Salah satu teknik terbaik untuk meningkatkan performa halaman adalah lazy loading. Dengan lazy loading, iklan hanya dimuat ketika elemen iklan tersebut masuk ke dalam viewport (area yang terlihat oleh pengguna). Ini berarti iklan tidak dimuat di awal, tetapi hanya saat pengguna menggulir ke bagian halaman tempat iklan berada. Teknik ini sangat membantu dalam mengurangi beban pemuatan halaman, terutama pada halaman yang panjang atau yang memiliki banyak elemen iklan.

Contoh Penerapan:

<!-- Skrip Lazy Loading Iklan -->
<script>
  window.addEventListener('load', function() {
    // Memastikan bahwa iklan dimuat hanya saat elemen berada di viewport
    const ads = document.querySelectorAll('.adsbygoogle');
    ads.forEach(function(ad) {
      // Pastikan iklan dimuat hanya saat terlihat di layar
      if (isElementInViewport(ad)) {
        const script = document.createElement('script');
        script.async = true;
        script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx';
        document.body.appendChild(script);
      }
    });
  });

  // Fungsi untuk mengecek apakah elemen berada dalam viewport
  function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
</script>

Dengan cara ini, iklan hanya akan dimuat saat benar-benar diperlukan, sehingga dapat mengurangi beban jaringan dan mempercepat waktu pemuatan halaman.

Penempatan Skrip di Halaman

Tempatkan skrip-skrip di atas dengan cermat di bagian yang tepat dari halaman Anda untuk memastikan performa maksimal:

• Header: Untuk mengoptimalkan kinerja halaman web, letakkan skrip yang memuat sumber eksternal, seperti adsbygoogle.js, dengan atribut defer di bagian <head> atau tepat sebelum tag penutup </body>. Penempatan ini memastikan bahwa skrip eksternal tidak menghambat pemuatan elemen lainnya, sehingga mempercepat waktu muat halaman secara keseluruhan.
• Footer: Skrip dinamis dan lazy loading sebaiknya ditempatkan di bagian footer, tepat sebelum tag penutup </body>. Dengan cara ini, elemen-elemen utama pada halaman dimuat terlebih dahulu, mempercepat tampilan konten yang penting. Penundaan pemuatan skrip ini membantu mengoptimalkan pengalaman pengguna dan mengurangi waktu muat halaman secara keseluruhan.
• Iklan (HTML Markup): Letakkan elemen iklan (HTML markup) di bagian halaman yang sesuai, seperti dalam <div> atau elemen lain yang Anda tentukan. Pemilihan lokasi yang tepat membantu meningkatkan visibilitas iklan, serta memastikan pengalaman pengguna yang baik. Pastikan juga untuk menyesuaikan posisi iklan agar tidak mengganggu navigasi atau konten utama halaman.

Mengoptimalkan Pengalaman Pengguna di Mobile

Untuk perangkat mobile, kecepatan halaman adalah salah satu faktor yang paling penting. Dengan menggunakan teknik-teknik di atas, Anda dapat meminimalkan dampak pemuatan iklan terhadap waktu muat halaman dan memberikan pengalaman pengguna yang lebih baik. Selain itu, penting untuk memastikan bahwa iklan yang ditampilkan responsif, sehingga iklan dapat menyesuaikan dengan ukuran layar perangkat mobile.

Mengoptimalkan pemuatan iklan bukan hanya tentang mempercepat waktu muat halaman tetapi juga tentang memberikan pengalaman yang lebih baik bagi pengunjung situs Anda. Dengan pendekatan yang tepat, Anda dapat menghasilkan pendapatan iklan yang optimal tanpa mengorbankan kecepatan halaman atau kenyamanan pengguna.

Berbagi :