Astro statik site üretimi ve adalar mimarisi ile sıfır JavaScript yükü, 100 PageSpeed skoru ve LCP optimizasyonu sağlama teknik rehberini detayla inceleyin.
Hızlı Özet (TL;DR)
Geleneksel web sitelerinde (özellikle WordPress, eklenti yığınları ve ağır React/Next.js tek sayfa uygulamalarında) tarayıcıya megabaytlarca JavaScript ve CSS kodu yüklenir. Bu mimari, mobil cihazlarda açılış süresini (LCP) 4-7 saniyenin üzerine çıkararak Google PageSpeed skorlarını 40-50 seviyelerine mahkûm eder. Astro 5.x Statik Site Üretimi (SSG) ve Adalar (Islands) Mimarisi, sayfayı varsayılan olarak saf, optimize edilmiş HTML ve CSS olarak derler; yalnızca kullanıcı etkileşimi gerektiren mikro alanlara kademeli JavaScript bağlar. Sonuç: 0.4 saniyenin altında açılış hızı, kusursuz yeşil Core Web Vitals metrikleri ve kalıcı 100/100 Google Lighthouse skoru.
Kurumsal Web Dünyasında Hız Krizi ve Geleneksel CMS Darboğazı
Günümüz kurumsal web sitelerinin ezici bir çoğunluğu, 20 yıl öncesinin monolitik mimarileriyle (örneğin WordPress, Joomla veya klasik PHP framework’leri) inşa edilmektedir. Bir ziyaretçi web sitenize her tıkladığında geleneksel sunucuda şu ağır zincir işletilir:
- Sunucu Yanıt Gecikmesi (TTFB): Web sunucusu gelen isteği karşılar, onlarca WordPress eklentisi PHP kodlarını belleğe yükler ve MySQL veritabanına 40 ila 80 arasında SQL sorgusu atar.
- Kritik Render Blokajı: Sayfa oluşturulurken 15-20 farklı eklentinin ürettiği harici CSS dosyaları ve onlarca JavaScript kütüphanesi (jQuery, animasyon motorları, analiz scriptleri) sayfanın görselleşmesini engeller.
- Bant Genişliği ve Donanım Yükü: Ziyaretçinin akıllı telefonuna 2 MB ila 5 MB arasında sıkıştırılmamış veri pompalanır; mobil cihazın işlemcisi bu devasa kodu derlemek için saniyelerce donar.
Sonuç olarak potansiyel müşteriniz sayfanın açılmasını beklerken beyaz ekrana bakar, hemen çıkma oranı (Bounce Rate) %60’ın üzerine fırlar ve Google algoritması siteyi arama sonuçlarında alt sıralara iter.
Modern tek sayfa uygulamaları (Single Page Application - SPA) ve ağır SSR framework’leri (React, Next.js) ise bu sorunu çözmek yerine başka bir krize yol açar: Aşırı Hidrasyon (Hydration Overhead). Sayfadaki statik bir hakkımızda yazısı için bile yüz binlerce satırlık React çekirdeği tarayıcıya indirilip çalıştırılmak zorundadır.
Astro Adalar (Islands) Mimarisi: Varsayılan Olarak Sıfır JavaScript
Astro, modern web mühendisliğinde bir paradigma değişimi yaratmıştır: “Varsayılan Olarak Sıfır JavaScript (Zero-JS by Default)”.
Astro ile derlenen bir sayfada, kodunuz ister React, Vue, Svelte isterse saf Astro bileşenleriyle yazılmış olsun, derleme aşamasında tüm JavaScript kodu sunucuda soyulur ve tarayıcıya yalnızca son derece saf, optimize edilmiş HTML ve CSS teslim edilir.
Kademeli ve Seçici Hidrasyon (Selective Hydration)
Bir kurumsal web sayfasının yaklaşık %95’i (başlıklar, görseller, ürün listeleri, teknik tablolar, iletişim adresleri) tamamen statiktir ve etkileşim için JavaScript’e ihtiyaç duymaz. Yalnızca mobil menü, dinamik teklif hesaplayıcı veya etkileşimli harita gibi küçük parçalar istemci tarafı mantık gerektirir.
Astro, bu etkileşimli parçaları birer “Ada (Island)” olarak izole eder ve ne zaman çalışacaklarını hassas yönergelerle denetler:
client:load: Önceliği en yüksek ada bileşenleridir. Sayfa yüklenir yüklenmez derhal hidrate edilir (örn. kritik bir üst menü).client:idle: Sayfanın ana HTML ve CSS render’ı tamamlandıktan ve tarayıcı boşta (idle) kaldıktan sonra arka planda yüklenir.client:visible: İlgili bileşen kullanıcının ekranına (viewport) kaydırılana kadar tarayıcıya tek bir bayt JS indirilmez (örn. sayfanın en altındaki teklif formu).client:media: Yalnızca belirli bir ekran boyutu eşleştiğinde çalışır (örn. yalnızca mobilde çalışan menü çekmecesi).
Bu mimari sayesinde tarayıcının ana işlem iş parçacığı (Main Thread) asla kilitlenmez, bellek tüketimi minimumda kalır ve sayfa tıklamalara ışık hızında yanıt verir.
Google Core Web Vitals Metriklerinde 100/100 Skorun Formülü
Google, 2021 yılından bu yana arama sıralamalarında kullanıcı deneyimini doğrudan ölçen Core Web Vitals (Temel Web Göstergeleri) metriklerini kritik bir sıralama faktörü olarak kullanmaktadır. Astro mimarisi bu metriklerin tamamında yeşil bölgeyi garanti eder.
1. LCP (Largest Contentful Paint) — En Büyük İçerikli Boyama
Sayfanın en büyük görsel veya metin bloğunun ekrana çizilme süresidir. Google standardı 2.5 saniyenin altıdır.
- Geleneksel CMS: PHP/MySQL beklemesi + ağır render blokajı nedeniyle ortalama 3.8s – 6.5s.
- Maysa Astro Çözümü: Kritik fontlar önceden yüklenir (
preload), kritik CSS satır içine gömülür, görsel WebP olarak responsivesrcsetile sunulur vefetchpriority="high"etiketiyle tarayıcıya önceliklendirilir. Sonuç: 0.4s – 0.7s.
2. INP (Interaction to Next Paint) — Etkileşim Gecikmesi
Kullanıcı bir butona bastığında, menüyü açtığında veya form alanına tıkladığında ekranın güncellenmesi için geçen süredir. Google standardı 200 ms altıdır.
- Ağır SPA / WordPress: Tarayıcı megabaytlarca JavaScript’i derlerken ana thread kilitlenir; tıklamalar 300ms – 700ms gecikir.
- Maysa Astro Çözümü: Sayfada çalışan gereksiz hiçbir JS döngüsü bulunmaz; etkileşim gecikmesi 10ms – 25ms aralığında gerçekleşir.
3. CLS (Cumulative Layout Shift) — Kümülatif Düzen Kayması
Sayfa yüklenirken metinlerin, butonların veya görsellerin aniden aşağı-yukarı zıplamasını ölçer. Google standardı 0.1’in altıdır.
- Kötü Kurgulanmış Siteler: Boyutları belirtilmemiş reklamlar ve görseller yüzünden kullanıcı tam butona tıklarken ekran kayar (CLS skoru 0.25 – 0.60).
- Maysa Astro Çözümü: Her görselin ve bileşenin
width,heightveaspect-ratiooranları CSS token mimarisinde önceden rezerve edilir. CLS değeri kesin olarak 0.00’dır.
4. TTFB (Time to First Byte) — İlk Bayt Varış Süresi
Kullanıcının tarayıcısından çıkan isteğin sunucuya ulaşıp ilk HTML baytını geri getirmesi süresidir.
- Dinamik Veritabanı: Her istekte SQL sorgusu çalıştıran sunucu 800ms – 2500ms gecikir.
- Statik CDN Dağıtımı: Astro ile üretilen statik HTML dosyaları doğrudan küresel Edge CDN (Cloudflare veya Nginx önbelleği) üzerinden 20ms – 60ms içinde servis edilir.
Mimari ve Performans Kıyaslama Matrisi
Aşağıdaki teknik matris, Maysa Yazılım’ın üretim ortamında test ettiği gerçek telemetri verilerine dayanmaktadır:
| Teknik Parametre | WordPress / Monolitik CMS | Next.js / Ağır SPA | Maysa Astro 5.x SSG |
|---|---|---|---|
| İstemciye İnen JS Boyutu | 800 KB – 3.5 MB | 450 KB – 1.8 MB | 0 KB – 35 KB (Yalnızca adalar) |
| İlk İçerikli Boyama (FCP) | 2.2s – 4.5s | 1.6s – 3.0s | 0.25s – 0.45s (Anlık) |
| En Büyük Zengin Boyama (LCP) | 3.8s – 7.2s | 2.4s – 4.5s | 0.5s – 0.8s (Mükemmel Yeşil) |
| Kümülatif Düzen Kayması (CLS) | 0.15 – 0.45 | 0.05 – 0.15 | 0.00 (Tam Sabit Grid) |
| Etkileşim Yanıt Süresi (INP) | 250ms – 650ms | 180ms – 400ms | < 20ms (Gecikmesiz) |
| Lighthouse Performans Skoru | 35 – 65 / 100 | 60 – 82 / 100 | 98 – 100 / 100 (Kusursuz) |
| Veritabanı Güvenlik Riski | Yüksek (SQL Injection riski) | Orta (API Endpoint saldırıları) | Sıfır (Veritabanı dışa kapalı) |
| Sunucu CPU / Bellek Tüketimi | Yüksek (PHP worker tüketimi) | Orta (Node.js runtime) | Minimum (Statik dosya okuma) |
Otomasyonlu Varlık ve Görsel Optimizasyon Boru Hattı
Bir web sitesinin yüklenme ağırlığının %70’inden fazlasını görseller ve yazı tipleri oluşturur. Maysa Yazılım olarak Astro projelerimizde tam otomatik bir derleme hattı (build pipeline) işletiyoruz:
1. Çoklu Boyutlu WebP ve AVIF Varyantları
Yüklenen her ham görsel (JPEG veya PNG), sharp kütüphanesi ve otomatik optimizasyon scriptlerimiz (varlik-uret.mjs) aracılığıyla mobil (480px), tablet (800px) ve masaüstü (1376px) olmak üzere 3 farklı çözünürlükte WebP formatına dönüştürülür. Tarayıcı, ziyaretçinin ekran genişliğine en uygun görseli srcset üzerinden indirir; 4K ekrandaki görsel mobildeki kullanıcının kotasını harcamaz.
2. Yerel Yazı Tipi Alt Kümeleme (Font Subsetting)
Google Fonts gibi harici sunuculardan font çekmek, sayfa açılışında fazladan 2 ayrı DNS sorgusu, 2 TLS el sıkışması ve 150 ms’lik render blokajı yaratır. Astro mimarimizde:
- Türkçe karakter setine özel Inter ve Outfit fontları (
subset-font) ile yalnızca kullanılan harfleri içerecek şekilde kırpılır. - Font boyutu 180 KB’tan 18 KB’a düşürülür.
- WOFF2 formatında doğrudan kendi sunucumuzdan
preloadile servis edilir; sıfır dış bağımlılık sağlanır.
3. CSS Tasarım Belirteçleri (CSS Variable Tokens)
Ağır CSS framework’lerinin (örneğin devasa Tailwind derlemeleri veya Bootstrap) kullanılmayan binlerce satırlık çöp sınıfları yerine, saf CSS değişkenleri (tokens.css, bilesenler.css) kullanılır. Tüm stil dosyası sıkıştırıldığında 20 KB’ın altında kalır ve tarayıcı tarafından ilk anda işlenir.
Güvenlik, Siber Savunma ve Sıfır Bakım Avantajı (SSG vs Monolitik)
Astro mimarisinin sağladığı hız avantajı kadar kritik bir diğer kazanım da üst düzey siber güvenliktir:
- Sıfır SQL Injection: Ziyaretçilerin karşılaştığı canlı sunucuda çalışan bir veritabanı (MySQL/PostgreSQL) bulunmaz. Saldırganların veritabanına sızabileceği bir sorgu kapısı yoktur.
- Eklenti Zafiyetlerine Son: WordPress sitelerinin %90’ından fazlası üçüncü parti eklentilerdeki (plugin) güvenlik açıkları yüzünden hacklenir. Astro’da eklenti kavramı derleme zamanlıdır; canlı sunucuda çalışan hiçbir zayıf PHP scripti barınmaz.
- Katı İçerik Güvenlik Politikası (Strict CSP): HTML şablonlarımızda hiçbir satır içi stil (
style="") veya kontrolsüz script (eval()) kullanılmaz. Sunucu HTTP başlıklarında sıkı CSP, HSTS ve X-Frame-Options kuralları uygulanır.
Detaylı zafiyet analizleri ve siber güvenlik denetimlerimiz hakkında bilgi almak için Sızma Testi ve Zafiyet Analizi (Pentest) sayfamızı inceleyebilirsiniz.
Maysa Yazılım’ın Kurumsal Web Geliştirme Metodolojisi
Kocaeli, Gebze ve organize sanayi bölgelerinde (GOSB, TOSB, İMES) faaliyet gösteren üretim tesisleri ve kurumsal şirketler için web sitesi yalnızca bir tanıtım broşürü değil; müşteri kazandıran, kurumsal otoriteyi temsil eden ve arama motorlarında ilk sırada çıkan stratejik bir dijital varlıktır.
Maysa Yazılım olarak sunduğumuz Kurumsal Web Tasarım ve SEO Çözümleri kapsamında:
- %100 Yeşil PageSpeed Taahhüdü: Yayına aldığımız her projeyi Chrome Lighthouse ve PageSpeed testlerinde 95-100 puan garantisiyle teslim ediyoruz.
- Kusursuz Semantik Yapı ve Schema.org: Makale, organizasyon, yerel işletme (LocalBusiness), ürün ve hizmet yapısal verilerini tam uyumlu JSON-LD formatında entegre ediyoruz.
- Dönüşüm Odaklı Kullanıcı Deneyimi: Hızlı açılan sayfalar, anında çalışan teklif formları ve kurumsal kimliğinizi yansıtan modern UI/UX standartları kuruyoruz.
İşletmenizin dijital vitrinini modern Astro mimarisiyle yeniden inşa etmek ve arama motorlarında zirveye yerleşmek için hemen Teklif Alın veya mühendislik ekibimizle iletişime geçin.
Sıkça Sorulan Sorular
Statik site (SSG) dinamik formları ve verileri destekler mi?
Evet. Astro Adalar mimarisi sayesinde sayfanın gövdesi statik HTML olarak derlenirken; iletişim formları, canlı fiyat teklifi hesaplayıcılar veya arama motoru modülleri mikro API uç noktaları (fetch / REST API) üzerinden asenkron olarak arka plandaki güvenli servislerle haberleşir.
WordPress altyapısından Astro mimarisine geçiş zor mudur?
Mevcut içerikleriniz, blog yazılarınız ve SEO URL bağlantı yapınız (301 yönlendirme kuralları ve kök seviye slug mimarisiyle) hiçbir sıralama kaybı yaşamadan Astro Content Collections yapısına taşınabilir. Sayfa açılış hızınız 5 katına çıkarken sunucu barındırma maliyetleriniz önemli ölçüde düşer.
Sayfa hızı Google reklam maliyetlerini (Google Ads Kalite Puanı) etkiler mi?
Evet, doğrudan etkiler. Google Ads algoritması Açılış Sayfası Deneyimi (Landing Page Experience) metriğini doğrudan sayfa yüklenme hızına ve mobil uyumuna göre puanlar. 100 PageSpeed skoru olan hızlı bir sayfa, aynı reklam bütçesiyle çok daha düşük tıklama başı maliyetle (TBM) daha fazla dönüşüm elde etmenizi sağlar.