Web Sitenizin Yüklenme Süresini İkiye Katlamak: Performans İpuçları

Performans, modern web sitelerinde hâlâ en çok ihmal edilen alanlardan biri. Tasarım güzel olabilir, içerik kaliteli olabilir; ancak ziyaretçi 3 saniyede sayfayı göremezse, Google Analytics'inizdeki bounce rate sayısı yükselmeye başlar. Bu yazıda, gerçekten ölçülebilir performans iyileştirmeleri için yapabileceğiniz somut adımları derliyoruz.

Önce ölçün, sonra iyileştirin

Optimizasyona başlamadan önce mevcut durumu net biçimde bilmek gerekir. PageSpeed Insights, WebPageTest ve Lighthouse gibi araçlar size LCP, FID, CLS gibi Core Web Vitals metriklerini verir. Bu metriklerden hangisi kötü? Cevap, sizi nereye odaklanacağınızı söyler.

LCP (Largest Contentful Paint) yavaşsa, büyük ihtimalle hero görseliniz veya başlangıç bundle'ınız çok büyüktür. CLS (Cumulative Layout Shift) yüksekse, görsellere boyut vermemişsiniz veya yazı tipleri gec yükleniyordur. FID (First Input Delay) yüksekse, çok fazla JavaScript var demektir.

Görselleri optimize etmek

Görseller genellikle bir web sayfasının en ağır yüküdür. Modern formatları (WebP, AVIF) kullanmak, doğru boyutta sunmak ve lazy loading uygulamak hızı iki katına çıkarabilir. Next.js `<Image>` component'i bunları otomatik yapar; siz sadece doğru `sizes` prop'unu vermeyi unutmayın.

Bir başka kritik nokta: hero görseliniz sayfanın görünür kısmındaysa ona `priority` özelliği verin. Bu, lazy loading'i devre dışı bırakır ve tarayıcının onu hemen indirmesini sağlar.

JavaScript bütçesini koru

Modern bir SPA'nın 1 MB bundle ile gönderildiğini görmek artık şaşırtıcı değil. Ancak bu, mobilde 3G bağlantısı olan bir ziyaretçi için 5-6 saniyelik bir indirme süresi demek. Hedefiniz: ilk yüklemede 100-200 KB altında JavaScript göndermek.

Bunu nasıl başarırsınız? Önce kullanılmayan kütüphaneleri tespit edin (`npm ls --prod` ile başlayabilirsiniz). Sonra dynamic import ile sayfa bazlı kod bölmeleri uygulayın. React Server Components'i benimseyerek tarayıcıya hiç JavaScript göndermeden render edebileceğiniz bileşenleri belirleyin.

Yazı tiplerini akıllı yükleyin

Web yazı tipleri, özellikle Google Fonts kullanılıyorsa, görünür içerik kaymalarına neden olur. `font-display: swap` ile başlayın; ardından Next.js'in `next/font` özelliğini kullanarak yazı tiplerini self-host edin. Bu, hem performans hem de gizlilik açısından kazanç.

CDN ve cache stratejisi

Statik varlıklarınız (CSS, JS, görseller) bir CDN üzerinden sunulmalı. NGINX, Cloudflare veya BunnyCDN gibi seçenekler hem ucuz hem etkili. Cache header'larını doğru yapılandırın: değişmeyen varlıklara `max-age=31536000, immutable` verin; HTML için ise daha kısa süreler.

Bu adımları sistematik biçimde uyguladığınızda, mevcut sitenizin yüklenme süresini gerçekten ikiye katlamak — yani yarıya indirmek — mümkün. Ölçülebilir, gözlemlenebilir, satışlarınıza yansıyan bir kazanç.