C. Website Launch Readiness · Prompt 30
Images & Page Weight
Get the free PDFWhy it matters
Oversized images are a common reason a good-looking site feels slow on a phone, and speed is part of the page experience and of search quality signals.
Modeled on
Lighthouse and web.dev guidance on images and page weight.
How to run this prompt
- Switch to a mode that does not edit files. In Cursor that is Ask or Plan. In Claude Code that is Plan mode.
- Paste the audit prompt. Wait for the report. It must stop and ask which IDs to fix.
- Read the report. Keep the IDs you agree with.
- Switch to a mode that can edit. Paste the fix prompt and the IDs you chose.
- Switch back to the read-only mode and paste the same audit prompt again. Confirm those IDs are gone.
- Cursor: audit in Ask mode or Plan mode. Fix in Agent mode.
- Claude Code: audit in Plan mode (Shift+Tab cycles to it). Fix in Normal mode, which can edit.
- Any other tool: audit in Chat, Discuss, or Plan mode, whichever answers without editing files. If the tool has no such mode, the prompt itself forbids edits. Fix in the mode that is allowed to edit files.
The audit prompt
MODE: AUDIT ONLY. Do not create, edit, or delete any file. Do not run commands
that change anything: no installs, migrations, git commits, deploys, or "--fix" flags.
If your tool has an Ask, Plan, Chat, or Discuss mode, use it for this prompt.
Before you start:
- Tell me the stack you detect (framework, language, database, auth, hosting,
payment provider) and which folders you will review.
- If a check below does not apply to this stack, write "Not applicable" and why.
- If you can run read-only commands, run the ones listed. If you cannot, list them
so I can run them and paste the output.
Images & Page Weight: what to check
Audit images and page weight from the repo and, if a build exists, from the built files. Do not invent a Lighthouse score you did not run.
1. List images with file size and the size they are displayed at, if the layout sets it. Flag a file much larger than its display size, or over about 200 KB without a stated reason.
2. Say whether modern formats (WebP or AVIF) are used, whether width and height are set to limit layout shift, and whether phones download the desktop file.
3. Check that below-the-fold images can lazy-load, and that the hero image is not lazy-loaded.
4. Check alt text: descriptive for meaningful images, empty for decorative ones. Flag names like IMG_2043.png.
5. Check font loading: how many families and weights, and whether font-display is swap or optional so text is not invisible.
6. Note third-party scripts and unused-looking CSS or JS only when you can point at a file that nothing imports.
7. Core Web Vitals are LCP, CLS, and INP. INP replaced FID as a Core Web Vital in March 2024. If you did not run Lighthouse, say which pages I should run and which numbers to record. Do not fabricate a score.
8. Return a table of image findings and the changes you would make in a later fix pass. Do not convert files now.
Evidence rules:
- Every finding cites a file path and line number, or the exact command output used.
- Mark each finding Confirmed (seen in the code) or Needs manual check (depends on
something outside the repo, such as a dashboard setting or production data).
- Never print a full secret. Show the first 4 characters and the location only.
- If you are not sure, say so. Do not invent files, settings, or results.
Severity: Critical = exploitable now, or leaks real data or money. High = serious
with little effort. Medium = weakens defenses or needs a second bug. Low = hygiene.
Report:
- Summary: count of findings by severity.
- Table: ID | Severity | Confirmed? | Finding | Evidence | Why it matters | Suggested fix | Effort
(IDs for this prompt use the prefix P30, for example P30-1, P30-2.)
- Checked and fine: what you verified is already OK.
- Could not check: what I need to look at myself, and where.
Then stop. Do not fix anything. Ask me which IDs I want fixed.