Memuat JavaScript pihak ketiga secara efisien

Milica Mihajlija

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

• Hapus jika tidak menambah nilai yang jelas pada situs Anda.
• Mengoptimalkan proses pemuatan.

Postingan ini menjelaskan cara mengoptimalkan proses pemuatan skrip pihak ketiga dengan teknik berikut:

• Menggunakan atribut async atau defer pada tag <script>
• Membangun koneksi awal ke origin yang diperlukan
• Pemuatan lambat
• Mengoptimalkan cara Anda menayangkan skrip pihak ketiga

Gunakan async atau defer

Karena skrip sinkron menunda pembuatan dan rendering DOM, Anda harus selalu memuat skrip pihak ketiga secara asinkron, kecuali jika skrip harus dijalankan sebelum halaman dapat dirender.

Atribut async dan defer memberi tahu browser bahwa browser dapat mengurai HTML saat memuat skrip di latar belakang, lalu menjalankan skrip setelah dimuat. Dengan cara ini, download skrip tidak memblokir konstruksi DOM atau rendering halaman, sehingga pengguna dapat melihat halaman sebelum semua skrip selesai dimuat.

<script async src="script.js">

<script defer src="script.js">

Perbedaan antara atribut async dan defer adalah saat browser mengeksekusi skrip.

async

Skrip dengan atribut async akan dieksekusi pada peluang pertama setelah selesai didownload dan sebelum peristiwa load jendela. Artinya, ada kemungkinan (dan kemungkinan) skrip async tidak akan berjalan sesuai urutan kemunculannya di HTML. Hal ini juga berarti bahwa parser dapat mengganggu pembuatan DOM jika selesai mendownload saat parser masih bekerja.

defer

Skrip dengan atribut defer dieksekusi setelah penguraian HTML selesai sepenuhnya, tetapi sebelum peristiwa DOMContentLoaded. defer memastikan bahwa skrip berjalan sesuai urutan kemunculannya dalam HTML dan tidak memblokir parser.

• Gunakan async jika penting untuk menjalankan skrip lebih awal dalam proses pemuatan.
• Gunakan defer untuk resource yang kurang penting, seperti pemutar video yang berada di paruh bawah.

Penggunaan atribut ini dapat mempercepat pemuatan halaman secara signifikan. Misalnya, Telegraph menunda semua skripnya, termasuk iklan dan analisis, dan mempercepat waktu pemuatan iklan rata-rata empat detik.

Membuat koneksi awal ke origin yang diperlukan

Anda dapat menghemat waktu 100–500 md dengan membuat koneksi awal ke asal pihak ketiga yang penting.

Dua jenis <link>, preconnect dan dns-prefetch, dapat membantu di sini:

preconnect

<link rel="preconnect"> memberi tahu browser bahwa halaman Anda ingin terhubung ke asal yang lain, dan Anda ingin proses tersebut dimulai sesegera mungkin. Saat browser meminta resource dari origin yang telah terhubung sebelumnya, download akan segera dimulai.

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

dns-prefetch

<link rel="dns-prefetch> menangani sebagian kecil dari hal yang ditangani <link rel="preconnect">. Untuk membuat koneksi, diperlukan pencarian DNS dan handshake TCP, serta negosiasi TLS untuk asal yang aman. dns-prefetch memberi tahu browser untuk hanya me-resolve DNS domain tertentu sebelum dipanggil secara eksplisit.

Petunjuk preconnect paling baik digunakan hanya untuk koneksi yang paling penting. Untuk domain pihak ketiga yang kurang penting, gunakan <link rel=dns-prefetch>.

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

Dukungan browser untuk dns-prefetch sedikit berbeda dengan dukungan preconnect, sehingga dns-prefetch dapat berfungsi sebagai penggantian untuk browser yang tidak mendukung preconnect. Gunakan tag link terpisah untuk menerapkannya dengan aman:

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

Resource pihak ketiga pemuatan lambat

Resource pihak ketiga yang disematkan dapat memperlambat pemuatan halaman secara signifikan jika resource tersebut dibuat dengan buruk. Jika tidak penting, atau berada di paruh bawah (yaitu, jika pengguna harus men-scroll untuk melihatnya), pemuatan lambat adalah cara yang tepat untuk meningkatkan metrik kecepatan halaman dan paint. Dengan cara ini, pengguna mendapatkan konten halaman utama lebih cepat dan mendapatkan pengalaman yang lebih baik.

Salah satu pendekatan yang efektif adalah dengan lambat memuat konten pihak ketiga setelah konten halaman utama dimuat. Iklan adalah kandidat yang baik untuk pendekatan ini.

Iklan adalah sumber pendapatan yang penting bagi banyak situs, tetapi pengguna datang untuk melihat konten. Dengan memuat iklan secara lambat dan menayangkan konten utama lebih cepat, Anda dapat meningkatkan persentase visibilitas iklan secara keseluruhan. Misalnya, MediaVine beralih ke iklan pemuatan lambat dan kecepatan pemuatan halamannya 200% lebih baik. Google Ad Manager memiliki dokumentasi tentang cara memuat iklan secara lambat.

Anda juga dapat menyetel konten pihak ketiga agar hanya dimuat saat pengguna pertama kali men-scroll ke bagian halaman tersebut.

Intersection Observer adalah API browser yang secara efisien mendeteksi saat elemen masuk atau keluar dari area pandang browser, dan Anda dapat menggunakannya untuk menerapkan teknik ini. lazysizes adalah library JavaScript yang populer untuk gambar pemuatan lambat dan iframes. Alat ini mendukung sematan dan widget YouTube. Objek ini juga memiliki dukungan opsional untuk Intersection Observer.

Menggunakan atribut loading untuk gambar dan iframe pemuatan lambat adalah alternatif yang bagus untuk teknik JavaScript, dan baru-baru ini tersedia di Chrome 76.

Mengoptimalkan cara Anda menayangkan skrip pihak ketiga

Berikut adalah beberapa strategi yang direkomendasikan untuk mengoptimalkan penggunaan skrip pihak ketiga.

Hosting CDN pihak ketiga

Vendor pihak ketiga biasanya memberikan URL untuk file JavaScript yang mereka hosting, biasanya di jaringan penayangan konten (CDN). Manfaat pendekatan ini adalah Anda dapat memulai dengan cepat—cukup menyalin dan menempelkan URL—dan tidak ada overhead pemeliharaan. Vendor pihak ketiga menangani konfigurasi server dan pembaruan skrip.

Namun, karena keduanya tidak memiliki asal yang sama dengan resource Anda yang lain, memuat file dari CDN publik menimbulkan biaya jaringan. Browser harus melakukan pencarian DNS, membuat koneksi HTTP baru, dan, pada asal yang aman, melakukan handshake SSL dengan server vendor.

Jika menggunakan file dari server pihak ketiga, Anda jarang memiliki kontrol atas penyimpanan dalam cache. Mengandalkan strategi caching orang lain dapat menyebabkan skrip terlalu sering diambil ulang dari jaringan.

Skrip pihak ketiga yang dihosting sendiri

Skrip pihak ketiga yang dihosting sendiri adalah opsi yang memberi Anda kontrol lebih besar atas proses pemuatan skrip. Dengan menghosting sendiri, Anda dapat:

• Kurangi waktu pencarian dan round-trip DNS.
• Tingkatkan kualitas header cache HTTP.
• Manfaatkan HTTP/2, atau HTTP/3 yang lebih baru.

Misalnya, Casper berhasil menghemat waktu pemuatan hingga 1,7 detik dengan menghosting sendiri skrip pengujian A/B.

Hosting mandiri memiliki satu kelemahan besar: skrip bisa sudah tidak berlaku dan tidak akan mendapatkan update otomatis jika ada perubahan API atau perbaikan keamanan.

Menggunakan pekerja layanan untuk meng-cache skrip dari server pihak ketiga

Anda dapat menggunakan pekerja layanan untuk meng-cache skrip dari server pihak ketiga sebagai alternatif hosting mandiri. Hal ini memberi Anda kontrol yang lebih besar atas penyimpanan dalam cache, sekaligus mempertahankan manfaat CDN pihak ketiga.

Anda dapat mengontrol seberapa sering skrip diambil ulang dari jaringan dan membuat strategi pemuatan yang men-throttle permintaan untuk resource pihak ketiga yang tidak penting hingga pengguna tiba di interaksi utama di halaman. Dengan preconnect, Anda dapat membuat koneksi awal dan juga membantu mengurangi biaya jaringan.