快速优化 Web 性能的10 个手段 _优化

本人已经过原作者制授权翻译。
在这篇文章中，主要介绍10种快速提高网站性能的方法，你只需5分钟内就可以将它应用到你的网站上，废话不多说，让我们进入正题吧。
1. 文件压缩文件压缩，可以减少网络传输的字节数。有几种压缩算法。Gzip是最流行的，但是对于Brotli，你可以使用一种更新的、甚至更好的压缩算法。如果想检查您的服务器是否支持Brotli，可以使用 Brotli.pro 。
如果你的服务器不支持Brotli，则可以按照以下简单指南进行安装：

Nginx on linux
Apache
NodeJs - Express

2. 图像压缩未压缩的图像是一个巨大的潜在性能瓶颈。如果在将图像提供给用户之前没有压缩它们，那么就会传输不必要的字节。有几个有用的工具可以用于快速压缩图像且不损失可见质量。我主要使用Imagemin 。它支持许多图像格式，您w你以将其用作命令行界面或npm模块。
imagemin img/* --out-dir=dist/images你还可以将npm 引入到项目里，使用imagemin-mozjpeg，可以将JPEG图像压缩到原有的60%：

const imagemin = require('imagemin');const imageminMozjpeg = require('imagemin-mozjpeg');(async() => {  const files = await imagemin(      ['img/*.jpg'],      {        destination: 'dist/img',        plugins: [          imageminMozjpeg({quality: 60}),        ]      }  );  console.log(files);})();

就我而言，它将文件大小从4MB减小到100kB:

文章插图

3.图像格式使用现代图像格式可以真正提高性能。WebP 图像比 JPEG 和 PNG 小，通常小25％-35％。WebP 也被浏览器广泛支持。
我们使用imagemin npm 包并为其添加WebP插件。以下代码将我的图像的WebP版本输出到dist文件夹中。

const imagemin = require('imagemin');const imageminWebp = require('imagemin-webp');(async() => {  const files = await imagemin(      ['img/*.jpg'],      {        destination: 'dist/img',        plugins: [          imageminWebp({quality: 50})        ]      }  );  console.log(files);})();

我们再次看一下文件大小：

文章插图

结果表明，与原始图像相比，文件大小减少了98%，与压缩的 JPG 文件相比，WebP 对图像的压缩效果更加明显，WebP版本比压缩的JPEG版本小43% 。
4.图像延迟加载延迟加载图像是一种稍后而不是提前加载屏幕外图像的技术。当解析器遇到正确加载的图像时，会减慢初始页面加载速度。通过延迟加载，可以加快这个过程并在以后加载图像。使用lazysize很容易做到这一点。使用lazysize脚本和浏览器对loading属性的支持，你可以这样优化：
<img src=https://www.isolves.com/it/wlyx/wzjs/2020-11-12/"image.jpg" >改成：
<img data-src=https://www.isolves.com/it/wlyx/wzjs/2020-11-12/"image.jpg" class="lazyload" >该库会处理其余的工作，你可以使用浏览器验证这一点。打开你的网站，找到你的图像标签。如果类从lazyload更改为lazyloaded，它就可以工作。
5.缓存 http 头缓存是一种快速提高站点速度的方法。它减少了访问者的页面加载时间。我们可以告诉浏览器在特定的时间缓存文件，如果你对后台的知识有些了解，那么配置缓存方不是很难的事情。
我们可以使用以下 API 进行缓存：

Cache-Control
ETag
Last-Modified

6. 内联关键的 cssCSS 是阻塞渲染的，这意味着浏览器必须先下载并处理所有CSS文件，然后才能绘制像素。通过内联关键的 CSS，可以大大加快此过程。我们可以通过以下步骤完成此操作：
识别关键的 CSS如果你不知道你的关键CSS是什么，你可以使用Critcal, CriticalCSS或Penthouse 。所有这些库都从给定视口可见的html文件中提取CSS 。