From 88 to 100 PSI: Claude Code for Front-End Optimisation
A developer used Claude Code as a debugging and implementation partner to push their site's PageSpeed Insights mobile score from 88 to 100 (an article template went from 74 to 100). The post on r/ClaudeAI details the hands-on workflow — not a one-shot fix, but a series of targeted interventions.
Key Optimisations Achieved
- Responsive images + srcset: Claude identified that the mobile hero image was larger than needed, then generated responsive image variants and added
srcsetattributes. - LCP preload: Added a responsive preload for the LCP image using
<link rel="preload" as="image" imagesrcset="...">. - Forced reflow fix: Replaced a header scroll listener (which caused forced layout on scroll) with
IntersectionObserver. - Font audit: Identified which font weights were actually in use and removed unused ones.
- Build-time image dimensions: Added
widthandheightattributes to markdown images at build time to eliminate layout shifts. - Removed font preloads on article pages: Counterintuitive but effective — preloaded fonts were competing with the hero image for bandwidth on throttled mobile. Since fonts used
font-display: swap, removing preloads let the LCP image load faster.
Effective Prompting Pattern
The developer found Claude Code works best with specific diagnostic threads. Instead of vague prompts, feed it PSI findings and ask for the smallest safe patch. Example pattern: feed the PageSpeed Insights finding, ask Claude to inspect the relevant component, then request a minimal fix rather than a broad refactor.
Human Judgment Still Required
Some optimisations felt too aggressive visually — the author bumped logo quality back up while staying at 100. Below-the-fold images and styling trade-offs needed human decisions. Claude Code accelerated the iteration, but the developer still had to balance performance, accessibility, and design quality.
Full Write-Up
The author published a longer technical version with specific CWV changes and before/after numbers at goodrich.digital.
📖 Read the full source: r/ClaudeAI
👀 See Also
Using AI as a Cognitive Partner Instead of a Code Factory
A Reddit post proposes a system prompt called 'Cognitive Authorship Copilot' that forces AI to act as a pair programming partner rather than an autonomous solution generator, with three intervention levels based on task complexity.
OpenClaw Docker users: Pin to commit 0c926a2c5 to fix broken Discord and channel extensions
After updating OpenClaw via Docker, channel extensions like Discord, Signal, and WhatsApp fail with module import errors. The issue stems from commit d9c285e93 and a second Docker-specific bug. Pin to commit 0c926a2c5 for a stable workaround.
Fixing OpenClaw Agent Autonomy Issues: Skill Files, Tool Selection, and Cron Setup
A developer shares solutions for OpenClaw agents that stop working autonomously after initial setup. Key fixes include using external skill files instead of chat instructions, replacing browser tools with API-based tools or Puppeteer scripts, and properly configuring cron jobs.
Building a serverless AI agent platform on AWS for $0.01/month with Claude Code
A developer built a complete AWS serverless platform running AI agents for approximately $0.01/month using Claude Code over 29 hours, eliminating expensive components like NAT Gateway ($32/month) and ALB ($18/month). The project includes 233 unit tests, 35 E2E tests, and deploys with a single cdk deploy command.