关于如何加速网站，有很多知识需要了解。这真是令人难以置信。例如，了解服务器和网络、浏览器如何解析内容并做出决策、高效的编码选择以及文件格式的细微差别，这些都使得成为性能专家本身就是一项全职职业。
但您不必成为专家才能关注网页性能，也不必成为专家才能开始对您的网站进行更改以使其更快。即使是网页行业的新手，也有能力显著提高他们所处理的网站的性能。
您可能听说过这个？
如果您先保存数组的长度，而不是在 for 循环的每次迭代中计算它，它会 更快
// this is faster
var l = arr.length;
for (var x = 0; x < l; x++) {
dosmth = arr[x];
}
// than this
for (var x = 0; x < arr.length; x++) {
dosmth = arr[x];
}这正是我 不想谈论的。哈哈，抱歉。
我想谈谈低垂果实。对网页性能有巨大影响的简单更改。
我有一些自己的想法。作为一名前端开发人员，以及一个认为网页非常棒的人，我热衷于任何能使网页变得更好的想法。几年前，我做了一个关于提高网站速度的 10 件事情的演讲，所有这些都是非常容易实现的。
但最近，我在 Twitter 上询问，许多人也有自己的想法。
让我把所有这些都整理一下，列一个清单！请记住，这不是性能提升策略的全面列表。要进入此列表的先决条件是它们 相对容易执行 并且具有 巨大的性能回报。
1) 减少请求
这是我最 喜欢的。每当我可以从页面上删除某些内容而不会真正牺牲任何东西时，感觉都很棒。您可以合并一些 CSS 文件吗？您可以删除跟踪脚本吗？可以将社交分享按钮 替换为简单的链接吗？
Dave Rupert 建议对页面上的所有内容进行清单，以便您了解其存在的原因及其用途。
您还应该考虑 性能预算的概念。性能预算可能规定：您有 X 个请求用于 Y 的总文件大小和 Z 秒的加载时间，任何人都不能超过这些限制。将其作为您网站文化的一部分！
2) 优化资源
您的图像在文件大小方面可能比现在小得多，而不会丢失任何或大部分质量。下载一个像 ImageOptim 这样的应用程序，并在将其用于网络之前将其拖放到其中。
同样的概念适用于各种其他文件类型。与其链接您手动编写的“原始”JavaScript，不如将其通过缩小器运行以减小其文件大小。这会执行一些操作，例如删除空格，甚至执行一些高级操作，例如将函数名称和调用重写为较短的版本。CSS 也是如此，它应该被缩小。
有很多方法可以做到这一点，任何构建过程都可以处理。例如，我使用 CodeKit 并确保我的 SCSS 的输出被压缩
对于 SVG 文件，请查看 SVGOMG！
谷歌性能专家 Das Surma 表示压缩/优化图像 是网页性能中所有最低垂的果实。对于图像和视频，我还建议您查看 Cloudinary 等服务 或 Imgix ，它们专门以超级高效的方式优化和提供图像。
3) 确保您正在使用 Gzip
作为测试，在 DevTools 中打开您的网络选项卡，然后选择一个 CSS 文件。查看响应标头下，查看内容编码是否为 gzip。
如果不是，只需确保服务器上启用了 gzip 编码，就可以节省大量开支。您的主机应该为您提供有关此方面的信息。在 MediaTemple 上，在一个 Apache 服务器上， 这里有一些信息 。这是关于确保 mod_deflate 启用，它会执行 Gzip 压缩。
您甚至可以研究 Brotli，它可能比 Gzip 更好，我注意到 MediaTemple 通过 Securi 防火墙 支持它。
4) 确保您正在使用浏览器缓存
看到上面截图中的第二个箭头了吗？它指向该 CSS 文件的过期日期。请注意，它在 2037 年过期。这意味着浏览器将永久保留该文件，并且在再次需要时无需重新下载。这是一个巨大的性能提升。需要更改文件？更改其名称！ style.css?v=16.4
说到缓存……缓存的一般概念是网页性能低垂果实的重要组成部分。您的网络主机可能会在此处提供建议。例如，他们可能可以为您开启 nginx 反向缓存。或者，如果您正在运行 WordPress 网站，您可能可以安装像 W3 Total Cache 这样的插件，并从中获得回报。
5) 使用 CDN
就像 Tim Murtaugh 所说…… 设置 CDN。
内容分发网络 (CDN) 用于从专门针对此任务进行调整的超高速服务器（例如，它们是“无 Cookie”的，这可以节省一些网络数据开销）提供静态文件（如图像、CSS 和 JavaScript）。此外，它们还会从地理位置尽可能靠近请求该文件的用户的服务器提供这些文件。收益巨大！
这属于低垂果实，因为它通常是一次性设置，并且会永远为您带来好处。研究一下为您的网站设置 Cloudflare ，或类似于 Stack Path 或 KeyCDN 的服务。
Media Temple 提供一个精巧的 CDN 和 Web 应用防火墙一体化服务。
6) 延迟加载和延迟加载内容
延迟加载的想法是，您不会在需要之前请求资源（如图像或视频）。假设您访问一篇博客文章，其中包含 6 张图片，但其中 5 张图片在页面下方很远的地方，而您从未向下滚动过。为什么要请求另外 5 张？
延迟加载有很多技术，因此请允许我链接您到 Jeremy Wagner 在 Google Fundamentals 上的文章 ，其中涵盖了该概念。
延迟加载 JavaScript 的想法很简单。有一些高级方法可以做到这一点，例如代码拆分，但也许最低垂的果实是通过将脚本放在页面底部或直接使用 defer 属性来延迟加载脚本。
7) 使用响应式图片（或至少使用合理的大小）
Zak Nicola 表示他通过 简单地调整其网站上图片的大小到合理尺寸，为本地商业客户取得了“全垒打”。他们将巨大的 4k 图片放在 120x60px 的位置。糟糕透了。这 比你想象的更常见 。
使用合理大小的图片是一个快速获胜的方法。看看 Dave Rupert 的 1.5 倍图片的思考 。这可能是所有内容的良好默认设置。
更进一步， 看看如何使用响应式图片 ，这是用于图片的特殊 HTML，其主要目的是根据情况提供最佳的图片。
<img src="small.jpg"
srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah"><picture>
<source
srcset="examples/images/extralarge.jpg"
media="(min-width: 1000px)">
<source
srcset="examples/images/art-large.jpg"
media="(min-width: 800px)">
<img srcset="examples/images/art-medium.jpg"
alt="…">
</picture>
此外，请考虑诸如 使用静音自动播放的视频代替 GIF 之类的内容。
8) 注意你的字体
使用自定义网页字体可能与常见的性能负担因素一样大：图片和 JavaScript。
你真的需要它们吗？如果你能避免使用任何自定义网页字体，或者删除一些/全部现有的字体，你肯定会看到性能提升。也许可以考虑使用 系统字体栈 。
如果你确实需要使用它们（我不怪你，排版很有趣，并且可以让网站充满活力），那么你仍然有其他选项可以提高它们的性能。最简单的办法是在你的 @font-face 声明 中使用 CSS，形式为 font-display: optional; /* 或 swap */ 。这样，自定义字体将永远不会阻止页面加载，因此你可能会遇到 FOUT（未设置样式文本的闪烁），但永远不会遇到 FOIT（不可见文本的闪烁）。“不可见”的情况对网页性能的影响最大。没有文本的页面几乎没用。
正如 Brian P. Hogan 所说 ，这在感知性能上与实际性能一样重要。
如果你想深入研究加载字体的性能，可以深入研究 Zach Leatherman 的 字体加载策略指南 。
9) 良好的主机/HTTP2/PHP7
你的网页托管本身就有一些性能上的低垂果实。如果你的网站存在响应时间缓慢的性能问题，也许是时候升级到比共享主机更强大的东西了。在速度问题上投入资金并不总是有效，也不总是可行的，但有时却是完美的解决方案。而且它绝对是低垂果实，因为工作量很小。
说到主机，你的网页主机可能可以帮助你升级或配置你的主机，以充分利用可用的最佳技术。
询问你的主机是否有可能利用 HTTP/2，如果你正在运行经典的 CMS（如 WordPress 或 CraftCMS），请使用最新版本的 PHP 和 MySQL，这些版本在近年来获得了巨大的性能提升。
10) Turbolinks
这个 Turbolinks 东西在这个列表中有点像通配符，但我喜欢它，因为如果它能为你工作，你就能以很少的工作量获得一些性能提升（再次强调，低垂果实）。
你听说过 SPA（单页应用）吗？整个想法是，一旦网站加载，即使你在网站上点击、交互和访问其他页面，网站 也永远不会重新加载 。例如，你正在使用 React Router 构建一个 React 网站。URL 仍然会改变，但耗时的完整页面重新加载过程永远不会发生。这都是 Ajax 请求和重新渲染。如果做得好，非常酷。
Turbolinks 将这种行为带到最初并非以这种方式构建的网站上。当点击链接时，它不会刷新页面，而是获取该页面并在当前页面上重新渲染它需要的内容。
资源
- 设计师的 3 个简单性能提升 作者：Una Kravets
- 在你网站上运行 Lighthouse 时，执行它告诉你的操作
- Lara Hogan 的著作 面向性能的设计
- Andrew Del Prete 的 网页性能基础
- 速度检查清单
- 必不可少的图片优化 作者：Addy Osmani