Astro SSG Mimarisi ile İstemciye Sıfır JavaScript Göndererek TTFB ve LCP Optimizasyonu

📌 Hızlı Özet & Temel Çıkarım:
Astro Statik Site Üretimi (SSG), geleneksel tek sayfa uygulamalarının (React SPA, Next.js vb.) tarayıcıya yüzlerce kilobaytlık hantal JavaScript paketleri gönderme alışkanlığını yıkan devrimsel bir web mimarisidir. Ada Mimarisi (Islands Architecture) sayesinde sayfayı varsayılan olarak %100 saf HTML ve CSS olarak derler; yalnızca kullanıcının etkileşime girdiği dinamik bileşenleri (arama kutusu, tema butonu) izole JavaScript adacıkları olarak yükleyerek kusursuz Core Web Vitals metrikleri üretir.

1. Modern Web’in JavaScript Obezitesi ve Çözüm Arayışı

2026 yılında internetteki ortalama bir içerik sitesi, yalnızca birkaç paragraf metin ve resim göstermek için tarayıcıya 2 ila 5 MB arasında JavaScript indirtmektedir. Bu durum:

• Mobil cihazlarda CPU’nun aşırı ısınmasına ve pil tüketimine,
• Tarayıcının ana iş parçacığının (main thread) kilitlenmesine,
• Google Core Web Vitals metriklerinde Interaction to Next Paint (INP) ve Total Blocking Time (TBT) değerlerinin felaket seviyelere düşmesine yol açar.

Arama motorları botları (Googlebot, Bingbot) ve yapay zeka tarayıcıları JavaScript’i çalıştırmak için ekstra kaynak harcamak zorunda kaldığında, sitenizin tarama bütçesi (crawl budget) kısıtlanır ve indeksleme gecikir.

Astro bu döngüyü tersine çevirir: Bileşenler sunucuda veya derleme anında çalışır, çıktısı saf HTML’e dönüştürülür ve tarayıcıya neredeyse sıfır JavaScript gönderilir.

2. Ada Mimarisi (Islands Architecture) ve Kısmi Hidrasyon

Astro’da bir sayfa statik bir okyanustur; dinamik bileşenler ise bu okyanus üzerindeki izole adalardır.

İstemci tarafında çalışması gereken bir React, Vue veya Svelte bileşeni varsa, hidrasyon zamanı client:* direktifleriyle kontrol edilir:

---
// src/pages/index.astro
import BaseLayout from '../layouts/BaseLayout.astro';
import StaticArticleList from '../components/StaticArticleList.astro';
import SearchBar from '../components/SearchBar.jsx';
import InteractivePoll from '../components/InteractivePoll.svelte';
---

<BaseLayout title="Hızlı Web Sitesi">
  <!-- Bu bilesen 0 bayt JS ile saf HTML olarak derlenir -->
  <StaticArticleList />

  <!-- Yalnizca tarayici bos kaldiginda (idle) JS yuklenir -->
  <SearchBar client:idle />

  <!-- Kullanici ekranda bu bolgeye scroll ettiginde JS yuklenir -->
  <InteractivePoll client:visible />
</BaseLayout>

Bu yöntem sayesinde sayfanın ilk boyama süresi (First Contentful Paint - FCP) ve en büyük içerik boyaması (LCP) donanım bağımsız olarak 1 saniyenin altında gerçekleşir.

3. Dinamik SSR vs Statik SSG Karşılaştırması

İçerik siteleri, dergiler ve teknik bloglar için statik derleme (SSG) her zaman dinamik sunucu renderına (SSR) üstündür:

4. İlgili Konular ve İç Bağlantılar

• Google AdSense Onay Rehberi ve Core Web Vitals — Astro sitelerinde reklam optimizasyonu.
• Cloudflare Edge Caching ile TTFB Optimizasyonu — Statik sayfaların küresel CDN ile dağıtımı.
• Teknik SEO ve JSON-LD Yapılandırılmış Veri — Astro içinde dinamik şema entegrasyonu.

5. Sıkça Sorulan Sorular

Astro ile binlerce sayfalık büyük bir site derlemek ne kadar sürer?

Astro’nun içerik koleksiyonları (Content Collections) ve Vite tabanlı derleme motoru oldukça hızlıdır. 500-1000 makalelik bir teknik dergi sitesinin statik derlemesi modern bir CI/CD sunucusunda 30 ila 60 saniye arasında tamamlanır.

Statik sitede form gönderimi veya arama nasıl yapılır?

Formlar için Cloudflare Workers, Formspree veya doğrudan mailto: akışları kullanılır. Arama için ise sayfa boyutunu şişirmeyen istemci taraflı Pagefind kütüphanesi tercih edilir. Pagefind derleme anında arama indeksini oluşturur ve kullanıcı arama yaptığında yalnızca birkaç kilobaytlık indeks parçalarını dinamik olarak çeker.

6. Görsel ve Varlık Pipeline Optimizasyonu (Astro Assets & WebP)

Web sayfalarındaki en büyük ağırlık genellikle optimize edilmemiş devasa JPEG/PNG dosyalarından kaynaklanır. Astro’nun dahili astro:assets modülü, derleme anında Sharp kütüphanesini kullanarak tüm görselleri yeni nesil WebP veya AVIF formatına dönüştürür.

Görsel boyutlandırmada uygulanan modern mühendislik pratiği:

• Sayfa genişliğine uygun srcset üretilerek mobil kullanıcılara 400 piksellik, masaüstü kullanıcılara 1200 piksellik optimize görsel sunulur.
• fetchpriority="high" özniteliği ile makalenin en üstündeki hero görselinin indirilmesi tarayıcı öncelik sırasında en tepeye alınır; bu da LCP süresini 0.8 saniyenin altına düşürür.
• Alt kısımdaki görseller loading="lazy" ile yalnızca ekran alanına yaklaştığında çekilerek ilk veri aktarımı (payload) %70 oranında azaltılır.

7. Sentetik Benchmark Sonuçları: Next.js SSR vs Astro SSG

Aynı içerik ve bileşen yapısına sahip bir blog sayfasının WebPageTest ve Google Chrome DevTools üzerinde koşturulan sentetik benchmark sonuçları, statik derlemenin ezici üstünlüğünü ortaya koymaktadır:

Bu metrikler, özellikle 4G/3G gibi zayıf mobil ağlarda sitenin anında açılmasını sağlayarak ziyaretçilerin siteden hemen çıkma oranını (bounce rate) %35 oranında düşürmektedir.