Bir web sitesinin tipik yükündeki resimlerin ve videoların kısmı önemli olabilir. Ne yazık ki proje paydaşları mevcut uygulamalarındaki medya kaynaklarını kesmek istemeyebilir. Bu tür çıkmazlar, özellikle ilgili tüm taraflar site performansını iyileştirmek istediğinde ancak nasıl ulaşacağı konusunda anlaşmaya varamadığında can sıkıcı olabilir. Neyse ki geç yükleme, ilk sayfa yükünü ve yükleme süresini azaltan ancak içeriği atlatmayan bir çözümdür.
Geç yükleme nedir?
Geç yükleme, kritik olmayan kaynakların sayfa yükleme sırasında yüklenmesini erteleyen bir tekniktir. Bunun yerine, bu kritik olmayan kaynaklar ihtiyaç anında yüklenir. Resimlerin söz konusu olduğu durumlarda "kritik olmayan", genellikle "ekran dışı" ile aynı anlama gelir. Lighthouse'u kullandıysanız ve bazı iyileştirme fırsatlarını incelediyseniz bu alanda Ekran dışı resim denetimini ertele şeklinde bazı yol gösterici bilgiler görmüş olabilirsiniz:
Tembel yüklemenin işleyişini muhtemelen daha önce görmüşsünüzdür. Bu örnekte şuna benzer bir durum söz konusudur:
- Bir sayfaya ulaşıyorsunuz ve içeriği okurken sayfayı kaydırmaya başlıyorsunuz.
- Bir noktada, bir yer tutucu resmi görüntü alanına kaydırırsınız.
- Yer tutucu resmin yerini aniden nihai resim alır.
Resim geç yüklemenin bir örneğini popüler yayın platformu Medium'da bulabilirsiniz. Bu platform, sayfa yüklenirken hafif yer tutucu resimleri yükler ve görüntü alanına kaydırıldığında bunları geç yüklenen resimlerle değiştirir.
Geç yükleme hakkında bilginiz yoksa tekniğin ne kadar faydalı olduğunu ve faydalarını merak ediyor olabilirsiniz. Öğrenmek için okumaya devam edin!
Resimleri veya videoları neden sadece yüklemek yerine geç yüklemeli?
Çünkü kullanıcıların asla göremeyeceği öğeleri yüklüyor olabilirsiniz. Bu, birkaç nedenden dolayı sorun teşkil eder:
- Veri israfına yol açar. Ölçüm yapılmayan bağlantılarda bu, gerçekleşebilecek en kötü şey değildir (ancak bu değerli bant genişliğini, gerçekten de kullanıcı tarafından görülecek diğer kaynakları indirmek için kullanıyor olabilirsiniz). Bununla birlikte, sınırlı veri planlarında kullanıcının hiç görmediği bir öğenin yüklenmesi, parasını boşa harcayabilir.
- İşlem süresi, pil ve diğer sistem kaynaklarını boşa harcar. Bir medya kaynağı indirildikten sonra, tarayıcının bunun kodunu çözmesi ve içeriğini görüntü alanında oluşturması gerekir.
Resimlerin ve videoların geç yüklenmesi ilk sayfa yüklenme süresini, ilk sayfa ağırlığını ve sistem kaynağı kullanımını azaltır. Bunların tümü performans üzerinde olumlu etkilere sahiptir.
Geç yükleme uygulama
Geç yüklemeyi uygulamak için çeşitli yöntemler vardır. Çözüm seçiminizde, desteklediğiniz tarayıcılar ve geç yüklemeye çalıştığınız işlemler göz önünde bulundurulmalıdır.
Modern tarayıcılar, resimlerde ve iframe'lerde loading özelliği kullanılarak etkinleştirilebilen tarayıcı düzeyinde geç yükleme uygular.
Eski tarayıcılarla uyumluluk sağlamak veya yerleşik geç yükleme olmadan öğelerde geç yükleme gerçekleştirmek için kendi JavaScript'inizle bir çözüm uygulayabilirsiniz.
Ayrıca, bunu yapmanıza yardımcı olacak bir dizi mevcut kitaplık da vardır.
Tüm bu yaklaşımlarla ilgili tüm ayrıntılar için şu sitedeki yayınlara bakın:
Ayrıca, geç yüklemeyle ilgili olası sorunların ve uygulamanızda dikkat etmeniz gereken noktaların bir listesini derledik.
Sonuç
Resim ve videolar dikkatli kullanıldığında, Önemli Web Verileri dahil olmak üzere sitenizdeki ilk yükleme süresini ve sayfa yüklerini önemli ölçüde azaltabilir. Kullanıcılar, daha yavaş bağlantılarda ağ çakışması dahil olmak üzere gereksiz ağ etkinliklerine ve asla göremeyecekleri medya kaynaklarının işleme maliyetlerine neden olmaz ancak yine de isterlerse bu kaynakları görüntüleyebilirler.
Performans iyileştirme teknikleri söz konusu olduğunda geç yükleme, son derece tartışmalı bir konudur. Sitenizde çok sayıda satır içi görüntü varsa, gereksiz indirmeleri azaltmanın mükemmel bir yolu vardır. Sitenizin kullanıcıları ve proje paydaşları bunu takdir eder.