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 memberikan nilai tambah yang jelas bagi situs Anda.
• Optimalkan 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 DOM konstruksi dan rendering, Anda harus selalu memuat skrip pihak ketiga secara asinkron kecuali jika skrip harus berjalan sebelum halaman dapat dirender.

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

<script async src="script.js">

<script defer src="script.js">

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

async

Skrip dengan atribut async dieksekusi pada peluang pertama setelah skrip selesai mengunduh dan sebelum jendela load peristiwa. Artinya ada kemungkinan (dan kemungkinan) skrip async tidak berjalan sesuai urutan muncul di HTML. Ini juga berarti mereka bisa menginterupsi pembuatan DOM jika menyelesaikan download saat parser masih bekerja.

defer

Skrip dengan atribut defer dieksekusi setelah penguraian HTML sepenuhnya selesai, tapi sebelum DOMContentLoaded peristiwa. defer memastikan bahwa skrip berjalan sesuai urutan yang muncul di HTML dan jangan memblokir parser.

• Gunakan async jika skrip harus dijalankan terlebih dahulu dalam proses pemuatan {i>checkout<i}.
• Gunakan defer untuk resource yang tidak terlalu penting, seperti pemutar video yang ada di bawah dari lipatan.

Menggunakan atribut-atribut ini dapat mempercepat pemuatan halaman secara signifikan. Misalnya, Telegraph menunda semua skrip mereka, termasuk iklan dan analisis, serta mempercepat waktu pemuatan iklan sebesar 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 membuat koneksi ke origin lain, dan Anda ingin prosesnya segera dimulai 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 Nama sebutan channel <link rel="preconnect">. Membuat koneksi melibatkan DNS pencarian dan handshake TCP, dan untuk sumber yang aman, negosiasi TLS. 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. Sebagai 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 dari dukungan preconnect, sehingga dns-prefetch dapat berfungsi sebagai pengganti 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">

Pemuatan lambat resource pihak ketiga

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

Satu pendekatan yang efektif adalah memuat konten pihak ketiga secara lambat setelah halaman utama konten akan dimuat. Iklan merupakan kandidat yang tepat untuk pendekatan ini.

Iklan adalah sumber penghasilan yang penting bagi banyak situs, tetapi pengguna datang untuk saat ini. Dengan memuat iklan secara lambat dan menayangkan konten utama lebih cepat, Anda dapat meningkatkan keseluruhan persentase visibilitas iklan. Misalnya MediaVine beralih ke iklan pemuatan lambat dan mengalami peningkatan kecepatan pemuatan halaman sebesar 200%. Google Ad Manager memiliki dokumentasi tentang cara memuat iklan dengan lambat.

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

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

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

Optimalkan cara Anda menayangkan skrip pihak ketiga

Berikut ini beberapa strategi yang disarankan untuk mengoptimalkan penggunaan skrip pihak ketiga.

Hosting CDN pihak ketiga

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

Tapi karena mereka tidak berada di asal yang sama dengan sumber daya Anda yang lain, memuat file dari CDN publik memerlukan biaya jaringan. Browser perlu melakukan pencarian DNS, membuat koneksi HTTP baru, dan, pada sumber yang aman, melakukan handshake SSL dengan server vendor.

Saat Anda menggunakan file dari server pihak ketiga, Anda jarang memiliki kontrol atas dalam cache. Mengandalkan strategi {i>caching<i} orang lain dapat menyebabkan skrip terlalu sering diambil ulang dari jaringan.

Skrip pihak ketiga yang dihosting sendiri

Skrip pihak ketiga yang dihosting sendiri merupakan opsi yang memberi Anda lebih banyak kontrol atas proses pemuatan skrip. Dengan hosting mandiri, Anda dapat:

• Mengurangi waktu pencarian DNS dan waktu pulang pergi.
• Tingkatkan header caching HTTP.
• Manfaatkan HTTP/2, atau HTTP/3 yang lebih baru.

Misalnya, Casper berhasil mencukur 1,7 detik waktu muat dengan menghosting sendiri skrip pengujian A/B.

Hosting mandiri memiliki satu kelemahan besar: skrip bisa menjadi usang dan tidak akan mendapatkan pembaruan otomatis saat terjadi perubahan API atau perbaikan keamanan.

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

Anda dapat menggunakan service worker untuk meng-cache skrip dari server pihak ketiga sebagai alternatif untuk hosting mandiri. Ini memberi Anda kontrol yang lebih besar atas {i>caching<i}, sambil mempertahankan manfaat CDN pihak ketiga.

Anda dapat mengontrol seberapa sering skrip diambil ulang dari jaringan dan buat strategi pemuatan yang membatasi permintaan untuk item yang tidak penting, sumber daya pihak ketiga hingga pengguna tiba di interaksi utama di laman. Dengan preconnect, Anda dapat membuat koneksi lebih awal dan juga membantu memitigasi biaya jaringan.