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
ataudefer
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.