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ı tabanlı web performansı yalnızca bir rapor değil, değiştirilmesi gereken asıl kod satırıdır.
2 Dakikada Kurun Ücretsiz CoreDash Denemesini Başlatı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. Bu, Google'ın sıralamalar için kullanmadığı, simüle edilmiş bir cihazda elde edilen sentetik bir puandır. Yararlı bir web performansı yapay zeka aracısı işe Google ile aynı verilerden 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, gerçek Chrome kullanıcılarından alınan 28 günlük CrUX saha verilerine göre sıralama yapar. Kusursuz bir Lighthouse puanı ile başarısız bir saha puanı her zaman karşılaşılan bir durumdur. Mobil sitelerin %52'si sahada en az bir Core Web Vitals metriğinde 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 öğenin darboğaz yarattığını veya yaptığı düzeltmenin işe yarayıp yaramadığını bilemez. Sadece bir simülasyonu optimize eder ve işini bitirir. Ancak gerçek kullanıcılarınız bu duruma katılmaz.
Manuel İnceleme Saatler Sürer
Verileri segmentlere ayırın. Hipotez kurun. Bir izleme ç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ş sayfa ile çarpın.
INP bir laboratuvarda kesinlikle 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ı (nereye dokunduklarını, ne kadar hızlı kaydırdıklarını, hangi cihazı tuttuklarını) kopyalayamaz. Lighthouse, INP raporlaması bile yapmaz. 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 verileridir.
İki doğruluk kaynağı: Saha verileri tarayıcı kanıtlarıyla buluşuyor
CWV Superpowers, CoreDash gerçek kullanıcı verilerini hedeflenmiş Chrome izlemeleriyle birleştirir. Saha verileri ona neyin yavaş olduğunu söyler. Chrome ise bunun nedenini açıklar.
CoreDash aracıya neyin yavaş olduğunu söyler
CoreDash, her gerçek kullanıcıdan gelen her sayfa yüklemesini izler. Her metrik, soruna neden olan 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 bildirdiğinde, aracı tam olarak nereye bakacağını bilir. Bu bir tahmin değil, milyonlarca gerçek oturumdan elde edilen bir ölçümdür.
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 komut dosyaları, CLS kayma öğesi, cihaz türü, ziyaretçi türü, ağ hızı, 7 günlük eğilimler.
Chrome aracıya neden yavaş olduğunu söyler
CWV Superpowers, sayfayı mobil emülasyonla ziyaret eder: Hızlı 3G, 4x CPU yavaşlatma (throttling). Sadece CoreDash'in belirlediği darboğaz aşamasını izler.
Darboğaz Load Delay mi? Aracı, keşif boşlukları için network waterfall'u inceler. Render Delay mi? Engelleyici scriptleri ve font yükleme gecikmelerini arar.
Sonuç: film şeridi ekran görüntüleri, network waterfall ve saha verilerinizin ortaya çıkardığı temel nedeni açıklayan hedeflenmiş kanıtlar.
Mutlak eşikler değil, oransal akıl yürütme
Lighthouse size "Render Delay 350ms" der. Peki sorun bu mu? Hiçbir fikri yok. CWV Superpowers, toplam sürenin en büyük yüzdesini tüketen aşamayı darboğaz olarak tanımlar.
INP 350ms. Input Delay 70ms (%20), Processing 80ms (%23), Presentation 200ms (%57). Tek başına bakıldığında 200ms kulağa iyi gelse de, Presentation bir darboğazdır. Bunu düzeltmek durumu değiştirir. Input Delay'i optimize etmek ise zar zor fark edilir.
Bu, performans çalışmalarındaki en yaygın hatayı önler: yanlış şeyi düzeltmek.
Beş adım: "Bir şey yavaş" noktasından kod düzeltmesine
Ona bir soru sorun. Beş adım sonra, gerçek kullanıcı kanıtlarıyla desteklenen bir düzeltmeye sahip olun.
1. Keşif
En kötü sayfalar ve metrikler için CoreDash verilerinizi tarar. Kötü derecelendirmelere, mobile, yüksek trafikli sayfalara ve uzun bir kötü 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. Darboğazı yüzdelik olarak adlandırır.
3. Chrome İzleme
Mobil emülasyon ile sayfayı ziyaret eder. Yalnızca 2. adımdaki darboğaz aşamasını izler. Network waterfall, film şeridi ve engelleyici kaynak kanıtlarını yakalar.
4. Temel Neden
Her iki kanıt kaynağını tek bir ifadede birleştirir: öğe, neden, CoreDash metrikleri ve Chrome'un neyi doğruladığı. Belirsizlik yoktur.
5. Düzeltme veya Rapor
Seçim sizin. Kod düzeltmesini dosya, satır, öğe, öncesi/sonrası ile uygulayın. Grafikler ve kanıtlar içeren bağımsız 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 öğesi Öğe türü Öncelik durumu TTFB aşaması Load Delay Load Time Render DelayINP (Interaction to Next Paint)
INP hedefi Input Delay Processing Presentation LOAF scriptleri Yükleme durumuCLS (Cumulative Layout Shift)
Kayan öğe Kayma nedeni Kayma zamanlamasıSegmentler
Cihaz türü Ülke Tarayıcı İşletim Sistemi Bağlantı Ziyaretçi türü Sayfa yoluEğilimler
7 günlük delta 28 günlük temel referans Regresyon tespitiTeşhis Edin: Her Core Web Vitals metriği için aşama düzeyinde kırılım
Sadece puanlar değil. Her metrik, CoreDash'ten alınan gerçek kullanıcı ilişkilendirmesi kullanılarak aşamalara ayrılır.
Yapay zeka ile LCP'yi düzeltin: 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 kısmını tükettiğini tanımlar.
Öğe ilişkilendirmesi: tam LCP öğesi, türü (image, text, background image, video) ve öncelik durumu (fetchpriority, lazy loading).
Tipik düzeltmeler: preload hint eklemek, hero kısmından lazy loading'i kaldırmak, image formatını optimize etmek, render engelleyici script'i düzeltmek.
Yapay zeka ile INP'yi düzeltin: 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 verileridir.
Script ilişkilendirmesi: Long Animation Frames (LOAF) kesin JavaScript dosyasını ve süresini adlandırır. Ayrıca etkileşim gerçekleştiğinde sayfanın yüklenme durumunu gösterir.
Tipik düzeltmeler: ana iş parçacığına (main thread) yield yapmak, değerlendirmeyi ertelemek (defer), event handler'ları bölmek, büyük DOM'lar için content-visibility kullanmak.
CLS: Cumulative Layout Shift
5 neden kalıbı: boyutlandırılmamış image'lar, font değişiklikleri (swaps), dinamik olarak eklenen içerik, geç yüklenen kaynaklar, yerleşim özellikleri (layout properties) üzerindeki CSS animasyonları.
Boyutlar arası: nedeni daraltmak için mobil ile masaüstünü, yeni ziyaretçi ile geri dönen ziyaretçiyi, hızlı ve yavaş ağları karşılaştırır.
Tipik düzeltmeler: width/height eklemek, font-display: optional kullanmak, min-height rezervasyonu yapmak, top/left yerine transform kullanmak.
Bir Temel Neden İfadesi Neye Benzer
"Görsellerinizi optimize etmeyi düşünün" gibi bir tavsiye değil. Bu gerçek çıktıdır. İnceleyip birleştirmek (merge) için yeterince belirgindir.
Temel neden:
/product/running-shoes-42 adresindeki LCP image'ı olan div.hero-banner > img.product-main, bir preload hint'i içermediği ve fetchpriority="high" değerine sahip olmadığı için 1.980ms geç keşfediliyor.
CoreDash kanıtı:
LCP, mobilde 3.820ms (kötü), p75. Load Delay, 1.980ms (toplamın %52'si) ile darboğaz durumunda. Öncelik durumu: 3 (preload edilmemiş). Eğilim: 7 gün içinde +340ms ile kötüye gidiyor.
Chrome kanıtı:
Network waterfall, HTML'in ilk baytı ile görsel isteği arasında 1.940ms boşluk gösteriyor. Görsel yalnızca CSS'te referans gösterilmiş, preload tarayıcısı için görünmez.
Düzeltme:
templates/product.html dosyasının 12. satırına <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> ekleyin. 47. satırdaki img öğesinde fetchpriority="high" ayarlayın.
Genel yapay zeka tavsiyesi:
"LCP image'ınıza fetchpriority eklemeyi düşünün ve kritik kaynakların düzgün bir şekilde preload edildiğinden emin olun."
CWV Superpowers:
Öğe: div.hero-banner > img.product-main
Dosya: templates/product.html, 47. satır
Kanıt: LCP süresinin %52'si Load Delay içinde (CoreDash p75). 1.940ms keşif boşluğu (Chrome waterfall).
Düzeltme: Öncesi/sonrası diff (fark) ile 2 satırlık kod değişikliği.
Karşılaştırın: CWV Superpowers rakiplerine göre nasıl konumlanıyor
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 saha verisi) | Tek laboratuvar oturumu | Simüle edilmiş tek 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 puan |
| Öğe ilişkilendirmesi | ✓ Tam öğe + öncelik | ~ Nereye bakacağınızı biliyorsanız | ~ Genel tavsiyeler |
| Oransal akıl yürütme | ✓ Yüzde bazında darboğaz | ✗ Mutlak değerler | ✗ Mutlak değerler |
| Segment karşılaştırması | ✓ Cihaz, ülke, tarayıcı | ✗ Tek konfigürasyon | ✗ Tek konfigürasyon |
| Eğilim tespiti | ✓ 7 günlük delta | ✗ Belirli bir an | ✗ Belirli bir an |
| Chrome izlemesi | ✓ Aşamaya göre hedeflenmiş | ✓ Tam erişim | ✗ Tarayıcı yok |
| Kod düzeltmeleri | ✓ Dosya + satır + diff | ~ Aracıya bağlı | ~ Genel tavsiye |
Not: Chrome DevTools MCP tamamlayıcıdır. CWV Superpowers, saha verileri darboğazı belirledikten sonra onu hedeflenmiş izleme için kullanır. En iyi birlikte çalışırlar.
Raporlar: Slack'e bırakın, Jira'ya ekleyin
Bağımsız HTML. Bağımlılık yok. Build adımı yok. Her şeyin satıriçi (inline) olduğu tek bir dosya.
Tam Rapor (Chrome ile)
Renk kodlu metrik kartları, aşama kırılım grafikleri, önemli anlarda (first paint, LCP, loaded) film şeridi ekran görüntüleri, network waterfall SVG'si, temel neden analizi ve öncesi/sonrası koduyla önerilen düzeltme.
Sadece RUM Raporu
Aynı metrik kartları ve aşama kırılımının yanı sıra öğe ilişkilendirmesi ve temel neden analizi. Film şeridi veya waterfall yoktur, ancak saha verileri doğruluk kaynağı olduğu için teşhis kalitesi aynıdır.
Herhangi bir MCP istemcisiyle çalışır
Claude Code: Otomatik iş akışına sahip tam yetenek. Keşif, teşhis, Chrome izleme, kod düzeltmeleri ve raporlar. Tavsiye edilir.
Cursor: CoreDash MCP ile eklenti (plugin) 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
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
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."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
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."
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."
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."
2 Dakikada Çalıştırma
Terminalinizde otomatik Core Web Vitals teşhisi. Veri akışı sağlayan bir CoreDash hesabına ihtiyacınız var. Ücretsiz katman (free tier) çalışır.
Claude Code
# 1. CoreDash MCP sunucusunu ekleyin claude mcp add --transport http coredash \ https://app.coredash.app/api/mcp \ --header "Authorization: Bearer cdk_YOUR_API_KEY" # 2. CWV Superpowers'ı yükleyin /plugin marketplace add corewebvitals/cwv-superpowers /plugin install cwv-superpowers@cwv-superpower # 3. Chrome ile başlatın (isteğe bağlı, tavsiye edilir) claude --chrome # 4. Başla En büyük CWV sorunumu bul ve düzelt.
API anahtarınızı CoreDash'ten alın → Project Settings → API Keys (MCP). Sadece bir kez gösterilir. SHA-256 hash olarak saklanır. Salt okunur (Read-only).
Cursor
# Eklentiyi yükleyin
/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
Endpoint: https://app.coredash.app/api/mcp
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ı endpoint'i, tüm aracılar.
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 da sadece CoreDash verilerine dayalı tam saha veri teşhisi, aşama kırılımları, öğe ilişkilendirmesi ve kod düzeltme önerileri alırsınız. Chrome, film şeridi ekran görüntüleri, network waterfall ve temel nedenin görsel doğrulaması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 gelen 28 günlük gerçek kullanıcı verilerini kullanır: gerçek cihazlar, gerçek ağlar, gerçek etkileşimler. INP'yi gerçek kullanıcı dokunuşlarından ölçer (Lighthouse yapamaz). Segmentleri karşılaştırır (mobil ile masaüstü, Hindistan ile ABD). Ayrıca, darboğaz aşamasını bulmak için sadece mutlak puanları değil, oransal 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'un otomatik 5 adımlı iş akışına sahip özel bir yeteneği vardır. Cursor, VS Code (Copilot aracı modu), Windsurf, Gemini CLI ve Claude Desktop, CoreDash HTTP MCP endpoint'i üzerinden bağlanır. Saha verileri 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ışı olması gerekir (CoreDash script etiketini ekleyin). Ücretsiz katmanda örnekleme yoktur 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 sayıda özel MVP API Anahtarı oluşturabilirsiniz. Her müşteri sitesine CoreDash ekleyin, salt okunur bir API anahtarı oluşturun ve MCP istemcinizi yapılandırın. Aracı sadece o projeye ait verileri 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 üzerinde. Nasıl çalıştığını okuyun. Fork'layın. Genişletin. Katkıda bulunun.
Ücretsiz Denemenizi Başlatın GitHub'da Görüntüleyin