Lazy Loading Nasıl Çalışır?
Modern tarayıcılarda loading="lazy" HTML özelliği ile kolayca uygulanır. Tarayıcı, görsel viewport'a yaklaşana kadar HTTP isteğini erteler.
1. HTML Resimlerinde Lazy Loading
<!-- Doğru kullanım: Viewport dışı görseller -->
<img
src="resim.jpg"
loading="lazy"
width="800"
height="600"
alt="Açıklayıcı alternatif metin"
>
<!-- Yanlış: Above-the-fold görsellerde KULLANMAYIN -->
<img src="hero.jpg" loading="lazy" alt="Hero"> ❌2. Intersection Observer API ile İleri Seviye Kontrol
Daha granüler kontrol için JavaScript Intersection Observer API kullanılır. Özel tetikleyici mesafeler ve koşullu yükleme senaryoları için idealdir.
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
}, { rootMargin: '200px' });
document.querySelectorAll('img[data-src]')
.forEach(img => observer.observe(img));Lazy Loading'in Avantajları
- LCP iyileşir: Largest Contentful Paint süresi belirgin şekilde kısalır
- Daha az veri tüketimi: Mobil kullanıcılar gereksiz görselleri indirmez
- Yüksek PageSpeed skoru: Google Lighthouse puanı artar
- Daha hızlı TTI: Time to Interactive süresi kısalır
- Daha iyi SEO: Sayfa hızı Google sıralama faktörüdür
Lazy Loading vs Eager Loading
| Özellik | Lazy Loading | Eager Loading |
|---|---|---|
| Yüklenme Zamanı | Viewport'a girince | Sayfa yüklenirken (hemen) |
| Performans Etkisi | Çok Pozitif ✓ | Negatif olabilir |
| Önerilen Kullanım Alanı | Uzun sayfalar, galeriler, listeler | Hero görseli, üst kısım içerikleri |
| HTML Attribute | loading="lazy" | loading="eager" |
| Core Web Vitals | LCP, CLS'yi iyileştirir | LCP'yi olumsuz etkileyebilir |
Sıkça Sorulan Sorular
Lazy Loading SEO'yu olumsuz etkiler mi?
Hayır. Google ve modern arama motorları lazy loading'i destekler ve sayfaları sorunsuz indeksler. Googlebot, JavaScript'i çalıştırıp sayfayı taradığı için lazy loaded içerikler indexe girer. Doğru uygulandığında SEO'ya katkı sağlar.
Tüm resimler için lazy loading kullanmalı mıyım?
Hayır. İlk ekranda görünen (above the fold) görseller için loading="eager" ve fetchpriority="high" kullanın. Bu, LCP metriğini doğrudan etkileyen hero görseli için özellikle kritiktir.
WordPress'te lazy loading nasıl etkinleştirilir?
WordPress 5.5 ve sonraki sürümlerde lazy loading varsayılan olarak etkindir. Ek bir ayar gerekmez. WP Rocket, Imagify veya Smush gibi eklentilerle daha gelişmiş yapılandırma yapabilirsiniz.
Lazy loading hangi tarayıcıları destekler?
Chrome 77+, Firefox 75+, Edge 79+, Safari 15.4+ ve tüm modern mobil tarayıcılar native loading="lazy" desteği sunar. Global tarayıcı desteği %96'nın üzerindedir.
Sonuç
Lazy Loading, web performans optimizasyonunun en etkili ve kolay uygulanabilir yöntemlerinden biridir. Özellikle görsel ağırlıklı sayfalar, bloglar ve e-ticaret siteleri için vazgeçilmezdir. Doğru uygulandığında LCP, FCP ve CLS metriklerini iyileştirerek Google sıralamalarına doğrudan katkı sağlar.
Site Tasarım TR olarak web sitenizin Core Web Vitals skorlarını artırmak ve Google'da üst sıralara çıkmak için profesyonel destek veriyoruz.
Diğer İçerikler
Git Versiyon Kontrol Nedir?
Server-First ve Edge Rendering
Nuxt.js Nedir?
Voice UI ve Sesli Arama Optimizasyonu
Remix.run Nedir?
Web Siteniz Google’da Görünmüyor mu?
Web Accessibility Nedir?
Google Analytics Nedir?
Core Web Vitals Nedir?
Vite Nedir?
SEO Nedir?
HTML Nedir?
Web Siteniz 3 Saniyeden Yavaş mı?
NestJS Nedir?
CI/CD Nedir?
Robots.txt Nedir?
API Nedir?
Agile & Scrum Nedir?
Domain Nedir?
QR Menü Nedir?
Google’da İlk Sayfaya Çıkmak
Mobil Uyumlu Web Sitesi Neden Zorunlu?
Meta Tags Nedir?
Vue.js Nedir?
Next.js Nedir?
PWA Nedir?
SvelteKit Nedir?
CDN Nedir?
JavaScript Nedir?
Local SEO Nedir?
Docker Nedir?
HTTPS ve SSL Nedir?
Sürdürülebilir Web Tasarımı
Yapay Zeka Destekli Web Tasarımı
CMS Nedir?
Web Araçları
Alarm Saati & Hatırlatıcı
Tarayıcınızda saniyeler içinde alarm kurun. Sabah uyanma, toplantı hatırlatması, mola zamanı veya "yatma vakti" için ideal. Birden fazla alarm, özelleştirilebilir sesler, bildirim desteği ve kolay erteleme.
PDF Ayırıcı (Sayfa Bölme)
Tek PDF dosyasını istediğiniz sayfalara ayırın. Belirli sayfaları seçin veya aralık belirleyin, saniyeler içinde yeni PDF’ler oluşturun – tamamen tarayıcıda!
Resim Format Dönüştürücü
PNG → JPG, JPG → PNG, WEBP → JPG/PNG, HEIC → JPG gibi en popüler formatlar arasında saniyeler içinde dönüşüm yapın. Kalite ayarı, toplu işlem desteği ve tamamen tarayıcıda – indirme olmadan!
Ücretsiz Fotoğraf Düzenleyici
Tarayıcıda profesyonel fotoğraf düzenleme. Parlaklık, kontrast, doygunluk, sıcaklık, netlik, vignette ve 10+ hazır filtre ile Lightroom benzeri deneyim. Hiç indirme gerekmez, tamamen ücretsiz!
Web Editor
HTML ve CSS kodlarınızı yazın, düzenleyin ve canlı önizlemeyi görün. Hızlı prototipleme ve öğrenme için ideal.
Renk Seçici
Web tasarımlarınız için renk paletleri oluşturun ve HEX, RGB kodlarını alın.
Markdown Editor
Markdown metinlerinizi yazın ve anında canlı HTML önizlemesini görün. Başlıklar, listeler, kod blokları ve daha fazlası. Tarayıcıda, hızlı ve ücretsiz!
PDF Küçültücü & Sıkıştırıcı
PDF dosyalarınızı kalite kaybı minimumda %50-90 küçültün. Dosya boyutu seçimi, sayfa optimizasyonu ve tamamen tarayıcıda işlem – sunucuya yükleme yok!
CSS Oluşturucu
CSS kodlarınızı otomatik oluşturun: gölgeler, gradyanlar ve daha fazlası.
Emoji Seçici
1800+ Unicode emoji ile web tasarımlarınıza duygusal ifadeler ekleyin. Arama, kategori filtreleme ve 5 favori grubu.