Üçü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üklenir yüklenmez yüklemektir ancak bu işlem, sayfanın yüklenmesini gereksiz şekilde yavaşlatabilir. Üçüncü taraf içeriği kritik değilse bu performans maliyeti, gecikmeli yükleyerek azaltılabilir.
Bu denetimde, etkileşimde geç yüklenebilir üçüncü taraf yerleşik öğeleri vurgulanır. Bu durumda, kullanıcı etkileşimde bulunana kadar üçüncü taraf içeriğin yerine bir fakada kullanılır.
Lighthouse, ertelenebilir üçüncü taraf yerleşimlerini nasıl algılar?
Lighthouse, sosyal düğme widget'ları veya yerleştirilmiş video öğeleri (örneğin, YouTube yerleşik oynatıcısı) gibi ertelenebilecek üçüncü taraf ürünleri arar.
Ertelenen ürünler ve kullanılabilir hafif bileşenler ile ilgili veriler üçüncü taraf web'de saklanır.
Sayfa, bu üçüncü taraf yerleşiklerinden birine ait kaynakları yüklerse denetim başarısız olur.
Dış cephe kullanarak üçüncü tarafları geciktirme
Doğrudan HTML'nize bir üçüncü taraf yerleştirme 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ükleme sırasında: Sayfaya hafif bileşen ekleyin.
- İmleçle üzerine gelindiğinde: Hafif bileşen üçüncü taraf kaynaklara önceden bağlanır.
- Tıklandığında: Dış cephe, kendisini üçüncü taraf ürünüyle değiştirir.
Önerilen cepheler
Genel olarak, video yerleştirmeleri, sosyal medya düğmesi widget'ları ve sohbet widget'larının hepsi dış cephe kalıbını kullanabilir. Dış cephe seçerken boyut ile özellik grubu arasındaki dengeyi göz önünde bulundurun.
Aşağıdaki listede, açık kaynak cephelerle ilgili önerilerimiz yer almaktadır. vb/lazyframe gibi bir geç iframe yükleyicisi de kullanabilirsiniz.
YouTube yerleşik oynatıcısı
Vimeo yerleşik oynatıcı
Canlı sohbet (Intercom, Drift, Help Scout, Facebook Messenger)
Kendi cephenizi yazın
Daha önce açıklanan etkileşim modelini kullanan özel bir cephe çözümü oluşturmayı seçebilirsiniz. Dış cephe, ertelenen üçüncü taraf ürüne kıyasla önemli ölçüde daha küçük olmalı ve yalnızca ürünün görünümünü taklit edecek kadar kod içermelidir.
Çözümünüzün listeye dahil edilmesini istiyorsanız gönderim sürecine göz atın.
Kaynaklar
Üçüncü taraf kaynaklarını hafif bileşenlerle geç yükleme denetimi için kaynak kod