页面速度 HTML 检查清单

粘贴页面的 HTML，找出阻塞渲染的脚本、没有尺寸或懒加载的图片、缺少 viewport、@import、document.write 等问题。

页面的 HTML 源代码

打开页面，使用“查看网页源代码”（Ctrl+U），全部复制后粘贴到这里。

HTML 大小 0.4 KB · 11 个元素 · 2 个脚本 · 1 个样式表 · 3 张图片

可改进项：8

影响大<head> 中有 1 个阻塞渲染的脚本

添加 defer（独立脚本可用 async），让浏览器在脚本下载前就能渲染页面。

<script src="https://cdn.example.com/analytics.js">

影响中等1 张图片缺少 width 和 height

设置 width 和 height（或 CSS aspect-ratio），让浏览器预留空间，避免布局偏移（CLS）。

<img src="/hero.jpg" alt="Hero">

影响小1 张首屏以下的图片没有 loading="lazy"

为首屏不可见的图片添加 loading="lazy"。

<img src="/b.png" alt="B" width="300" height="200">

影响小3 张图片为 JPEG/PNG/GIF 格式

提供 WebP 或 AVIF 格式（例如用 <picture>）——同等画质下通常小 25–50%。

<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">

影响小1 个 iframe 没有 loading="lazy"

为视频、地图等嵌入内容添加 loading="lazy"。

<iframe src="https://www.youtube.com/embed/xyz">

影响大缺少 viewport meta 标签

添加 <meta name="viewport" content="width=device-width, initial-scale=1"> 以便在移动端正确显示。

<meta name="viewport">

影响小<head> 中没有字符集声明

将 <meta charset="UTF-8"> 作为 <head> 中的第一个元素。

<meta charset="UTF-8">

影响小1 个第三方来源没有 preconnect

为重要的第三方来源添加 <link rel="preconnect">，提前建立连接。

cdn.example.com

已通过的检查（8）

✓ 阻塞渲染的样式表很少
✓ 没有 CSS @import
✓ 内联 @font-face 规则已设置 font-display
✓ 第一张图片没有懒加载
✓ 没有使用 document.write()
✓ 内联代码体积较小
✓ DOM 大小合理
✓ HTML 大小合理

这是针对您粘贴的 HTML 的静态检查清单——不会加载页面、执行 JavaScript 或测量真实速度。实验室数据和真实用户数据（Core Web Vitals）请使用 Lighthouse 或 PageSpeed Insights。

什么是页面速度清单？

这个工具对照一份常见前端性能问题的清单来审查页面的 HTML 源码，并说明如何修复每一项：阻塞渲染的脚本和样式表、CSS @import、没有 font-display 的 @font-face、没有尺寸或懒加载的图片、被懒加载的首屏大图、旧式图片格式、没有懒加载的 iframe、缺少 viewport 或 charset、document.write、过大的内联代码、缺少 preconnect，以及过大的 DOM 或 HTML。

如何使用页面速度清单

打开你的页面，使用“查看网页源代码”（Ctrl+U），复制全部内容。
粘贴 HTML 并点击“分析”。
查看按影响程度排序的发现，有问题的标签会作为示例显示。
展开“已通过的检查”，查看哪些已经没有问题。

示例

输入

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

示例页面包含没有 defer 的 analytics.js、没有尺寸的 hero.jpg、没有懒加载的 iframe 和缺失的 viewport。

何时使用页面速度清单

适合对模板或页面做快速的静态审查，或在无法运行 Lighthouse 时使用。它不测量真实加载时间或 Core Web Vitals，也看不到由 JavaScript 添加的资源；实验室数据和真实用户数据请使用 Lighthouse 或 PageSpeed Insights。

页面速度清单的工作原理

HTML 在去除注释后，由你浏览器中的轻量标签解析器扫描。每条规则检查特定的标签和属性，例如 <head> 中没有 async、defer 或 type=module 的外部 <script> 标签、同时缺少 width 和 height 的 <img>、前两张之后没有 loading="lazy" 的图片，或者元素总数超过 1,500 个。脚本和样式表的第三方来源会与 preconnect 和 dns-prefetch 链接进行比较。不会加载任何页面，也不会运行任何 JavaScript。