How to build a website that scores 100 on Google PageSpeed Insights

Step one

Start by measuring

Open pagespeed.web.dev, enter your address, choose Mobile and read the four scores. Then open the list of issues and fix the first one it names, which is usually an oversized image or an unnecessary script (the same three steps appear in our press release). Test again. Lab scores vary slightly from run to run, so run it more than once before you decide a fix worked (see the code teardown).

The four categories

What moves each score

PageSpeed Insights runs Lighthouse and reports four separate categories. A perfect score needs all four at once, and each responds to different code decisions.

Performance

Lighthouse weights Total Blocking Time at 30%, Largest Contentful Paint at 25%, Cumulative Layout Shift at 25%, First Contentful Paint at 10% and Speed Index at 10%. Blocking time comes from JavaScript, so a page that ships almost none removes the heaviest-weighted penalty first. After that: preload the image that is likely to be the largest, reserve space for every image with width and height, and keep video and analytics from loading until the page has finished (all of it explained in the code teardown).

Accessibility

Text needs a contrast ratio of at least 4.5:1, links need an underline so color is never the only signal, and ARIA attributes should appear only where they are real. A wrong ARIA role scores worse than none (see the code teardown).

Best Practices

This category rewards what you leave out: HTTPS, no console errors, no missing icon or image files, correct image proportions and no third-party code in the head (see the code teardown).

SEO

A clear title, a meta description, a canonical link, a viewport tag, descriptive link text and a sitemap. Our own rule of thumb is a title of 60 characters or fewer and a description of 140 to 160, with the key point first (see the code teardown).

A fix order

The order that saves time

• Oversized images: compress them, use a modern format and set width and height.
• Unneeded scripts: remove them, or load them after the page finishes.
• Layout shifts: reserve space for anything that loads late.
• Contrast and links: check the 4.5:1 ratio and underline links.
• Metadata: title, description, canonical, viewport.
• Test again, on mobile, more than once.

This is our order, based on the kinds of issues the report tends to name first. Your report may name something else first, and that is the one to fix.

Keeping it

How a perfect score gets lost

The score is a property of the code on the day you test it. A chat widget, a tag manager, a heavy font bundle or an uncompressed video added later can lower it, which is why you should re-test after every change (see the code teardown). For a live example, ZenMasterWorks' homepage recorded four 100s on mobile on October 30, 2026 (public report).

If you want a head start

Start from code that already passes

Every template here is the complete, hand-coded file behind a live sample site with a public report. Open a sample such as the pet grooming site, run the test yourself, then decide. Templates are $29 each or $99 for all of them (see the catalog), and the $19 book walks through the method. Downloads work on an honor system (how it works), and building for clients needs a different license (licensing).