提高网站性能的 5 个快速步骤
提高网站性能的 5 个快速步骤
您是否遇到过一个您没有费心优化的项目/网站，您需要在短时间内加快速度？
那么这篇文章可能会对你有所帮助！
有很多技术和模式可以加速 Web 应用程序的工作，但在本文中，我将考虑我个人认为最有效、最快速且易于实现的方法。
TL;博士
1.优化媒体
2.压缩文本文件
3.缓存静态文件
4.使用代码拆分
5.消除渲染阻塞资源
1.优化媒体
媒体文件通常是浏览器下载的最大文件之一，因此它们的优化可以显着加快您网站的工作速度。
- 使用以下服务减少您的 PNG、JPEG 小PNG 或类似的
- 根据将显示的大小调整图像大小。
如我们所见，顶部和底部的小猫看起来一样（可爱）。因此，如果我们的图像容器尺寸明显更小，则无需上传 3700x3700 像素的图像。因此，我们可以将图像缩小到 400x400px 的 div 大小，并使加载时间加快 5 倍，文件大小缩小 1mb 以上。
- 为不同的视口大小显示不同的图像。如果您在移动设备上有不需要的大背景图片，您可以加载较小的背景图片或仅设置背景颜色。为此，您将需要使用媒体查询。
由于媒体查询，浏览器将知道大背景只需要加载 1900 像素或更多。
- 将媒体转换为 Webp、Webm 并使用它们。
当您使用 WebP 格式时，图像尺寸较小，但它们几乎不会影响质量，从而使您的页面加载速度更快。
大多数较新版本的浏览器都支持 webp/webm 格式。
对于较旧的浏览器，您始终可以使用其他格式作为后备：
唯一的缺点是您必须存储至少两种图像格式，这将花费您额外的空间。大多数时候这不是问题。
- 删除图像元数据（如果你想发疯）
平均而言，图像元数据占网络上典型 JPEG 文件的 16%。它用于存储描述有关图像权限和管理信息的数据。图像的元数据也可以由 AI 发送和使用。
因此，如果您不关心版权问题、人工智能并想发疯——只需使用以下工具减少元数据 维雷西夫 .
2.压缩（GZIP）
当我们使用网站时，我们会收到 HTML , CSS 和 JS 来自服务器的文件。这些都是文本文件，可以压缩。
如果我们将 gzip 文件发送到浏览器而不是普通的旧 index.html，我们将节省带宽和下载时间。浏览器可以下载 gzip 压缩文件，将其解压缩，然后更快地显示给用户。
好的，那么我们如何让我们的文件被 gzip 压缩呢？
答案是我们在我们的服务器（后端）上添加 HTTP 标头 内容编码：gzip .
它工作起来很简单，如果浏览器支持任何压缩方案，在执行请求时，它会添加一个标头 接受编码：gzip，放气 ， 在哪里 压缩包 和 放气 是两种可能的压缩方案。
如果服务器不发送 内容编码 响应头，这意味着文件未压缩，这是许多服务器上的默认行为。
所以我们需要做的就是添加我们的服务器内容编码头。
例如，在 Go 中，我们需要像这样包装我们的处理程序：
在 Nodejs 中，我们可以使用 compress 库（请注意，您可以配置要压缩的文件/路由）：
启用压缩是提高网站性能的最快、更有效的方法之一。所以去吧，享受速度提升。
3.缓存静态文件
我会将缓存分为两部分：
- 浏览器缓存
- 服务器端缓存
浏览器缓存
正如我们所知，浏览器缓存改进并加快了浏览速度。下载资产后，它会（一段时间）在您的机器上存在。无论您的连接速度有多快，从硬盘驱动器检索文件总是比从远程服务器检索文件快。
因此，我们绝对应该将它用于静态资产，例如 JavaScript , CSS 和 图片 .
那么我们需要设置浏览器缓存吗？
基本上，在实际使用中，我们只需要两个 HTTP 标头！很简单，对吧？
我们的 HTTP 标头是 缓存控制 和 埃塔格 .
- 缓存控制 .服务器可以返回一个 Cache-Control 标头来指定浏览器应如何缓存单个响应以及缓存多长时间。
- 电子标签 .当浏览器发现一个过期的缓存响应时，它可以向服务器发送一个小令牌（通常是文件内容的哈希）以检查文件是否已更改。如果服务器返回相同的令牌，则文件是相同的，无需重新下载。
请注意，您可以使用
过期代替缓存控制.但是 Cache-Control 是在 HTTP/1.1 中引入的，它提供了比 Expires 更多的选项。
如果你使用 Express.js，那么你很高兴，因为 Express.js 为你设置了标题。如果您使用纯 Nodejs，您的代码可能如下所示：
在 Go 中，它可能看起来像：
两种语言中的机制是相同的，如果两者之间存在匹配 如果无匹配 字段和您在服务器中生成的密钥，无需再次重建响应，因为浏览器已经拥有它。在这种情况下，将 HTTP 状态设置为 StatusNotModified，即 304 并返回。
服务器端缓存
如果我们有一个复杂而繁重的页面，需要花费大量时间来生成 HTML 输出，那么我们的服务器就会遇到困难。将它缓存在浏览器上肯定没有用，因为如果我们的页面发生更改，用户将不会很快看到新内容，我们的服务器仍然必须为每个访问我们 Web 应用程序的不同用户重新生成页面。
您可以考虑一个大型新闻门户，他们是否会为每个访问者一遍又一遍地处理 HTML？
这就是服务器端缓存派上用场的地方。
困难的部分是决定你想在哪里缓存页面。
从不缓存 邮政 , 放 或者 删除 要求。这些用于更改资源而不是检索数据，因此缓存它没有意义。
- 内存中：使用服务器中的一部分 RAM 作为缓存，因此它是您将拥有的最快的缓存并且最容易实现。在这种情况下，RAM 需要额外的空间来进行缓存。缺点是，如果您有多个服务器（您可能应该有），您将以这些缓存内容的 N 个副本结束。如果进程因任何原因重新启动，它将丢失所有缓存的内容，从而再次减慢第一个请求。
- 集中式缓存：例如 Redis。它是一个高性能、保证数据一致性和广泛使用的久经考验的内存数据库。它不如内存中的进程快，因为它需要网络调用，但内容在所有服务器之间共享，因此它们不会重复，也不需要来自应用程序服务器的资源。
基本上，从代码的角度来看，将缓存数据存储在 redis 或内存中的哪个位置并不重要，因为我们只会 放 和 得到 来自存储的数据（如果它是 redis 或内存缓存）。
因此，Nodejs 和 Redis 缓存看起来像：
4.使用代码拆分
当您第一次加载您的网站时，它会加载类似的文件 HTML , CSS 和 JS .可能会下载不需要的内容，使捆绑文件变大，下载时间长；这会增加网站的加载时间。
另一个需要考虑的问题是每次更改资源的内容时，例如发布新版本的 JavaScript 包，浏览器需要重新获取它以在缓存中获取新版本。那很慢。
这就是代码拆分发挥作用的地方。
如果您改为使用代码拆分将捆绑包拆分为许多较小的捆绑包，并且您更改了其中一个，则无需重新加载其他捆绑包，因为它们没有更改。
太好了，对吧？
代码拆分可以使用任何打包工具来实现，例如 Webpack、Browserify、Rollup 等。例如，Webpack 文档告诉我们，有三种通用的代码拆分方法：
- 入口点：使用入口配置手动拆分代码。
- 防止重复：使用 Entry 依赖项或 SplitChunksPlugin 对块进行重复数据删除和拆分。
- 动态导入：通过模块内的内联函数调用拆分代码。
由于我们的任务是尽快加快网站速度，因此我建议仔细查看 动态导入 .
使用动态导入非常简单。
大多数库，如 React、Vue、Angular 都有很好的文档说明如何做到这一点。
例如在 react 中我们可以使用 js 动态导入（看起来和纯 js 动态导入完全一样）：
或在组件的反应库中使用内置方法：
上面的示例是按路由进行代码拆分。
基本上，您可以决定在任何地方拆分任何内容，但请记住，主要目的是加快网站的首次加载速度，同时不要破坏用户体验。
而且因为决定从哪里开始拆分可能很棘手，我个人建议从路由开始（使用动态导入）。这是一个安全的选择，因为用户不太可能同时与页面上的其他元素进行交互，并且他们习惯于等待新的路由加载。
之后，您可以使用其余方法进行越来越多的拆分。
5.消除渲染阻塞资源
什么是渲染阻塞资源？
渲染阻塞资源是 脚本 , 样式表 ， 和 HTML 阻止或延迟浏览器呈现网页的导入。
消除渲染阻塞资源的最强大的技术之一是延迟或延迟非关键资源。浏览器将花费更少的时间来加载对用户体验不重要的资源（不在视口中的图像、非关键内容的 CSS 样式等）。
对于图像：
我们总是可以通过延迟加载延迟加载不在视口中的图像：
对于 CSS
您可能不会使用所有 CSS 来呈现页面的关键部分（首屏内容，其他页面 CSS）。
因此，您可以将 CSS 拆分为关键部分和非关键部分。
实际上，它是一种性能优化技术，自从引入 Core Web Vitals 以来，它已经获得了很大的普及，因为它还提高了 LCP 分数。
您可以像这样延迟 CSS 加载：
对于 javascript 脚本
确定关键代码后，您可以将以下两个属性之一应用于非关键脚本：defer 或 async。 Defer 告诉浏览器不要等待脚本，而异步在后台加载并在准备好时运行。
上述所有这些技术旨在消除渲染阻塞资源并避免链接关键请求。
结论
网站优化实际上是一个永无止境且非常令人兴奋的过程。
上述 5 个步骤将帮助您在相对较短的时间内开始优化并显着加快速度较慢的网站。
你做的越多，就越难加速你的网站，但永远不要绝望并继续前进。
在您的过程中，我强烈建议您使用：
- 绩效洞察力 和 灯塔 开发工具中的选项卡
- Steve Souders 的“更快的网站”
- 本文 ;）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
