İLERİ DIGITAL
Geri Dön
Yazılım • 8 Dk Okuma

Modern Web Teknolojilerinde Performans ve Hız Optimizasyonu

Google Core Web Vitals kriterlerinde 100 puan almanın yolları.

Modern Web Teknolojilerinde Performans ve Hız Optimizasyonu

İçindekiler

Giriş

Günümüz dijital dünyasında kullanıcılar, tıkladıkları web sitesinin milisaniyeler içerisinde yüklenmesini beklemektedir. Google verilerine göre, 3 saniyeden uzun sürede yüklenmeyen sitelerde kullanıcıların %53'ü ziyaretini yarıda kesmektedir. Bu nedenle web performansı, yalnızca teknik bir başarı göstergesi değil; doğrudan dönüşüm oranlarını, kullanıcı memnuniyetini (UX) ve arama motoru sıralamalarını (SEO) etkileyen kritik bir iş parametresidir.

Google Core Web Vitals Nedir?

Google, kullanıcı deneyimini ölçümlemek adına Core Web Vitals (Önemli Web Verileri) adını verdiği üç temel metriği standartlaştırmıştır:

  • Largest Contentful Paint (LCP): Sayfa içerisindeki en büyük görsel veya metin bloğunun ne kadar sürede yüklendiğini ölçer. İyi bir kullanıcı deneyimi için LCP süresinin 2.5 saniyenin altında olması istenir.
  • Interaction to Next Paint (INP): Kullanıcının sayfayla girdiği ilk etkileşimden (tıklama, dokunma) tarayıcının bir sonraki kareyi çizmesine kadar geçen gecikmeyi ölçer. 200 milisaniyenin altındaki değerler iyi kabul edilir.
  • Cumulative Layout Shift (CLS): Sayfa yüklenirken öğelerin beklenmedik şekilde kayıp kaymadığını ölçer. Görsellerin altına boyut (width/height) tanımlanmaması veya reklamların aniden belirmesi CLS skorunu düşürür. İdeal CLS skoru 0.1'in altında olmalıdır.

Performans ve Hız Optimizasyonu Teknikleri

Modern bir web sitesini optimize etmek için uygulanması gereken başlıca adımlar şunlardır:

1. Yeni Nesil Görsel Formatları ve Lazy Loading

Görseller genellikle sayfa boyutunun %60'ından fazlasını oluşturur. PNG veya JPEG yerine WebP ve AVIF gibi yeni nesil sıkıştırılmış formatlar kullanılmalıdır. Ayrıca ekran dışında kalan görseller için loading="lazy" niteliği eklenerek tarayıcının yalnızca görünen alanı yüklemesi sağlanmalıdır.

2. Kritik CSS ve Kod Bölme (Code Splitting)

Vite, Webpack gibi araçlar kullanılarak JavaScript ve CSS dosyaları küçük parçalara bölünmelidir. Sadece ilk yüklemede gerekli olan CSS kodları (Critical CSS) satır içi (inline) olarak gömülmeli, diğer stil dosyaları ise asenkron yüklenmelidir.

3. Tarayıcı Önbellekleme (Caching) ve CDN

Statik kaynaklar (görseller, yazı tipleri, JS ve CSS kütüphaneleri) Cloudflare gibi bir CDN (İçerik Dağıtım Ağı) üzerinden sunulmalıdır. Sunucu tarafında uygun HTTP önbellek başlıkları (Cache-Control) tanımlanarak kullanıcının sonraki ziyaretlerinde aynı dosyaları tekrar indirmesi engellenmelidir.

4. Veritabanı ve Sunucu Optimizasyonu

Laravel tarafında sorguları optimize etmek için Eager Loading (with()) kullanılmalı, N+1 sorgu problemlerinden kaçınılmalıdır. Sık erişilen veriler için Redis veya Memcached önbellek katmanları tercih edilmelidir. PHP 8.4 OPcache ve JIT (Just-In-Time) derleyicileri aktif edilerek sunucu tepki süreleri minimuma düşürülmelidir.

Konuyla İlgili Sık Sorulanlar

PageSpeed skoru neden önemlidir?
Google Core Web Vitals aramalarında üst sıralara çıkabilmeniz için en kritik sıralama sinyalidir.
Görselleri nasıl optimize edebiliriz?
WebP ve AVIF uzantılarını tercih edip lazy loading niteliklerini ekleyerek.
ME
Yazar
Mahmud Esen

İmesen yazılım firmasının da kurucu ortaklarından. Laravel ve yüksek performanslı 3D WebGL mimarileri üzerine uzmanlaşmıştır.