Mengoptimalkan JavaScript pihak ketiga

Milica Mihajlija

Skrip pihak ketiga memengaruhi performa. Itulah sebabnya penting untuk mengauditnya secara rutin dan menggunakan teknik yang efisien untuk memuatnya. Codelab ini menampilkan cara mengoptimalkan pemuatan resource pihak ketiga. Di dalamnya tercakup teknik berikut:

  • Menunda pemuatan skrip

  • Pemuatan lambat untuk resource yang tidak penting

  • 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

Screenshot halaman dengan referensi pihak ketiga yang ditandai.
Referensi pihak ketiga di aplikasi contoh.

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:

  1. Klik Remix to Edit agar project dapat diedit.
  2. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh layar penuh.

Jalankan audit performa Lighthouse di halaman untuk menetapkan performa dasar pengukuran:

  1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  2. Klik tab Lighthouse.
  3. Klik Seluler.
  4. Centang kotak Performa. (Anda dapat menghapus centang pada kotak lainnya di bagian Audit.)
  5. Klik Simulasi 3G Cepat, Lambat CPU 4x.
  6. Pilih kotak centang Hapus Penyimpanan.
  7. Klik Jalankan audit.

Saat Anda menjalankan audit di komputer Anda, hasil pastinya mungkin berbeda-beda, tetapi Anda harus memperhatikan bahwa waktu First Contentful Paint (FCP) cukup tinggi, dan Lighthouse menyarankan dua peluang untuk diselidiki: Menghilangkan resource yang memblokir render dan Preconnect ke origin yang diperlukan. (Meskipun semua metrik berwarna hijau, pengoptimalan akan tetap menghasilkan peningkatan.)

Screenshot audit Lighthouse yang menunjukkan FCP 2,4 detik dan dua peluang: Menghilangkan resource yang memblokir perenderan dan Melakukan prakoneksi ke origin yang diperlukan.

Tunda JavaScript pihak ketiga

Audit Eliminasi aset yang memblokir render mengidentifikasi bahwa Anda dapat menghemat waktu dengan menunda skrip yang berasal dari d3js.org:

Screenshot Menghilangkan audit resource yang memblokir render dengan skrip d3.v3.min.js ditandai.

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 dijalankan setelah dokumen diuraikan dan library D3 dimuat, itulah sebabnya library ini disertakan tepat sebelum tag </body> penutup di index.html.

Namun, skrip D3 disertakan dalam <head> halaman, yang memblokir penguraian dokumen lainnya:

Screenshot index.html dengan tag skrip yang ditandai di bagian head.

Dua atribut ajaib dapat berhenti memblokir parser saat ditambahkan ke tag skrip:

  • async memastikan bahwa skrip didownload di latar belakang dan dijalankan pada kesempatan pertama setelah selesai didownload.

  • defer memastikan 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 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 dijalankan 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 atas ke <head> dokumen, tepat setelah elemen <script> D3. Sekarang, proses tersebut 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>

Pemuatan 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 di iframe. Untuk melihat jumlah permintaan yang dibuat halaman dan yang berasal dari iframe YouTube sematan:

  1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  3. Klik tab Jaringan.
  4. Centang kotak Disable cache.
  5. Pilih Fast 3G di menu dropdown Throttling.
  6. Muat ulang halaman.

Screenshot panel Jaringan DevTools.

Panel Jaringan menampilkan 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 Inisiator. Untuk mengelompokkan semua permintaan menurut domain:

  • Di panel Network, klik kanan judul kolom.

  • Di menu dropdown, pilih kolom Domains.

  • Untuk mengurutkan permintaan menurut domain, klik judul kolom Domain.

Pengurutan baru ini mengungkapkan bahwa ada permintaan tambahan ke domain Google. Secara total, iframe YouTube membuat 14 permintaan untuk skrip, stylesheet, gambar, dan font. Namun, pengguna tidak benar-benar memerlukan semua aset tersebut, kecuali jika pengguna benar-benar men-scroll ke bawah untuk memutar video.

Dengan menunggu pemuatan lambat video hingga pengguna men-scroll ke bawah ke bagian halaman tersebut, Anda mengurangi jumlah permintaan yang awalnya dibuat oleh halaman. Pendekatan ini menghemat waktu data dan mempercepat pemuatan awal.

Salah satu cara untuk menerapkan pemuatan lambat adalah menggunakan Intersection Observer, API browser yang memberi tahu Anda saat sebuah elemen memasuki atau keluar dari area pandang browser.

Langkah 1: Cegah pemuatan video di awal

Untuk memuat iframe video secara lambat, Anda harus terlebih dahulu mencegahnya agar tidak dimuat dengan cara biasa. 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 secara lambat

Untuk memuat video saat pengguna men-scroll, Anda perlu mengetahui kapan hal itu terjadi. Di situlah Intersection Observer API berperan. Intersection Observer API memungkinkan Anda mendaftarkan fungsi callback yang dieksekusi 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 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 kasus ini, iframe video) 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 entri masuk ke area tampilan, dan lainnya. Salah satu properti IntersectionObserverEntry adalah isIntersecting—nilai boolean yang sama dengan true saat elemen memasuki area tampilan.

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);
    });
  });
  1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  3. 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 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 perubahan ukuran dan jumlah resource, buka panel Jaringan DevTools dan muat ulang halaman lagi. Panel Jaringan menunjukkan bahwa halaman membuat 14 permintaan dan hanya 260 KB. Ini adalah peningkatan yang berarti.

Sekarang scroll ke bawah halaman dan perhatikan panel Jaringan. Saat membuka video, Anda akan melihat halaman yang memicu permintaan tambahan.

Lakukan prakoneksi ke origin yang diperlukan

Anda telah menunda JavaScript yang tidak penting dan memuat permintaan YouTube dengan lambat, jadi sekarang saatnya untuk mengoptimalkan konten pihak ketiga yang tersisa.

Menambahkan atribut rel=preconnect ke link akan memberi tahu browser untuk terhubung ke domain sebelum permintaan untuk resource tersebut dibuat. Atribut ini paling baik digunakan pada origin yang menyediakan resource yang Anda yakin akan dibutuhkan halaman tersebut.

Audit Lighthouse yang Anda jalankan pada langkah pertama disarankan dalam Prahubungkan ke origin yang diperlukan yang dapat Anda hemat sekitar 400 milidetik dengan membuat koneksi awal ke staticxx.facebook.com dan youtube.com:

Lakukan prakoneksi ke audit origin yang diperlukan dengan domain staticxx.facebook.com ditandai.

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 status halaman setelah pengoptimalan. Ikuti langkah-langkah dari bagian Mengukur performa di codelab ini untuk menjalankan audit Lighthouse lainnya.

Audit Lighthouse menunjukkan FCP selama 1 detik dan skor performa 99.