Zum Hauptinhalt springen

Debug Optimize Lcp

Skill Aktiv
Teil von:Chrome DevTools MCP

Leitet das Debugging und die Optimierung von Largest Contentful Paint (LCP) mit Chrome DevTools MCP-Tools an. Verwenden Sie diese Fähigkeit immer dann, wenn der Benutzer nach LCP-Leistung, langsamen Seitenladezeiten, Core Web Vitals-Optimierung fragt oder verstehen möchte, warum der Hauptinhalt seiner Seite zu lange zum Erscheinen benötigt. Verwenden Sie sie auch, wenn der Benutzer "largest contentful paint", "page load speed", "CWV" erwähnt oder verbessern möchte, wie schnell sein Heldenbild oder sein Hauptinhalt gerendert wird.

Zweck

Benutzern bei der Identifizierung und Behebung von Leistungsproblemen bei Largest Contentful Paint (LCP) zu helfen, indem Chrome DevTools für detaillierte Analysen und umsetzbare Erkenntnisse genutzt werden.

Funktionen

  • Leitet das Debugging der LCP-Leistung an
  • Analysiert LCP-Teile (TTFB, Ressourcenladeverzögerung/-dauer, Renderverzögerung)
  • Identifiziert LCP-Elemente und deren Attribute
  • Inspiziert den Netzwerk-Wasserfall auf Probleme beim Laden von Ressourcen
  • Prüft gängige LCP-bezogene Probleme wie Lazy Loading und Render-Blocking-Skripte
  • Bietet priorisierte Optimierungsstrategien

Anwendungsfälle

  • Wenn Benutzer nach LCP-Leistung oder langsamen Seitenladezeiten fragen
  • Wenn Benutzer Core Web Vitals optimieren möchten
  • Wenn Benutzer verstehen müssen, warum der Hauptinhalt ihrer Seite langsam gerendert wird
  • Wenn Benutzer "largest contentful paint", "page load speed" oder "CWV" erwähnen

Nicht-Ziele

  • Direkte Optimierung anderer Core Web Vitals (FID, CLS)
  • Allgemeines Website-Debugging über die LCP-Leistung hinaus
  • Automatisierung der Erstellung von Website-Inhalten oder der SEO-Analyse

Workflow

  1. Navigieren Sie zur Ziel-URL.
  2. Starten Sie eine Leistungsmessung mit Neuladen.
  3. Analysieren Sie LCP-Erkenntnisse aus der Messung.
  4. Identifizieren Sie das LCP-Element mit einem Skript.
  5. Überprüfen Sie das Netzwerk-Wasserfall für die LCP-Ressource.
  6. Inspizieren Sie HTML auf häufige Probleme mit einem Skript.
  7. Wenden Sie priorisierte Optimierungsstrategien basierend auf identifizierten Engpässen an.
  8. Überprüfen Sie Korrekturen, indem Sie die Messung erneut ausführen und die Ergebnisse vergleichen.
  9. Emulieren Sie langsamere Netzwerk-/CPU-Bedingungen für die endgültige Tests.

Voraussetzungen

  • Node.js v20.19+ oder neuere LTS-Version
  • Google Chrome aktuelle stabile Version oder neuer
  • npm

Umfang

  • info:Größe der Tool-OberflächeDie Fähigkeit verwendet eine Teilmenge der verfügbaren Chrome DevTools MCP-Tools, die sich auf Leistung und Debugging konzentriert, was zu einer moderaten Größe der Tool-Oberfläche führt.

Konformität

  • warning:Telemetrie-Opt-InDie README gibt an, dass die Sammlung von Nutzungsstatistiken standardmäßig aktiviert ist und mit einem Flag abgemeldet werden kann, was nicht streng genommen ein Opt-In ist.

Installation

Zuerst Marketplace hinzufügen

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Qualitätspunktzahl

97 /100
Analysiert 1 day ago

Vertrauenssignale

Letzter Commit1 day ago
GitHub-Inhaber ChromeDevTools (opens in new tab)
Sterne39.5k
Downloads 6.2M (opens in new tab)
LizenzApache-2.0
Websitenpmjs.org(opens in new tab)
Status
Quellcode ansehen

Ähnliche Erweiterungen

Troubleshooting

100

Verwendet Chrome DevTools MCP und Dokumentation zur Fehlerbehebung bei Verbindungs- und Zielproblemen. Rufen Sie diese Fähigkeit auf, wenn list_pages, new_page oder navigate_page fehlschlagen oder wenn die Serverinitialisierung fehlschlägt.

Skill
ChromeDevTools

Chrome Devtools

97

Verwendet Chrome DevTools über MCP für effizientes Debugging, Fehlerbehebung und Browser-Automatisierung. Verwenden Sie dies beim Debuggen von Webseiten, Automatisieren von Browserinteraktionen, Analysieren der Leistung oder Überprüfen von Netzwerkanfragen. Diese Fähigkeit gilt nicht für den `--slim`-Modus (MCP-Konfiguration).

Skill
ChromeDevTools

Use My Browser

100

Verwenden Sie dies, wenn die Arbeit von den Live-Browsersitzungs- oder gerenderten Zustand des Benutzers abhängt und nicht von statischen Abrufen, insbesondere für Browser-Debugging-Kontexte oder von DevTools ausgewählte Elemente oder Anfragen, angemeldeten Dashboards oder CMS-Flows, localhost-Apps, Formularen, Uploads, Downloads, Medieninspektion, DOM- oder iframe-Inspektion, Shadow DOM oder Browserfehlern, die wie Soft-404s, Authentifizierungswände, Anti-Bot-Prüfungen oder Ratenbegrenzungen aussehen.

Skill
xixu-me

Node Connect

100

Diagnose OpenClaw Android, iOS, or macOS node pairing, QR/setup code, route, auth, and connection failures.

Skill
steipete

Openclaw Debugging

100

Debug OpenClaw model, provider, tool-surface, code-mode, streaming, and live/Crabbox behavior by choosing the right logs, probes, and proof path before changing code.

Skill
steipete

Ctx Doctor

100

Führt Diagnosen für den Kontextmodus aus. Überprüft Laufzeiten, Hooks, FTS5, Plugin-Registrierung sowie npm- und Marktplatzversionen. Auslöser: /context-mode:ctx-doctor

Skill
mksglu