Page Speed HTML Checklist
Paste a page's HTML to find render-blocking scripts, images without size or lazy loading, missing viewport, @import, document.write and more.
Open the page, use "View page source" (Ctrl+U), copy everything and paste it here.
Add defer (or async for independent scripts) so the browser can render the page before the script downloads.
<script src="https://cdn.example.com/analytics.js">
Set width and height (or CSS aspect-ratio) so the browser reserves space and the layout does not shift (CLS).
<img src="/hero.jpg" alt="Hero">
Add loading="lazy" to images that are not visible in the first screen.
<img src="/b.png" alt="B" width="300" height="200">
Serve WebP or AVIF (e.g. with <picture>) – usually 25–50% smaller at the same quality.
<img src="/hero.jpg" alt="Hero"> <img src="/a.png" alt="A" width="300" height="200"> <img src="/b.png" alt="B" width="300" height="200">
Add loading="lazy" to embeds such as videos and maps.
<iframe src="https://www.youtube.com/embed/xyz">
Add <meta name="viewport" content="width=device-width, initial-scale=1"> for proper mobile rendering.
<meta name="viewport">
Add <meta charset="UTF-8"> as the first element in <head>.
<meta charset="UTF-8">
Add <link rel="preconnect"> for important third-party origins to set up connections early.
cdn.example.com
Passed checks (8)
- ✓ Few render-blocking stylesheets
- ✓ No CSS @import
- ✓ Inline @font-face rules set font-display
- ✓ The first image is not lazy-loaded
- ✓ No document.write()
- ✓ Inline code is small
- ✓ DOM size is reasonable
- ✓ HTML size is reasonable
What is Page Speed Checklist?
This tool reviews the HTML source of a page against a checklist of common front-end performance problems and explains how to fix each one: render-blocking scripts and stylesheets, CSS @import, @font-face without font-display, images without dimensions or lazy loading, a lazy-loaded hero image, legacy image formats, iframes without lazy loading, missing viewport or charset, document.write, large inline code, missing preconnect and oversized DOM or HTML.
How to use Page Speed Checklist
- Open your page, use View page source (Ctrl+U), copy everything.
- Paste the HTML and press Analyze.
- Review the findings sorted by impact, with the offending tags shown as samples.
- Expand "Passed checks" to see what is already fine.
Example
The sample page (analytics.js without defer, hero.jpg without size, iframe without lazy, no viewport)
8 possible improvements: 1 render-blocking script, 1 image without width/height, 1 below-the-fold image without lazy loading, 3 JPEG/PNG images, 1 iframe without lazy loading, no viewport, no charset, 1 third-party origin without preconnect
When to use Page Speed Checklist
Use it for a quick static review of templates or pages, or when you cannot run Lighthouse. It does not measure real loading times or Core Web Vitals and cannot see resources added by JavaScript; use Lighthouse or PageSpeed Insights for lab and field data.
How Page Speed Checklist works
The HTML is scanned in your browser with a lightweight tag parser after removing comments. Each rule inspects specific tags and attributes – for example external <script> tags in <head> without async, defer or type=module, <img> without both width and height, images after the first two without loading="lazy", or more than 1,500 elements in total. Third-party origins of scripts and stylesheets are compared with preconnect and dns-prefetch links. No page is loaded and no JavaScript runs.
Common Use Cases
- Find scripts that block rendering in a theme's header.
- Spot images causing layout shift because they lack width and height.
- Check that the hero image is not lazy-loaded (bad for LCP).
- Review HTML email or landing page templates before launch.
FAQs
Is this the same as Google PageSpeed Insights?
No. PageSpeed Insights loads the page and measures it. This tool only reads the HTML you paste, so it is instant and private but cannot measure speed.
Why should the first image not be lazy-loaded?
The largest image above the fold is usually the Largest Contentful Paint element. Lazy loading delays it until layout, which hurts LCP.
Should every script use defer?
Scripts that need the DOM and run in order should use defer; independent scripts like analytics can use async. Inline critical code should stay small.