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
SOUL.md-Regeln verändern sich in langen KI-Agenten-Sitzungen und wie man das behebt
SOUL.md-Regeln funktionieren perfekt für die ersten 10-15 Nachrichten, beginnen aber um Nachricht 20-30 herum abzudriften, da der Gesprächskontext die ursprüngliche Systemaufforderung überschreibt. Die Lösung besteht darin, /new aggressiver zu verwenden, um Sitzungen vor jeder neuen Aufgabe zurückzusetzen.
OpenClaw lokal mit Ollama ausführen, um API-Kosten zu vermeiden
Ein Reddit-Benutzer teilt seine Erfahrung beim Wechsel von der API-basierten OpenClaw-Version zur lokalen Ausführung mit Ollama, wodurch API-Kosten entfallen, während die Arbeitsabläufe erhalten bleiben. Er erstellte eine schrittweise Installationsvideoanleitung.
Kostenloses OpenClaw Gateway mit lokalem LLM auf Oracle Cloud
Ein Entwickler teilt mit, wie man OpenClaw Gateway mit einem lokalen Qwen3.5 27B A3B 4-Bit-LLM auf der kostenlosen Stufe von Oracle Cloud unter Verwendung einer VM.Standard.A2.Flex-Instanz mit 4 OCPUs, 24 GB RAM und 200 GB SSD betreibt, die über die QCAI-App ferngesteuert wird.
Vier häufige Einrichtungsfehler, die Leute dazu bringen, OpenClaw abzubrechen
Ein Reddit-Benutzer berichtet, dass über 50 Personen OpenClaw aufgrund von vier spezifischen Einrichtungsproblemen verlassen haben: fehlende SOUL.md-Dateien, übermäßige API-Kosten durch die Verwendung des Opus-Modells für alles, gleichzeitige Installation zu vieler Skills und das Erstellen mehrerer Agents, bevor der erste ordnungsgemäß funktioniert.