Web Sitesi Nasıl Hızlandırılır? Görsel, Önbellek ve Core Web Vitals Rehberi

Bir web sitesini hızlandırmanın en büyük kazancı genellikle üç yerden gelir: görselleri doğru boyut ve formatta sunmak, tarayıcı önbelleğini ve sıkıştırmayı açmak, gereksiz betik ve yazı tiplerini kaldırmak. Sunucu yükseltmek genellikle sıralamada en sona kalır, çünkü çoğu yavaş site sunucu yüzünden değil taşıdığı gereksiz ağırlık yüzünden yavaştır.

Ölçmeden iyileştirmeye başlamayın. Önce mevcut durumu ölçün, sonra en büyük kaybı yaratan tek şeyi düzeltin ve tekrar ölçün.

Core Web Vitals ne anlatır?

• En büyük içerik boyanması: Sayfadaki en büyük görsel veya metin bloğunun ne kadar sürede göründüğü. Genellikle kapak görseli belirler.
• Düzen kayması: Sayfa yüklenirken içeriğin yerinden oynaması. Görsellere boyut verilmemesi en sık nedendir.
• Etkileşimde tepki süresi: Kullanıcı tıkladığında sayfanın ne kadar hızlı yanıt verdiği. Ağır betikler bu değeri bozar.

Bu üç ölçüt, kullanıcının hissettiği hızı sayıya döker. Ham yükleme süresinden daha anlamlıdır.

Görseller: en büyük kazanç burada

1. Görseli kullanılacağı boyutta kaydedin. 400 piksel gösterilecek bir alana 3000 piksel genişliğinde dosya koymayın.
2. WebP veya AVIF formatını tercih edin. Aynı görsel kalitesinde dosya boyutu belirgin şekilde düşer.
3. Her görsele genişlik ve yükseklik değeri verin. Bu tek satır, düzen kaymasını büyük ölçüde önler.
4. İlk ekranda görünmeyen görsellerde geç yükleme kullanın. İlk ekrandaki kapak görselinde kullanmayın, aksi halde açılış yavaşlar.
5. Dekoratif görselleri mümkünse CSS ile üretin veya SVG kullanın.

Sunucu tarafında yapılacaklar

• Sıkıştırmayı açın. Metin tabanlı dosyalar sıkıştırıldığında boyut ciddi biçimde düşer.
• Tarayıcı önbelleğini tanımlayın. Değişmeyen dosyalar için uzun süreli önbellek verin; dosya adına sürüm ekleyerek güncellemeyi yönetin.
• Yönlendirme zincirlerini temizleyin. Her ek yönlendirme, gereksiz bir gidiş dönüş demektir.
• Güncel protokolleri kullanın. Şifreli bağlantı üzerinde çalışan yeni protokoller çoklu istekleri çok daha verimli taşır.
• Veritabanı sorgularını gözden geçirin. Sayfa başına onlarca sorgu çalışıyorsa asıl darboğaz oradadır.

Kod ve kaynak temizliği

• Kullanmadığınız eklenti ve kütüphaneleri kaldırın. En hızlı dosya, hiç yüklenmeyen dosyadır.
• Yazı tipi sayısını sınırlayın. Her ek ağırlık ve stil ayrı bir dosya demektir.
• Kritik olmayan betikleri geciktirerek yükleyin.
• Üçüncü parti gömülü içerikleri sayfa açılışında değil, kullanıcı etkileşimiyle yükleyin.
• CSS ve JavaScript dosyalarını küçültün.

Ölçüm nasıl yapılır?

1. Bir performans ölçüm aracıyla sayfayı test edin ve puanı değil, listelenen sorunları okuyun.
2. Tarayıcı geliştirici araçlarındaki ağ sekmesinde en büyük dosyaları sıralayın.
3. En ağır üç dosyayı belirleyin ve önce onları çözün.
4. Mobil ölçümü ayrıca yapın; mobil sonuçlar genellikle daha düşük çıkar ve ziyaretçilerin çoğu mobilden gelir.
5. Her değişiklikten sonra tekrar ölçün, aynı anda birden fazla değişiklik yapmayın.

Saha Notu

Yönettiğim sitelerde performans iyileştirmesi yaparken en büyük kazancı hiç beklemediğim yerden aldım. Bir sitede açılış süresi kabul edilemez düzeydeydi ve sunucu paketini yükseltmeyi düşünüyordum.

Ağ sekmesinde dosyaları büyükten küçüğe sıraladığımda tabloyu gördüm:

• Ana sayfadaki kapak görselleri, sunucuya yüklendikleri orijinal boyutlarıyla duruyordu. Tek bir görsel birkaç megabaytı buluyordu.
• Yıllar içinde eklenmiş, artık kullanılmayan iki JavaScript kütüphanesi hala her sayfada yükleniyordu.
• Dört farklı yazı tipi ağırlığı çağrılıyordu ama tasarımda ikisi kullanılıyordu.

Görselleri uygun boyutta yeniden ürettim ve WebP formatına geçirdim, kullanılmayan kütüphaneleri kaldırdım, yazı tiplerini ikiye indirdim. Sunucuya hiç dokunmadım ve açılış süresi belirgin biçimde düştü. Toplam çalışma süresi bir öğleden sonraydı.

Bir alışkanlığım daha var: projelerimde görsel yükleme akışına otomatik yeniden boyutlandırma ekliyorum. İçerik ekleyen kişi büyük bir dosya yüklese bile sistem uygun boyutu üretiyor. Kullanıcıya güvenmek yerine akışı düzeltmek, uzun vadede tek kalıcı çözüm oldu.

Sık Sorulan Sorular

Ölçüm aracındaki puan kaç olmalı?

Puanın kendisi hedef değildir. Önemli olan Core Web Vitals değerlerinin gerçek kullanıcı verisinde iyi seviyede olmasıdır. Puanı yükseltmek için kullanıcı deneyimini bozan kısayollardan kaçının.

Görsel formatını değiştirmek kaliteyi düşürür mü?

Doğru sıkıştırma ayarıyla gözle fark edilir bir kayıp olmaz. Ürün ve detay görsellerinde ayarı test ederek belirleyin.

Önbellek kullanırsam güncellemeler geç mi görünür?

Dosya adına sürüm bilgisi eklerseniz bu sorun yaşanmaz. Güncellenen dosya yeni adla çağrılır ve tarayıcı yeni sürümü indirir.

İçerik dağıtım ağı kullanmalı mıyım?

Ziyaretçileriniz farklı bölgelerden geliyorsa faydalıdır. Yerel bir hedef kitleniz varsa önce görsel ve kod temizliğinden elde edeceğiniz kazanç daha büyüktür.

Sunucu yükseltmek sorunu çözer mi?

Yalnızca darboğaz gerçekten sunucudaysa. Ağır görseller ve gereksiz betikler varken sunucu yükseltmek pahalı ve yetersiz bir çözümdür.

Hız iyileştirmesi arama sıralamasını etkiler mi?

Hız tek başına belirleyici değildir ancak kullanıcı deneyimini doğrudan etkiler. Yavaş sayfada ziyaretçi geri döner, bu da dolaylı olarak sonuçlara yansır.

Özet

Site hızlandırmada sıralama nettir: önce ölçün, sonra görselleri doğru boyut ve formata getirin, tarayıcı önbelleği ile sıkıştırmayı açın, kullanılmayan betik ve yazı tiplerini kaldırın. Görsellere genişlik ve yükseklik vermek düzen kaymasını önler, ilk ekran dışındaki görsellerde geç yükleme açılışı hızlandırır. Sunucu yükseltmeyi en son düşünün; çoğu sitede asıl ağırlık kendi taşıdığı gereksiz dosyalardır.