如何提高静态 HTML 网站的页面加载速度？
HTML 是 Internet 的基础，Web 服务器将 HTML 页面发送到浏览器前端。 像 Chrome 这样的浏览器会解释 HTML 标记并以可读的方式显示页面内容。 对于那些使用 PHP 和 WordPress 等内容管理系统的网站，这个概念是相同的。 然而，在这些日子里，创建一个网站是不够的。 您必须优化您的网站以实现快速加载，以获得良好的搜索引擎排名和用户体验。 在本文中，我们将探讨如何加速您的静态 HTML 网站并提高将您的网站推到 Google 搜索结果顶部的可能性。
开始之前 – 静态 HTML 网站
请记住，在本文中，我们讨论的是您自己创建的静态 HTML 网站。 您可以使用自己的设计创建 HTML 网站，也可以使用 Bootstrap 等现成的框架。 一般来说，您可以在您的服务器上上传 HTML 页面和其他资源（图像/CSS/JS）并从浏览器访问该站点。 除了域名和托管帐户，您不需要任何其他第三方工具来实现此目的。 或者，您可以使用 Mobirise 等第三方工具创建静态 HTML 页面并通过 FTP 上传。
我们不讨论以下情况：
- 像 WordPress 这样的内容管理系统 – WordPress 提供了完整的优化套件来提高您网站的加载速度。 查看我们关于优化 WordPress 网站页面加载时间的文章。
- Weebly、Wix 等网站构建工具——这些平台不是开源解决方案，这基本上意味着您在平台内的优化选项有限。 您可以使用本文中建议的一些选项。 但是，您可能无法优化诸如组合 CSS/JS、删除渲染阻塞资源等内容，因为您无法访问服务器。
在 Google PageSpeed Insights Tool 中检查页面速度
既然上下文已经清楚了，我们将继续前进。 开始优化的最佳方法是首先了解您网站上存在的基本问题。 为了找到与速度相关的问题，请转到 Google PageSpeed Insight 工具并检查您网站的分数。 一开始不要太担心分数，向下滚动并检查机会部分以提高分数。
请注意，PageSpeed Insights 工具中显示的机会不会直接影响分数。 作为一般规则，当您在网站的首屏（标题部分）部分遇到问题时，分数会很低。 它包括渲染阻塞资源、预加载字体和图像、与第三方代码累积布局移位等。因此，您可以结合机会和一般规则来提高静态 HTML 网站的页面加载速度。
如何提高静态 HTML 网站的页面加载速度？
您可以使用以下功能来提高您网站的速度。
1. 合并和缩小 CSS 和 JS 文件
静态 HTML 网站将具有 CSS 样式表作为定义 HTML 页面上元素样式的最低资源。 此外，您可以使用其他 JavaScript 文件在您的网站上添加其他功能，例如滑块。
- 您需要做的第一件事是删除 CSS / JS / HTML 文件中不必要的空格和注释。 这称为缩小，可以减小文件大小并提高页面加载速度。 使用这些 CSS、JS 和 HTML 缩小工具从文件中删除不必要的混乱。 请记住，缩小的 CSS 和 JS 文件将具有 .min.css 和 .min.js 之类的扩展名。
- 请咨询您的托管公司并启用 GZIP 压缩来压缩您的 HTML 内容。 这将减少提供给浏览器的文件大小并显着提高页面速度。 您可以使用此工具验证您的站点是否使用 GZIP 压缩并找到节省的大小。
- 结合 CSS 和 JS 文件将帮助您减少对服务器的 HTTP 请求数量。 因此，您可以组合 CSS 文件，而不是在不同的样式表中使用样式。 但是，如果您的托管服务器支持支持并行 HTTP 请求的 HTTP/2 协议，则不需要这样做。 此外，除非您知道如何在文件中正确组合代码，否则组合 JS 文件可能会破坏布局。
2. 移除渲染阻塞资源
下一步是从站点的折叠（标题）部分上方删除渲染阻塞资源。 根据经验，请确保在 HTML 页面的正文部分之后链接所有 JS 文件。 这将帮助您延迟脚本加载并避免渲染阻塞问题。
- 转到 Google PageSpeed Insights 工具并测试您的网站以测量页面加载速度。
- 如果您对渲染阻塞资源有任何警告，请记下文件名。
- 将文件从页眉部分移动到页脚区域。
请记住，并非在所有情况下都可以将文件移动到页脚区域。 重新排列文件时，检查站点的布局和功能是否正常。 此外，您可能需要禁用合并文件以查找导致问题的资源文件。
3. 使用内容交付网络 (CDN)
以上两个选项在本质上更具技术性，可能对您来说有些困难。 为了避免浪费时间和破坏站点的布局，最好的解决方案是使用 Cloudflare StackPath 之类的内容交付网络 (CDN)。
- 您可以使用 CDN 网络合并和缩小文件，而不是在您的服务器上进行。
- 提高速度，尤其是当您为国际用户提供内容时。
- 通过阻止自动爬虫程序以及蛮力和 DDoS 保护来提高安全性。
基本的 Cloudflare CDN 是免费的，对于大多数静态 HTML 网站来说已经足够了。 您可以通过单击合并和缩小文件，并在 Google PageSpeed Insights 工具中测试它如何影响您的页面加载速度。 如果您使用的是 Bootstrap 等框架，请确保包含 CDN 资源，而不是从您的服务器提供源文件。
4.避免第三方代码
改善页面加载时间的最重要因素之一是限制在您的网站上使用第三方代码。 问题是您无法控制第三方代码的加载行为。 动态加载行为将影响速度参数，如累积布局偏移和最大内容绘制。
- 页面加载时，将 Google AdSense 等广告置于可见区域下方。 不幸的是，这会降低点击率和浏览量，从而直接影响您的收入。
- 在正文部分之后插入 Google Analytics 或任何其他跟踪代码。
- 避免在标题中插入代码以进行社交共享。
- 如果您使用的是 Google 字体，请确保以简化的方式使用字体粗细和字体系列。 这将帮助您减少文件数量并更快地从 Google 的服务器获取它们。
5. 预加载字体和图像
另一个流行的页面速度问题是关于在标题部分加载的字体和图像的预加载。 如果您在 Google PageSpeed 中看到警告消息，请在标题部分添加以下代码。 确保将文件名替换为您在 Google PageSpeed Insights 中看到的文件名。
<link rel="preload" href="https://www.webnots.com/how-to-improve-page-loading-speed-of-static-html-websites/font-file" as="font" crossorigin="anonymous">
<link rel="preload" as="image" href="image-file">这非常有用，尤其是在您的网站上使用字体真棒图标时。
6. 图像——压缩和使用下一代格式
我们在此处解释的最后一个选项是压缩您在网站上使用的图像。 由于静态 HTML 网站没有任何内置选项来减小图像的大小，因此您必须在上传到服务器之前手动压缩它们。
- 一些网络服务器在上传时可以选择压缩图像。 请与您的托管公司核实他们是否为此目的提供任何工具。
- 否则，请使用图像压缩工具在不损失质量的情况下减小图像大小。
- 此外，您可以将图像格式转换为 JPEG-2000 或 JPEG XR。 通常，VPS 服务器可以选择以 WebP 格式服务器图像，您可以与您的托管公司确认。 在这种情况下，您不需要任何转换，因为它会自动从服务器端为每个图像发生。 使用 WebP、JPEG-2000 或 JPEG XR 中的图像将帮助您修复 Google PageSpeed Insights 工具中以下一代格式提供图像的问题
7. 使用关键 CSS
当您在整个站点中拥有相同的标题部分时，有一种简单的方法可以提高加载速度。 当页面在浏览器窗口中加载时，您可以仅将 CSS 用于可见的标题部分，而不是在标题中加载整个 CSS 文件。 这称为关键 CSS，您可以从第三方工具生成。
- 去 关键的 CSS 生成器 工具并提供您的网站 URL。
- 生成关键的 CSS 并复制内容。
- 在 HTML 站点的标题部分内的
标记之间分页复制的样式。
- 您可以将主样式表推迟到页脚部分以避免呈现阻塞 CSS 问题。
