Memuat JavaScript Pihak Ketiga

Addy Osmani
Addy Osmani
Arthur Evans

Jika Anda telah mengoptimalkan kode, tetapi situs masih dimuat terlalu lambat, mungkin hal ini disebabkan oleh skrip pihak ketiga.

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

  • Hal ini dapat memperlambat performa situs Anda.
  • Hal tersebut dapat menyebabkan masalah privasi atau keamanan.
  • Peristiwa ini mungkin 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, kita akan membahas cara menemukan dan memperbaiki masalah terkait pemuatan JavaScript pihak ketiga serta meminimalkan risiko bagi pengguna.

Apa yang dimaksud dengan skrip pihak ketiga?

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

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

  • Sematan pemutar video (YouTube, Vimeo)

  • Iframe iklan

  • Skrip analisis & metrik

  • Skrip pengujian A/B untuk eksperimen

  • Library helper, 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 kami sering mengandalkan skrip tersebut untuk berjalan dengan cepat dan tidak memperlambat halaman kami. Skrip pihak ketiga adalah penyebab umum perlambatan performa yang disebabkan oleh resource di luar kontrol pemilik situs, termasuk masalah berikut:

  • Mengaktifkan terlalu banyak permintaan jaringan ke beberapa server. Makin banyak permintaan yang harus dibuat situs, makin lama waktu yang dibutuhkan untuk dimuat.

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

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

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

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

  • Kompresi server yang tidak memadai menyebabkan resource dimuat lebih lambat.

  • Memblokir tampilan konten hingga selesai diproses. 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, menyia-nyiakan 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 asinkron atau tunda.

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

Bagaimana cara mengidentifikasi skrip pihak ketiga di suatu 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 banyak untuk dijalankan.

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 untuk sebuah situs, bukan skrip pelacakan dan pemasaran.

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

Perincian domain WebPageTest juga dapat berguna untuk memvisualisasikan jumlah konten yang berasal dari origin pihak ketiga. Kode ini mengelompokkannya berdasarkan total byte dan jumlah permintaan:

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

Bagaimana cara mengukur dampak skrip pihak ketiga di halaman saya?

Saat Anda melihat skrip 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 dengan dampaknya pada metrik engagement pengguna atau performa pengguna utama.

Audit Waktu Boot-up 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 yang menunjukkan dukungan
untuk mengevaluasi dan mengurai skrip
Audit waktu booting menunjukkan skrip mana yang memerlukan waktu paling lama untuk dimuat.

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 dari yang mereka harapkan untuk data seluler.

Lighthouse yang menunjukkan dukungan untuk
payload jaringan yang besar
Audit Payload Jaringan menunjukkan permintaan jaringan 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 lain yang ditentukan tidak tersedia. Hal ini dilakukan dengan pemblokiran permintaan jaringan, fitur yang dapat membantu mengukur dampak penghapusan resource pihak ketiga individual dari halaman Anda.

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

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

Panel Performa Chrome DevTools

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

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

Untuk mempelajari lebih lanjut cara menggunakan Chrome DevTools guna menganalisis performa pemuatan halaman, lihat Mulai menganalisis performa runtime.

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

  1. Gunakan panel Jaringan untuk mengukur waktu yang diperlukan untuk memuat halaman Anda.
    • Untuk mengemulasikan kondisi di dunia nyata, sebaiknya aktifkan throttling jaringan dan throttling CPU. Kemungkinan pengguna Anda tidak memiliki koneksi jaringan dan hardware desktop yang cepat, sehingga 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 kembali waktu pemuatan.
    • Untuk mendapatkan data yang lebih akurat, sebaiknya ukur waktu pemuatan setidaknya tiga kali. Hal ini diperhitungkan untuk beberapa skrip pihak ketiga yang mengambil resource yang berbeda pada setiap pemuatan halaman. Untuk mengatasi hal ini, Panel Performa DevTools mendukung beberapa rekaman.

Mengukur dampak skrip pihak ketiga dengan WebPageTest

WebPageTest mendukung pemblokiran permintaan satu per satu agar tidak dimuat untuk mengukur dampaknya di Setelan Lanjutan > Blokir. 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.

Kami merekomendasikan alur kerja berikut untuk menggunakan fitur ini:

  1. Menguji 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 pengujian 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 masing-masing origin pihak ketiga, untuk menentukan domain mana yang paling memengaruhi performa halaman Anda.

Strip film WebPageTest yang menampilkan dampak
pemuatan situs dengan dan tanpa penonaktifan pihak ketiga
Dampak pemblokiran resource pihak ketiga, dari Menggunakan WebPageTest Untuk Mengukur Dampak Tag Pihak Ketiga 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 single point of failure (SPOF) yang memungkinkan Anda menyimulasikan waktu tunggu habis atau kegagalan total untuk memuat resource. Tidak seperti pemblokiran domain, waktu tunggu SPOF lambat, sehingga berguna untuk menguji perilaku halaman Anda saat layanan pihak ketiga mengalami beban berat atau untuk sementara tidak tersedia.

Setelan lanjutan WebPageTest > SPOF > host gagal
Menggunakan fitur pengujian SPOF untuk melakukan simulasi kegagalan domain yang ditentukan.

Mendeteksi iframe mahal menggunakan Tugas Panjang

Jika skrip di iframe pihak ketiga memerlukan waktu lama untuk dijalankan, skrip tersebut dapat memblokir thread utama dan menunda tugas lainnya. Tugas yang panjang ini dapat menyebabkan pengendali peristiwa berfungsi lambat atau frame turun, sehingga memperburuk pengalaman pengguna.

Guna mendeteksi tugas panjang untuk Real User Monitoring (RUM), gunakan JavaScript PerformanceObserver API untuk mengamati entri longtask. Entri ini berisi properti atribusi yang dapat Anda gunakan untuk menentukan konteks frame mana yang menyebabkan tugas panjang.

Kode berikut mencatat entri longtask ke dalam konsol, termasuk satu untuk iframe "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 Panjang, 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 sendiri skrip.
  • Jika skrip tersebut tidak menambahkan nilai yang jelas ke 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.

Gunakan async atau defer

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

Atribut async dan defer mengubah perilaku ini sebagai berikut:

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

  • defer menyebabkan browser mendownload skrip secara asinkron saat browser 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 diperlukan untuk jalur rendering penting. Gunakan async jika penting bagi skrip untuk 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 awalnya akan dilihat pengguna.

Jika performa menjadi perhatian utama Anda, sebaiknya tunggu penambahan skrip asinkron hingga 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 tidak dapat berfungsi tanpa situs Anda.

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

Perlu diingat bahwa async tidak memperbaiki semuanya. Jika halaman Anda menyertakan skrip dalam jumlah besar, seperti skrip pelacakan untuk tujuan iklan, pemuatannya secara asinkron tidak akan mencegah skrip tersebut memperlambat pemuatan halaman.

Menggunakan Resource Hints untuk mengurangi waktu penyiapan koneksi

Menghubungkan ke origin pihak ketiga dapat memerlukan waktu yang lama, terutama pada jaringan yang lambat, karena permintaan jaringan memiliki beberapa komponen yang kompleks, termasuk pencarian dan pengalihan DNS. 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 dengan lebih cepat nantinya:

<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 perjalanan bolak-balik TCP serta menangani negosiasi TLS. Langkah-langkah lain ini dapat menjadi sangat lambat karena melibatkan verifikasi sertifikat SSL, sehingga pra-koneksi dapat sangat mengurangi waktu pemuatan.

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

Skrip "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 menjauhkan JavaScript dari jalur penting. Perhatikan bahwa pendekatan ini masih memblokir peristiwa onload, jadi cobalah untuk tidak melampirkan fitur penting ke onload.

Chrome juga mendukung Kebijakan Izin (sebelumnya Kebijakan Fitur), yaitu sekumpulan kebijakan yang memungkinkan developer menonaktifkan akses ke fitur browser tertentu secara selektif. Anda dapat menggunakannya untuk mencegah konten pihak ketiga memberikan perilaku yang tidak diinginkan ke situs.

Skrip pihak ketiga yang dihosting sendiri

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

Namun, hosting mandiri memiliki masalah 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 memperbarui skrip secara manual.

Sebagai alternatif, Anda dapat menyimpan skrip pihak ketiga ke dalam cache menggunakan pekerja layanan untuk mendapatkan kontrol lebih besar terhadap frekuensi pengambilan skrip dari jaringan. Anda juga dapat menggunakan pekerja layanan untuk membuat strategi pemuatan yang akan men-throttle permintaan pihak ketiga yang tidak penting hingga halaman Anda mencapai momen pengguna yang penting.

Lakukan A/B Testing terhadap 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. Fitur ini membuat versi halaman tersedia untuk berbagai contoh traffic situs Anda, dan menentukan dari analisis versi mana yang memberikan rasio konversi yang lebih baik.

Namun, pengujian A/B memang dirancang untuk menunda rendering untuk menentukan eksperimen mana yang harus aktif. JavaScript sering digunakan untuk memeriksa apakah ada pengguna Anda yang tergabung dalam eksperimen pengujian A/B, lalu mengaktifkan varian yang benar. Proses ini dapat memperburuk pengalaman, bahkan bagi pengguna yang tidak terlibat dalam eksperimen.

Untuk mempercepat rendering halaman, sebaiknya kirimkan skrip pengujian A/B ke contoh yang lebih kecil dari basis pengguna Anda, lalu 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 pelemahan kecepatan halaman jika dibuat dengan buruk. Pemuatan lambat dapat digunakan untuk memuat resource tersemat hanya jika diperlukan, misalnya, menunggu menayangkan iklan di footer halaman hingga pengguna men-scroll cukup jauh untuk melihatnya. Anda juga dapat lambat memuat konten pihak ketiga setelah konten halaman utama dimuat, tetapi sebelum pengguna berinteraksi dengan halaman tersebut.

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

Berhati-hatilah saat memuat resource secara lambat, karena hal ini sering melibatkan kode JavaScript yang dapat terpengaruh oleh koneksi jaringan yang tidak stabil.

DoubleClick memiliki panduan tentang cara menjalankan iklan secara lambat di dokumentasi resminya.

Pemuatan lambat yang efisien dengan Intersection Observer

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

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

Analisis pemuatan lambat

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

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

Muat skrip pihak ketiga dengan aman

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

Menghindarindocument.write()

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

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

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

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

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

Menggunakan Tag Manager 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 lain ke halaman Anda yang dapat memengaruhi performanya, dan meminimalkan dampak tersebut bagi pengguna akan menjadi lebih sulit bagi pengguna seiring bertambahnya tag.

Agar halaman dimuat dengan cepat, sebaiknya gunakan tag manager seperti Google Tag Manager (GTM). GTM memungkinkan Anda menerapkan tag secara asinkron agar tidak saling memblokir pemuatan, mengurangi jumlah panggilan jaringan yang diperlukan browser untuk mengeksekusi tag, dan mengumpulkan data tag di UI Lapisan Data.

Risiko penggunaan tag manager

Meskipun tag manager dirancang untuk menyederhanakan pemuatan halaman, penggunaannya secara cermat dapat memperlambat pemuatan halaman dengan cara berikut:

  • Jumlah tag dan pemroses peristiwa otomatis yang berlebihan di tag manager menyebabkan browser membuat lebih banyak permintaan jaringan daripada yang seharusnya, dan mengurangi kemampuan kode untuk merespons peristiwa dengan cepat.
  • Siapa pun yang memiliki kredensial dan akses dapat menambahkan JavaScript ke tag manager Anda. Cara ini tidak hanya meningkatkan jumlah permintaan jaringan 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 tag manager Anda.

Hindari skrip yang mencemari cakupan global

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

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

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

Strategi mitigasi

Berikut adalah 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 informasi selengkapnya, lihat Konten Campuran.

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

  • Kebijakan Keamanan Konten (CSP): Anda dapat menggunakan header HTTP di respons server untuk menentukan perilaku skrip tepercaya untuk situs Anda, serta mendeteksi dan mengurangi efek 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 hal berikut:

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