Yapay Zeka Aracınız Core Web Vitals Süper Güçlerine Kavuştu
Claude Code'u CoreDash saha verilerinize bağlayın. Milyonlarca sayfa yüklemesi arasındaki en kötü darboğazınızı bulur, temel nedeni Chrome'da izler ve düzeltmeyi yazar. Aracı web performansı bir rapor değil, değişmesi gereken gerçek kod satırıdır.
2 Dakikada Kurun Ücretsiz CoreDash Denemesine Başlayın »Trusted by market leaders · Client results
Yapay Zeka Performans Araçlarının Bir Veri Problemi Var
Çoğu yapay zeka aracısı Lighthouse için optimizasyon yapar. Google'ın sıralamalar için kullanmadığı simüle edilmiş bir cihazda sentetik bir puan. Faydalı bir web performansı yapay zeka aracısı Google'ın kullandığı aynı veriden başlar: bütçe dostu telefonlardaki gerçek kullanıcılar, kesintili bağlantılar ve geliştirme makinenizin hiç görmediği kıtalar.
Lighthouse Sizin Sıralama Sinyaliniz Değildir
Google, 28 gün boyunca gerçek Chrome kullanıcılarından gelen CrUX saha verilerine göre sıralama yapar. Mükemmel bir Lighthouse puanı ve başarısız bir saha puanı her zaman olur. Mobil sitelerin %52'si sahada en az bir Core Web Vitals'da başarısız oluyor.
Kör Aracılar Kör Düzeltmeler Yapar
Gerçek kullanıcı verisi olmadan, bir yapay zeka aracısı hangi sayfanın yavaş olduğunu, hangi elemanın darboğaz olduğunu veya yaptığı düzeltmenin işe yarayıp yaramadığını bilemez. Bir simülasyonu optimize eder ve işini bitirir. Gerçek kullanıcılarınız ise aynı fikirde değildir.
Manuel İnceleme Saatler Sürer
Veriyi bölümlere ayırın. Hipotez kurun. Bir izleme (trace) çalıştırın. Onaylayın. Düzeltme taslağını oluşturun. Kıdemli bir performans mühendisi her sorun için 2 ila 4 saat harcar. Bunu sitenizdeki her yavaş sayfayla çarpın.
INP bir laboratuvarda asla simüle edilemez Interaction to Next Paint, gerçek kullanıcıların sayfanızla nasıl etkileşime girdiğini ölçer. Hiçbir sentetik araç gerçek kullanıcı davranışını kopyalayamaz: nereye dokundukları, ne kadar hızlı kaydırdıkları, hangi cihazı tuttukları. Lighthouse INP'yi raporlamaz bile. Yapay zeka aracınız Lighthouse çalıştırıyorsa, en kötü etkileşim sorunlarınıza karşı kördür. Tek kaynak saha verisidir.
İki gerçek kaynağı: Saha verisi tarayıcı kanıtıyla buluşuyor
CWV Superpowers, CoreDash gerçek kullanıcı verisini hedeflenmiş Chrome izlemeleriyle birleştirir. Saha verisi ona neyin yavaş olduğunu söyler. Chrome ise ona nedenini söyler.
CoreDash aracıya neyin yavaş olduğunu söyler
CoreDash, her gerçek kullanıcının her sayfa yüklemesini takip eder. Her metrik, soruna neden olan tam elemana atfedilir. Örnekleme yok, sınır yok.
CoreDash, div.hero > img.main üzerinde toplam sürenin %52'sini tüketen Load Delay ile 4.2 saniyelik bir LCP bildirdiğinde, aracı tam olarak nereye bakacağını bilir. Bu bir tahmin değil. Milyonlarca gerçek oturumdan alınmış bir ölçüm.
Yetenek 25'ten fazla CoreDash boyutunu sorgular: LCP elemanı, eleman türü, öncelik durumu, aşama kırılımı, INP etkileşim hedefi, LOAF betikleri, CLS kaydıran eleman, cihaz türü, ziyaretçi türü, ağ hızı, 7 günlük trendler.
Chrome aracıya neden yavaş olduğunu söyler
CWV Superpowers, mobil öykünmeyle sayfayı ziyaret eder: Hızlı 3G, 4x CPU daraltma. Yalnızca CoreDash'in belirlediği darboğaz aşamasını izler.
Darboğaz Load Delay mi? Aracı, keşif boşlukları için ağ şelalesini inceler. Render Delay mi? Engelleyici betikleri ve yazı tipi yükleme gecikmelerini arar.
Sonuç: film şeridi ekran görüntüleri, ağ şelalesi ve saha verinizin ortaya çıkardığı temel nedeni açıklayan hedefli kanıt.
Mutlak eşikler değil, orantısal akıl yürütme
Lighthouse size "Render Delay 350ms" der. Sorun bu mu? Hiçbir fikri yok. CWV Superpowers, darboğazı toplam sürenin en büyük yüzdesini tüketen aşama olarak tanımlar.
INP 350ms. Input Delay 70ms (%20), Processing 80ms (%23), Presentation 200ms (%57). İzolasyonda 200ms iyi gibi görünse de Presentation darboğazdır. Bunu düzeltmek ibreyi hareket ettirir. Input Delay'i optimize etmek neredeyse hiç fark yaratmaz.
Bu, performans çalışmasındaki en yaygın hatayı önler: yanlış şeyi düzeltmek.
Beş adım: "Bir şeyler yavaş"tan kod düzeltmesine
Ona bir soru sorun. Beş adım sonra gerçek kullanıcı kanıtıyla desteklenen bir düzeltmeniz olur.
1. Keşif
En kötü sayfalar ve metrikler için CoreDash verilerinizi tarar. Zayıf derecelendirmelere, mobile, yüksek trafikli sayfalara ve uzun bir zayıf kuyruğu gizleyen p75 puanlarına öncelik verir.
2. Teşhis
Metriği aşamalara böler. LCP: TTFB, Load Delay, Load Time, Render Delay. INP: Input Delay, Processing, Presentation. Yüzdeye göre darboğazı adlandırır.
3. Chrome İzlemesi
Mobil öykünmeyle sayfayı ziyaret eder. Yalnızca 2. adımdaki darboğaz aşamasını izler. Ağ şelalesi, film şeridi ve engelleyici kaynak kanıtlarını yakalar.
4. Temel Neden
Her iki kanıt kaynağını tek bir ifadede birleştirir: eleman, neden, CoreDash metrikleri ve Chrome'un doğruladığı şey. Belirsizlik yok.
5. Düzeltme veya Raporlama
Seçim sizin. Dosya, satır, eleman, öncesi/sonrası ile kod düzeltmesini uygulayın. Grafikler ve kanıtlar içeren kendi kendine yeten bir HTML raporu oluşturun. Veya her ikisini de yapın.
25+ boyut: Saha verilerinizin kapsadığı her açı
Bunlar, aracının sorguladığı gerçek CoreDash boyutlarıdır. Bir özet değil. Resmin tamamı.
LCP (Largest Contentful Paint)
LCP elemanı Eleman türü Öncelik durumu TTFB aşaması Load Delay Load Time Render DelayINP (Interaction to Next Paint)
INP hedefi Input Delay Processing Presentation LOAF betikleri Yükleme durumuCLS (Cumulative Layout Shift)
Kaydıran 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 değişim 28 günlük temel ölçüm Regresyon tespitiTeşhis: Her bir Core Web Vitals için aşama düzeyinde kırılım
Sadece puanlar değil. CoreDash'ten gelen gerçek kullanıcı ilişkilendirmesi kullanılarak aşamalara ayrılmış her metrik.
Yapay Zeka ile LCP'yi Düzelt: Largest Contentful Paint teşhisi
4 aşamalı kırılım: TTFB, Load Delay, Load Time, Render Delay. Hangi aşamanın toplam sürenin en büyük payını tükettiğini belirler.
Eleman ilişkilendirmesi: tam LCP elemanı, türü (image, text, background image, video) ve öncelik durumu (fetchpriority, lazy loading).
Tipik düzeltmeler: preload ipucu ekle, hero'dan lazy loading'i kaldır, resim biçimini optimize et, render engelleyici betiği düzelt.
Yapay Zeka ile INP'yi Düzelt: Interaction to Next Paint teşhisi
3 aşamalı kırılım: Input Delay, Processing, Presentation. Bir laboratuvarda simüle edemeyeceğiniz tek metrik. Tek kaynak saha verisidir.
Betik ilişkilendirmesi: Long Animation Frames (LOAF) tam JavaScript dosyasını ve süresini adlandırır. Artı etkileşim gerçekleştiğindeki sayfa yükleme durumu.
Tipik düzeltmeler: ana iş parçacığına devret (yield), değerlendirmeyi ertele, olay işleyicileri böl, büyük DOM'lar için content-visibility.
CLS: Cumulative Layout Shift
5 neden deseni: boyutsuz resimler, yazı tipi değişiklikleri, dinamik olarak eklenen içerik, geç yüklenen kaynaklar, düzen özellikleri üzerinde CSS animasyonları.
Çapraz boyutlu: nedeni daraltmak için mobil - masaüstü, yeni - tekrarlayan ziyaretçiler, hızlı - yavaş ağları karşılaştırır.
Tipik düzeltmeler: width/height ekle, font-display: optional, min-height rezervasyonu, top/left yerine transform kullan.
Bir Temel Neden İfadesi Neye Benzer
"Resimlerinizi optimize etmeyi düşünün" değil. Bu, gerçek çıktıdır. İncelemek ve birleştirmek için yeterince spesifik.
Temel neden:
/product/running-shoes-42 üzerindeki div.hero-banner > img.product-main LCP resmi, bir preload ipucundan yoksun olduğu ve fetchpriority="high" özelliğine sahip olmadığı için 1.980ms geç keşfediliyor.
CoreDash kanıtı:
Mobil'de, p75'te LCP 3.820ms (zayıf). Load Delay 1.980ms ile (toplamın %52'si) darboğaz. Öncelik durumu: 3 (önceden yüklenmemiş). Trend: 7 gün boyunca +340ms kötüleşiyor.
Chrome kanıtı:
Ağ şelalesi HTML ilk baytı ile resim isteği arasında 1.940ms boşluk gösteriyor. Resim sadece CSS'de referans verilmiş, önceden yükleme tarayıcısına görünmez.
Düzeltme:
templates/product.html satır 12'ye <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> ekle. Satır 47'deki img elemanında fetchpriority="high" ayarla.
Genel Yapay Zeka tavsiyesi:
"LCP resminize fetchpriority eklemeyi düşünün ve kritik kaynakların düzgün bir şekilde önceden yüklenmesini sağlayın."
CWV Superpowers:
Eleman: div.hero-banner > img.product-main
Dosya: templates/product.html, satır 47
Kanıt: LCP süresinin %52'si Load Delay içinde (CoreDash p75). 1.940ms keşif boşluğu (Chrome şelalesi).
Düzeltme: öncesi/sonrası ile 2 satırlık kod değişikliği.
Karşılaştırın: CWV Superpowers ne durumda
Farklı araçlar farklı sorunları çözer. İşte her birinin gerçekte yaptığı şey.
| Yetenek | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| Veri kaynağı | Gerçek kullanıcılar (28 günlük saha verisi) | Tekil laboratuvar oturumu | Simüle edilmiş tekil yükleme |
| INP ölçümü | ✓ Gerçek etkileşimler | ✗ Gerçek kullanıcı yok | ✗ Ölçülmedi |
| Aşama kırılımı | ✓ LCP, INP, CLS aşamaları | ~ Manuel analiz | ✗ Sadece puan |
| Eleman ilişkilendirmesi | ✓ Tam eleman + öncelik | ~ Nereye bakacağınızı biliyorsanız | ~ Genel öneriler |
| Orantısal akıl yürütme | ✓ %'ye göre darboğaz | ✗ Mutlak değerler | ✗ Mutlak değerler |
| Segment karşılaştırması | ✓ Cihaz, ülke, tarayıcı | ✗ Tekli yapılandırma | ✗ Tekli yapılandırma |
| Trend tespiti | ✓ 7 günlük değişim | ✗ Zaman içindeki nokta | ✗ Zaman içindeki nokta |
| Chrome izleme | ✓ Aşamaya göre hedeflenmiş | ✓ Tam erişim | ✗ Tarayıcı yok |
| Kod düzeltmeleri | ✓ Dosya + satır + diff | ~ Aracıya bağımlı | ~ Genel tavsiye |
Not: Chrome DevTools MCP tamamlayıcıdır. CWV Superpowers, saha verileri darboğazı belirledikten sonra bunu hedefli izleme için kullanır. Birlikte en iyi şekilde çalışırlar.
Raporlar: Slack'e bırakın, Jira'ya ekleyin
Kendi kendine yeten HTML. Bağımlılık yok. Derleme adımı yok. Her şeyin satır içi olduğu tek bir dosya.
Tam Rapor (Chrome ile)
Renk kodlu metrik kartları, aşama kırılım grafikleri, önemli anlarda (ilk boyama, LCP, yüklendi) film şeridi ekran görüntüleri, ağ şelalesi SVG'si, temel neden analizi ve öncesi/sonrası koduyla birlikte önerilen düzeltme.
Sadece RUM Raporu
Aynı metrik kartları ve aşama kırılımının yanı sıra eleman ilişkilendirmesi ve temel neden analizi. Film şeridi veya şelale yok, ancak saha verisi gerçeğin kaynağı olduğu için teşhis kalitesi aynıdır.
Herhangi bir MCP istemcisi ile çalışır
Claude Code: Otomatikleştirilmiş iş akışına sahip tam yetenek. Keşif, teşhis, Chrome izleme, kod düzeltmeleri ve raporlar. Önerilir.
Cursor: CoreDash MCP ile eklenti kurulumu. Editörünüzün içinde tam teşhis ve kod düzeltmeleri.
VS Code, Windsurf, Gemini CLI: HTTP MCP sunucularını destekleyen herhangi bir istemci CoreDash'e bağlanır. Aynı saha verisi, aynı ilişkilendirme.
Client Success
Don't just take my word for it
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."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
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."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
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."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
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.
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
2 Dakikada Çalıştırma
Terminalinizde otomatik Core Web Vitals teşhisi. Veri akışı olan bir CoreDash hesabına ihtiyacınız var. Ücretsiz katman çalışır.
Claude Code
claude mcp add --transport http coredash \
https://app.coredash.app/api/mcp \
--header "Authorization: Bearer cdk_YOUR_API_KEY"
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers
claude --chrome
Find my biggest CWV issue and fix it. API anahtarınızı CoreDash → Project Settings → API Keys (MCP) bölümünden alın. Bir kez gösterilir. SHA-256 hash olarak saklanır. Salt okunur.
Cursor
/plugin-add cwv-superpowers
CoreDash'i .cursor/mcp.json dosyasına ekleyin:
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
} Diğer MCP İstemcileri
Uç Nokta (Endpoint): https://app.coredash.app/api/mcp
Üstbilgi (Header): Authorization: Bearer cdk_YOUR_API_KEY
VS Code (Copilot aracı modu), Windsurf, Gemini CLI, Claude Desktop ve herhangi bir HTTP MCP istemcisiyle çalışır. Tek bir MCP web performansı uç noktası, her aracı.
Sıkça Sorulan Sorular
CWV Superpowers'ı kullanmak için Chrome'un çalışmasına ihtiyacım var mı?
Hayır. Chrome izlemesi isteğe bağlıdır. O olmadan, yalnızca CoreDash verilerine dayanan tam saha verisi teşhisi, aşama kırılımları, eleman ilişkilendirmesi ve kod düzeltme önerileri alırsınız. Chrome, film şeridi ekran görüntüleri, ağ şelalesi ve temel nedenin görsel onayını ekler. Her iki mod da raporlar oluşturur.
Bunun yapay zeka aracımda Lighthouse çalıştırmaktan farkı nedir?
Lighthouse makinenizde tek bir sentetik yükleme çalıştırır. CWV Superpowers, CoreDash'ten 28 günlük gerçek kullanıcı verisi kullanır: gerçek cihazlar, gerçek ağlar, gerçek etkileşimler. Gerçek kullanıcı dokunuşlarından INP ölçer (Lighthouse yapamaz). Segmentleri karşılaştırır (mobil - masaüstü, Hindistan - ABD). Ve sadece mutlak puanları değil, darboğaz aşamasını bulmak için orantısal akıl yürütmeyi kullanır.
Hangi yapay zeka kodlama aracıları destekleniyor?
MCP (Model Context Protocol) sunucularını destekleyen web performansı için herhangi bir yapay zeka kodlama aracısı. Claude Code, otomatikleştirilmiş 5 adımlı iş akışına sahip özel bir yeteneğe sahiptir. Cursor, VS Code (Copilot aracı modu), Windsurf, Gemini CLI ve Claude Desktop, CoreDash HTTP MCP uç noktası üzerinden bağlanır. Saha verisi ve ilişkilendirme tüm istemcilerde aynıdır.
CoreDash ücretsiz mi?
CoreDash'in CWV Superpowers ile çalışan ücretsiz bir katmanı vardır. Sitenizden veri akışına ihtiyacınız vardır (CoreDash betik etiketini ekleyin). Ücretsiz katmanda örnekleme ve sayfa görüntüleme sınırı 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 özel MVP API Anahtarları oluşturabilirsiniz. Her müşteri sitesine CoreDash ekleyin, salt okunur bir API anahtarı oluşturun ve MCP istemcinizi yapılandırın. Aracı yalnızca o projenin verilerini görür. CWV Superpowers MIT lisanslıdır, bu nedenle ticari kullanımda hiçbir kısıtlama yoktur.
Açık Kaynak. Bağımlılık Yok.
İnceleyebileceğiniz ve genişletebileceğiniz Core Web Vitals otomasyonu. Orkestratör, teşhis modülleri, Chrome izleme mantığı ve rapor şablonlarının tümü GitHub'dadır. Nasıl çalıştığını okuyun. Forklayın. Genişletin. Katkıda bulunun.
Ücretsiz Denemenizi Başlatın GitHub'da Görüntüle