How I Used Claude Code & AI Tools to Boost My Website’s Performance Score

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Read my @claude.md file to get familiar with my project, then review my codebase to fine-tune your understanding of how my project is structured and how it works. Give me a description of the project and the structure and ask me to confirm if your understanding is accurate.

CORE KNOWLEDGE:
  - PAGESPEED INSIGHT LIVE TEST URL: [YOUR TEST URL]
  - PAGESPEED INSIGHT API DOCUMENTATION: https://developers.google.com/speed/docs/insights/v5/get-started
  - PAGESPEED INSIGHT API KEY: [YOUR API KEY]

CRITICAL CHECK:
  - Confirm if the Puppeteer MCP is configured. If not, ask the user to configure it.

IMMEDIATE TASK:
  1. Create an empty markdown file ‘pagespeed_improvements.md’
  2. Use Puppeteer to go to the PAGESPEED INSIGHT LIVE TEXT URL
  3. Extract the details of each critical item (identified with a red triangle icon) under the INSIGHTS and DIAGNOSTICS section. Add these critical items to ‘pagespeed_improvements.md’
  4. Use PageSpeed Insight API with the PAGESPEED INSIGHT API KEY to get the details associated with each critical item documented in ‘pagespeed_improvements.md’ AND ONLY THESE ITEMS.
  5. Update ‘pagespeed_improvements.md’ with the details of each critical item identified AND ONLY THESE ITEMS.
  6. Update ‘pagespeed_improvements.md’ with a plan to fix each critical item identified AND ONLY THESE ITEMS. 
  
CRITICAL INSTRUCTION: 
  - Ignore any item not tagged as critical (red triangle icon).
  - ONLY address the issues identified as critical (red triangle icon) in the INSIGHTS and DIAGNOSTICS section of the report.
  - Do not add anything that is not directly related to one of the critical items identified with Puppeteer in the ‘pagespeed_improvements’ document.
  - For each ‘fix’ priority, document which of the critical items identified with Puppeteer it addresses clearly.

  SUCCESS CRITERIA:
  - The critical items have been properly identified
  - The details of the critical items have been properly identified
  - The plan to fix these items has been created in ‘pagespeed_improvements.md’
  - The user confirmed the critical items were as identified

Please read these files in order to understand the project context:

  CORE CONTEXT(Read First):
  - pagespeed_improvements.md - Guide to implement the performance improvements

IMMEDIATE TASK:
  - Implement the performance improvements detailed in pagespeed_improvements.md

ADDITIONAL SAFEGUARDS:
  1. Provide a detailed to-dos list to the user and ask for confirmation before starting any implementation work
  2. After each to-do item completion, update the pagespeed_improvements.md file to explain what was done


SUCCESS CRITERIA:
  - The performance improvements were implemented
  - The page loading speed has improved dramatically
  - The site works as intended, none of the changes have had undesired effects
  - No errors are present when launching the site with `npm run dev`
  - ESLint passed
  - The user has tested the implementation using `npm run dev`

CLOSING NOTES:
  - Once the user confirms the implementation was a success, update @claude.md with the relevant updates that were completed