Performansı Ölçme: Lighthouse ve Temel Web Metrikleri

Lighthouse, web performansını ölçmek için standart araçtır. Lighthouse'ı Chrome DevTools içinde (Lighthouse sekmesinde) veya CLI aracılığıyla çalıştırın (npx lighthouse https://yoursite.com). Adalar Mimarisi'ni değerlendirirken kazanımları nesnel olarak ölçmek için Lighthouse'ı geçişten önce ve sonra temsili sayfalarda çalıştırın.

LCP, görünür en büyük içerik öğesinin oluşturulmasının tamamlandığı zamanı ölçer. Adalar Mimarisi, sunucunun tamamen oluşturulmuş HTML'yi hemen göndermesi sayesinde LCP'yi iyileştirir; tarayıcı içeriği oluşturmak için JavaScript'i beklemez. LCP olacak bir hero görseli veya başlık, ilk HTML yanıtından boyanır.

Bir React SPA'sinde LCP genellikle gecikir; çünkü tarayıcının React, LCP öğesini oluşturmadan önce JavaScript'i indirmesi ve çalıştırması gerekir. Adalar Mimarisi'nde LCP içeriği ilk HTML'de bulunur; bu nedenle JavaScript'in çalıştırılması LCP'yi engellemez. Bu, ölçülebilen en önemli faydalardan biridir.

Toplam Engelleme Süresi, ana iş parçacığının 50 ms'den uzun JavaScript görevleri tarafından ne kadar süreyle engellendiğini ölçer. Büyük bir React SPA'sini hidratlamak, yüzlerce milisaniyelik TBT değerine yol açabilir. Adalar Mimarisi, çalıştırılan JavaScript miktarı sayfa boyutuyla değil, ada sayısıyla orantılı olduğu için TBT'yi büyük ölçüde azaltır.

Kümülatif Düzen Kayması, sayfa yüklenirken öğelerin hareket etmesi gibi görsel kararlılığı ölçer. JavaScript ile oluşturulan içerik, React oluşturma işlemi sırasında boyutları değiştiğinde düzen kaymalarına neden olabilir. Adalar Mimarisi tarafından sunucu tarafında oluşturulan HTML, ilk düzeni hidratasyon sırasında değişmeyen statik HTML'den aldığı için hidratasyonla ilgili düzen kaymalarını önler.

İlk Girdi Gecikmesi (şimdi Sonraki Boyamaya Etkileşim (INP) ile değiştirildi), sayfanın kullanıcı etkileşimlerine ne kadar hızlı yanıt verdiğini ölçer. Adalar Mimarisi, her adanın küçük ve odaklanmış bir JavaScript paketi olması sayesinde INP'yi iyileştirir. Bir ada içindeki etkileşimler hızlı gerçekleşir; çünkü işi planlamak için büyük bir React ağacından geçilmesi gerekmez.

Bir blog sayfası için tipik bir karşılaştırma şöyledir: Tam bir React SPA'si mobil Lighthouse'ta 45-65 puan alabilir (TBT: 800 ms, LCP: 3,2 sn). Aynı içerik, tek bir React adasına sahip bir Astro sitesi olarak sunulduğunda 90-98 puan alabilir (TBT: 80 ms, LCP: 1,1 sn). Kazanımlar, etkileşimin sınırlı olduğu içerik ağırlıklı sayfalarda en belirgindir.

Adalar Mimarisi; gösterge panoları, kod düzenleyicileri veya ortak çalışma araçları gibi son derece etkileşimli uygulamalar için doğru seçim değildir. Bu uygulamalarda bileşenler sürekli olarak durumu paylaşır ve birlikte yeniden oluşturulur. Adalar arası iletişimin ek yükü, performans kazanımlarını ortadan kaldırır ve mimari karmaşıklık ekler.

Adalar Mimarisi, dağınık etkileşimlere sahip içerik ağırlıklı sitelerde en iyi sonucu verir: bloglar (içeriği okuma, ara sıra beğenme veya yorum yapma), belgelendirme siteleri (belgeleri okuma, ara sıra arama yapma veya kodu kopyalama düğmesini kullanma), açılış sayfaları (çoğunlukla statik içerik, haber bülteni formu adası) ve e-ticaret ürün sayfaları (görseller ve açıklama statik, sepete ekleme adası).

Google, Temel Web Verilerini (LCP, INP, CLS) sıralama sinyalleri olarak kullanır. Bu ölçümleri Adalar Mimarisi ile iyileştirmek, arama sıralamasına doğrudan katkı sağlar. Adalar Mimarisi'ni benimseyerek mobil Lighthouse puanını 55'ten 92'ye çıkaran bir site, hem kullanıcı deneyimini hem de arama motoru optimizasyonunu aynı anda iyileştirir.

Pazarlama ve belgelendirme siteleri için Next.js React SPA'sinden Astro'ya geçiş yapan ekipler tutarlı sonuçlar bildiriyor: JavaScript yükleri %70-90 azalıyor, mobil performans puanları 20-40 puan artıyor ve statik dosyalar her istek için sunucu tarafı oluşturma ek yükü olmadan CDN'den sunulduğu için sunucu barındırma maliyetleri düşüyor.

Adalar Mimarisi, tüm Temel Web Verilerini iyileştirir: LCP, sunucu tarafından oluşturulan HTML'den yararlanır; TBT, JavaScript miktarı etkileşim düzeyiyle orantılı olduğu için azalır; CLS, kararlı sunucu tarafından oluşturulan düzenler sayesinde düşer ve INP, küçük ve odaklanmış ada paketleriyle iyileşir. İçerik ağırlıklı sayfalarda Lighthouse puanları büyük ölçüde yükselir. Bu model, son derece etkileşimli uygulamalar için uygun değildir; ancak bloglar, belgeler, açılış sayfaları ve e-ticaret siteleri için oldukça uygundur.