Lazy Loading
Tembel Yükleme
- Okunuşu
- leyzi loding
Kısaca
Lazy loading, görsel, video, betik gibi kaynakların yüklenmesini gerçekten gerekene, genellikle görünür alana kaydırılana kadar erteleyen tekniktir.
Lazy loading nedir?
Lazy loading, bir şeyi gerektiği ana kadar yüklememek demektir. Bir web sayfasında, sayfa açıldığında hepsini birden çekmek yerine, kaydırmadan görünen kısmın (fold) çok altındaki görseller ve gömülü videolar yalnızca kullanıcı onlara yaklaşınca çekilir. İlk yükleme küçülür ve hızlanır; o kadar aşağı hiç kaydırmayan ziyaretçiler de bu dosyaları asla indirmez.
Görseller ve iframe'ler için tarayıcılar lazy loading'i yerel olarak destekler: bir <img> veya <iframe> öğesine loading="lazy" ekleyin, tarayıcı da görüntü alanına uzaklığına göre ne zaman çekileceğine karar verir. Özel davranışlar için IntersectionObserver API'si, bir öğe görüntü alanına girdiğinde ya da yaklaştığında betiğinize haber verir. JavaScript için lazy loading dinamik import() kullanır; böylece bir modül yalnızca bir özellik ilk kez kullanıldığında çekilir. Lazy görsellerin width ve height değerleri ayarlanmalıdır; böylece tarayıcı yer ayırır ve görseller geldiğinde yerleşim zıplamaz.
Lazy loading, siz oturur oturmaz tüm yemeği masaya koymak yerine her yemeği siz hazır olduğunuzda pişiren bir restoran gibidir. Görsel galerileri, uzun akışlar, ürün listeleri, gömülü haritalar ve videolar, yorum bölümleri ile nadiren kullanılan uygulama özellikleri için yaygın olarak kullanılır. Aynı fikir ORM'lerde de görülür; ilişkili veritabanı kayıtlarını kod ilk eriştiğinde yükleyebilirler.
Yaygın bir hata, çoğu zaman Largest Contentful Paint öğesi olan sayfanın en üstündeki ana görseli lazy load etmektir; bu, en önemli içeriği geciktirir, bu yüzden görünür alandaki görseller hemen, bazen fetchpriority="high" ile yüklenmelidir. Lazy loading ayrıca code splitting'den farklıdır: code splitting JavaScript'i derleme zamanında ayrı dosyalara böler, lazy loading ise bir dosyanın ne zaman çekileceğine dair çalışma zamanı kararıdır.
Önemli noktalar
- Lazy loading, bir kaynağın çekilmesini gerekene kadar erteler.
- Görsellerde ve iframe'lerde
loading="lazy", yerel tarayıcı lazy loading'ini etkinleştirir. IntersectionObserverve dinamikimport()özel ve JavaScript durumlarını karşılar.- Ana kahraman (hero) görseli gibi görünür alandaki içeriği asla lazy load etmeyin.
- Lazy görseller göründüğünde yerleşim kaymalarını önlemek için görsel boyutlarını ayarlayın.
Örnek
<!-- Main image at the top: load it right away, with high priority -->
<img src="hero.jpg" alt="Product photo" width="1200" height="600" fetchpriority="high">
<!-- Below the fold: fetched only when the user scrolls near them -->
<img src="gallery-1.jpg" alt="Side view" width="600" height="400" loading="lazy">
<img src="gallery-2.jpg" alt="Back view" width="600" height="400" loading="lazy">
<iframe src="https://maps.example.com/embed?place=store" title="Store location map"
width="600" height="400" loading="lazy"></iframe>Sık sorulan sorular
Lazy loading SEO'ya zarar verir mi?
Doğru yapıldığında vermez. Arama motorları yerel loading="lazy" görsellerini iyi işler; sorunlar, içeriğin yalnızca tıklamalardan ya da tarayıcıların gerçekleştirmediği özel kaydırma olaylarından sonra görünmesiyle ortaya çıkar.
Tüm görselleri lazy load etmeli miyim?
Hayır. Katın altındaki görselleri lazy load edin ama ilk ekranda görünenleri, özellikle en büyüğünü hemen yükleyin; yoksa sayfa daha yavaş yükleniyormuş gibi görünür.
Lazy loading ile eager loading arasındaki fark nedir?
Eager loading bir kaynağı hemen çeker ve tarayıcının varsayılanıdır; lazy loading ise gerekene kadar bekler. ORM'lerde eager loading ilişkili kayıtları önceden çeker; bu da lazy loading'in yol açabileceği N+1 sorgu sorununu önler.
İlgili sayfalar
- Code SplittingWeb Geliştirme, s. 6Code splitting, bir web uygulamasının JavaScript'ini istenince yüklenen küçük parçalara bölen tekniktir; böylece ilk sayfa yalnızca gereken kodu indirir.
- Core Web VitalsWeb Geliştirme, s. 8Core Web Vitals, bir sayfanın gerçek kullanıcı deneyimini ölçen üç metriktir: yükleme hızı (LCP), yanıt verme (INP) ve görsel kararlılık (CLS).
- HTMLWeb Geliştirme, s. 19HTML, başlık, paragraf, bağlantı, görsel ve form gibi öğelerle web sayfalarının yapısını ve içeriğini tanımlayan işaretleme dilidir.
- Web TarayıcısıWeb Geliştirme, s. 57Web tarayıcısı, sunuculardan web sayfalarını alıp HTML, CSS ve JavaScript'i ekranda gördüğünüz etkileşimli sayfalara dönüştüren uygulamadır.
- N+1 Sorgu SorunuVeritabanları, s. 19N+1 sorgu sorunu, kodun bir listeyi tek sorguyla yükleyip sonra her öğe için bir sorgu daha çalıştırdığı, hepsini birden getirmediği bir performans hatasıdır.
- ORMVeritabanları, s. 24ORM, veritabanı tablolarını programlama dilinizdeki nesnelere eşleyen ve ham SQL yerine kodla veri okuyup yazmanızı sağlayan bir kütüphanedir.
Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin