Astro ile 100/100 Lighthouse Skoru Nasıl Elde Edilir?

Modern web siteleri yalnızca iyi görünmek zorunda değil; aynı zamanda hız, erişilebilirlik ve sürdürülebilirlik açısından da üst düzey olmalı. Astro'nun varsayılanı olan Zero JS by default yaklaşımı, istemci tarafında ihtiyaç olmayan hiçbir kodun gönderilmemesini sağlar. Böylece tarayıcının iş yükü azalır, FCP ve TTI gibi kritik metrikler iyileşir.

Temel prensipler

1. Statik üretim (SSG): Sayfalar üretim sırasında HTML'e gömülür. Sunucuya her istek geldiğinde yeniden render gerekmez.
2. Edge dostu dağıtım: Ortaya çıkan dist/ klasörü CDN üzerinde sunulduğunda, kullanıcıya mümkün olan en yakın noktadan servis yapılır.
3. Minimum üçüncü parti script: Her script ana iş parçacığını bloke eder. Kullanılmayan kütüphaneleri kaldırın, zorunlu script'leri async veya defer ile yükleyin.

CSS ve stil yönetimi

Tailwind ile çalışırken @apply sayesinde tekrar eden cam efektleri, degrade arkaplanları ve tipografi kurallarını tek bir yerde tanımlayabilirsiniz. Hazırladığımız blog temasında glass-card sınıfı bunun örneği.

.glass-card {
  @apply bg-surface border border-border rounded-3xl shadow-glass backdrop-blur-md;
}

Medya ve görseller

Astro'nun Image bileşenleri veya content koleksiyonlarından gelen frontmatter verileri sayesinde her görsel için width, height ve alt değerlerini önceden belirleyin. Görselleri önceden optimize edilmiş .webp veya .avif formatlarında saklamak da puanları yükseltir.

SEO'yu unutmayın

site alanını astro.config.mjs dosyasında tanımlamak, otomatik olarak canonical ve sitemap üretimini kolaylaştırır. Açıklama, başlık ve Open Graph etiketlerini her içerik için dinamik olarak üretmek, blogumuzun arama sonuçlarında doğru kartlarla görünmesini sağlar.

Bu blog altyapısı; hızlı, sürdürülebilir ve SEO-uyumlu içerikler üretmeniz için hazır. Sırada elbette içerik takvimini oluşturmak ve düzenli yayın yapmak var.