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
CSS Nedir?
3D ve AR Web Deneyimleri
HTTPS ve SSL Nedir?
Docker Nedir?
JavaScript Nedir?
Keyword Research Nedir?
Mobil Uyumlu Web Sitesi Neden Zorunlu?
Browser Cache Nedir?
UI/UX Tasarım Nedir?
AI Search Optimization (AIO) Nedir?
QR Menü Nedir?
Voice UI ve Sesli Arama Optimizasyonu
Express.js Nedir?
CDN Nedir?
Page Speed Optimization Nedir?
Angular Nedir?
WebAssembly Nedir?
Headless CMS Nedir?
SEO Nedir?
Meta Tags Nedir?
CMS Nedir?
Zero-Click Searches ve Featured Snippets Nedir?
Jamstack Mimarisi Nedir?
MongoDB Nedir?
SvelteKit Nedir?
Core Web Vitals Nedir?
NestJS Nedir?
Frontend vs Backend Nedir?
Backlink Nedir?
Domain Nedir?
Responsive Design Nedir?
Lazy Loading Nedir?
CI/CD Nedir?
Motion UI ve Mikro Animasyonlar
TypeScript Nedir?
Web Araçları
CSS Oluşturucu
CSS kodlarınızı otomatik oluşturun: gölgeler, gradyanlar ve daha fazlası.
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!
PDF Birleştirici
Birden fazla PDF dosyasını tek bir PDF’de birleştirin. Sıra değiştirme, önizleme ve yüksek kaliteli çıktı desteği. Tarayıcıda, hızlı ve ücretsiz!
Emoji Seçici
1800+ Unicode emoji ile web tasarımlarınıza duygusal ifadeler ekleyin. Arama, kategori filtreleme ve 5 favori grubu.
Ü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!
QR Kod Oluşturucu
URL, Wi-Fi, vCard, metin gibi verilerinizi saniyeler içinde özelleştirilebilir QR koda çevirin. Logo, renk ve SVG/PNG indirme desteği.
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!
Base64 Encoder & Decoder
Metin ve görselleri Base64 formatına dönüştürün veya Base64 kodunu çözün. API geliştirme ve veri aktarımı için vazgeçilmez.
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.
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!