Kurumsal bir sitede Lighthouse puanı yayın günü yüksek çıkar, aylar içinde düşer. Aradaki farkı çoğunlukla üç kalem açıklar: sonradan eklenen üçüncü parti script'ler, fontlar ve içerik ekibinin yüklediği görseller. Bu yazı üç kalemi, her birinin hangi metriği etkilediğini ve yayından önce ne kontrol ettiğimizi anlatıyor.
Üç metrik, kısaca #
Google'ın Core Web Vitals adıyla ölçtüğü üç temel değer var. LCP, sayfadaki en büyük içeriğin ne kadar sürede göründüğüdür. CLS, yüklenirken öğelerin ne kadar yer değiştirdiğidir. INP, kullanıcı bir şeye dokunduğunda sayfanın ne kadar sürede tepki verdiğidir. Puanı düşüren üç kalemin her biri bu üçünden birine denk gelir.
Üçüncü parti script'ler #
Analitik, pazarlama etiketleri, sohbet penceresi, çerez bildirimi. Her biri tek başına küçüktür; birlikte sayfanın ana iş parçacığını meşgul eder ve INP'yi kötüleştirir. Yayından sonra eklenen her yeni etiket bu listeyi büyütür.
Yayından önce script listesini çıkarıyor, her birine bir sahip ve bir gerekçe yazıyoruz. Gerekçesi olmayan kaldırılıyor. Kalanlar etkileşim sonrasına erteleniyor ya da tek bir etiket yöneticisinden yükleniyor. Sonradan eklenen her script için aynı liste güncelleniyor. Bu, teknik olmaktan çok yönetsel bir kuraldır.
Fontlar #
Kurumsal fontlar çoğu zaman birden çok ağırlıkta ve büyük dosyalar olarak yüklenir. Font gelene kadar metin görünmez ya da geldiğinde satırlar kayar. İlki LCP'yi, ikincisi CLS'yi bozar.
Kullanılan ağırlıkları gerçekten gerekenlere indiriyor, dosyaları woff2 olarak alt kümeye ayırıyor (Türkçe karakterler dahil), ilk ekranda görünen fontu önden yüklüyor ve yedek fontun ölçülerini asıl fonta yaklaştırıyoruz ki değişim anında satır kaymasın.
CMS görselleri #
Tasarım aşamasında her görsel optimize edilir. Yayından sonra içerik ekibi büyük bir fotoğrafı olduğu gibi yükler ve LCP kötüleşir. Sorun kullanıcıda değil, sistemdedir: CMS görseli yüklerken boyutlandırmıyordur.
Yayından önce CMS'e görsel işleme kuralı koyuyoruz. Yüklenen her görsel birkaç boyutta ve modern biçimde (webp ya da avif) üretilir, sayfa ekran genişliğine uygun olanı çeker, her görselin genişlik ve yükseklik bilgisi kaydedilir ki sayfada yeri baştan ayrılsın. İçerik ekibinin ek bir şey yapması gerekmez.
Yayından önceki liste #
- Script listesi: her satırda sahip ve gerekçe var; gerekçesiz olan yok.
- Fontlar: yalnız kullanılan ağırlıklar, woff2 alt küme, ilk ekran fontu önden yüklü.
- Görseller: CMS otomatik boyutlandırıyor, modern biçim üretiyor, boyut bilgisi kayıtlı.
- Ana sayfa ve en çok ziyaret edilen sayfalar Lighthouse'ta mobil profille ölçülüyor.
- Yayından sonra aynı ölçüm belirli aralıklarla tekrarlanıyor; düşüş varsa önce script listesine bakılıyor.
Puanın kendisi hedef değildir. Hedef, sitenin yavaş bir telefonda ve zayıf bağlantıda okunabilir kalmasıdır. Lighthouse bunu ölçmenin en erişilebilir yolu olduğu için listede. Performansın diğer ölçütlerle birlikte nasıl değerlendirileceğini iyi bir kurumsal web sitesinin ölçütleri yazısında, bu işi nasıl yürüttüğümüzü Web Tasarım ve Geliştirme sayfasında anlatıyoruz.
Kaynaklar #
- Web Vitals, web.dev; LCP, CLS ve INP tanımları
- Optimize web fonts, web.dev; alt küme ve önden yükleme
- Lighthouse dokümantasyonu; ölçüm yöntemi
