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- und height-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: swap verwendeten, 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.