Pemuatan lambat resource pihak ketiga dengan fasad

Referensi pihak ketiga sering digunakan untuk menampilkan iklan atau video dan berintegrasi dengan media sosial. Pendekatan defaultnya adalah memuat resource pihak ketiga segera setelah halaman dimuat, tetapi hal ini dapat memperlambat pemuatan halaman. Jika konten pihak ketiga tidak terlalu penting, biaya performa ini dapat dikurangi dengan pemuatan lambat konten tersebut.

Audit ini menyoroti sematan pihak ketiga yang dapat dimuat secara lambat saat interaksi. Dalam hal ini, facade digunakan sebagai pengganti konten pihak ketiga hingga pengguna berinteraksi dengannya.

Contoh pemuatan pemutar sematan YouTube dengan fasad. Fasad memiliki ukuran 3 KB dan pemutar yang berukuran 540 KB dimuat saat terjadi interaksi.
Memuat pemutar tersemat YouTube dengan fasad.

Cara Lighthouse mendeteksi sematan pihak ketiga yang dapat ditangguhkan

Lighthouse mencari produk pihak ketiga yang dapat ditangguhkan, seperti widget tombol sosial atau sematan video (misalnya, pemutar sematan YouTube).

Data tentang produk yang dapat ditangguhkan dan fasad yang tersedia disimpan di web pihak ketiga.

Audit akan gagal jika halaman memuat resource milik salah satu penyematan pihak ketiga ini.

Audit fasad pihak ketiga Lighthouse menyoroti pemutar tersemat Vimeo dan live chat Drift.
Audit fasad pihak ketiga Lighthouse.

Menunda pihak ketiga dengan fasad

Daripada menambahkan sematan pihak ketiga langsung ke HTML, muat halaman dengan elemen statis yang terlihat mirip dengan sematan pihak ketiga yang sebenarnya. Pola interaksi akan terlihat seperti ini:

  • Saat pemuatan: Tambahkan fasad ke halaman.
  • Saat pengarahan mouse: Fasad akan terhubung lebih dulu ke resource pihak ketiga.
  • Saat diklik: Fasad akan mengganti dirinya sendiri dengan produk pihak ketiga.

Secara umum, penyematan video, widget tombol sosial, dan widget chat semuanya dapat menggunakan pola fasad. Saat memilih fasad, pertimbangkan keseimbangan antara ukuran dan kumpulan fitur.

Daftar berikut menawarkan rekomendasi kami tentang fasad open source. Anda juga dapat menggunakan loader iframe lambat, seperti vb/lazyframe.

Pemutar tersemat YouTube

Pemutar tersemat Vimeo

Live chat (Intercom, Drift, Help Scout, Facebook Messenger)

Menulis fasad Anda sendiri

Anda dapat memilih untuk membuat solusi fasad kustom yang menerapkan pola interaksi yang diuraikan sebelumnya. Fasad harus jauh lebih kecil dibandingkan dengan produk pihak ketiga yang ditangguhkan dan hanya menyertakan kode yang cukup untuk meniru tampilan produk.

Jika Anda ingin solusi Anda disertakan dalam daftar, lihat proses pengiriman.

Resource

Kode sumber untuk Muat lambat resource pihak ketiga dengan audit fasad.