Memuat JavaScript pihak ketiga

Addy Osmani
Arthur Evans
X GitHub

Jika Anda telah mengoptimalkan kode, tetapi situs masih dimuat terlalu lambat, kemungkinan penyebabnya adalah skrip pihak ketiga.

Skrip pihak ketiga menyediakan berbagai fitur berguna yang membuat web lebih dinamis, interaktif, dan saling terhubung. Beberapa di antaranya bahkan mungkin penting untuk fungsi atau aliran pendapatan situs Anda. Namun, penggunaannya berisiko:

  • Skrip tersebut dapat memperlambat performa situs Anda.
  • Ekstensi tersebut dapat menyebabkan masalah privasi atau keamanan.
  • Agen ini dapat tidak dapat diprediksi dan perilakunya dapat memiliki konsekuensi yang tidak diinginkan.

Idealnya, Anda harus memastikan skrip pihak ketiga tidak memengaruhi jalur rendering penting situs Anda. Dalam panduan ini, kami akan membahas cara menemukan dan memperbaiki masalah terkait pemuatan JavaScript pihak ketiga dan meminimalkan risiko bagi pengguna Anda.

Apa yang dimaksud dengan skrip pihak ketiga?

JavaScript pihak ketiga sering kali merujuk pada skrip yang dapat disematkan ke situs mana pun langsung dari vendor pihak ketiga. Contohnya mencakup:

  • Tombol berbagi ke media sosial (Facebook, X, LinkedIn, Mastodon)

  • Penyematan pemutar video (YouTube, Vimeo)

  • Iframe iklan

  • Skrip analisis & metrik

  • Skrip pengujian A/B untuk eksperimen

  • Library bantuan, seperti pemformatan tanggal, animasi, atau library fungsional

contoh sematan video youtube
Contoh sematan video YouTube yang dapat ditambahkan ke halaman menggunakan kode berikut.
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/mo8thg5XGV0"
  frameborder="0"
  allow="autoplay; encrypted-media"
  allowfullscreen
>
</iframe>

Sayangnya, menyematkan skrip pihak ketiga berarti kita sering mengandalkannya untuk berjalan dengan cepat dan tidak memperlambat halaman kita. Skrip pihak ketiga adalah penyebab umum penurunan performa yang disebabkan oleh resource di luar kontrol pemilik situs, termasuk masalah berikut:

  • Mengirim terlalu banyak permintaan jaringan ke beberapa server. Makin banyak permintaan yang harus dibuat situs, makin lama waktu yang diperlukan untuk memuatnya.

  • Mengirim terlalu banyak JavaScript yang membuat thread utama sibuk. Terlalu banyak JavaScript dapat memblokir konstruksi DOM, yang menunda rendering halaman. Penguraian dan eksekusi skrip yang menggunakan banyak CPU dapat menunda interaksi pengguna dan menyebabkan baterai terkuras.

  • Mengirim file gambar atau video berukuran besar yang tidak dioptimalkan dapat menghabiskan data dan merugikan pengguna.

  • Masalah keamanan yang dapat bertindak sebagai titik tunggal kegagalan (SPOF) jika halaman Anda memuat skrip tanpa berhati-hati.

  • Caching HTTP yang tidak memadai, sehingga memaksa browser mengirim lebih banyak permintaan jaringan untuk mengambil resource.

  • Kurangnya kompresi server yang memadai menyebabkan resource dimuat dengan lambat.

  • Memblokir tampilan konten hingga pemrosesan selesai. Hal ini juga dapat berlaku untuk skrip pengujian A/B asinkron.

  • Penggunaan API lama yang diketahui membahayakan pengalaman pengguna, seperti document.write().

  • Elemen DOM yang berlebihan atau pemilih CSS yang mahal.

  • Menyertakan beberapa sematan pihak ketiga dapat menyebabkan beberapa framework dan library ditarik beberapa kali, sehingga membuang-buang resource dan memperburuk masalah performa yang ada.

  • Skrip pihak ketiga sering kali menggunakan teknik penyematan yang dapat memblokir window.onload jika servernya merespons dengan lambat, meskipun penyematan menggunakan async atau defer.

Kemampuan Anda untuk memperbaiki masalah terkait skrip pihak ketiga dapat bergantung pada situs Anda dan kemampuan Anda untuk mengonfigurasi cara memuat kode pihak ketiga. Untungnya, ada sejumlah solusi dan alat untuk menemukan dan memperbaiki masalah terkait resource pihak ketiga.

Bagaimana cara mengidentifikasi skrip pihak ketiga di halaman?

Mengidentifikasi skrip pihak ketiga di situs Anda dan menentukan dampak performanya adalah langkah pertama untuk mengoptimalkannya. Sebaiknya gunakan alat pengujian kecepatan web gratis, termasuk Chrome DevTools, PageSpeed Insights, dan WebPageTest, untuk mengidentifikasi skrip yang mahal. Alat ini menampilkan informasi diagnostik lengkap yang dapat memberi tahu Anda jumlah skrip pihak ketiga yang digunakan situs Anda, dan skrip mana yang memerlukan waktu paling lama untuk dieksekusi.

Tampilan waterfall WebPageTest dapat menyoroti dampak penggunaan skrip pihak ketiga yang berat. Gambar berikut dari Tags Gone Wild menunjukkan contoh diagram permintaan jaringan yang diperlukan untuk memuat konten utama situs, bukan skrip pelacakan dan pemasaran.

tampilan waterfall dari webpagetest yang menampilkan situs sebenarnya vs jumlah waktu yang dihabiskan untuk memuat skrip pelacakan
Skrip di halaman ini memerlukan waktu lebih lama untuk dimuat daripada halaman itu sendiri.

Pengelompokan domain WebPageTest juga dapat berguna untuk memvisualisasikan jumlah konten yang berasal dari origin pihak ketiga. Laporan ini menguraikan total byte dan jumlah permintaan:

perincian konten menurut domain (tampilan pertama). Menampilkan persentase permintaan dan byte untuk setiap pihak ketiga
Diagram pengelompokan domain menunjukkan seberapa banyak konten halaman yang berasal dari pihak ketiga.

Bagaimana cara mengukur dampak skrip pihak ketiga di halaman saya?

Jika Anda melihat skrip yang menyebabkan masalah, cari tahu fungsi skrip tersebut dan tentukan apakah situs Anda memerlukannya agar dapat berfungsi. Jika perlu, jalankan pengujian A/B untuk menyeimbangkan nilai yang dirasakan versus dampaknya terhadap engagement pengguna utama atau metrik performa.

Audit waktu booting Lighthouse

Audit waktu booting JavaScript Lighthouse menandai skrip yang memiliki waktu penguraian, kompilasi, atau evaluasi skrip yang mahal. Hal ini dapat membantu Anda mengidentifikasi skrip pihak ketiga yang menggunakan CPU secara intensif.

Lighthouse menunjukkan dukungan untuk evaluasi dan penguraian skrip
Audit waktu booting menunjukkan skrip mana yang memerlukan waktu pemuatan paling lama.

Audit payload jaringan Lighthouse

Audit Payload Jaringan Lighthouse mengidentifikasi permintaan jaringan, termasuk permintaan jaringan pihak ketiga yang memperlambat waktu pemuatan halaman dan membuat pengguna menghabiskan lebih banyak data seluler daripada yang mereka perkirakan.

Lighthouse menampilkan dukungan untuk payload jaringan besar
Audit Payload Jaringan menunjukkan permintaan jaringan mana yang memerlukan waktu paling lama dan mengambil data paling banyak.

Pemblokiran permintaan jaringan Chrome DevTools

Chrome DevTools memungkinkan Anda melihat perilaku halaman saat skrip, style sheet, atau resource tertentu tidak tersedia. Hal ini dilakukan dengan pemblokiran permintaan jaringan, fitur yang dapat membantu mengukur dampak penghapusan setiap resource pihak ketiga dari halaman Anda.

Untuk mengaktifkan pemblokiran permintaan, klik kanan permintaan apa pun di panel Jaringan, lalu pilih Block Request URL. Tab pemblokiran permintaan kemudian akan ditampilkan di panel DevTools, sehingga Anda dapat mengelola permintaan mana yang telah diblokir.

Memblokir URL permintaan dari panel jaringan DevTools
Blokir permintaan jaringan satu per satu untuk melihat perilaku halaman Anda tanpa permintaan tersebut.

Panel Performa Chrome DevTools

Panel Performa di Chrome DevTools membantu mengidentifikasi masalah pada performa web halaman Anda.

  1. Klik Rekam.
  2. Muat halaman Anda. DevTools menampilkan diagram waterfall yang menunjukkan cara situs Anda menghabiskan waktu pemuatannya.
  3. Buka Bottom-up di bagian bawah panel Performance.
  4. Klik Kelompokkan menurut produk dan urutkan skrip pihak ketiga halaman Anda berdasarkan waktu pemuatan.
Panel Performa DevTools menampilkan tampilan Bottom-up yang dikelompokkan menurut produk (pihak ketiga)
Skrip pihak ketiga yang diurutkan berdasarkan produk, dimulai dengan waktu pemuatan terlama.

Untuk mempelajari lebih lanjut cara menggunakan Chrome DevTools untuk menganalisis performa pemuatan halaman, lihat Memulai analisis performa runtime.

Berikut adalah alur kerja yang kami rekomendasikan untuk mengukur dampak skrip pihak ketiga:

  1. Gunakan panel Jaringan untuk mengukur durasi pemuatan halaman Anda.
    • Untuk mengemulasi kondisi dunia nyata, sebaiknya aktifkan throttling jaringan dan throttling CPU. Pengguna Anda mungkin tidak memiliki koneksi jaringan yang cepat dan hardware desktop yang mengurangi dampak skrip yang mahal dalam kondisi lab.
  2. Blokir URL atau domain yang bertanggung jawab atas skrip pihak ketiga yang Anda yakini bermasalah (lihat Panel Performa Chrome DevTools untuk mendapatkan panduan dalam mengidentifikasi skrip yang mahal).
  3. Muat ulang halaman dan ukur waktu pemuatan lagi.
    • Untuk mendapatkan data yang lebih akurat, Anda mungkin perlu mengukur waktu pemuatan minimal tiga kali. Hal ini disebabkan oleh beberapa skrip pihak ketiga yang mengambil resource berbeda pada setiap pemuatan halaman. Untuk membantu mengatasi hal ini, Panel Performa DevTools mendukung beberapa rekaman.

Mengukur dampak skrip pihak ketiga dengan WebPageTest

WebPageTest mendukung pemblokiran setiap permintaan agar tidak dimuat untuk mengukur dampaknya di Advanced Settings > Block. Gunakan fitur ini untuk menentukan daftar domain yang akan diblokir, seperti domain iklan.

Setelan lanjutan WebPageTest < Blokir. Menampilkan area teks untuk menentukan domain yang akan diblokir.
Cantumkan domain yang ingin Anda blokir di panel ini.

Sebaiknya gunakan alur kerja berikut untuk menggunakan fitur ini:

  1. Uji halaman tanpa memblokir pihak ketiga.
  2. Ulangi pengujian dengan memblokir beberapa pihak ketiga.
  3. Pilih dua hasil dari Histori Pengujian Anda.
  4. Klik Bandingkan.
WebPageTest menampilkan opsi perbandingan yang memungkinkan Anda membandingkan dua laporan
Pilih hasil uji beban untuk dibandingkan.

Gambar berikut menunjukkan fitur filmstrip WebPageTest yang membandingkan urutan pemuatan untuk halaman dengan dan tanpa resource pihak ketiga yang aktif. Sebaiknya periksa hal ini untuk pengujian origin pihak ketiga individual, guna menentukan domain mana yang paling memengaruhi performa halaman Anda.

Filmstrip WebPageTest yang menampilkan dampak pemuatan situs dengan dan tanpa menonaktifkan pihak ketiga
Dampak pemblokiran resource pihak ketiga, dari Using WebPageTest To Measure The Impact Of Third-Party Tags oleh Andy Davies.

WebPageTest juga mendukung dua perintah yang beroperasi di tingkat DNS untuk memblokir domain:

  • blockDomains mengambil daftar domain yang akan diblokir.
  • blockDomainsExcept mengambil daftar domain dan memblokir apa pun yang tidak ada dalam daftar.

WebPageTest juga memiliki tab titik tunggal kegagalan (SPOF) yang memungkinkan Anda menyimulasikan waktu tunggu habis atau kegagalan total untuk memuat resource. Tidak seperti pemblokiran domain, SPOF mengalami waktu tunggu yang lambat, yang dapat berguna untuk menguji perilaku halaman Anda saat layanan pihak ketiga mengalami beban berat atau tidak tersedia untuk sementara.

Setelan lanjutan WebPageTest > SPOF > host yang akan gagal
Gunakan fitur pengujian SPOF untuk menyimulasikan kegagalan domain yang ditentukan.

Mendeteksi iframe yang berat menggunakan Tugas Berdurasi Lama

Jika skrip dalam iframe pihak ketiga memerlukan waktu lama untuk dijalankan, skrip tersebut dapat memblokir thread utama dan menunda tugas lainnya. Tugas berdurasi lama ini dapat menyebabkan pengendali peristiwa bekerja lambat atau frame terhenti, sehingga memperburuk pengalaman pengguna.

Untuk mendeteksi tugas berdurasi lama untuk Pemantauan Pengguna Nyata (RUM), gunakan API PerformanceObserver JavaScript untuk mengamati entri longtask. Entri ini berisi properti atribusi yang dapat Anda gunakan untuk menentukan konteks frame yang menyebabkan tugas berdurasi lama.

Kode berikut mencatat entri longtask ke konsol, termasuk entri untuk iframe yang "mahal":

<script>
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // Attribution entry including "containerSrc":"https://example.com"
      console.log(JSON.stringify(entry.attribution));
    }
  });

  observer.observe({entryTypes: ['longtask']});
</script>

<!-- Imagine this is an iframe with expensive long tasks -->
<iframe src="https://example.com"></iframe>

Untuk mempelajari lebih lanjut cara memantau Tugas Berdurasi Lama, lihat Metrik Performa yang Berfokus pada Pengguna.

Bagaimana cara memuat skrip pihak ketiga secara efisien?

Jika skrip pihak ketiga memperlambat pemuatan halaman, Anda memiliki beberapa opsi untuk meningkatkan performa:

  • Muat skrip menggunakan atribut async atau defer untuk menghindari pemblokiran penguraian dokumen.
  • Jika server pihak ketiga lambat, pertimbangkan untuk menghosting skrip sendiri.
  • Jika skrip tidak memberikan nilai yang jelas bagi situs Anda, hapus skrip tersebut.
  • Gunakan Petunjuk Resource seperti <link rel=preconnect> atau <link rel=dns-prefetch> untuk melakukan pencarian DNS untuk domain yang menghosting skrip pihak ketiga.

Menggunakan async atau defer

Eksekusi JavaScript memblokir parser. Saat menemukan skrip, browser harus menjeda konstruksi DOM, meneruskan skrip ke mesin JavaScript, dan mengizinkan skrip dijalankan sebelum melanjutkan konstruksi DOM.

Atribut async dan defer mengubah perilaku ini sebagai berikut:

  • async menyebabkan browser mendownload skrip secara asinkron saat terus mengurai dokumen HTML. Setelah skrip selesai didownload, penguraian akan diblokir saat skrip dijalankan.

  • defer menyebabkan browser mendownload skrip secara asinkron saat terus mengurai dokumen HTML, lalu menunggu untuk menjalankan skrip hingga penguraian dokumen selesai.

Selalu gunakan async atau defer untuk skrip pihak ketiga, kecuali jika skrip tersebut diperlukan untuk jalur rendering penting. Gunakan async jika skrip perlu dijalankan lebih awal dalam proses pemuatan, seperti untuk beberapa skrip analisis. Gunakan defer untuk resource yang kurang penting, seperti video yang dirender lebih rendah di halaman daripada yang akan dilihat pengguna pada awalnya.

Jika performa adalah fokus utama Anda, sebaiknya tunggu untuk menambahkan skrip asinkron hingga setelah konten penting halaman Anda dimuat. Sebaiknya jangan gunakan async untuk library penting seperti jQuery.

Beberapa skrip harus dimuat tanpa async atau defer, terutama yang merupakan bagian penting dari situs Anda. Hal ini mencakup library UI atau framework jaringan penayangan konten (CDN) yang diperlukan agar situs Anda dapat berfungsi.

Skrip lain tidak akan berfungsi jika dimuat secara asinkron. Periksa dokumentasi untuk skrip apa pun yang Anda gunakan, dan ganti skrip apa pun yang tidak dapat dimuat secara asinkron dengan alternatif yang dapat dimuat secara asinkron. Perlu diketahui bahwa beberapa pihak ketiga merekomendasikan untuk menjalankan skrip mereka secara sinkron, meskipun skrip tersebut akan berfungsi sama baiknya secara asinkron.

Ingat bahwa async tidak memperbaiki semuanya. Jika halaman Anda menyertakan banyak skrip, seperti skrip pelacakan untuk tujuan iklan, memuatnya secara asinkron tidak akan mencegahnya memperlambat pemuatan halaman.

Menggunakan Petunjuk Resource untuk mengurangi waktu penyiapan koneksi

Membuat koneksi ke origin pihak ketiga dapat memerlukan waktu lama, terutama pada jaringan yang lambat, karena permintaan jaringan memiliki beberapa komponen yang kompleks, termasuk pencarian DNS dan pengalihan. Anda dapat menggunakan Petunjuk Resource seperti untuk melakukan pencarian DNS untuk domain yang menghosting skrip pihak ketiga di awal proses pemuatan halaman, sehingga permintaan jaringan lainnya dapat dilanjutkan lebih cepat nanti:

<link rel="dns-prefetch" href="http://example.com" />

Jika domain pihak ketiga yang Anda hubungkan menggunakan HTTPS, Anda juga dapat menggunakan , yang melakukan pencarian DNS dan menyelesaikan round-trip TCP serta menangani negosiasi TLS. Langkah-langkah lain ini bisa sangat lambat karena melibatkan verifikasi sertifikat SSL, sehingga pra-koneksi dapat sangat mengurangi waktu pemuatan.

<link rel="preconnect" href="https://cdn.example.com" />

Menjalankan skrip di "sandbox" dengan iframe

Jika Anda memuat skrip pihak ketiga langsung ke iframe, skrip tersebut tidak akan memblokir eksekusi halaman utama. AMP menggunakan pendekatan ini untuk mencegah JavaScript masuk ke jalur penting. Perhatikan bahwa pendekatan ini masih memblokir peristiwa onload, jadi cobalah untuk tidak melampirkan fitur penting ke onload.

Chrome juga mendukung Permissions Policy (sebelumnya Feature Policy), serangkaian kebijakan yang memungkinkan developer menonaktifkan akses ke fitur browser tertentu secara selektif. Anda dapat menggunakannya untuk mencegah konten pihak ketiga menimbulkan perilaku yang tidak diinginkan ke situs.

Menghosting sendiri skrip pihak ketiga

Jika Anda menginginkan kontrol lebih besar atas cara skrip penting dimuat, misalnya untuk mengurangi waktu DNS atau meningkatkan header caching HTTP, Anda mungkin dapat menghostingnya sendiri.

Namun, hosting mandiri memiliki masalahnya sendiri, terutama dalam hal memperbarui skrip. Skrip yang dihosting sendiri tidak akan mendapatkan update otomatis untuk perubahan API atau perbaikan keamanan, yang dapat menyebabkan hilangnya pendapatan atau masalah keamanan hingga Anda dapat mengupdate skrip secara manual.

Sebagai alternatif, Anda dapat meng-cache skrip pihak ketiga menggunakan service worker untuk mendapatkan kontrol lebih besar atas seberapa sering skrip diambil dari jaringan. Anda juga dapat menggunakan pekerja layanan untuk membuat strategi pemuatan yang membatasi permintaan pihak ketiga yang tidak penting hingga halaman Anda mencapai momen pengguna utama.

Melakukan pengujian A/B pada sampel pengguna yang lebih kecil

Pengujian A/B (atau pengujian terpisah) adalah teknik untuk bereksperimen dengan dua versi halaman guna menganalisis pengalaman dan perilaku pengguna. Alat ini menyediakan versi halaman untuk berbagai sampel traffic situs Anda, dan menentukan dari analisis versi mana yang memberikan rasio konversi yang lebih baik.

Namun, secara desain, pengujian A/B menunda rendering untuk memutuskan eksperimen mana yang perlu aktif. JavaScript sering digunakan untuk memeriksa apakah ada pengguna Anda yang termasuk dalam eksperimen pengujian A/B, lalu mengaktifkan varian yang benar. Proses ini dapat memperburuk pengalaman bahkan bagi pengguna yang bukan bagian dari eksperimen.

Untuk mempercepat rendering halaman, sebaiknya kirim skrip pengujian A/B ke sampel basis pengguna yang lebih kecil, dan jalankan kode yang menentukan versi halaman yang akan ditampilkan di sisi server.

Pemuatan lambat resource pihak ketiga

Resource pihak ketiga yang disematkan, seperti iklan dan video, dapat menjadi kontributor utama kecepatan halaman yang lambat jika dibuat dengan buruk. Pemuatan lambat dapat digunakan untuk memuat resource tersemat hanya jika diperlukan, misalnya, menunggu untuk menayangkan iklan di footer halaman hingga pengguna men-scroll cukup jauh untuk melihatnya. Anda juga dapat memuat lambat konten pihak ketiga setelah konten halaman utama dimuat, tetapi sebelum pengguna berinteraksi dengan halaman.

Ilustrasi yang menunjukkan aset yang penting untuk pengalaman paruh atas dan aset yang kurang penting dan dapat dimuat lambat.
Anda dapat melakukan pemuatan lambat pada aset yang tidak akan langsung dilihat pengguna saat halaman dimuat.

Berhati-hatilah saat melakukan pemuatan lambat resource, karena sering kali melibatkan kode JavaScript yang dapat terpengaruh oleh koneksi jaringan yang tidak stabil.

DoubleClick memiliki panduan tentang cara melakukan pemuatan lambat iklan dalam dokumentasi resmi mereka.

Pemuatan lambat yang efisien dengan Intersection Observer

Secara historis, metode untuk mendeteksi apakah suatu elemen terlihat di area pandang untuk tujuan pemuatan lambat rentan terhadap error dan sering kali memperlambat browser. Metode yang tidak efisien ini sering memproses peristiwa scroll atau ubah ukuran, lalu menggunakan DOM API seperti getBoundingClientRect() untuk menghitung posisi elemen relatif terhadap area pandang.

IntersectionObserver adalah API browser yang memungkinkan pemilik halaman mendeteksi secara efisien kapan elemen yang diamati masuk atau keluar dari area pandang browser. LazySizes juga memiliki dukungan opsional untuk IntersectionObserver.

Analisis pemuatan lambat

Jika Anda menunda pemuatan skrip analisis terlalu lama, Anda dapat kehilangan data analisis yang berharga. Untungnya, ada strategi yang tersedia untuk menginisialisasi analisis secara lambat sambil mempertahankan data pemuatan halaman awal.

Postingan blog Phil Walton Penyiapan Google Analytics yang Saya Gunakan di Setiap Situs yang Saya Buat membahas salah satu strategi tersebut untuk Google Analytics.

Memuat skrip pihak ketiga dengan aman

Bagian ini memberikan panduan untuk memuat skrip pihak ketiga seaman mungkin.

Menghindarindocument.write()

Skrip pihak ketiga, terutama untuk layanan lama, terkadang menggunakan document.write() untuk memasukkan dan memuat skrip. Hal ini menjadi masalah karena document.write() berperilaku tidak konsisten, dan kegagalannya sulit di-debug.

Perbaikan untuk masalah document.write() adalah dengan tidak menggunakannya. Di Chrome 53 dan yang lebih tinggi, Chrome DevTools mencatat peringatan ke konsol untuk penggunaan document.write() yang bermasalah:

Peringatan konsol DevTools yang menandai pelanggaran untuk sematan pihak ketiga yang menggunakan document.write()
Penggunaan flag document.write() Chrome DevTools.

Jika Anda menerima error ini, Anda dapat memeriksa penggunaan document.write() di situs Anda dengan mencari header HTTP yang dikirim ke browser Anda. Lighthouse juga dapat menyoroti skrip pihak ketiga yang masih menggunakan document.write().

Audit Praktik Terbaik Lighthouse menandai penggunaan document.write()
Laporan Lighthouse yang menunjukkan skrip yang menggunakan document.write().

Menggunakan pengelola tag dengan cermat

Tag adalah cuplikan kode yang memungkinkan tim digital marketing mengumpulkan data, menetapkan cookie, atau mengintegrasikan konten pihak ketiga seperti widget media sosial ke dalam situs. Tag ini menambahkan permintaan jaringan, dependensi JavaScript, dan resource lainnya ke halaman Anda yang dapat memengaruhi performanya, dan meminimalkan dampak tersebut bagi pengguna akan semakin sulit seiring bertambahnya tag.

Agar pemuatan halaman tetap cepat, sebaiknya gunakan Tag Manager seperti Google Tag Manager (GTM). GTM memungkinkan Anda men-deploy tag secara asinkron sehingga tidak saling memblokir saat dimuat, mengurangi jumlah panggilan jaringan yang diperlukan browser untuk mengeksekusi tag, dan mengumpulkan data tag di UI Lapisan Data-nya.

Risiko penggunaan Tag Manager

Meskipun pengelola tag dirancang untuk menyederhanakan pemuatan halaman, penggunaan yang tidak hati-hati dapat memperlambat pemuatan halaman dengan cara berikut:

  • Jumlah tag dan pemroses peristiwa otomatis yang berlebihan di pengelola tag akan menyebabkan browser membuat lebih banyak permintaan jaringan daripada yang seharusnya, dan mengurangi kemampuan kode Anda untuk merespons peristiwa dengan cepat.
  • Siapa pun yang memiliki kredensial dan akses dapat menambahkan JavaScript ke pengelola tag Anda. Hal ini tidak hanya dapat meningkatkan jumlah permintaan jaringan yang mahal yang diperlukan untuk memuat halaman Anda, tetapi juga dapat menimbulkan risiko keamanan dan masalah performa lainnya dari skrip yang tidak diperlukan. Untuk mengurangi risiko ini, sebaiknya batasi akses ke pengelola tag Anda.

Menghindari skrip yang mengotori cakupan global

Skrip pihak ketiga dapat berperilaku dalam berbagai cara yang merusak halaman Anda secara tidak terduga:

  • Skrip yang memuat dependensi JavaScript dapat mengotori cakupan global dengan kode yang berinteraksi buruk dengan kode Anda.
  • Update yang tidak terduga dapat menyebabkan perubahan yang dapat menyebabkan gangguan.
  • Kode pihak ketiga dapat diubah dalam pengiriman agar berperilaku berbeda antara pengujian dan deployment halaman Anda.

Sebaiknya lakukan audit rutin terhadap skrip pihak ketiga yang Anda muat untuk memeriksa apakah ada pihak tidak bertanggung jawab. Anda juga dapat menerapkan pengujian mandiri, integritas subresource, dan transmisi kode pihak ketiga yang aman untuk menjaga keamanan halaman Anda.

Strategi mitigasi

Berikut beberapa strategi berskala besar untuk meminimalkan dampak skrip pihak ketiga terhadap performa dan keamanan situs Anda:

  • HTTPS: Situs yang menggunakan HTTPS tidak boleh bergantung pada pihak ketiga yang menggunakan HTTP. Untuk mengetahui informasi selengkapnya, lihat Konten Campuran.

  • Sandboxing: Pertimbangkan untuk menjalankan skrip pihak ketiga di iframe dengan atribut sandbox untuk membatasi tindakan yang tersedia untuk skrip.

  • Kebijakan Keamanan Konten (CSP): Anda dapat menggunakan header HTTP dalam respons server untuk menentukan perilaku skrip tepercaya untuk situs Anda, serta mendeteksi dan mengurangi dampak beberapa serangan, seperti Pembuatan Skrip Lintas Situs (XSS).

Berikut adalah contoh cara menggunakan perintah script-src CSP untuk menentukan sumber JavaScript yang diizinkan di halaman:

// Given this CSP header Content-Security-Policy: script-src
https://example.com/ // The following third-party script will not be loaded or
executed

<script src="https://not-example.com/js/library.js"></script>

Bacaan lebih lanjut

Untuk mempelajari lebih lanjut cara mengoptimalkan JavaScript pihak ketiga, sebaiknya baca artikel berikut:

Terima kasih kepada Kenji Baheux, Jeremy Wagner, Pat Meenan, Philip Walton, Jeff Posnick, dan Cheney Tsai atas ulasan mereka.