0540 022 64 22 Ücretsiz Teklif

Web Tasarım

Web Sitesi Hızını Artırmanın Kontrol Listesi

· Aniba Digital · 5 dk okuma

İçindekiler 14 başlık
  1. Önce ölçün: bugünkü durumu kaydedin
  2. Görselleri küçültün
  3. Alttaki içeriği geç yükleyin
  4. Önbelleği kurun
  5. CDN kullanıp kullanmayacağınıza karar verin
  6. Eklentileri ve betikleri temizleyin
  7. Üçüncü taraf betiklere bakın
  8. CSS ve JavaScript dosyalarını küçültün
  9. Yazı tipine dikkat edin
  10. Video kullanıyorsanız gömme biçimini seçin
  11. Hosting yeterli mi?
  12. Hangi adım kod bilgisi istiyor?
  13. Hız puanı mı, gerçek hız mı?
  14. Sonucu tekrar ölçün ve hız bakımını takvime bağlayın

Web sitesi hızını artırmanın en kısa yolu şu sıradır: önce ölçün, sonra görselleri küçültün, ardından gereksiz eklenti ve betikleri atın, en son önbellek ve CDN gibi altyapı ayarlarına geçin. Sırayı karıştırırsanız emek boşa gider. Aşağıdaki liste, en az çabayla en çok kazanç getiren adımdan başlıyor.

Önce ölçün: bugünkü durumu kaydedin

Herhangi bir şeye dokunmadan önce Google’ın PageSpeed Insights aracına ana sayfanızı ve en çok trafik alan iki sayfayı girin. Mobil sonucuna bakın, masaüstüne değil. Puanı bir yere yazın, ama asıl işe yarayan kısım “Fırsatlar” ve “Tanılama” bölümüdür: hangi dosya kaç saniye kaybettiriyor, orada yazar.

Ölçümü üç kez tekrarlayın. Tek ölçüm şaşırtıcı biçimde oynak çıkabilir; ortalamaya bakmak daha dürüst bir başlangıç verir. Bu kaydı saklayın, işin sonunda karşılaştıracaksınız.

Görselleri küçültün

Yavaş sitelerin çoğunda tek büyük suçlu görsellerdir. Telefondan çıkan 4 MB’lık bir fotoğrafı olduğu gibi yükleyip ekranda 400 piksel genişliğinde göstermek çok yaygın bir hatadır. Görseli, sayfada görüneceği gerçek boyuta indirin ve WebP biçimine çevirin. Aynı fotoğraf çoğu zaman beşte bire kadar küçülür ve gözle fark edilmez.

Slider ve arka plan görsellerine ayrıca bakın. Üstte duran büyük kapak görseli sayfanın en çok bekletilen öğesidir; onu küçültmek skoru en hızlı oynatan hamledir.

Alttaki içeriği geç yükleyin

Sayfanın ilk ekranında görünmeyen görseller ve videolar, kullanıcı aşağı inene kadar yüklenmek zorunda değil. Bunun adı lazy loading. Modern tarayıcılar loading="lazy" özelliğini zaten tanıyor; çoğu temada tek bir ayarla açılıyor.

Tek istisna var. Sayfa açılır açılmaz görünen kapak görselini geç yüklemeyin. Onu tersine öne alın, yoksa hız düşer.

Önbelleği kurun

Önbellek, sayfanın hazır halini sunucuda tutup her ziyaretçiye baştan üretmemesini sağlar. WordPress kullanıyorsanız bunu bir eklentiyle yaparsınız; statik üretilen sitelerde zaten böyle çalışır. Ayrıca tarayıcı önbelleği için görsel, yazı tipi ve stil dosyalarına uzun geçerlilik süresi tanımlayın. İkinci kez gelen ziyaretçi o dosyaları yeniden indirmez.

CDN kullanıp kullanmayacağınıza karar verin

İçerik dağıtım ağı, dosyalarınızı ziyaretçiye coğrafi olarak yakın bir sunucudan verir. Müşterileriniz çoğunlukla Türkiye’deyse ve sunucunuz da Türkiye ya da Avrupa’daysa kazanç sınırlıdır. Ziyaretçileriniz farklı ülkelerdeyse ya da görsel ağırlığınız büyükse CDN gerçekten fark yaratır. Ücretsiz katmanı olan servisler var; denemek maliyetsiz.

Eklentileri ve betikleri temizleyin

Her eklenti sayfaya biraz daha kod yükler. Üç aydır açıp bakmadığınız, ne işe yaradığını hatırlamadığınız eklentileri kapatın ve siteyi kontrol edin. Bu konuyu ayrıca WordPress eklenti yığını siteyi nasıl yavaşlatır yazımızda anlattık. Slider, sosyal medya paylaşım düğmeleri, ikinci bir analitik aracı ve kullanılmayan form eklentileri tipik adaylardır.

Üçüncü taraf betiklere bakın

Canlı destek penceresi, harita, takip pikseli, yorum widget’ı: hepsi başka bir sunucudan dosya çeker ve siz o sunucunun hızını denetleyemezsiniz. PageSpeed raporunda “üçüncü taraf kodunun etkisini azaltın” uyarısı varsa listeye bakın. Gerçekten iş getirmeyen her betiği çıkarın. Haritayı, kullanıcı tıklayana kadar yüklenmeyen statik bir görselle değiştirmek bile fark ettirir.

CSS ve JavaScript dosyalarını küçültün

Küçültme (minify), koddaki boşlukları ve gereksiz karakterleri atar. Birleştirme ise onlarca küçük dosyayı birkaç dosyaya indirir. Önbellek eklentilerinin çoğu bu ayarı içerir. Ancak her seferinde siteyi gezerek kontrol edin; JavaScript birleştirme bazen menüyü ya da formu bozar.

Yazı tipine dikkat edin

Üç ailenin her birinden beş kalınlık yüklemek, görünmeyen bir yavaşlıktır. Gerçekten kullandığınız kalınlıklarla sınırlayın. Mümkünse yazı tiplerini Google’dan çekmek yerine kendi sunucunuzdan verin. Yazı tipi yüklenirken metin boş görünmesin diye font-display: swap ayarını kullanın.

Video kullanıyorsanız gömme biçimini seçin

Sayfaya doğrudan yüklenen bir video, sayfanın tüm yükünü katlar. YouTube’a yükleyip gömmek bile ilk ekranda sorun çıkarabilir; bu durumda videonun yerine bir önizleme görseli koyup tıklanınca oynatıcıyı yükleyin. Arka planda sessizce dönen kısa videolarda dosya boyutunu birkaç megabaytın altında tutun.

Hosting yeterli mi?

Yukarıdaki ayarları yaptığınız halde sunucunun ilk yanıtı geç geliyorsa (PageSpeed’de “sunucu yanıt süresi” uyarısı), sorun hostingdedir. Paylaşımlı pakette yüzlerce site aynı kaynağı kullanır. Bu noktada daha iyi bir sunucuya geçmek, ya da WordPress yerine hafif bir altyapıya taşınmak mantıklıdır. İki yaklaşımı WordPress mi statik altyapı mı karşılaştırmasında ayrıntılı ele aldık.

Hangi adım kod bilgisi istiyor?

Görselleri küçültmek, eklenti kapatmak, önbellek eklentisini kurmak ve lazy loading’i açmak teknik bilgi istemez; bir akşamda biter. Yazı tipi ayarı, CSS ve JavaScript birleştirme, CDN kurulumu ve sunucu yanıt süresi ise bir geliştirici bakışı ister. Kendi başınıza denerken şu kuralı koyun: bir adımı uyguladıktan sonra siteyi hem telefonda hem bilgisayarda gezin, formu gönderin, menüyü açın. Bir şey bozulduysa o adımı geri alın, sıradakine geçin.

Yedeğiniz yoksa işe başlamayın. Hosting panelinden tam yedek almak beş dakika sürer ve geri dönüşü garanti eder.

Küçük bir ipucu: görselleri tek tek elle sıkıştırmak yerine, yükleme anında otomatik küçülten bir eklenti ya da panel ayarı kullanın. Siteyi güncelleyen herkes aynı kuralı hatırlamak zorunda kalmaz. Bu tek ayar, aylar sonra bile hızın bozulmasını büyük ölçüde önler.

Hız puanı mı, gerçek hız mı?

PageSpeed puanı bir göstergedir; hedef ziyaretçinin deneyimidir. Puanı yüze çıkarmak için siteyi kısırlaştırmaya gerek yok; asıl soru ziyaretçinin ilk ekranı ne kadar çabuk görüp tıklayabildiği. PageSpeed raporunun üstündeki “gerçek kullanıcı verileri” bölümü, son haftalarda sitenize gelenlerin yaşadığı süreyi gösterir. Bu bölüm boşsa sitenize henüz yeterli ziyaret gelmiyor; laboratuvar sonucuna bakmaya devam edin.

Telefondaki deneyimi de kendi gözünüzle kontrol edin. Wi-Fi’yi kapatıp mobil veriyle sayfayı açın. Ölçüm aracının göstermediği şeyleri, örneğin sayfa yüklenirken düğmenin yer değiştirmesini, orada fark edersiniz.

Sonucu tekrar ölçün ve hız bakımını takvime bağlayın

İlk adımda aldığınız ölçümle bugünkünü yan yana koyun. Hangi değişiklik ne kadar kazandırdı, görürsünüz. Sonra üç ayda bir tekrar ölçmeyi takvime yazın; yeni eklenen bir görsel ya da betik hızı sessizce geri düşürür.

Hız çalışması düzenli bakım ister, tek seferde bitmez. Yeni bir sayfa yayınlayan kişinin görseli küçültmeyi bilmesi, tüm sorunun yarısını çözer. Yeni bir site yaptıracaksanız hız hedefini baştan konuşun: web tasarım paketlerimizin hepsi mobil öncelikli altyapıyla geliyor ve sitelerin fiyatlarını fiyatlar sayfasında görebilirsiniz.

Mevcut sitenizin neden yavaş olduğunu merak ediyorsanız iletişim sayfasından bize yazın ya da 0540 022 64 22 numarasını arayın. PageSpeed raporuna birlikte bakıp nereden başlanacağını söyleyelim.

Aklınızdaki fikri hayata geçirelim

Ücretsiz Teklif Al

İşinizi birkaç cümleyle anlatın. Size yol haritasını ve fiyatı yazılı gönderelim; ilk görüşme ücretsiz.

WhatsApp'tan yazın