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
Methodik für konsistentes Benchmarking von lokalen vs. Cloud-LLMs
Ein Entwickler stellt ein Messaufbau vor, der sequenzielle Anfragen und regelbasierte Bewertung nutzt, um lokale Modelle (über llama.cpp, vLLM, Ollama) mit Cloud-APIs (GPT-5.4, Claude Sonnet 4.6, Gemini 3.1 Pro) über einen einheitlichen Endpunkt wie ZenMux zu vergleichen.
OpenClaw mit einem lokalen LLM auf macOS ausführen – Leitfaden für 16–24 GB RAM
Ein praktischer Leitfaden zur Einrichtung eines quantisierten Qwen 3.5 Modells mit OpenClaw auf macOS (16–24 GB RAM), inklusive eines Test-Skills zur Überprüfung.
Praktische Lektionen zur Prompt-Engineering aus der Arbeit mit Claude Code
Ein Projektmanager teilt spezifische Techniken, die die Ergebnisse von Claude Code verbessert haben: zweiphasiges Prompting, Einzelziel-Prompts und hochspezifische Rollendefinitionen.
OpenClaw Multi-Agent: 7 isolierte Agenten für 5/Monat
Vollständiger Architektur-Leitfaden für spezialisierte AI-Agenten mit fokussiertem Speicher, minimalen Berechtigungen und intelligentem Modell-Routing.