Skrip pihak ketiga memengaruhi performa, itulah sebabnya penting untuk mengauditnya secara rutin dan menggunakan teknik yang efisien untuk memuat skrip tersebut. Codelab ini menunjukkan cara mengoptimalkan pemuatan resource pihak ketiga. Panduan ini membahas teknik berikut:
Menunda pemuatan skrip
Memuat lambat resource non-kritis
Melakukan pra-pemuatan ke origin yang diperlukan
Aplikasi contoh yang disertakan menampilkan halaman web sederhana dengan tiga fitur yang berasal dari sumber pihak ketiga:
Penyematan video
Library visualisasi data untuk merender grafik garis
Widget berbagi media sosial
Anda akan memulai dengan mengukur performa aplikasi, lalu menerapkan setiap teknik untuk meningkatkan berbagai aspek performa aplikasi.
Mengukur performa
Pertama, buka aplikasi contoh dalam tampilan layar penuh:
- Klik Remix to Edit untuk membuat project dapat diedit.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan
Layar Penuh
.
Jalankan audit performa Lighthouse di halaman untuk menetapkan performa dasar pengukuran:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Klik Seluler.
- Centang kotak Performance. (Anda dapat menghapus centang di kotak lainnya di bagian Audit.)
- Klik Simulasi 3G Cepat, Pelambatan CPU 4x.
- Centang kotak Kosongkan Penyimpanan.
- Klik Jalankan audit.
Saat menjalankan audit di komputer, hasil pastinya dapat bervariasi, tetapi Anda akan melihat bahwa waktu First Contentful Paint (FCP) cukup tinggi, dan Lighthouse menyarankan dua peluang untuk diselidiki: Menghapus resource yang memblokir rendering dan Melakukan pra-koneksi ke origin yang diperlukan. (Meskipun semua metrik berwarna hijau, pengoptimalan masih akan menghasilkan peningkatan.)
Menunda JavaScript pihak ketiga
Audit Menghilangkan resource yang memblokir rendering mengidentifikasi bahwa Anda dapat menghemat waktu dengan menunda skrip yang berasal dari d3js.org:
D3.js adalah library JavaScript untuk membuat visualisasi data. File script.js di aplikasi contoh menggunakan fungsi utilitas D3 untuk membuat diagram garis SVG dan menambahkannya ke halaman. Urutan operasi di sini penting: script.js harus berjalan setelah dokumen diuraikan dan library D3 dimuat, itulah sebabnya script.js disertakan tepat sebelum tag </body> penutup di index.html.
Namun, skrip D3 disertakan dalam <head> halaman, yang memblokir penguraian dokumen lainnya:
Dua atribut ajaib dapat membuka blokir parser saat ditambahkan ke tag skrip:
asyncmemastikan bahwa skrip didownload di latar belakang dan dijalankan pada kesempatan pertama setelah selesai didownload.defermemastikan bahwa skrip didownload di latar belakang dan dieksekusi setelah penguraian selesai sepenuhnya.
Karena diagram ini tidak terlalu penting untuk keseluruhan halaman dan kemungkinan besar akan berada di bawah lipatan, gunakan defer untuk memastikan tidak ada pemblokiran parser.
Langkah 1: Muat skrip secara asinkron dengan atribut defer
Pada baris 17 di index.html, tambahkan atribut defer ke elemen <script>:
<script src="https://d3js.org/d3.v3.min.js" defer></script>
Langkah 2: Pastikan urutan operasi yang benar
Setelah D3 ditangguhkan, script.js akan berjalan sebelum D3 siap, sehingga menyebabkan error.
Skrip dengan atribut defer dieksekusi sesuai urutan yang ditentukan. Untuk memastikan script.js dieksekusi setelah D3 siap, tambahkan defer ke dalamnya dan pindahkan ke <head> dokumen, tepat setelah elemen <script> D3. Sekarang, parser tidak lagi diblokir, dan download dimulai lebih cepat.
<script src="https://d3js.org/d3.v3.min.js" defer></script>
<script src="./script.js" defer></script>
Memuat lambat resource pihak ketiga
Semua resource yang berada di paruh bawah adalah kandidat yang baik untuk pemuatan lambat.
Aplikasi contoh memiliki video YouTube yang disematkan dalam iframe. Untuk memeriksa jumlah permintaan yang dibuat halaman dan yang berasal dari iframe YouTube yang disematkan:
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan
Layar Penuh
.
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
- Centang kotak Nonaktifkan cache.
- Pilih 3G Cepat di menu dropdown Throttling.
- Muat ulang halaman.
Panel Jaringan mengungkapkan bahwa halaman tersebut membuat total 28 permintaan dan mentransfer hampir 1 MB resource yang dikompresi.
Untuk mengidentifikasi permintaan yang dibuat iframe YouTube, cari ID video 6lfaiXM6waw di kolom Pemrakarsa. Untuk mengelompokkan semua permintaan menurut domain:
Di panel Jaringan, klik kanan judul kolom.
Di menu dropdown, pilih kolom Domains.
Untuk mengurutkan permintaan menurut domain, klik judul kolom Domains.
Pengurutan baru mengungkapkan bahwa ada permintaan tambahan ke domain Google. Secara total, iframe YouTube membuat 14 permintaan untuk skrip, stylesheet, gambar, dan font. Namun, kecuali jika pengguna benar-benar men-scroll ke bawah untuk memutar video, mereka tidak benar-benar memerlukan semua aset tersebut.
Dengan menunggu pemuatan lambat video hingga pengguna men-scroll ke bawah ke bagian halaman tersebut, Anda akan mengurangi jumlah permintaan yang awalnya dibuat halaman. Pendekatan ini menghemat data pengguna dan mempercepat pemuatan awal.
Salah satu cara untuk menerapkan pemuatan lambat adalah dengan menggunakan Intersection Observer, API browser yang memberi tahu Anda saat elemen memasuki atau keluar dari area pandang browser.
Langkah 1: Mencegah pemuatan video di awal
Untuk memuat iframe video secara lambat, Anda harus mencegahnya dimuat dengan cara biasa terlebih dahulu. Lakukan dengan mengganti atribut src dengan atribut data-src untuk menentukan URL video:
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/lS9D6w1GzGY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
data-src adalah atribut data, yang memungkinkan Anda menyimpan informasi tambahan pada elemen HTML standar. Atribut data dapat diberi nama apa pun, asalkan diawali dengan "data-".
Iframe tanpa src tidak akan dimuat.
Langkah 2: Gunakan Intersection Observer untuk memuat video secara lambat
Untuk memuat video saat pengguna men-scroll ke video tersebut, Anda perlu mengetahui kapan hal itu terjadi. Di sinilah Intersection Observer API berperan. Intersection Observer API memungkinkan Anda mendaftarkan fungsi callback yang dijalankan setiap kali elemen yang ingin dilacak memasuki atau keluar dari area pandang.
Untuk memulai, buat file baru dan beri nama lazy-load.js:
- Klik New File dan beri nama.
- Klik Tambahkan File Ini.
Tambahkan tag skrip ke header dokumen Anda:
<script src="/lazy-load.js" defer></script>
Di lazy-load.js, buat IntersectionObserver baru dan teruskan fungsi callback untuk dijalankan:
// create a new Intersection Observer
let observer = new IntersectionObserver(callback);
Sekarang, beri observer elemen target untuk ditonton (iframe video dalam hal ini) dengan meneruskannya sebagai argumen dalam metode observe:
// the element that you want to watch
const element = document.querySelector('iframe');
// register the element with the observe method
observer.observe(element);
callback menerima daftar objek IntersectionObserverEntry dan objek IntersectionObserver itu sendiri. Setiap entri berisi elemen dan properti target yang mendeskripsikan dimensi, posisi, waktu masuk ke area pandang, dan lainnya. Salah satu properti IntersectionObserverEntry adalah isIntersecting—nilai boolean yang sama dengan true saat elemen memasuki area pandang.
Dalam contoh ini, target adalah iframe. isIntersecting sama dengan true saat target memasuki area pandang. Untuk melihat cara kerjanya, ganti callback dengan fungsi berikut:
let observer = new IntersectionObserver(callback);
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
console.log(entry.target);
console.log(entry.isIntersecting);
});
});
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan
Layar Penuh
.
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Konsol.
Coba scroll ke atas dan ke bawah. Anda akan melihat nilai isIntersecting berubah dan elemen target dicatat ke konsol.
Untuk memuat video saat pengguna men-scroll ke posisinya, gunakan isIntersecting sebagai kondisi untuk menjalankan fungsi loadElement, yang mendapatkan nilai dari data-src elemen iframe dan menetapkannya sebagai atribut src elemen iframe. Penggantian tersebut akan memicu pemuatan video. Kemudian, setelah video dimuat, panggil metode unobserve di observer untuk berhenti menonton elemen target:
let observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(entry => {
console.log(entry.target);
console.log(entry.isIntersecting);
});
});
if (entry.isIntersecting) {
// do this when the element enters the viewport
loadElement(entry.target);
// stop watching
observer.unobserve(entry.target);
}
});
});
function loadElement(element) {
const src = element.getAttribute('data-src');
element.src = src;
}
Langkah 3: Evaluasi ulang performa
Untuk melihat perubahan ukuran dan jumlah resource, buka panel Jaringan DevTools, lalu muat ulang halaman lagi. Panel Jaringan menunjukkan bahwa halaman membuat 14 permintaan dan hanya 260 KB. Itu adalah peningkatan yang signifikan.
Sekarang scroll ke bawah halaman dan perhatikan panel Jaringan. Saat membuka video, Anda akan melihat halaman memicu permintaan tambahan.
Melakukan preconnect ke origin yang diperlukan
Anda telah menunda JavaScript yang tidak penting dan memuat permintaan YouTube secara lambat, jadi sekarang saatnya mengoptimalkan konten pihak ketiga yang tersisa.
Menambahkan atribut rel=preconnect ke link akan memberi tahu browser untuk membuat koneksi ke domain sebelum permintaan untuk resource tersebut dibuat. Atribut ini paling baik digunakan pada origin yang menyediakan resource yang Anda yakin diperlukan halaman.
Audit Lighthouse yang Anda jalankan di langkah pertama menyarankan di Melakukan pra-koneksi ke origin yang diperlukan bahwa Anda dapat menghemat waktu sekitar 400 md dengan membangun koneksi awal ke staticxx.facebook.com dan youtube.com:
Karena video YouTube kini dimuat lambat, hanya staticxx.facebook.com, sumber widget berbagi media sosial, yang tersisa. Membangun koneksi awal ke domain ini semudah menambahkan tag <link> ke <head> dokumen:
<link rel="preconnect" href="https://staticxx.facebook.com">
Mengevaluasi ulang performa
Berikut status halaman setelah pengoptimalan. Ikuti langkah-langkah dari bagian Mengukur performa di codelab untuk menjalankan audit Lighthouse lainnya.
