编写快速加载的 HTML 页面
优化后的网页不仅能为访客提供更快的响应速度，还能减少您的网络服务器和互联网连接的负载。这对于高流量网站或因突发新闻等异常情况导致流量激增的网站至关重要。本文介绍了如何根据常识和实验来提高页面加载时间。
优化页面加载性能不仅适用于窄带拨号或移动设备访客查看的内容。它对于宽带内容同样重要，即使是连接速度最快的访客也能带来显著的改进。
提示
减少页面权重
页面权重是影响页面加载性能最重要的因素。
通过消除不必要的空白和注释（通常称为最小化），以及将内联脚本和 CSS 移至外部文件来减少页面权重，可以在不大幅改变页面结构的情况下提高下载性能。
诸如 HTML Tidy 之类的工具可以自动从有效的 HTML 源代码中去除前导空白和多余的空行。其他工具可以通过重新格式化源代码或混淆源代码并将长标识符替换为短版本来“压缩”JavaScript。
最小化文件数量
减少网页中引用的文件数量可以降低下载页面所需的 HTTP 连接数量，从而减少发送这些请求和接收其响应所需的时间。
根据浏览器的缓存设置，它可能会为每个引用的文件发送一个带有 If-Modified-Since 头的请求，询问该文件自上次下载以来是否已被修改。花费太多时间查询引用文件的最后修改时间可能会延迟网页的初始显示，因为浏览器在渲染页面之前必须检查每个文件的修改时间。
如果您在 CSS 中大量使用背景图像，可以通过将图像组合成一个（称为图像精灵）来减少所需的 HTTP 查找次数。然后，每次您需要将其用作背景时，只需应用相同的图像并相应地调整 x/y 坐标。此技术最适用于尺寸有限的元素，并且不适用于所有背景图像的使用。但是，更少的 HTTP 请求和单个图像缓存有助于减少页面加载时间。
使用内容分发网络（CDN）
就本文而言，CDN 是一种缩短服务器与访客之间物理距离的方法。随着服务器源与访客之间距离的增加，加载时间也会增加。假设您的网站服务器位于美国，并且有一位来自印度的访客；与来自美国的访客相比，印度访客的页面加载时间会更高。
CDN 是一个地理分布式服务器网络，它们协同工作以缩短用户与您的网站之间的距离。CDN 存储您网站的缓存版本，并通过最接近用户的网络节点将其提供给访客，从而减少延迟。
延伸阅读
减少域名查找
由于每个单独的域名都会在 DNS 查找中花费时间，因此页面加载时间将随着 CSS 链接、JavaScript 和图像 src 中出现的单独域名数量而增加。
这可能并不总是实用；但是，您应该始终注意在页面中只使用最少的必要不同域名。
缓存重复使用的内容
确保任何可以缓存的内容都已缓存，并设置适当的过期时间。
特别是，请注意 Last-Modified 标头。它允许高效的页面缓存；通过此标头，会将有关用户代理想要加载的文件（例如上次修改时间）的信息传达给用户代理。大多数 Web 服务器会根据文件系统中存储的最后修改日期自动将 Last-Modified 标头附加到静态页面（例如 .html、.css）。对于动态页面（例如 .php、.aspx），这当然无法完成，并且不会发送该标头。
因此，特别是对于动态生成的页面，对这个主题进行一些研究是有益的。它可能有点复杂，但它会为通常无法缓存的页面节省大量页面请求。
更多信息
优化页面组件的顺序
首先下载页面内容，以及初始显示可能需要的任何 CSS 或 JavaScript，以便用户在页面加载过程中获得最快的感知响应。此内容通常是文本，因此可以在传输过程中受益于文本压缩，从而为用户提供更快的响应。
任何需要页面完成加载才能使用的动态功能都应最初禁用，然后在页面加载后才启用。这将导致 JavaScript 在页面内容之后加载，从而改善页面加载的整体外观。
减少内联脚本的数量
内联脚本对于页面加载而言可能代价高昂，因为解析器必须假设内联脚本在解析过程中可能会修改页面结构。减少内联脚本的使用，特别是减少使用 document.write() 输出内容，可以提高整体页面加载速度。使用DOM API 来操作页面内容，而不是 document.write()。
使用现代 CSS 和有效的标记
使用现代 CSS 可以减少标记量，可以减少布局方面对（间隔）图像的需求，并且通常可以替换样式化文本图像——它们的“成本”远高于等效的文本和 CSS。
使用有效标记还有其他优点。首先，浏览器在解析 HTML 时无需执行错误修正（这与是否允许用户输入中的格式变化然后程序化地“修正”或规范化它；或者相反，强制执行严格、零容忍的输入格式的哲学问题无关）。
此外，有效标记允许自由使用其他可以 预处理 您的网页的工具。例如，HTML Tidy 可以删除空白和可选的结束标签；但是，它会拒绝在具有严重标记错误的页面上运行。
分块您的内容
用于布局的表格是遗留方法，不应再使用。应改用利用浮动、定位、弹性盒或网格的布局。
表格仍然被认为是有效的标记，但应仅用于显示表格数据。为了帮助浏览器更快地渲染您的页面，您应该避免嵌套表格。
与其深度嵌套表格，如
<table>
<table>
<table>
…
</table>
</table>
</table>
不如使用非嵌套表格或 div，如
<table>
…
</table>
<table>
…
</table>
<table>
…
</table>
最小化和压缩 SVG 资产
大多数绘图应用程序生成的 SVG 通常包含可以删除的不必要元数据。配置您的服务器，对 SVG 资产应用 gzip 压缩。
最小化和压缩您的图像
大图像会导致您的页面加载时间更长。考虑在将图像添加到页面之前压缩它们，可以使用图像处理工具（例如 Photoshop）内置的压缩功能，或使用专门的工具（例如 Compress JPEG 或 Tiny PNG）。
为图像和表格指定尺寸
如果浏览器能够立即确定图像和表格的高度和/或宽度，它将能够在不重新排版内容的情况下显示网页。这不仅加快了页面的显示速度，而且防止了页面加载完成时布局出现烦人的变化。因此，应尽可能为图像指定 height 和 width。
表格应使用 CSS 选择器：属性组合
table-layout: fixed;
并应使用 <col> 和 <colgroup> 元素指定列宽。
对图像使用延迟加载
默认情况下，图像是急切加载的；也就是说，图像在 HTML 中处理后立即获取并渲染。所有急切加载的图像都在窗口的 load 事件发送之前渲染。切换到图像的延迟加载会告诉浏览器推迟加载图像，直到它们即将被需要以绘制可视视口。
要将图像标记为延迟加载，请将其 loading 属性指定为值 lazy。设置此项后，图像只会在需要时加载。
<img src="./images/footerlogo.jpg" loading="lazy" alt="MDN logo" />
请注意，延迟加载的图像在触发 load 事件时可能不可用。您可以通过检查其布尔 complete 属性的值是否为 true 来确定给定图像是否已加载。
明智地选择您的用户代理要求
为了在页面设计中获得最大的改进，请确保为项目指定合理的用户代理要求。不要要求您的内容在所有浏览器中都像素完美地显示，尤其是在低版本浏览器中。
理想情况下，您的基本最低要求应基于对支持相关标准的现代浏览器的考虑。这可以包括 Firefox、Google Chrome、Opera 和 Safari 的最新版本。
但是请注意，本文中列出的许多提示都是适用于任何用户代理的常识性技术，并且可以应用于任何网页，无论浏览器支持要求如何。
如果可能，使用 async 和 defer
使 JavaScript 脚本与 async 和 defer 属性兼容，并尽可能使用 async，特别是当您有多个脚本元素时。
这样，当 JavaScript 仍在加载时，页面可以停止渲染。否则，浏览器将不会渲染任何位于没有这些属性的脚本元素之后的内容。
注意：尽管这些属性在页面首次加载时帮助很大，但您应该使用它们，但不要假设它们适用于所有浏览器。如果您已经遵循了所有 JavaScript 最佳实践，则无需更改您的代码。
示例页面结构
另见
- 书籍：《加速您的网站》作者 Andy King
- 通过 web.dev 学习性能 (2023)
- 用于分析和优化性能的工具：Google PageSpeed Tools 和 PageSpeed Insights