Üçüncü taraf kaynakları genellikle reklam veya video göstermek ve sosyal medyayla entegrasyon için kullanılır. Varsayılan yaklaşım, üçüncü taraf kaynaklarını sayfa yüklendiği anda yüklemektir ancak bu, sayfa yükleme hızını gereksiz yere yavaşlatabilir. Üçüncü taraf içeriği kritik değilse geç yükleme ile bu performans maliyeti azaltılabilir.
Bu denetim, etkileşimde geç yüklenebilen üçüncü taraf yerleştirilmiş öğelerini vurgular. Bu durumda, kullanıcı üçüncü taraf içerikle etkileşime girene kadar bu içeriğin yerine cephe kullanılır.
Lighthouse, ertelenebilir üçüncü taraf yerleştirmelerini nasıl algılar?
Lighthouse, sosyal medya düğmesi widget'ları veya video yerleştirmeleri (örneğin, YouTube yerleşik oynatıcısı) gibi ertelenebilecek üçüncü taraf ürünleri arar.
Ertelenebilir ürünler ve mevcut cepheler hakkındaki veriler third-party-web'de tutulur.
Sayfa, bu üçüncü taraf yerleştirmelerinden birine ait kaynakları yüklerse denetim başarısız olur.
Üçüncü tarafları hafif bileşenle geciktirme
Üçüncü taraf yerleştirmesini doğrudan HTML'nize eklemek yerine, sayfayı gerçek yerleştirilmiş üçüncü tarafa benzeyen statik bir öğeyle yükleyin. Etkileşim kalıbı aşağıdaki gibi görünmelidir:
- Yüklendiğinde: Cepheyi sayfaya ekleyin.
- Fareyle üzerine gelindiğinde: Hafif bileşen, üçüncü taraf kaynaklarına önceden bağlanır.
- Tıklandığında: Cephe, kendisini üçüncü taraf ürünüyle değiştirir.
Önerilen cepheler
Genel olarak, video yerleştirmeleri, sosyal düğme widget'ları ve sohbet widget'larının tümünde cephe deseni kullanılabilir. Cephe seçerken boyut ve özellik seti arasındaki dengeyi göz önünde bulundurun.
Aşağıdaki listede açık kaynaklı cephelerle ilgili önerilerimiz yer almaktadır. vb/lazyframe gibi bir geç yüklenen iframe yükleyici de kullanabilirsiniz.
YouTube yerleştirilmiş oynatıcısı
Vimeo yerleştirilmiş oynatıcısı
Canlı sohbet (Intercom, Drift, Help Scout, Facebook Messenger)
Kendi cephenizi yazma
Daha önce belirtilen etkileşim kalıbını kullanan özel bir cephe çözümü oluşturmayı seçebilirsiniz. Cephe, ertelenen üçüncü taraf ürününe kıyasla önemli ölçüde daha küçük olmalı ve yalnızca ürünün görünümünü taklit etmeye yetecek kadar kod içermelidir.
Çözümünüzün listeye eklenmesini istiyorsanız gönderim sürecini inceleyin.
Kaynaklar
Üçüncü taraf kaynaklarını hafif bileşenlerle geç yükleyin denetimi için kaynak kodu.