Web Sitesi Hızı Nasıl Artırılır? Ölçerek İlerleyen 8 Adım

Site hızı hakkında yazılanların çoğu bir eklenti listesidir. Oysa yavaşlığın sebebi siteden siteye değişir ve ölçmeden bilinemez. Bu yazıda kendi sitemizi denetlerken izlediğimiz sırayı ve bulduklarımızı anlatıyorum; çünkü "hızlı" sandığımız bir sitede bile ölçüm, gözle görmediğimiz üç ayrı sorun çıkardı.

Önce neyi ölçtüğünüzü bilin

Google'ın kullanıcı deneyimi için baktığı üç ölçüt var ve üçü birlikte Core Web Vitals diye anılıyor:

• LCP — ekrandaki en büyük öğenin (genellikle ana görsel ya da başlık) görünme süresi. 2,5 saniyenin altı iyi kabul edilir.
• INP — sayfanın dokunuşa ve tıklamaya yanıt verme süresi. 200 milisaniyenin altı iyidir.
• CLS — sayfa yüklenirken öğelerin yerinden oynama miktarı. 0,1'in altı iyidir.

PageSpeed Insights bu üçünü hem laboratuvar ölçümüyle hem de — yeterli ziyaretçiniz varsa — gerçek kullanıcı verisiyle gösterir. Önemli olan puanın kendisi değil, hangi ölçütün kötü olduğudur; çünkü her birinin çaresi ayrıdır.

1. Ölçümü telefon koşullarında yapın

Ofisteki hızlı bilgisayar ve fiber bağlantıyla her site hızlıdır. Ziyaretçilerinizin çoğu ise orta sınıf bir telefonla, mobil veriyle gelir. Biz ölçümü yavaşlatılmış ağ ve dört kat kısıtlanmış işlemciyle, önbelleği boş bir tarayıcıda yapıyoruz. Aradaki fark öğreticidir: masaüstünde bir saniyenin altında açılan ana sayfamız bu koşullarda 2,9 saniyede açılıyordu.

2. Görselleri gösterildiği boyutta sunun

Çoğu sitede en büyük kazanç buradadır. Kendi denetimimizde 2560 piksel genişliğindeki proje ekran görüntülerinin 400 piksellik kartlara, 1200 piksellik blog kapaklarının 440 piksellik kutulara tam boy indiğini gördük. Tarayıcı görseli küçültüp gösterdiği için gözle fark edilmiyordu; veri ise boşa harcanıyordu.

Çözüm üç parçalıdır: görseli WebP gibi modern bir biçimde kaydetmek, aynı görselin birkaç genişlikte sürümünü üretmek ve tarayıcıya srcset ile seçim yaptırmak. Telefon küçük dosyayı, geniş ekran büyüğünü indirir. İlk ekranın altındaki görseller de loading="lazy" ile ancak yaklaşıldığında yüklenmelidir.

3. İlk ekrandaki görseli öne alın

LCP'yi belirleyen görsel — genellikle ana sayfanın büyük görseli — tarayıcıya erkenden bildirilmelidir. Preload satırı ve fetchpriority="high" özniteliği bu işe yarar. Dikkat edilecek nokta: preload edilen adres ile sayfada kullanılan adres harfi harfine aynı olmalı. Sürüm parametresi farklıysa tarayıcı görseli iki kez indirir; kazanç yerine kayıp olur.

4. Yazı tiplerini azaltın ve birleştirin

Web yazı tipleri sessiz bir yüktür. Bizim sitemizde ilk ziyarette dokuz ayrı yazı tipi dosyası iniyordu. Daha ilginci, Türkçe'ye özgü harfler (ğ, ş, ı, İ) ayrı bir dosyadaydı ve o dosya geç geldiği için ilk ziyarette aynı kelimenin içinde bu harfler sistem yazı tipiyle, kalanı kendi yazı tipimizle çiziliyordu. Ekran görüntüsünde fark edilmesi zor, ama tasarımın özenini bozan bir kusur.

Düzeltmesi: Latin ve Türkçe harfleri tek dosyada toplayan bir alt küme üretmek, yalnızca gerçekten kullanılan ağırlıkları tutmak ve en kritik iki dosyayı preload etmek. Dosya sayısı düştü, ilk ziyarette de tek yazı tipi çiziliyor.

5. İkon yazı tipine dikkat

İkonları yazı tipi olarak kullanan sitelerde tipik bir hata vardır: ikon yazı tipi yüklenene kadar — ya da alt kümede o ikon yoksa — ekranda ikonun adı görünür: "schedule", "expand_more". Alt kümeyi küçültmek iyidir, ama siteye yeni bir ikon eklendiğinde alt kümenin de yenilenmesi gerekir. Bizde üç ikon bu yüzden ham metin olarak görünüyordu. Az sayıda ikon için satır içi SVG çoğu zaman daha sağlam bir seçimdir.

6. CSS ve JavaScript'i sadeleştirin

Tarayıcı, stil dosyaları inmeden sayfayı çizmez. Dört ayrı stil dosyası dört ayrı bekleme demektir; birleştirip küçültmek ve kullanılmayan kuralları ayıklamak ilk çizimi öne çeker. JavaScript tarafında kural basit: sayfanın görünmesi için şart olmayan her betik defer ile ertelenmeli, telefonda işe yaramayan efektler telefonda hiç yüklenmemelidir.

Üçüncü taraf betikleri — sohbet kutuları, izleme kodları, harita gömmeleri — ayrı bir başlıktır. Her biri kendi alan adına bağlantı açar ve ana iş parçacığını meşgul eder. Gerçekten kullanılmayanı kaldırmak, en ucuz hızlandırmadır.

7. Sunucu yanıt süresini kontrol edin

Tarayıcı ilk baytı alana kadar hiçbir şey başlamaz. Bu süre (TTFB) yarım saniyeyi aşıyorsa sorun ön yüzde değil sunucudadır: yavaş barındırma, önbelleksiz çalışan ağır bir içerik yönetim sistemi, her istekte yapılan veritabanı sorguları. Statik dosyalar için uzun süreli tarayıcı önbelleği, HTML için sıkıştırma ve uygun bir sunucu önbelleği bu kalemi çözer.

8. Yer değiştiren öğeleri sabitleyin

Okurken metnin aşağı kayması, tam dokunacakken düğmenin yer değiştirmesi — CLS budur. Başlıca sebepleri: genişlik ve yükseklik verilmemiş görseller, sonradan eklenen bantlar ve geç yüklenen yazı tiplerinin metni yeniden akıtması. Her görsele boyut yazmak, sonradan gelen alanlar için yer ayırmak ve yedek yazı tipinin ölçülerini asıl yazı tipine yaklaştırmak kaymayı sıfıra yakın tutar.

Hız sıralamayı ne kadar etkiler?

Dürüst cevap: tek başına belirleyici değil. İçeriği zayıf bir site hızlı diye öne geçmez. Ama içerik olarak denk iki siteden hızlı olan kazanır; asıl büyük etki ise ziyaretçi tarafındadır. Geç açılan sayfadan çıkan kişi teklif istemez. Bu yüzden hızı bir SEO maddesi olarak değil, satışın önündeki bir engel olarak görmek daha doğru. SEO'nun geri kalanını sitem Google'da neden çıkmıyor yazısında topladık.

Özet

Hız çalışması bir eklenti kurmak değil, bir ölçüm alışkanlığıdır: telefon koşullarında ölç, en büyük kalemi bul, düzelt, tekrar ölç. Çoğu sitede ilk üç kalem aynıdır — gereğinden büyük görseller, fazla yazı tipi dosyası ve ertelenmemiş betikler.

Yeni bir sitede bunları baştan kurmak, sonradan düzeltmekten çok daha kolaydır; kurumsal web tasarım çalışmalarımızda hız, tasarımla birlikte planlanan bir kalemdir. Mevcut sitenizin ölçümünü birlikte yapmak isterseniz bize yazın.