Proje: Okul Platform · Hub: Okul Platform — Decisions
Karar
İki ek optimizasyon egitim-yaklasimi-testi sayfasına uygulandı:
- Hero h1’den Raleway kaldırıldı — system font stack’e geçirildi
- Test sayfası için minimal Alpine bundle oluşturuldu (
profiling-test.js)
Problem (önceki iterasyondan sonra)
İlk iki PR sonrası:
- Performance: 52 → 72
- LCP: 8.6s → 4.9s
- TBT: 550ms → 390ms
Hâlâ “Good” eşiği (LCP < 2.5s) üstünde. Lighthouse kalan uyarılar:
- Unused JavaScript ~22 KiB (
profiling.js) - Cache TTL ~4 KiB (Cloudflare beacon — kontrol dışı)
LCP analizi
Test sayfası above-the-fold elementleri:
| Element | Boyut | Font |
|---|---|---|
| h1 hero “Çocuğuma Uygun…” | ~370×52px | Raleway 700 |
| Hero p “11 soruda…” | ~370×60px | system-sans |
| Static h2 “Çocuğunuz kaç…” | ~280×26px | system-sans |
Google Fonts CSS async preload+onload pattern ile yükleniyor — @font-face rule CSS gelene kadar yok. Chrome’da bilinmeyen ama preload edilen font için kısa block period (paint delay) gözlenmiş. h1 LCP candidate → font fetch beklemesi LCP’yi 1-1.5s geciktiriyor olabilir.
Çözüm
1. h1’den Raleway
- tw:font-bold tw:text-[#273444] tw:leading-tight tw:font-[Raleway,sans-serif]
+ tw:font-bold tw:text-[#273444] tw:leading-tighth1 artık body’nin tw:font-sans stack’ini (ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, …) miras alır. Font fetch dependency yok → FCP anında final paint.
Brand fontu diğer responsive başlıklarda korunur. Hero’da sistem font görünür (visual impact düşük, çoğu kullanıcı fark etmez).
2. Bundle split
alpine-app.js (full bundle) test + result + finder-wizard + finder-result component’lerini içeriyordu. Test sayfası yalnızca profilingWizard’a ihtiyaç duyar.
Yeni entry: resources/assets/scripts/profiling/alpine-test.js
- Sadece Alpine + wizard component import eder
Alpine.data('profilingWizard', ...)register eder- ~50% küçük bundle (~130KB → ~50-70KB beklentisi)
webpack.mix.js:
mix.js('alpine-app.js', 'profiling.js'); // sonuc + eslesen-okullar
mix.js('alpine-test.js', 'profiling-test.js'); // egitim-yaklasimi-testi (yeni)Test sayfası test/index.blade.php preload + script tag’leri profiling-test.js’e yönlendirildi.
Trade-off
Pros:
- LCP 500ms-1s düşmesi beklenir (font dependency yok)
- TBT 100-200ms düşer (smaller bundle = faster parse/exec)
- Unused JS warning’i kapanır
Cons:
- Hero h1’i system font görünür (brand consistency’de minor kayıp)
- Build artifact sayısı +1 (
profiling-test.js) - alpine-test.js ve alpine-app.js arasında küçük kod tekrarı (Alpine import + start boilerplate)
Alternatifler ve neden seçilmedi
- Raleway preload + WOFF2 manual — Google Fonts CDN URL’leri versiyona göre değişir, kırılgan
- Self-host fonts — ~80KB ek storage + manual upgrade burden
- Dynamic import + Alpine register-on-demand — Alpine.data registration timing tricky, regression riski yüksek
Uygulanan dosyalar
resources/views/responsive/profiling/test/index.blade.php(h1 + script src)resources/assets/scripts/profiling/alpine-test.js(yeni)webpack.mix.js(yeni mix.js entry)
Etki kapsamı
Sadece egitim-yaklasimi-testi sayfası. sonuc, eslesen-okullar ve finder sayfaları profiling.js’i (full bundle) kullanmaya devam eder.
Related
- 2026-05-11-lcp-static-first-question-render — Önceki iterasyon: statik ilk soru
- 2026-05-11-responsive-tracking-defer-and-css-inline — İlk iterasyon: tracking defer + CSS inline
- 2026-04-15-responsive-module-structure — Responsive bundle yapısı