Önce gerçek darboğazı ölçün
Siteyi hızlandırmaya başlamadan önce hangi kaynağın gecikmeye neden olduğunu ölçmek gerekir. Sunucu yanıtı, büyük hero görseli, render engelleyen CSS veya yoğun JavaScript farklı çözümler ister.
Tek bir skor yerine gerçek kullanıcı deneyimine bakılmalıdır. İlk görünür içeriğin gelmesi, sayfanın etkileşime hazır olması ve kaymaların azalması temel hedeflerdir.
- Sunucu yanıt süresi
- En büyük içerik öğesinin yüklenmesi
- Etkileşim gecikmesi
- Sayfa düzeni kaymaları
Görselleri doğru boyutta sunun
Masaüstü için hazırlanan büyük görseli telefonda aynı dosya olarak yüklemek gereksiz veri tüketir. Görseller kullanım boyutuna göre ölçeklenmeli ve uygun formatla sıkıştırılmalıdır.
Ekranın altında kalan içerikler lazy loading ile ertelenebilir. Ancak hero ve logo gibi ilk görünüm öğeleri geciktirilmemelidir.
- WebP veya uygun modern format
- Doğru width ve height değerleri
- Görünüm altı içeriklerde lazy loading
- Hero görselinde preload kararını ölçerek verme
CSS ve JavaScript yükünü azaltın
Kullanılmayan kütüphaneler, aynı işi yapan birden fazla eklenti ve bütün sayfalarda yüklenen ağır scriptler performansı düşürür. Her bağımlılık gerçek ihtiyaca göre sorgulanmalıdır.
Animasyonlar transform ve opacity gibi tarayıcının verimli işlediği özelliklerle hazırlanmalı; scroll olayları hafif tutulmalıdır.
Görsel olarak zengin bir site yavaş olmak zorunda değildir. Doğru hareket sistemi ve sınırlı bağımlılık akıcılığı korur.
Önbellek ve sunucu tarafı iyileştirmeleri
CSS, JavaScript, font ve görseller için uygun tarayıcı önbelleği tekrar ziyaretleri hızlandırır. Metin tabanlı dosyalarda gzip veya Brotli sıkıştırması aktarım boyutunu azaltır.
PHP tarafında gereksiz veritabanı sorguları ve yinelenen dosya işlemleri azaltılmalıdır. Güncelleme sonrası önbelleğin kontrollü yenilenmesi için dosya sürümlemesi kullanılabilir.
- Statik dosyalarda cache header
- Gzip veya Brotli sıkıştırması
- CSS ve JS için dosya sürümleme
- Yavaş sorgu ve sunucu loglarının takibi