Skrip pihak ketiga memengaruhi performa. Itulah sebabnya penting untuk mengauditnya secara rutin dan menggunakan teknik yang efisien untuk memuatnya. Codelab ini menunjukkan cara mengoptimalkan pemuatan resource pihak ketiga. Panduan ini mencakup teknik-teknik berikut:
Menunda pemuatan skrip
Pemuatan lambat untuk resource non-kritis
Melakukan prakoneksi 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 mulai 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 untuk Mengedit agar project dapat diedit.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu 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 Performa. (Anda dapat menghapus centang pada kotak lainnya di bagian Audit.)
- Klik Simulated Fast 3G, 4x CPU Slowdown.
- Centang kotak Hapus Penyimpanan.
- Klik Jalankan audit.
Saat Anda menjalankan audit pada komputer, hasil sebenarnya dapat berbeda, tetapi Anda akan melihat bahwa waktu First Contentful Paint (FCP) cukup tinggi, dan Lighthouse menyarankan dua peluang untuk diselidiki: Menghilangkan resource yang memblokir render dan Preconnect to required origin. (Meskipun semua metrik berwarna hijau, pengoptimalan tetap akan menghasilkan peningkatan.)
Menunda JavaScript pihak ketiga
Audit Menghilangkan resource yang memblokir render 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 dalam aplikasi contoh menggunakan fungsi utilitas D3 untuk membuat diagram garis SVG dan menambahkannya ke halaman. Urutan operasi di sini penting: script.js harus dijalankan setelah dokumen diuraikan dan library D3 dimuat, itulah sebabnya library D3 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 pemblokiran parser saat ditambahkan ke tag skrip:
asyncmemastikan skrip didownload di latar belakang dan dieksekusi pada kesempatan pertama setelah skrip selesai didownload.defermemastikan bahwa skrip didownload di latar belakang dan dijalankan setelah penguraian selesai sepenuhnya.
Karena diagram ini tidak terlalu penting untuk keseluruhan halaman dan kemungkinan besar akan berada di paruh bawah, 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 menghasilkan 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 memblokir parser, dan download dimulai lebih cepat.
<script src="https://d3js.org/d3.v3.min.js" defer></script>
<script src="./script.js" defer></script>
Resource pihak ketiga pemuatan lambat
Semua resource yang berada di paruh bawah adalah kandidat yang baik untuk pemuatan lambat.
Aplikasi contoh memiliki video YouTube yang disematkan di iframe. Untuk melihat jumlah permintaan yang dibuat halaman dan yang berasal dari iframe YouTube tersemat:
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh
.
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Network
- Centang kotak Disable cache.
- Pilih 3G Cepat di menu dropdown Throttling.
- Muat ulang halaman.
Panel Network mengungkapkan bahwa halaman tersebut membuat total 28 permintaan dan mentransfer hampir 1 MB resource terkompresi.
Untuk mengidentifikasi permintaan yang dibuat oleh iframe YouTube, cari ID video 6lfaiXM6waw di kolom Inisiator. Untuk mengelompokkan semua permintaan menurut domain:
Di panel Network, klik kanan judul kolom.
Di menu dropdown, pilih kolom Domains.
Untuk mengurutkan permintaan berdasarkan domain, klik judul kolom Domains.
Pengurutan baru mengungkapkan bahwa ada permintaan tambahan ke domain Google. Secara total, iframe YouTube membuat 14 permintaan skrip, stylesheet, gambar, dan font. Namun, kecuali pengguna benar-benar men-scroll ke bawah untuk memutar video, mereka tidak benar-benar membutuhkan semua aset tersebut.
Dengan menunggu pemuatan lambat video hingga pengguna men-scroll ke bagian halaman tersebut ke bawah, Anda mengurangi jumlah permintaan yang awalnya dibuat oleh halaman. Pendekatan ini akan 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 ketika elemen masuk atau keluar dari area pandang browser.
Langkah 1: Cegah video agar tidak dimuat pada awalnya
Untuk memuat iframe video secara lambat, Anda harus mencegahnya dimuat dengan cara biasa terlebih dahulu. Lakukan hal tersebut 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 tentang elemen HTML standar. Atribut data dapat diberi nama apa saja, selama diawali dengan "data-".
Iframe tanpa src tidak akan dimuat.
Langkah 2: Gunakan Intersection Observer untuk memuat video dengan lambat
Untuk memuat video saat pengguna men-scroll ke video tersebut, Anda perlu mengetahui kapan video tersebut terjadi. Di sinilah Intersection Observer API memulai. Intersection Observer API memungkinkan Anda mendaftarkan fungsi callback yang dieksekusi setiap kali elemen yang ingin Anda lacak masuk atau keluar dari area pandang.
Untuk memulai, buat file baru dan beri nama lazy-load.js:
- Klik New File dan beri nama.
- Klik Add This File.
Tambahkan tag skrip ke head 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 (dalam hal ini iframe video) dengan meneruskannya sebagai argumen di 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 target dan properti yang mendeskripsikan dimensi, posisi, waktu masuknya 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. Lalu 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 perubahan isIntersecting dan elemen target dicatat ke konsol.
Untuk memuat video saat pengguna men-scroll ke posisinya, gunakan isIntersecting sebagai syarat untuk menjalankan fungsi loadElement, yang mendapatkan nilai dari data-src elemen iframe dan menyetelnya 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 bagaimana ukuran dan jumlah resource berubah, buka panel Jaringan DevTools dan muat ulang halaman lagi. Panel Network menunjukkan bahwa halaman tersebut membuat 14 permintaan dan hanya 260 KB. Itu adalah peningkatan yang berarti.
Sekarang scroll halaman ke bawah dan perhatikan panel Network. Saat membuka video, Anda akan melihat halaman yang memicu permintaan tambahan.
Melakukan prakoneksi ke origin yang diperlukan
Anda telah menunda JavaScript yang tidak penting dan memuat lambat permintaan YouTube, jadi sekarang saatnya untuk 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 dibutuhkan oleh halaman.
Audit Lighthouse yang Anda jalankan pada langkah pertama yang disarankan di Preconnect to required origin dapat Anda hemat sekitar 400 milidetik dengan membuat koneksi awal ke staticxx.facebook.com dan youtube.com:
Karena video YouTube sekarang dimuat dengan lambat, hanya staticxx.facebook.com yang merupakan sumber dari widget berbagi media sosial. Membuat koneksi awal ke domain ini semudah menambahkan tag <link> ke <head> dokumen:
<link rel="preconnect" href="https://staticxx.facebook.com">
Evaluasi ulang performa
Berikut adalah status halaman setelah pengoptimalan. Ikuti langkah-langkah dari bagian Mengukur performa di codelab untuk menjalankan audit Lighthouse lainnya.
