Website Speed Audit and Fix Plan in 5 Phases

Audits and speeds up your website in five phases: a full ranked speed audit, image and asset fixes, removal of render-blocking resources, a caching and server setup, and Core Web Vitals fixes with a pre-deploy checklist.

web performancepage speedcore web vitalscachingoptimization

Phase 1 — Full speed audit

Role: you are a senior web performance engineer with experience optimizing sites that serve more than 10M visitors a month.

My website's code (full HTML, CSS and JavaScript): [paste code or URL structure]

Task: run a complete audit of the site's speed and find everything that slows it down, including:
- render-blocking resources
- assets that are not compressed
- a DOM that is too large
- CSS and JS that is never used
- heavy third-party scripts
- weak caching
- layout shifts

Rank every issue you find by its impact.

Phase 2 — Images and static assets

Context: we are optimizing the speed of my website, using the code I shared. If you do not have it yet, ask me to paste it.

Task: look only at my images and static assets and tell me:
1. which images are too heavy, and the size each one should have
2. which formats to convert them to (WebP, AVIF)
3. where lazy loading is needed, and how to implement it
4. which CSS and JS files should be minified or merged
5. where my fonts load inefficiently

For every fix, give me the exact updated code.

Phase 3 — Render-blocking resources

Context: we are optimizing the speed of my website, using the code I shared. If you do not have it yet, ask me to paste it.

Task: analyze the critical rendering path of my site and list every CSS and JavaScript file that blocks rendering. Then:
1. refactor my CSS so the critical above-the-fold styles are extracted and inlined
2. defer every CSS file that is not critical
3. give async or defer to each JavaScript file that is not needed first
4. rewrite the order in which resources load so the browser paints the page as quickly as possible

Give me the complete updated head section and the related code.

Phase 4 — Caching and server setup

Context: we are optimizing the speed of my website. My hosting: [Apache/Nginx/Vercel/Netlify]

Task: write a complete strategy for caching and server-side optimization. Include:
1. a full browser caching policy, with the exact cache-control headers for each file type
2. a plan to implement a CDN
3. instructions to set up GZIP/Brotli compression
4. DNS prefetch and preconnect tags for every third-party resource
5. an .htaccess or server configuration file I can copy and paste as is

Phase 5 — Core Web Vitals and deploy checklist

Context: we are optimizing the speed of my website, using the code I shared. If you do not have it yet, ask me to paste it.

Task: optimize the site for Google's Core Web Vitals. The metrics:
- LCP, i.e. Largest Contentful Paint
- FID/INP, i.e. Interaction to Next Paint
- CLS, i.e. Cumulative Layout Shift

For every metric:
1. say which parts of the code are the likely problem areas
2. give the exact fix, with updated code
3. explain what a "good" score looks like

Finish with a performance checklist I can go through before every future deployment, so the site's speed never drops again.

Download pack .md

More in Coding & Code Review

Build a Project While the AI Coaches Your Developer SkillsNewCoding & Code ReviewTurns the AI into a mentor during a build: it spots gaps in your understanding, quizzes your reasoning, gives short explanations when needed and suggests small exercises based on the project, so you finish it as a better developer.

Project: [project]

While you help me build this project, keep doing the following the whole time:
- Notice where my understanding has gaps.
- Ask me questions that put my reasoning to the test.
- Give me short, focused explanations whenever I need them.
- Suggest small exercises drawn from what we are building.

The aim: I do not just finish the project, I also come out of it as a better developer.

Download .txt Download .md Open page

Clarify, Compare Architectures and Plan Before Any CodeNewCoding & Code ReviewMakes the AI act as a senior architect: it questions your requirements and assumptions, compares 2-3 architectures on scalability, complexity and speed, recommends one, then splits the system into modules with data flow before any code is written.

Role: you are a senior software architect and my AI coding partner.

Project: [project]

Do not write any code yet. Go through these steps first:

Step 1 — Clarify
- Question me in detail on the requirements, the constraints, the expected scale and the edge cases.
- Push back on any assumption that is vague or weak.

Step 2 — Design
- Put forward 2-3 candidate architectures.
- Compare them on scalability, complexity and how fast they can be delivered.
- Recommend one of them and explain your reasoning.

Step 3 — Plan
- Split the system into components or modules.
- Define what each one is responsible for and how data flows between them.

Start the implementation only once we have agreed on the plan. The principle: think first, code later.

Download .txt Download .md Open page

Context-Aware Code Built Around Your Goal, Users, Stack and LimitsNewCoding & Code ReviewGives the AI your project's goal, users, stack and constraints, then has it surface hidden risks, pick the approach that fits that context rather than the trendy one, and write code tied to it with short explanations of key decisions.

Role: you are the AI engineer dedicated to my project.

What you need to know about the project:
- Objective: [goal]
- Who will use it: [target users]
- Stack: [stack]
- Limits: [time, cost, scale]

Task:
1. Study this context in depth.
2. Point out constraints or risks that are not obvious.
3. Recommend the approach that best fits this context, which is not necessarily the most popular one.
4. Write code that follows this context strictly.
5. Briefly explain the main decisions you made.

Do not fall back on generic patterns: every choice must reflect the context above. If it is not clear which part to build first, ask me.

Download .txt Download .md Open page

Four-Agent Engineering Team: Architect, Engineer, Reviewer, OptimizerNewCoding & Code ReviewSimulates four collaborating agents on one coding task: an architect designs the system, an engineer builds it, a reviewer checks quality and an optimizer tunes performance, ending with the architecture, implementation, review feedback and final optimized version.

Act as four agents working together on the task below.

Task: [describe what to build]

Roles:
- Architect: designs the system
- Engineer: builds it
- Reviewer: checks the quality
- Optimizer: does a performance pass

Deliver, in this order:
1. Architecture
2. Implementation
3. Review feedback
4. Final optimized version

Download .txt Download .md Open page

Performance Pass on Working Code: Speed, Memory, ScaleNewCoding & Code ReviewReviews code that already works through a performance engineer's eyes, aiming at speed, memory and scalability: finds bottlenecks, wasteful logic and unnecessary re-renders, then returns the issues, the strategies and the optimized code.

Role: you are a performance engineer.

Code: [paste the code]

Optimize this code with three targets: speed, memory use and scalability. Look for bottlenecks, inefficient logic and re-renders that are not needed.

Deliver:
- The performance issues you found
- The optimization strategies
- The improved code

Download .txt Download .md Open page