20% 的优化可提高 80% 的 Web 性能

在当今这个快节奏的世界里，
网站尚未加载，3 秒钟就足以让用户点击关闭按钮

如果你正在尝试建立一家基于网络的初创公司，这一点尤其重要。
拥有一个优化的网站可以带来显著的收益。

网站的组成部分

网络上的任何事物都有 3 个主要组成部分

1. 前端
2. 后端
3. 网络

无论后端如何优化（这是一种常见的巨大错误😅）

归根结底，网络影响着网站 80% 的性能。 因此，根据帕累托规则， 我们专注于网络。网络是连接前端和后端的桥梁。 大多数网站在加载时都会在后台发出数百个请求。

如果每个响应都包含大量数据

1. 数据到达客户端的时间增加
2. 每种资源渲染的时间增加

basically the website take forever to load

解决方案

1. 将文件大小减少
   1. 仅发送用户需要的内容（而不是网站需要的内容），也称为代码拆分
   2. 删除whitespaces或uglifying文件

如果你使用 webpack，这将自动为你完成。
额外福利：你可以在客户端使用 PWA 并缓存数据。[但该主题是另一篇博客的内容]

1. 通过优化来减小图像尺寸

通过优化来减小图像尺寸

这是什么意思？

我们不会通过降低分辨率来减小尺寸，
我们通过减少颜色比例来减小尺寸。

让我解释一下， 人眼无法区分 #000000 和 #010101。 因此，当我们优化图像时，我们会减少用于存储像素颜色数据的位数。

我们该怎么做呢？

有些图书馆可以帮我们处理这个问题。

但是，我们无法创建一个程序来针对每个图像每次都执行此操作，因此，我创建了一个名为 的 CLI 工具 [我的第一个 CLI 应用程序]，Shirmkage它代表shrink+ image。

您可以在我的 github 上查看/试用源代码。

npm install -g shrimkage 

Shrimkage 让批量优化图像变得简单

你可以直接在终端中使用它[这就是 CLI 😅]

shrimkage folder

默认的减少级别是 50（/100）。因此，如果您想要进一步优化，您可以shrimkage folder --level=10

Shimkage 还为您提供了对单个图像应用优化的选项

shrimkage file --path=./test.png

这就是用 20% 的努力实现 80% 的网络性能提升
✌

如果你❤️这个，

在Twitter上关注我，

您可以在这里查看我所有作品的更新（包括博客）

另外，别忘了给我发私信，
我们来聊聊开发者吧
😁✌