Pemuatan lambat resource pihak ketiga dengan fasad

Referensi pihak ketiga sering kali digunakan untuk menampilkan iklan atau video dan berintegrasi dengan media sosial. Pendekatan default 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.

Audit ini menyoroti sematan pihak ketiga yang dapat dimuat dengan lambat saat interaksi. Dalam hal ini, faade akan digunakan sebagai pengganti konten pihak ketiga hingga pengguna berinteraksi dengan konten tersebut.

Contoh pemuatan pemutar sematan YouTube dengan fasad. Fasad memiliki berat 3 KB dan pemain dengan berat 540 KB dimuat saat berinteraksi.
Memuat pemutar sematan 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 dikelola di web pihak ketiga.

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

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

Cara menunda pihak ketiga dengan fasad

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

  1. Saat dimuat: Tambahkan fasad ke halaman.

  2. Saat mouse diarahkan: Fasad akan terhubung ke resource pihak ketiga.

  3. Saat diklik: Fasad akan menggantikan dirinya sendiri dengan produk pihak ketiga.

Secara umum, sematan video, widget tombol sosial, dan widget chat dapat menggunakan pola fasad. Daftar di bawah ini menawarkan rekomendasi fasad open source kami. Saat memilih fasad, pertimbangkan keseimbangan antara ukuran dan set fitur. Anda juga dapat menggunakan loader iframe lambat seperti vb/lazyframe.

Pemutar tersemat YouTube

Pemutar sematan Vimeo

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

Menulis tampilanmu sendiri

Anda dapat memilih untuk membuat solusi fasad kustom yang menggunakan pola interaksi yang diuraikan di atas. Fasad harus lebih kecil secara signifikan dibandingkan dengan produk pihak ketiga yang ditangguhkan dan hanya menyertakan kode yang cukup untuk meniru tampilan produk.

Jika ingin solusi Anda dicantumkan dalam daftar di atas, lihat proses pengiriman.

Referensi

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