Bir web sitesini bir kez hızlandırmak kolaydır. Zor olan, yeni özellikler eklemeye devam ederken onu hızlı tutmaktır: her yeni bileşen, yazı tipi veya kütüphane sayfayı biraz daha ağırlaştırır ve site yavaş hissettirene kadar kimse fark etmez. Bu yüzden hızı tek seferlik bir denetim olarak görmeyi bıraktık ve onu her değişikliğin geçmesi gereken bir teste dönüştürdük.
Nereden başladık
Bu siteyi ilk kez ciddi biçimde ölçtüğümüzde, düzen yüklenirken kayıyordu (Cumulative Layout Shift 0,2 civarındaydı) ve kısıtlanmış bir mobil bağlantıda ana içeriğin görünmesi 4 ila 6 saniye sürüyordu. Ana stil dosyası sıkıştırılmış hâlde 41 KB tutuyordu; bunun başlıca nedeni, yönetim paneli için tasarlanmış bileşenlerin ve doğrulama kodunun ziyaretçilere de gönderilmesiydi.
Neleri değiştirdik
- Ziyaretçiler yalnızca ziyaretçi kodunu alır. Yönetim panelinin UI kütüphanesi ve form doğrulama kütüphanesi artık herkese açık siteye ulaşmıyor. Bir test, sitenin import'larını tarar ve bunlardan biri geri sızarsa başarısız olur.
- Yalnızca sayfadakiler için CSS. Ana stil dosyası 296 KB'tan 98 KB'a, sıkıştırılmış hâlde ise 16 KB'a indi.
- Düzeni kaydırmayan yazı tipleri. Önemli yazı tipleri önceden yüklenir ve sayfa artık hiç ihtiyaç duymayabileceği kodu önceden getirmez.
Bunu böyle tutan test
Her pull request'te CI siteyi derler, onu üretim ortamındaki gibi – HTTP/2, TLS, sıkıştırma – sunar ve dört önemli sayfada Lighthouse'u üç kez çalıştırarak medyanı alır. Bütçe: her puan en az 95, en büyük içerik 2 saniyenin altında görünür, düzen kayması 0,1'in altında, ana iş parçacığı engellemesi 200 ms'nin altında. Bir değişiklik bütçeyi aşarsa CI kırmızıya döner ve değişiklik merge edilmez. Yanında bir erişilebilirlik kontrolü de çalışır ve şu anda kapsadığı sayfalarda hiçbir WCAG AA ihlali bulmuyor.
Sonuç
CI'da sayfalar dört Lighthouse kategorisinin hepsinde 100 puan alıyor ve ana içerik bir saniyenin altında görünüyor. Canlı sitede ana sayfa 100 puan alıyor ve ana içerik yaklaşık 1,2 saniyede görünüyor; bir ürün sayfası ise 98 puan alıyor.
Henüz mükemmel olmayan konusunda da dürüstüz: Japonca ve diğer CJK dillerindeki sayfalar daha yavaş, çünkü yazı tipleri çok daha büyük. Bunun için ayrı bir görev var.
Bu sizin için neden önemli
Yavaş bir sayfa, ziyaretçiler tek bir kelime okumadan onları kaybeder; arama motorları da bunu fark eder. Bizimle bir açılış sayfası ya da online mağaza geliştiriyorsanız bu bütçe de beraberinde gelir – ekstra değil, çalışma biçimimizin bir parçası.