Von 88 auf 100 PSI: Claude Code für die Front-End-Optimierung
Ein Entwickler nutzte Claude Code als Debugging- und Implementierungspartner, um den PageSpeed Insights-Mobile-Score seiner Website von 88 auf 100 zu steigern (eine Artikelvorlage verbesserte sich von 74 auf 100). Der Beitrag auf r/ClaudeAI beschreibt den praktischen Workflow – keine einmalige Lösung, sondern eine Reihe gezielter Eingriffe.
Wichtigste Optimierungen
- Responsive Bilder + srcset: Claude erkannte, dass das Mobile-Hero-Bild zu groß war, generierte responsive Bildvarianten und fügte
srcset-Attribute hinzu. - LCP-Preload: Hinzufügen eines responsiven Preloads für das LCP-Bild mittels
<link rel="preload" as="image" imagesrcset="...">. - Forced-Reflow-Fix: Ersetzen eines Header-Scroll-Listeners (der bei Scrollen ein erzwungenes Layout auslöste) durch
IntersectionObserver. - Schriftarten-Audit: Ermitteln, welche Schriftgewichte tatsächlich verwendet wurden, und Entfernen ungenutzter.
- Build-Zeit-Bildmaße: Hinzufügen von
width- undheight-Attributen zu Markdown-Bildern zur Build-Zeit, um Layout-Verschiebungen zu vermeiden. - Entfernung von Font-Preloads auf Artikelseiten: Kontraintuitiv, aber effektiv – vorab geladene Schriftarten konkurrierten auf gedrosselten Mobilgeräten mit dem Hero-Bild um Bandbreite. Da Schriftarten
font-display: swapverwendeten, ließ das Entfernen der Preloads das LCP-Bild schneller laden.
Effektives Prompting-Muster
Der Entwickler stellte fest, dass Claude Code am besten mit spezifischen Diagnose-Threads funktioniert. Statt vager Prompts sollten PSI-Ergebnisse eingegeben und nach dem kleinsten sicheren Patch gefragt werden. Beispielmuster: PSI-Befund eingeben, Claude bitten, die relevante Komponente zu inspizieren, dann eine minimale Korrektur anfordern, kein großes Refactoring.
Menschliches Urteil bleibt nötig
Einige Optimierungen wirkten visuell zu aggressiv – der Autor erhöhte die Logo-Qualität wieder, während der Score bei 100 blieb. Bilder unterhalb des Falzes und Design-Kompromisse erforderten menschliche Entscheidungen. Claude Code beschleunigte die Iteration, aber der Entwickler musste weiterhin Leistung, Zugänglichkeit und Designqualität abwägen.
Ausführlicher Beitrag
Der Autor veröffentlichte eine längere technische Version mit spezifischen CWV-Änderungen und Vorher/Nachher-Zahlen auf goodrich.digital.
📖 Vollständige Quelle lesen: r/ClaudeAI
👀 Siehe auch
Sub-Agenten mit separaten Arbeitsbereichen in OpenClaw einrichten
Community-Lösung zur Konfiguration mehrerer Sub-Agenten mit isolierten Workspaces und verschiedenen Modellen
Preise für KI-Agenten: Lehren aus dem Verkauf von OpenClaw an kleine Unternehmen
Nach monatelangem Verkauf von OpenClaw-Agenten an Anwaltskanzleien und Immobilienmakler teilt ein Entwickler praktische Preisstrategien: Pro-Sitz scheitert, KI-Mitarbeiter-Framing gewinnt, und Durchleitungs-LLM-Kosten verhindern Margenverlust.
Umgang mit Gateway-Trennungen für effektive Automatisierung
Erforschen Sie praktische Lösungen zur Aufrechterhaltung des Betriebs von KI-Coding-Agenten bei Gateway-Trennungen. Zu den Tipps gehören die Überwachung mit Grafana, automatisierte Wiederverbindungs-Skripte und die Nutzung redundanter Pfade für mehr Zuverlässigkeit.
OpenClaw 4.1 mit Gemma 4 Stack: Hybride Architektur und Setup-Korrekturen
Ein Reddit-Beitrag beschreibt einen optimierten lokalen Agenten-Stack, der OpenClaw 4.1 mit Googles Gemma-4-Modell kombiniert und eine hybride Architektur, spezifische Konfigurationskorrekturen für Ollama-Tool-Calling sowie Anpassungen des Kontextfensters umfasst.