In short
- Slowness on small sites is nearly always big images, extra fonts and scripts you don't need.
- Run PageSpeed Insights on a live link, paste its report into your AI and ask it to fix the top three issues.
- Automated tools catch only some accessibility problems. Do the five-minute keyboard and phone test yourself.
Why it's worth ten minutes
- People leave slow sites. Especially on mobile data.
- Search engines notice. Google uses page experience signals, including speed, as part of how it ranks pages.
- More people can use it. Roughly one in six people worldwide lives with a significant disability. Accessible sites also work better for everyone else: in sunlight, one-handed, on a slow connection.
The numbers to aim for
Three measures make up Google's Core Web Vitals. Each has a "good" zone, a middle zone and a "poor" zone.
| Measure | Good | Needs work | Poor | In plain words |
|---|---|---|---|---|
| Largest Contentful Paint (LCP) | 2.5 s or less | 2.5 to 4 s | over 4 s | The main content appears quickly |
| Interaction to Next Paint (INP) | 200 ms or less | 200 to 500 ms | over 500 ms | Taps and clicks respond without lag |
| Cumulative Layout Shift (CLS) | 0.1 or less | 0.1 to 0.25 | over 0.25 | Things don't jump around while loading |
These are measured at the 75th percentile of real visits. In plain words: a page passes when three out of four visits hit the target.
Field data vs lab data
- Field data comes from real visitors on real phones. It's what Google counts. PageSpeed Insights shows it once a site has enough traffic, so a brand-new site often has none.
- Lab data is a single test run in a pretend phone. Lighthouse gives you this. It's useful for finding problems, but the score will vary from run to run. It reports LCP and CLS but not INP, so use Total Blocking Time as the stand-in for responsiveness.
A small new site usually only gets lab data. That's fine. Fix what it points at, and don't chase a perfect 100.
Images and fonts: the biggest wins
- Image format. Use WebP or AVIF for photos. Use SVG for logos and icons, because it stays sharp at any size and is tiny.
- Image size. Serve images at about twice the size they're shown, no more. A picture shown 600 px wide needs about 1200 px.
- The hero image. Don't lazy-load it. Give it
fetchpriority="high"so the browser fetches it first. As a rule of thumb, aim to keep it under about 200 KB. - Width and height. Set both on every image so the page doesn't jump when it loads.
- Fonts. Use WOFF2, host them on your own site and add
font-display: swap. System fonts are the fastest of all, because there is nothing to download.
Before
A 4 MB hero JPEG
Straight from a phone camera, shown at 1200 px wide. On a slow connection the top of the page stays blank for seconds.
After
A 150 KB WebP
Resized to about 2400 px wide, converted to WebP, with width and height set and fetchpriority="high". Same look, around 25 times smaller.
WCAG 2.2 AA in plain words
WCAG 2.2 is the web accessibility standard. Level AA is the usual target. Ten of its rules cover most of what goes wrong on small sites.
| Rule | What it means |
|---|---|
| 1.4.3 Contrast | Text is at least 4.5:1 against its background (3:1 for large text). |
| 1.4.11 Non-text contrast | Buttons, input borders and icons you need to understand are at least 3:1. |
| 1.4.10 Reflow | At 320 px wide (or 400% zoom) the page works without sideways scrolling. |
| 2.4.7 Focus visible | When you press Tab, you can see which item is selected. |
| 2.4.11 Focus not obscured | The selected item isn't hidden behind a sticky header or cookie banner. |
| 2.5.8 Target size | Buttons and links are at least 24 × 24 px. Aim for 44 px, which is easier for thumbs. |
| 2.5.7 Dragging | Anything you can drag (sliders, reordering) also works with a tap or click. |
| 3.2.6 Consistent help | If you offer help or contact details, they're in the same place on every page. |
| 3.3.7 Redundant entry | Don't make people type the same thing twice in one process. |
| 3.3.8 Accessible authentication | Logging in doesn't depend on solving a puzzle or remembering by memory alone. Pasting passwords must work. |
Focus Appearance (2.4.13) sounds similar to 2.4.7, but it's a stricter AAA rule. It's a nice extra, not part of AA.
Free tools
- PageSpeed Insights: paste a link, get speed and accessibility scores with a list of fixes. It needs a public link, so publish a draft first.
- Lighthouse: built into Chrome. Right-click the page, choose Inspect, open the Lighthouse tab and run it. It won't audit a file you double-clicked (a
file://address), so use a local preview your AI starts for you or a published draft. - WAVE: shows accessibility problems right on top of your page.
- axe DevTools: a free browser extension that lists accessibility issues and says how to fix each.
- Your keyboard and your phone. Still the best tools. See the five-minute test below.
Tools catch only some problems
Automated checkers find the easy, measurable issues such as low contrast and missing labels. They can't tell whether your alt text makes sense or whether the page is usable by keyboard. A perfect score doesn't mean the site is accessible.
The easiest workflow
Run PageSpeed Insights or Lighthouse, copy the list of issues, paste it into your AI and say the prompt below.
- Here is my PageSpeed report. Fix the top 3 issues, and explain each change in one line.
Speed: what to ask your AI
On small sites, slowness almost always comes from the same few things: huge images, too many fonts, and scripts the page doesn't need.
Audit this site for speed and fix what you can: - Images: resize to the largest size they're shown at (about 2x for sharp screens), compress them, and use WebP or AVIF. Add width and height attributes so nothing jumps. Lazy-load images below the first screen, but not the main hero image. - Fonts: at most two families and three weights; use font-display: swap; preload only the main body font if needed. - Scripts: remove libraries the page doesn't need (a one-page site rarely needs a framework, jQuery or an animation library). Load the rest with defer. - Remove unused CSS and any embedded videos, maps or widgets that aren't essential; replace them with a link or an image that loads the embed on click. - No layout shift: reserve space for images, embeds and banners. Then estimate the page weight before and after, and list anything you couldn't fix.
Accessibility: what to ask your AI
Audit this site against WCAG 2.2 AA and fix what you can: - Structure: one h1, headings in order without skipping levels, landmarks (header, nav, main, footer), lang attribute set. - Images: meaningful alt text; alt="" for decorative images; no text baked into images. - Links and buttons: descriptive text (no "click here"), buttons for actions and links for navigation, accessible names on icon-only buttons. - Keyboard: everything reachable and usable with Tab, Enter, Space and Escape, in a logical order; a visible focus outline that isn't hidden behind a sticky header or cookie banner; a "skip to content" link; no keyboard traps in menus or pop-ups. - Colour: text contrast at least 4.5:1 (large text 3:1), UI parts 3:1, and nothing shown by colour alone. - Targets: buttons and links at least 24 x 24 px, ideally 44 px. - Forms: visible labels tied to inputs, clear error messages next to fields, correct input types (email, tel), no asking for the same detail twice. - Motion: respect prefers-reduced-motion; nothing flashes more than three times a second; auto-playing content can be paused. - Zoom: the page works at 200% zoom and at 320 px wide without horizontal scrolling. Report each issue found, its fix, and anything that needs my input (for example alt text only I can write).
Alt text: before and after
Before
alt="image1.jpg" or alt="bakery"
After
alt="Baker lifting a tray of sourdough loaves out of the oven"
Say what the picture shows and why it's there. If it's pure decoration, use alt="" so screen readers skip it. Only you know what matters in your photos, so check what the AI wrote.
The five-minute test you can do yourself
Do these five things. They find problems no tool will.
0 of 6 done
Anything you trip over, describe it to your AI in your own words: "When I tab through the page, I can't see which link is selected." That's a perfectly good prompt.
Launch it
Some checks, like PageSpeed Insights, need a real link. Paste Launch my site on PageLemon.com into your chat to get one, run the checks on the live page, then ask your AI to fix what they find. Your link stays the same while you improve it.