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. Bu yöntem, tarayıcı desteği olmayan eski sürümler ve özel tetikleyici mesafeler 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 (2025 itibarıyla).
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
Web Siteniz 3 Saniyeden Yavaş mı?
Angular Nedir?
Zero-Click Searches ve Featured Snippets Nedir?
API Nedir?
Sürdürülebilir Web Tasarımı
Page Speed Optimization Nedir?
Next.js Nedir?
Hosting Nedir?
Meta Tags Nedir?
Jamstack Mimarisi Nedir?
Server-First ve Edge Rendering
Web3 ve Decentralized Web
Voice UI ve Sesli Arama Optimizasyonu
UI/UX Tasarım Nedir?
Google’da İlk Sayfaya Çıkmak
JavaScript Nedir?
Core Web Vitals Nedir?
Local SEO Nedir?
Robots.txt Nedir?
Vue.js Nedir?
Vercel / Netlify Nedir?
React Nedir?
Backlink Nedir?
CDN Nedir?
Tailwind CSS Nedir?
CI/CD Nedir?
SvelteKit Nedir?
Astro Nedir?
NestJS Nedir?
Websitesi Nedir?
Schema Markup Nedir?
Yapay Zeka Destekli Web Tasarımı
No-Code / Low-Code Platformlar
PWA Nedir?
CSS Nedir?
Web Araçları
Güçlü Şifre Oluşturucu
Anında rastgele ve çok güçlü şifreler üretin. Uzunluk, büyük/küçük harf, rakam, sembol ayarları + kendi şifrenizi test etme özelliği.
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!
Ü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!
CSS Oluşturucu
CSS kodlarınızı otomatik oluşturun: gölgeler, gradyanlar ve daha fazlası.
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!
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 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!
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.
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.
Renk Seçici
Web tasarımlarınız için renk paletleri oluşturun ve HEX, RGB kodlarını alın.