Okul.com.tr — Eğitim Ekosistemi

Responsive layout — tracking defer + CSS inline (Lighthouse fix)

2 dakika okuma süresi

Proje: Okul Platform · Hub: Okul Platform — Decisions

Karar

resources/views/responsive/layouts/master.blade.php ile resources/views/responsive/partials/tracking-head.blade.php yeniden yazıldı:

  1. Render-blocking CSS kaldırıldı — responsive.css (~10KB gzip) ve cookie-consent.css (~864B gzip) <style> olarak <head>’e inline’landı. <link> fetch round-trip’i (~321ms) yok edildi.
  2. Google Fonts non-blocking — <link rel="preload" as="style" onload="...rel='stylesheet'"> pattern’i. ~751ms render-block kazancı.
  3. Tracking deferred to interaction — GTM, Customer.io, Hotjar, FB Pixel <template id="responsive-deferred-tracking"> içine render edilir; scroll/mousemove/mousedown/touchstart/keydown/click event’lerinden ilki tetikleyince veya 8s fallback’te DOM’a yeniden inject edilir.

Neden

PageSpeed Insights mobile profili egitim-yaklasimi-testi sayfasında Performance 52 verdi. Failing audit’ler:

  • render-blocking-insight → 2.39s saving (Google Fonts + responsive.css)
  • bootup-time → 1.3s (GTM/GA/Pixel)
  • unused-javascript → 245KB (3rd-party trackers)
  • total-blocking-time → 550ms

Tracking script’leri kullanıcı interact edene kadar gerekmez; defer attribution’ı bozmaz çünkü:

  • GTM event queue (dataLayer.push) GTM yüklenmeden önce push edilen event’leri yakalar
  • events/base.blade.php (gaEvent/ga4Event) tracking-footer’da kalır, helper’lar her zaman tanımlı
  • 8s fallback bot/idle user’larda da page_view garantiler

Alternatifler ve neden seçilmedi

  • Critical CSS extract + async full — Tailwind v4 JIT ile elle critical extract kırılgan; responsive.css zaten 10KB gzip, tamamını inline daha basit ve etkili
  • Sadece Google Fonts defer — render-blocking 2.39s’in büyük kısmı font CSS, ama responsive.css’in 321ms’i de önemli; ikisini birden çözmek tek geçiş
  • media="print" onload="this.media='all'" hack responsive.css’e — async yükleme sırasında FOUC riski; skeleton state’leri Tailwind utility’lere bağlı
  • Tüm tracking’i kaldır — marketing attribution’ı bozar; defer + 8s fallback dengeli

Etki

Beklenen Lighthouse (mobile, ölçüm sonrası teyit edilecek):

  • LCP: 8.6s → ~3-4s (render-block + tracking defer)
  • TBT: 550ms → ~150ms (3rd-party JS interaction sonrasına kayar)
  • Performance score: 52 → 80+

Trade-off / Risk

  • HTML payload artar ~10KB (responsive.css inline). İlk ziyaret kazanır, repeat ziyaret CSS cache yararını kaybeder. Ama 10KB Brotli sonrası ihmal edilebilir.
  • Tracking 8s’e kadar gecikebilir — bounce metric’leri biraz farklılaşır. GA4 page_view 8s fallback’le yine fire eder.
  • Google Tag Assistant testi preview mode’da interact gerektirir — debug akışı değişir.

Uygulanan dosyalar

  • resources/views/responsive/layouts/master.blade.php
  • resources/views/responsive/partials/tracking-head.blade.php
  • resources/views/responsive/profiling/test/index.blade.php (contrast fix)
  • resources/assets/css/cookie-consent.css (button contrast)

Etki kapsamı

Sadece responsive layout = profiling test/result/finder sayfaları. Desktop (frontend/layouts/master.blade.php) ve mobile (Framework7) etkilenmez. includes/gtm.blade.php vb. orijinal include’lar değişmedi — paylaşımlı.

Grafik Görünümü

Backlinkler