Bir site’ın yüklenme süresini nasıl bir saniyenin altına düşürdük
Hız sadece gösteriş amaçlı bir metrik değildir’ sıralamaları ve geliri doğrudan etkiler. İşte en kritik sırayla, her build üzerinde yürüttüğümüz performans çalışmasının tam listesi.
Yavaş web sitelerinin çoğu gizemli nedenlerden dolayı yavaş değildir. Birbiri ardına yığılmış birkaç öngörülebilir sorun nedeniyle yavaştırlar — ve öngörülebilir bir sırayla düzeltilirler. Bir müşteri bize üç saniyelik bir yüklenme süresiyle geldiğinde, nadiren sıra dışı yöntemlere ihtiyaç duyarız. İhtiyacımız olan şey disiplindir.
Bu, her performans çalışmasında kabaca öncelik sırasına göre uyguladığımız kontrol listesinin aynısıdır. Her adım, etkisine kıyasla düşük maliyetlidir ve çoğu site ilk üç adımdan sonra gözle görülür şekilde daha hızlı hissettirir.
Herhangi bir şeye dokunmadan önce ölçün
Ölçemediğiniz şeyi geliştiremezsiniz ve bir baseline olmadan gelişimi kesinlikle kanıtlayamazsınız. Her çalışmaya sadece laboratuvar skorlarıyla değil, saha verileriyle başlarız.
- Laboratuvar — Kontrollü, tekrarlanabilir bir anlık görüntü için Lighthouse ve WebPageTest.
- Saha — İnsanların gerçekte ne deneyimlediğine dair gerçek kullanıcı metrikleri (CrUX / RUM).
- Bütçe — Rota başına kesin bir üst sınır; böylece gerilemeler production ortamında değil, CI'da yakalanır.
Gerçek kullanıcılarınız orta segment telefonlar ve kararsız ağlar kullanıyorsa, 100 değerindeki bir laboratuvar skorunun hiçbir anlamı yoktur. Saha için optimize edin.
Render engelleyen kaynakları ortadan kaldırın
Çoğu site üzerindeki en büyük kazanım, CSS ve JavaScript'i kritik yoldan (critical path) çıkarmaktır. Tarayıcı, render engelleyen kaynakları ayrıştırmayı bitirene kadar çizim yapamaz; dolayısıyla bu kaynaklar ne kadar az olursa, ekranda bir şeylerin görünmesi o kadar hızlı olur.
// defer everything that isn't critical
const load = () => import('./analytics.js');
if ('requestIdleCallback' in window)
requestIdleCallback(load);
else setTimeout(load, 2000);İlk ekran (viewport) için gereken az miktardaki CSS'i satır içi (inline) yapın, ardından geri kalanını asenkron olarak yükleyin. Kritik olmayan script'leri erteleyin. Amaç, kesinlikle ihtiyaç duymadığı hiçbir şeyi beklemeyen bir ilk çizim (first paint) elde etmektir.
Görselleri bir bütçe olarak ele alın
Görseller genellikle bir sayfadaki en ağır unsurlardır ve hata yapılması en kolay olanlardır. Üç kural, durumların yüzde doksanını kapsar:
- Bir fallback ile birlikte AVIF veya WebP gibi modern formatlar sunun.
- Görselleri işlenen boyutlarına göre ölçeklendirin; hiçbir zaman 600px'lik bir alana 3000px'lik bir hero görseli göndermeyin.
- Ekranın altında kalan (below the fold) her şeyi geç yükleyin (lazy-load) ve düzen kaymasını (layout shift) önlemek için alan ayırın.
Edge üzerinde cache'leme
Sayfa hafifletildikten sonraki soru, baytların kullanıcıya ne kadar hızlı ulaştığıdır. Mantıklı cache başlıklarına sahip bir CDN, 600 ms'lik bir origin seyahatini 30 ms'lik bir edge isabetine (hit) dönüştürür. Dinamik içerik için stale-while-revalidate, arka planda yenileme yaparken size anında yanıt sağlar.
Performans bir özelliktir. Diğer tüm build bölümlerinde olduğu gibi performans için de bütçe ayırırız.
Sonuç
Bu makaleye vesile olan projede, ana sayfanın largest contentful paint süresi 3.1 saniyeden 0.9 saniyeye düştü ve organik dönüşümler bir ay içinde ölçülebilir şekilde arttı. Bunların hiçbiri sihir değildi — sadece yukarıdaki kontrol listesinin sırasıyla uygulanmasıydı.
Eğer site'ınız yavaş çalışıyorsa ve nereden başlayacağınızdan emin değilseniz, bizimle iletişime geçin — kısa bir denetim genellikle en önemli iki veya üç değişikliği ortaya çıkarır.