Opus Growth sunucumdaki sitem
[site adresi] (sunucu
[sunucu adı], ek siteyse
[site anahtarı]) site kitiyle kuruldu ve mobilde yavaş. Kit Tailwind'i tarayıcıda derleyen Play CDN ile, fontları Fontshare'den, hareket kütüphanelerini jsDelivr'den yüklüyor ve menüyü JavaScript ile basıyor. Sitenin görünümünü değiştirmeden bunları kendi sunucumda barındırılan, derlenmiş dosyalara çevir. Hedef: sayfa yüklenirken site kendi alan adı dışına tek bir istek bile göndermesin.
1. Başlangıç ölçümü. site_versions ile şu anki sürümü not et. Ana sayfa ve
[en ağır sayfa] için core_web_vitals'ı mobile ve desktop, resources=true ile çalıştır. Performans puanını, LCP, CLS, toplam istek sayısını, toplam boyutu ve kendi alan adın dışına giden istekleri tabloya yaz. site_list_files ile HTML dosyalarını listele ve her sayfadaki `<script>` ve `<link>` etiketlerini çıkar.
2. Planı göster ve onayımı bekle. Değişecek ve eklenecek dosyaları tek tek yaz.
3. Tailwind'i derle. Sayfalardaki satır içi `tailwind.config` ayarını `_src/tailwind.config.js` dosyasına taşı; content alanı `
["./*.html", "./**/*.html"]` olsun, sınıf üreten bir JavaScript dosyası kalıyorsa onu da ekle. `_src/input.css` dosyasını `@tailwind base; @tailwind components; @tailwind utilities;` satırları ve ardından assets/app.css içeriğiyle oluştur. site_run_command ile `npx --yes tailwindcss@3 -c _src/tailwind.config.js -i _src/input.css -o assets/site.css --minify` çalıştır. Dosyaya içeriğinin özetinden türetilmiş bir ad ver, örneğin `assets/site.3f9a1c2b.css`, bütün sayfalardaki bağlantıyı güncelle, Play CDN betiğini ve satır içi ayarı sil. HTML'de sınıf değiştiren her düzenlemeden sonra derlemeyi tekrarla, yoksa yeni sınıflar CSS'te olmaz.
4. Fontları kendi sunucunda barındır. Fontshare CSS'ini her aile ve ağırlık için AYRI istekle çek, örneğin `https://api.fontshare.com/v2/css?f[]=satoshi@400&display=swap`; birden fazla aile ya da ağırlık aynı istekte istenince başka ailelerin döndüğünü gördük, bu yüzden dönen font-family adını her seferinde kontrol et. woff2 dosyalarını `assets/fonts/` altına indir, `@font-face` kurallarını `font-display: swap` ile assets/app.css'in başına yaz (design-check özgün tipografiyi orada arar), gövde fontunu ve ilk ekranda büyük başlıkta kullanılan fontu `<link rel="preload" as="font" type="font/woff2" crossorigin>` ile önceden yükle. Fontshare `preconnect` ve stil bağlantılarını sil. Font lisansının kendi sunucunda barındırmaya izin verdiğini kontrol et.
5. Görselleri yeniden üret. Kaynak JPG ve PNG dosyalarını `_src/img/` altına taşı. sharp'ı site klasörünün dışına kur: site_run_command ile `mkdir -p /data/_build && cd /data/_build && npm init -y && npm i sharp` komutunu background=true ile başlat ve site_command_status ile bitişini izle; o klasör yazılamazsa nedenini söyle. Bir node betiğiyle her görselden 480, 800, 1200 ve 1600 piksel genişlikte WebP (kalite 72) ve AVIF (kalite 50) üret. HTML'de her görseli `<picture>` içine al: AVIF için `<source type="image/avif" srcset sizes>`, yedek olarak WebP `<img>` ve onun srcset ile sizes nitelikleri, kaynak görselin gerçek width ve height değerleri. İlk ekrandaki ana görsel `fetchpriority="high"` olsun ve lazy olmasın; diğerleri `loading="lazy" decoding="async"`. sizes değerini görselin gerçekte kapladığı genişliğe göre yaz.
6. Betikleri temizle. Sitede hareket yoksa ya da yalnız `data-reveal` gibi süs amaçlıysa GSAP, ScrollTrigger, SplitText, Lenis, Swiper, motion.js ve `anim` sınıfını ekleyen satır içi betiği tamamen kaldır; app.css'teki Lenis ve anim kurallarını da sil. Hareket gerçekten gerekiyorsa kütüphaneyi `assets/vendor/` altına kopyala, yalnız kullanılan sayfada `defer` ile yükle ve `prefers-reduced-motion` tercihinde içeriğin görünür kaldığını doğrula. Menüyü ve alt bilgiyi `chrome-stamp.mjs` betiğiyle statik HTML'e çevir: site.config.js'i okusun, `<!-- chrome:nav:start -->`, `<!-- chrome:nav:end -->` ve chrome:footer işaretleri arasını yazsın, mobil menüyü `<details>` ile kursun, linkler en az 44 piksel olsun, alt bilgi başlıkları h4 değil paragraf olsun. Sonra chrome.js'i ve site.config.js betik etiketini sayfalardan kaldır; site.config.js yalnız betiklerin okuduğu veri dosyası olarak kalsın.
7. Dış isteği sıfırla. site_run_command ile HTML ve CSS dosyalarında `https://` ile başlayan src ve href değerlerini ara; kendi alan adın, tel:, mailto: ve wa.me linkleri dışında kalan her kaynağı yerele taşı ya da kaldır. Favicon'u `assets/img/` altına koy ve her sayfada bağla, yoksa tarayıcı /favicon.ico ister ve konsolda 404 hatası çıkar.
8. Önbellek başlıkları. site_headers ile mode="list" çalıştır. assets altındaki hiçbir dosya aynı adla değiştirilmeyecekse (CSS adı özetli, görseller değişince yeni ad alıyor) `/assets/* Cache-Control: public, max-age=31536000, immutable` satırını önce confirm=false ile önizle, onayımdan sonra confirm=true ile uygula. HTML için Cache-Control isteme; platform HTML'i zaten no-cache sunar.
9. Kapılar ve yeniden ölçüm. Sırayla `node seo-stamp.mjs`, `node chrome-stamp.mjs`, CSS derlemesi, `node seo-check.mjs`, `node design-check.mjs`, `npx --yes html-validate "**/*.html"` çalıştır ve hepsini sıfır hataya getir. Her sayfayı site_preview ile 360, 390, 768 ve 1440 piksel genişlikte kontrol et. 1. adımdaki core_web_vitals ölçümünü aynı sayfalarda tekrarla; ana sayfa için ayrıca seo_audit'i runs=2 ile çalıştır. Mobil performans 95'in altındaysa nedenini resources=true listesinden bul ve düzelt; en sık neden başlık fontunun preload edilmemesi yüzünden oluşan kaymadır.
Çıktı: önce/sonra tablosu (sayfa, cihaz, performans, LCP, CLS, istek sayısı, toplam KB, dış istek sayısı), eklenen ve silinen dosyaların listesi, site_headers'ta etkin olan satırlar ve bir sonraki düzenlemede hangi komutların hangi sırayla tekrar çalıştırılması gerektiğini anlatan kısa bir not. Bir adım bozulursa site_restore ile not ettiğin sürüme dön ve bana söyle.
