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
Angular Nedir?
CSS Nedir?
Sürdürülebilir Web Tasarımı
Meta Tags Nedir?
Mobil Uyumlu Web Sitesi Neden Zorunlu?
Google’da İlk Sayfaya Çıkmak
Voice UI ve Sesli Arama Optimizasyonu
Page Speed Optimization Nedir?
Local SEO Nedir?
Jamstack Mimarisi Nedir?
Web Components Nedir?
React Nedir?
Core Web Vitals Nedir?
Schema Markup Nedir?
GraphQL Nedir?
Motion UI ve Mikro Animasyonlar
Web Tasarım Nedir?
Webhook Nedir?
Vue.js Nedir?
Express.js Nedir?
Web Siteniz 3 Saniyeden Yavaş mı?
Robots.txt Nedir?
AI Search Optimization (AIO) Nedir?
Server-First ve Edge Rendering
URL Structure Nedir?
CI/CD Nedir?
Responsive Design Nedir?
CMS Nedir?
Web3 ve Decentralized Web
UI/UX Tasarım Nedir?
MongoDB Nedir?
HTTPS ve SSL Nedir?
Docker Nedir?
HTTP/3 ve QUIC Nedir?
Sitemap Nedir?
Web Araçları
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!
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.
Ü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!
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!
Renk Seçici
Web tasarımlarınız için renk paletleri oluşturun ve HEX, RGB kodlarını alın.
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.
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!
Emoji Seçici
1800+ Unicode emoji ile web tasarımlarınıza duygusal ifadeler ekleyin. Arama, kategori filtreleme ve 5 favori grubu.
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!
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!