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

时间 2021-08-13

标签 css html webpack web 算法 npm gulp api 浏览器缓存栏目 HTML 繁體版

原文原文链接

1. 使用文本压缩

使用文本压缩，能够最大程度地减小经过网络传输的字节数。有几种压缩算法。 gzip 是最受欢迎的，但 Brotli 是一种更新甚至更好的压缩算法。若是要检查服务器是否支持Brotli，则可使用 Brotli.pro 工具。css

若是你的服务器不支持Brotli，则能够按照如下简单指南进行安装：html

Nginx on Linux
Apache
NodeJs - Express

这是你可以免费获得的第一个优化手段，大多数托管平台或 CDN 默认都会提供压缩。webpack

2. 图像压缩

未压缩的图像是潜在的巨大性能瓶颈。若是不对图像进行压缩，将会消耗很大的带宽。有几种有用的工具可用于快速压缩图像，而不会损失可见质量。我一般使用 Imagemin。它支持多种图像格式，你能够在命令行界面下使用或使用 npm 模块。web

imagemin img/* --out-dir=dist/images

你能够将 npm 模块用到 webpack、gulp 或 grunt 等打包程序中。算法

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。能够在 Github中查看演示代码。npm

单位	文件大小，无压缩	压缩文件大小	文件大小减小百分比
Bytes	4156855 Bytes	103273 Bytes	-97%
MB/kB	4MB	103 kB	-97%

3.图片格式

使用现代图像格式能够真正提升性能。 WebP 图像比 JPEG 和 PNG 都小，一般小 25％～35％。WebP 获得了浏览器的普遍支持。gulp

咱们使用 imagemin npm 包并为其添加WebP 插件。如下代码可将图像的 WebP 版本输出到 dist 文件夹中。api

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);
})();

再看一下文件大小：浏览器

单位	文件大小，无压缩	压缩文件大小	文件大小减小百分比
Bytes	4156855 Bytes	58940 Bytes	-98%
MB/kB	4MB	59 kB	-98%

结果代表，与原始图像相比，文件大小减小了 98％，而且与压缩的 JPG 文件相比，WebP 更加明显的压缩了图像。 WebP 版本比压缩的 JPEG 版本小 43％。缓存

4. 图像惰性加载

图像惰性加载是一种在之后加载暂时不显示在屏幕上的图像的技术。当解析器遇到图像时当即加载的话会减慢初始页面的加载速度。使用惰性加载，能够加速页面加载过程并稍后加载图像。使用 lazysizes 能够轻松完成此操做。你能够把下面这样的代码：

<img src="image.jpg" alt="">

改成：

<img data-src="image.jpg" class="lazyload" alt="">

lazysizes 库会处理其他的工做，可使用浏览器进行验证。打开你的站点并找到图像标签。若是该 class 从 lazyload 变成了 lazyloaded，则意味着它能够正常工做。

5. 缓存你的资源：HTTP 缓存头

缓存是一种能够快速提升网站速度的方法。它减小了老用户的页面加载时间。若是你有权限访问服务器缓存，则用起来很是简单。

你可使用如下API进行缓存：

Cache-Control
ETag
Last-Modified

6. 内联关键 css：推迟非关键 css

CSS 是渲染阻止的。这意味着浏览器必须先下载并处理全部 CSS 文件，而后才能绘制像素。经过内联关键的 CSS，能够大大加快此过程。

你能够按照如下步骤进行操做：

识别关键的 CSS

若是你不知道你的关键CSS是什么，则能够经过 Critcal、CriticalCSS 或 Penthouse 来帮忙。这些库都用来从给定视口中可见的 html 文件中提取 CSS。

下面是使用 criticalCSS 的例子。

var criticalcss = require("criticalcss");

var request = require('request');
var path = require( 'path' );
var criticalcss = require("criticalcss");
var fs = require('fs');
var tmpDir = require('os').tmpdir();

var cssUrl = 'https://web.dev/app.css';
var cssPath = path.join( tmpDir, 'app.css' );
request(cssUrl).pipe(fs.createWriteStream(cssPath)).on('close', function() {
  criticalcss.getRules(cssPath, function(err, output) {
    if (err) {
      throw new Error(err);
    } else {
      criticalcss.findCritical("https://web.dev/", { rules: jsON.parse(output) }, function(err, output) {
        if (err) {
          throw new Error(err);
        } else {
          console.log(output);
          // 将其保存到文件以进行第 2 步
        }
      });
    }
  });
});

内联关键CSS

当 html 解析器遇到 style 标签时会当即处理关键的 CSS。

<head>
  <style>
  body {...}
  /* ... 其他的关键CSS */
  </style>
</head>

延迟不重要的CSS

非关键的 CSS 不须要当即进行处理。浏览器能够在 onload 事件以后再加载它，使用户没必要等待。

<link rel="preload" href="/assets/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/styles.css"></noscript>

7. JavaScript 异步及延迟加载

JavaScript 是 HTML 解析器阻止的。浏览器必须等待 JavaScript 执行才能完成对 HTML 的解析。可是你能够告诉浏览器等待 JavaScript 执行。

异步加载 JavaScript

经过 async 属性，你能够告诉浏览器异步加载脚本。

<script src="app.js" async></script>

Defer JavaScript

defer 属性告诉浏览器在 HTML 解析器完成文档解析以后再运行脚本，但在事件发生以前，将会触发DOMContentLoaded。

<script src="app.js" defer></script>

调整内联脚本的位置

内联脚本会当即执行，浏览器对其进行解析。所以，你能够将它们放在 HTML 的末尾，紧接在 body 标记以前。

8. 使用资源提示加快交付速度。

资源提示可以诉浏览器之后可能加载什么页面。该规范定义了四个原语：

preconnect（预链接）
dns-prefetch（DNS预取）
prefetch（预取）
prerender（预渲染）

另外，关于资源提示，咱们将 preload 关键字用于 link 属性。

preconnect

下面的代码告诉浏览器你要创建与另外一个域的链接。浏览器将为此链接作准备。使用预链接连接标签能够将加载时间缩短 100–500 ms。那么何时应该用它呢？直白的说：当你知道在哪里拿东西但不知道该怎么拿。好比哈希样式文件（styles.2f2k1kd.css）这类的东西。

 <link rel="preconnect" href="https://example.com">

dns-prefetch

若是你想告诉浏览器将要创建与非关键域的链接，则能够用 dns-prefetch 进行预链接。这大约可以为你节省 20–120 毫秒。

 <link rel="dns-prefetch" href="http://example.com">

prefetch

使用预取，你能够告诉浏览器下载连接标记中所指的整个网站。你能够预取页面或资源。预取在加快网站速度方面很是有用，可是要注意有可能下降网站速度的状况。

低端设备或网速较慢的状况下可能会遇到问题，由于浏览器会一直忙于预取。你能够考虑将预取与自适应加载结合使用，也能够将智能预取与 quicklink 和 Guess.js 结合使用：

<link rel="prefetch" href="index.html" as="document">
<link rel="prefetch" href="main.js" as="script">
<link rel="prefetch" href="main.css" as="style">
<link rel="prefetch" href="font.woff" as="font">
<link rel="prefetch" href="image.webp" as="image">

prerender

<link rel="prerender" href="https://example.com/content/to/prerender">

使用预渲染时，将会先加载内容，而后在后台渲染。当用户导航到预渲染的内容时，内容会当即显示。

preload

借助预加载功能，浏览器会获得引用的资源很重要的提示，应尽快获取。现代浏览器很擅长于对资源进行优先级排序，因此应该只对关键资源使用预加载。可考虑用预链接和预取代替，或者尝试使用 instant.page。

<link rel="preload" as="script" href="critical.js">

http://www.ssnd.com.cn 化妆品OEM代加工

9. 使用 Google Fonts

Google Fonts 很不错。他们提供了优质的服务，而且应用普遍。若是你不想本身托管字体，那么 Google 字体是一个很不错的选择。可是你应该注意如何实现它们。 Harry Roberts 写了一篇很是出色的文章，内容涉及怎样用 Google Fonts 来为网站加速。强烈建议阅读。

若是你只想知道怎样用，能够经过下面的代码段进行 Google 字体集成，但功劳归功于 Harry。

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=...&display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=...&display=swap" media="print" onload="this.media='all'"/>
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=...&display=swap"/></noscript>

10. 用 service worker 来缓存你的资源

service worker 是浏览器在后台运行的脚本。缓存是最经常使用的功能之一，也是你最应该使用的功能。我认为这不是选择问题。经过 service worker 实施缓存，可使用户与你的站点之间的交互速度更快，并且即便用户断网也能够访问你的网站。