iframe'lerde Tembel Yükleme
Ekran dışında kalan iframe yüklemesini loading=lazy ile erteleyin
iframe'lerde Tembel Yükleme, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Gecikmeli Yükleme Nedir?
Gecikmeli yükleme, kaynakların ihtiyaç duyulana kadar (bir öğe görünüm alanına yaklaştığında veya görünüm alanının içine girdiğinde) yüklenmesini erteler. iframe'ler için bu, gömülü belgenin, betiklerinin, CSS'sinin ve kaynaklarının kullanıcı iframe'e yaklaşıncaya kadar indirilmemesi anlamına gelir.
loading Özniteliği
Bir iframe'e loading="lazy" ekleyin: <iframe src="embed.html" loading="lazy">. Tarayıcı, kendi sezgisel yöntemine göre yüklemeyi ne zaman başlatacağını belirler (genellikle iframe görünüm alanına girmeden 1000-2500 piksel önce). JavaScript gerekmez.
Performans Etkisi
Iframe'ler önemli miktarda kaynak yükleyebilir (YouTube yaklaşık 500 KB JavaScript yükler). Ekranın alt kısmında kalan bir video yerleştirmesini gecikmeli yüklemek, ilk sayfa yüklemesini tam bu miktarda azaltır ve ekranın üst kısmındaki içerik için LCP ile Etkileşime Geçiş Süresi'ni doğrudan iyileştirir.
loading="eager"
loading="eager", konumundan bağımsız olarak iframe'i hemen yükler. Varsayılan davranış budur. eager değerini açıkça eklemek, tembel yüklemeyi genel olarak ekleyen çerçeveler gibi varsayılan olarak gecikmeli yükleme kullanan bağlamlarda, belirli bir iframe'in hemen yüklenmesi gerektiğinde yararlıdır.
IntersectionObserver Alternatifi
Karmaşık gecikmeli yükleme mantığı (tıklama sırasında veya bağlantı kalitesine göre yükleme) için IntersectionObserver kullanın: iframe kapsayıcısını observe edin ve yalnızca görünüm alanına girdiğinde src değerini ayarlayın. Böylece iframe'in ne zaman ve yüklenip yüklenmeyeceği üzerinde tam denetim sağlanır.
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
iframe.src = iframe.dataset.src;
observer.disconnect();
}
});
observer.observe(iframe);Cephe Deseni
Varsayılan olarak iframe yerine statik bir küçük resim gösterin. Üzerine bir oynatma düğmesi yerleştirin. Tıklama sırasında küçük resmi gerçek iframe ile değiştirin. YouTube cephe deseni, video küçük resmini gösterip iframe'i yalnızca kullanıcı oynat düğmesine tıkladığında yükler; böylece tam YouTube yerleştirmesinin yükleme maliyetinden tasarruf edilir.
Tıklayarak Yükleme Deseni
Önemli miktarda JavaScript yükleyen sosyal yerleştirmeler (Twitter zaman akışları, Instagram gönderileri) için "Yorumları yükle" düğmesi gösterin. Tıklama sırasında iframe'i ekleyin. Etkileşimde bulunmayan kullanıcılar yükleme maliyetine hiç katlanmaz. Bu, gömülü sosyal içerik için aşamalı geliştirmedir.
Tarayıcı Desteği
Iframe'ler için loading="lazy", Chrome 77 ve sonraki sürümler ile Firefox 121 ve sonraki sürümlerde desteklenir. Safari, 2024 itibarıyla iframe'ler için gecikmeli yüklemeyi desteklemez. Tarayıcılar arası gecikmeli yükleme için güvenilir geri dönüş olarak IntersectionObserver kullanın; tüm modern tarayıcılarda çalışır.
CLS'yi Önleme
Kümülatif Düzen Kaymasını (CLS) önlemek için gecikmeli yüklenen iframe'lere açık genişlik, yükseklik ve en-boy oranı CSS değerleriyle yer ayırın. iframe yüklenip görünür olduğunda alan zaten ayrılmış olur; çevredeki içerik iframe'e yer açmak için kaymaz.
Analiz İzleme
Gecikmeli yüklenen iframe'ler analizleri etkileyebilir: bir izleme pikseli veya analiz yerleştirmesi için kullanılan iframe gecikmeli yüklenirse, iframe'e kaydırarak ulaşmayan kullanıcılar için çalışmayabilir. Kritik analiz ve dönüşüm izleme iframe'lerinin hemen yüklenmesini veya ekranın üst kısmında bulunmasını sağlayın.
Gecikmeli Yükleme ile Korumalı Alanı Birleştirme
Gecikmeli yükleme ile korumalı alanı birlikte kullanın: <iframe src="embed.html" loading="lazy" sandbox="allow-scripts">. Her iki öznitelik birbirinden bağımsız çalışır; gecikmeli yükleme ne zaman yükleneceğini, korumalı alan ise iframe'in ne yapabileceğini denetler. Verimli ve güvenli üçüncü taraf yerleştirmeleri için bunları birleştirin.
Bilgi Kontrolü
Gömülü çerçevelerin gecikmeli yüklenmesinde cephe deseni nedir?
Özet
loading="lazy" kullanılarak gömülü çerçevelerin gecikmeli yüklenmesi, kaynakların görüntü alanına yaklaşana kadar yüklenmesini erteler ve ağır gömülü içeriklerde ilk sayfa yüklemesini önemli ölçüde azaltır. Cephe deseni ve tıklayarak yükleme bu yaklaşımı daha da ileri taşır; gömülü çerçeve yalnızca kullanıcı etkileşiminde yüklenir. IntersectionObserver, karmaşık gecikmeli yükleme senaryolarında tarayıcılar arası denetim sağlar. CLS'yi önlemek için gömülü çerçeve boyutlarını önceden ayırın.
Sıkça Sorulan Sorular
“iframe'lerde Tembel Yükleme” dersi ücretsiz mi?
Evet — “iframe'lerde Tembel Yükleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“iframe'lerde Tembel Yükleme” dersinde ne öğreneceğim?
Ekran dışında kalan iframe yüklemesini loading=lazy ile erteleyin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“iframe'lerde Tembel Yükleme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- iframe Öğesi: src ve sandbox
- iframe Güvenliği: Tıklama Korsanlığı ve X-Frame-Options
- embed ve object Öğeleri
- iframe'lerde Tembel Yükleme