Yapay Zeka Ajanın Core Web Vitals Süper Güçleri Kazandı
Claude Code'u CoreDash field data'na bağla. Milyonlarca sayfa yüklemesi arasından en kötü darboğazını bulur, Chrome'da kök nedeni izler ve çözümü yazar. Ajan tabanlı web performansı bir rapor değil, değişmesi gereken gerçek kod satırıdır.
2 Dakikada Kur Ücretsiz CoreDash Denemeni Başlat »Trusted by market leaders · Client results
Yapay Zeka Performans Araçlarının Veri Sorunu Var
Çoğu yapay zeka ajanı Lighthouse için optimize eder. Google'ın sıralamalarda kullanmadığı, simüle edilmiş bir cihazdaki sentetik bir skor. Kullanışlı bir web performansı yapay zeka ajanı, Google ile aynı veriden başlar: ucuz telefonlardaki gerçek kullanıcılar, kesintili bağlantılar ve geliştirici makinenin hiç görmediği kıtalar.
Lighthouse Senin Sıralama Sinyalin Değil
Google, sıralamayı 28 günlük gerçek Chrome kullanıcılarından gelen CrUX field data'sına göre belirler. Mükemmel bir Lighthouse skoru ve başarısız bir field data skoru her zaman yaşanır. Mobil sitelerin %52'si field data'da en az bir Core Web Vital'da başarısız oluyor.
Kör Ajanlar Kör Düzeltmeler Yapar
Gerçek kullanıcı verisi olmadan, bir yapay zeka ajanı hangi sayfanın yavaş olduğunu, hangi elementin darboğaz yarattığını veya yaptığı düzeltmenin işe yarayıp yaramadığını bilemez. Bir simülasyonu optimize eder ve işi bitti sayar. Gerçek kullanıcıların aynı fikirde değil.
Manuel İnceleme Saatler Alır
Veriyi segmente et. Hipotez kur. Trace çalıştır. Doğrula. Düzeltmeyi tasarla. Kıdemli bir performans mühendisi sorun başına 2 ila 4 saat harcar. Bunu sitendeki her yavaş sayfayla çarp.
INP lab'da asla simüle edilemez Interaction to Next Paint, gerçek kullanıcıların sayfanla nasıl etkileşime girdiğini ölçer. Hiçbir sentetik araç gerçek kullanıcı davranışını taklit edemez: nereye dokunduklarını, ne kadar hızlı kaydırdıklarını, hangi cihazı tuttuklarını. Lighthouse, INP'yi raporlamaz bile. Eğer yapay zeka ajanın Lighthouse çalıştırıyorsa, en kötü etkileşim sorunlarına karşı kördür. Tek kaynak field data'dır.
İki doğruluk kaynağı: Field data tarayıcı kanıtlarıyla buluşuyor
CWV Superpowers, CoreDash gerçek kullanıcı verilerini hedefli Chrome trace'leriyle birleştirir. Field data neyin yavaş olduğunu söyler. Chrome ise nedenini.
CoreDash ajana neyin yavaş olduğunu söyler
CoreDash, her gerçek kullanıcının her sayfa yüklemesini takip eder. Her metrik, soruna yol açan tam öğeyle ilişkilendirilir. Örnekleme yok, limit yok.
CoreDash, div.hero > img.main üzerinde toplam sürenin %52'sini tüketen Load Delay ile 4,2 saniyelik bir LCP raporladığında, ajan tam olarak nereye bakacağını bilir. Bir tahmin değil. Milyonlarca gerçek oturumdan alınan bir ölçüm.
Yetenek 25'ten fazla CoreDash boyutunu sorgular: LCP öğesi, öğe türü, öncelik durumu, aşama kırılımı, INP etkileşim hedefi, LOAF script'leri, CLS kayma öğesi, cihaz türü, ziyaretçi türü, ağ hızı, 7 günlük trendler.
Chrome ajana neden yavaş olduğunu söyler
CWV Superpowers sayfayı mobil emülasyonla ziyaret eder: Hızlı 3G, 4x CPU throttling. Sadece CoreDash'in belirlediği darboğaz aşamasını trace eder.
Darboğaz Load Delay mi? Ajan, keşif boşlukları için network waterfall'unu inceler. Render Delay mi? Engelleyici script'lere ve font yükleme gecikmelerine bakar.
Sonuç: Film şeridi ekran görüntüleri, network waterfall'u ve field data'nın ortaya koyduğu kök nedeni açıklayan hedefli kanıtlar.
Mutlak eşikler değil, oransal akıl yürütme
Lighthouse sana "Render Delay 350 ms" der. Sorun bu mu? Bilemezsin. CWV Superpowers darboğazı, toplam sürenin en büyük yüzdesini tüketen aşama olarak tanımlar.
INP 350 ms. Input Delay 70 ms (%20), Processing 80 ms (%23), Presentation 200 ms (%57). Tek başına 200 ms kulağa iyi gelse de darboğaz Presentation'dır. Bunu düzeltmek fark yaratır. Input Delay'i optimize etmek ise neredeyse hiç etki etmez.
Bu, performans çalışmalarındaki en yaygın hatayı önler: Yanlış şeyi düzeltmek.
Beş adım: "Bir şeyler yavaş" durumundan kod düzeltmesine
Bir soru sor. Beş adım sonra elinde gerçek kullanıcı kanıtlarıyla desteklenen bir düzeltme olacak.
1. Keşif
En kötü sayfaları ve metrikleri bulmak için CoreDash verilerini tarar. Kötü derecelendirmeleri, mobil cihazları, yüksek trafikli sayfaları ve uzun bir kötü kuyruğu gizleyen p75 skorlarını önceliklendirir.
2. Teşhis
Metriği aşamalara böler. LCP: TTFB, Yükleme Gecikmesi, Yükleme Süresi, Oluşturma Gecikmesi. INP: Girdi Gecikmesi, İşleme, Sunum. Darboğazı yüzde oranıyla adlandırır.
3. Chrome Trace
Sayfayı mobil emülasyonla ziyaret eder. Yalnızca 2. adımdaki darboğaz aşamasını izler. Ağ şelalesini, film şeridini ve engelleyici kaynak kanıtlarını yakalar.
4. Kök Neden
Her iki kanıt kaynağını tek bir ifadede birleştirir: öğe, neden, CoreDash metrikleri ve Chrome'un doğruladığı durum. Belirsizliğe yer yok.
5. Düzelt veya Raporla
Seçim senin. Dosya, satır, öğe ve öncesi/sonrası bilgileriyle kod düzeltmesini uygula. Grafikler ve kanıtlar içeren bağımsız bir HTML raporu oluştur. Veya her ikisini birden yap.
25+ boyut: field data'nın kapsadığı her açı
Bunlar, agent'ın sorguladığı gerçek CoreDash boyutları. Özet değil. Resmin tamamı.
LCP (Largest Contentful Paint)
LCP elemanı Eleman türü Öncelik durumu TTFB aşaması Yükleme gecikmesi Yükleme süresi Render gecikmesiINP (Interaction to Next Paint)
INP hedefi Giriş gecikmesi İşleme Sunum LOAF script'leri Yükleme durumuCLS (Cumulative Layout Shift)
Kayan eleman Kayma nedeni Kayma zamanlamasıSegmentler
Cihaz türü Ülke Tarayıcı İşletim sistemi Bağlantı Ziyaretçi türü Sayfa yoluTrendler
7 günlük delta 28 günlük baseline Regresyon tespitiTeşhis: Her Core Web Vital için faz düzeyinde kırılım
Sadece skorlar değil. CoreDash'in gerçek kullanıcı ilişkilendirmesiyle her metrik fazlara ayrılıyor.
Yapay zeka ile LCP'yi düzelt: Largest Contentful Paint teşhisi
4 fazlı kırılım: TTFB, Yüklenme Gecikmesi, Yüklenme Süresi, Render Gecikmesi. Toplam sürenin en büyük payını hangi fazın tükettiğini belirler.
Element ilişkilendirmesi: Tam LCP elementi, türü (görsel, metin, arka plan görseli, video) ve öncelik durumu (fetchpriority, lazy loading).
Tipik düzeltmeler: preload ipucu ekle, hero alanından lazy loading'i kaldır, görsel formatını optimize et, render blocking script'i düzelt.
Yapay zeka ile INP'yi düzelt: Interaction to Next Paint teşhisi
3 fazlı kırılım: Girdi Gecikmesi, İşleme, Sunum. Laboratuvarda simüle edemeyeceğin tek metrik. Tek kaynak field data.
Script ilişkilendirmesi: Long Animation Frames (LOAF) tam JavaScript dosyasını ve süresini belirtir. Ayrıca etkileşimin gerçekleştiği andaki sayfa yüklenme durumu.
Tipik düzeltmeler: main thread'e yield et, değerlendirmeyi ertele, olay işleyicilerini böl, büyük DOM'lar için content-visibility.
CLS: Cumulative Layout Shift
5 neden kalıbı: boyutu belirtilmemiş görseller, font değişimleri, dinamik olarak eklenen içerik, geç yüklenen kaynaklar, layout özelliklerinde CSS animasyonları.
Boyutlar arası: nedeni daraltmak için mobil vs masaüstü, yeni vs tekrar gelen ziyaretçiler, hızlı vs yavaş ağları karşılaştırır.
Tipik düzeltmeler: width/height ekle, font-display: optional, min-height alanı ayır, top/left yerine transform kullan.
Kök Neden Açıklaması Nasıl Görünür
"Görsellerini optimize etmeyi düşün" değil. Bu gerçek çıktı. İnceleyip birleştirmek için yeterince spesifik.
Kök neden:
/product/running-shoes-42 adresindeki LCP görseli div.hero-banner > img.product-main, preload ipucu eksik olduğu ve fetchpriority="high" tanımlanmadığı için 1.980 ms geç keşfediliyor.
CoreDash kanıtı:
Mobilde LCP 3.820 ms (kötü), p75. Yükleme Gecikmesi 1.980 ms (%52) ile darboğaz durumunda. Öncelik durumu: 3 (preload edilmemiş). Trend: 7 günde +340 ms kötüleşme.
Chrome kanıtı:
Ağ waterfall grafiği, HTML'in ilk baytı ile görsel isteği arasında 1.940 ms boşluk gösteriyor. Görsel yalnızca CSS'te referans verilmiş, preload tarayıcısı tarafından görülemiyor.
Çözüm:
templates/product.html dosyasının 12. satırına <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> ekle. 47. satırdaki img elementine fetchpriority="high" tanımla.
Jenerik yapay zeka tavsiyesi:
"LCP görseline fetchpriority eklemeyi düşün ve kritik kaynakların doğru şekilde preload edildiğinden emin ol."
CWV Süper Güçleri:
Element: div.hero-banner > img.product-main
Dosya: templates/product.html, 47. satır
Kanıt: LCP süresinin %52'si Yükleme Gecikmesi'nde (CoreDash p75). 1.940 ms keşif boşluğu (Chrome waterfall).
Çözüm: Öncesi/sonrası diff'i ile 2 satırlık kod değişikliği.
Karşılaştır: CWV Superpowers ne durumda
Farklı araçlar farklı sorunları çözer. İşte her birinin gerçekte ne yaptığı.
| Yetenek | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Veri kaynağı | Gerçek kullanıcılar (28 günlük field data) | Tek bir lab oturumu | Simüle edilmiş tek bir yükleme |
| INP ölçümü | ✓ Gerçek etkileşimler | ✗ Gerçek kullanıcı yok | ✗ Ölçülmüyor |
| Aşama kırılımı | ✓ LCP, INP, CLS aşamaları | ~ Manuel analiz | ✗ Sadece skor |
| Element ilişkilendirme | ✓ Tam element + öncelik | ~ Nereye bakacağını biliyorsan | ~ Genel öneriler |
| Oransal analiz | ✓ % bazında darboğaz | ✗ Mutlak değerler | ✗ Mutlak değerler |
| Segment karşılaştırma | ✓ Cihaz, ülke, tarayıcı | ✗ Tek konfigürasyon | ✗ Tek konfigürasyon |
| Trend tespiti | ✓ 7 günlük değişim | ✗ Anlık | ✗ Anlık |
| Chrome tracing | ✓ Aşama bazlı | ✓ Tam erişim | ✗ Tarayıcı yok |
| Kod düzeltmeleri | ✓ Dosya + satır + diff | ~ Ajana bağlı | ~ Genel tavsiye |
Not: Chrome DevTools MCP tamamlayıcıdır. CWV Superpowers, field data darboğazı tespit ettikten sonra bu aracı hedefli tracing için kullanır. Birlikte en iyi şekilde çalışırlar.
Raporlar: Slack'e at, Jira'ya ekle
Kendi kendine yeten HTML. Bağımlılık yok. Derleme adımı yok. Her şey tek bir dosyada gömülü.
Tam Rapor (Chrome ile)
Renk kodlu metrik kartları, aşama kırılım grafikleri, önemli anlardaki film şeridi ekran görüntüleri (ilk boyama, LCP, yüklendi), ağ şelalesi SVG'si, kök neden analizi ve öncesi/sonrası kodleriyle önerilen düzeltme.
Sadece RUM Raporu
Aynı metrik kartları ve aşama kırılımı, artı element ilişkilendirmesi ve kök neden analizi. Film şeridi veya şelale grafiği yok ama teşhis kalitesi aynı; çünkü field data tek doğruluk kaynağı.
Her MCP istemcisiyle çalışır
Claude Code: Otomatik iş akışına sahip tam skill. Keşif, teşhis, Chrome tracing, kod düzeltmeleri ve raporlar. Önerilir.
Cursor: CoreDash MCP ile eklenti kurulumu. Editöründe tam teşhis ve kod düzeltmeleri.
VS Code, Windsurf, Gemini CLI: HTTP MCP sunucularını destekleyen her istemci CoreDash'e bağlanır. Aynı field data, aynı ilişkilendirme.
Client Success
Don't just take my word for it
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
Head of Digital, Rituals
"We used to break performance every other sprint. He set up budgets in our pipeline. Haven't had a regression since."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
VP Product, Expedia Group
"We had 80+ third-party scripts and were failing CWV on every major property. Arjen got us passing without touching our ad revenue."
Engineering Manager, Zalando
"Every other audit we've had gave us a list of problems. This one told us exactly what to fix first and why."
Head of Platform, Adevinta
45% reduction in blocking time across 15 marketplaces. INP from 440ms to 64ms on Fotocasa alone. Google wrote up the results on web.dev.
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
2 Dakikada Çalıştır
Terminalinde otomatik Core Web Vitals teşhisi. Veri akışı olan bir CoreDash hesabına ihtiyacın var. Ücretsiz paket iş görür.
Claude Code
# 1. CoreDash MCP sunucusunu ekle (tarayıcıdan giriş, API anahtarı gerekmez) claude mcp add --transport http coredash https://app.coredash.app/api/mcp # 2. CWV Superpowers'ı kur /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpowers # 3. Chrome ile başlat (isteğe bağlı, önerilen) claude --chrome # 4. Başla Find my biggest CWV issue and fix it.
İlk bağlantıda /mcp komutunu çalıştır, coredash'i seç ve Authenticate'i seç. Tarayıcın CoreDash giriş sayfasını açar. Bir proje seçip onaylarsın. Claude Code otomatik yenilenen (1 saatlik erişim, 30 günlük yenileme) ve iptal edilebilir, kısa ömürlü bir OAuth token'ı saklar. Yapıştırılacak bir anahtar yok.
Headless veya CI kullanımı için API anahtarı mı tercih ediyorsun? CoreDash → Project Settings → API Keys (MCP) altından oluşturduğun anahtarla komutuna --header "Authorization: Bearer cdk_YOUR_API_KEY" ekle. Yalnızca bir kez gösterilir. SHA-256 hash'i olarak saklanır. Salt okunurdur.
Cursor
# Eklentiyi kur
/plugin-add cwv-superpowers
CoreDash'i .cursor/mcp.json dosyasına ekle:
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
}
Diğer MCP İstemcileri
Endpoint: https://app.coredash.app/api/mcp
Header: Authorization: Bearer cdk_YOUR_API_KEY
VS Code (Copilot agent modu), Windsurf, Gemini CLI, Claude Desktop ve tüm HTTP MCP istemcileriyle çalışır. Her agent için tek bir MCP web performans endpoint'i.
Sıkça Sorulan Sorular
CWV Superpowers kullanmak için Chrome'un çalışması gerekir mi?
Hayır. Chrome tracing isteğe bağlıdır. O olmadan da sadece CoreDash verilerine dayanarak tam field data teşhisi, aşama kırılımları, element atıfları ve kod düzeltme önerileri alırsın. Chrome ise film şeridi ekran görüntüleri, network waterfall ve kök nedenin görsel teyidini ekler. Her iki mod da rapor üretir.
Bunun AI agent'ında Lighthouse çalıştırmaktan farkı ne?
Lighthouse, makinende tek bir sentetik yükleme çalıştırır. CWV Superpowers ise CoreDash'ten gelen 28 günlük gerçek kullanıcı verilerini kullanır: gerçek cihazlar, gerçek ağlar, gerçek etkileşimler. Gerçek kullanıcı dokunmalarından INP'yi ölçer (Lighthouse bunu yapamaz). Segmentleri karşılaştırır (mobil vs masaüstü, Hindistan vs ABD). Ve sadece mutlak skorları değil, darboğaz aşamasını bulmak için oransal akıl yürütmeyi kullanır.
Hangi AI coding agent'ları destekleniyor?
MCP (Model Context Protocol) sunucularını destekleyen her web performans AI coding agent'ı. Claude Code'un otomatik 5 adımlı iş akışına sahip özel bir skill'i vardır. Cursor, VS Code (Copilot agent modu), Windsurf, Gemini CLI ve Claude Desktop, CoreDash HTTP MCP endpoint'i üzerinden bağlanır. field data ve atıflar tüm istemcilerde aynıdır.
CoreDash ücretsiz mi?
CoreDash'in CWV Superpowers ile çalışan ücretsiz bir katmanı vardır. Sitenden veri akışı olması gerekir (CoreDash script etiketini ekle). Ücretsiz katmanda örnekleme ve sayfa görüntüleme limiti yoktur. MCP erişimi için API anahtarları tüm planlarda mevcuttur.
Bunu müşteri siteleri için kullanabilir miyim?
Evet. Her CoreDash projesi için sınırsız sayıda özel MVP API Anahtarı oluşturabilirsin . Her müşteri sitesine CoreDash ekle, salt okunur bir API anahtarı oluştur ve MCP istemcini yapılandır. Agent sadece o projenin verilerini görür. CWV Superpowers, MIT lisanslıdır; bu yüzden ticari kullanımda hiçbir kısıtlama yoktur.
Açık Kaynak. Bağımlılık Yok.
İnceleyebileceğin ve genişletebileceğin Core Web Vitals otomasyonu. Orkestratör, teşhis modülleri, Chrome tracing mantığı ve rapor şablonlarının hepsi GitHub'da. Nasıl çalıştığını oku. Fork et. Genişlet. Katkıda bulun.
Ücretsiz Denemeni Başlat GitHub'da Görüntüle