仅需 5 分钟，快速优化 Web 性能的10 个手段

时间 2020-10-22

标签 javascript css html 前端 java linux nginx git github web 栏目 HTML 繁體版

原文原文链接

做者：Marc
译者：前端小智
来源：dev

本人已通过原做者制受权翻译。javascript

点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。html

在这篇文章中，主要介绍10种快速提升网站性能的方法，你只需5分钟内就能够将它应用到你的网站上，废话很少说，让咱们进入正题吧 💎。前端

1. 文件压缩

文件压缩，能够减小网络传输的字节数。有几种压缩算法。Gzip是最流行的，可是对于Brotli，你可使用一种更新的、甚至更好的压缩算法。若是想检查您的服务器是否支持Brotli，可使用 Brotli.pro。java

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

2. 图像压缩

未压缩的图像是一个巨大的潜在性能瓶颈。若是在将图像提供给用户以前没有压缩它们，那么就会传输没必要要的字节。有几个有用的工具能够用于快速压缩图像且不损失可见质量。我主要使用Imagemin。它支持许多图像格式，您w你以将其用做命令行界面或npm模块。nginx

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

你还能够将npm 引入到项目里，使用imagemin-mozjpeg，能够将JPEG图像压缩到原有的60%：git

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

3.图像格式

使用现代图像格式能够真正提升性能。 WebP 图像比 JPEG 和 PNG 小，一般小25％-35％。 WebP 也被浏览器普遍支持。 web

咱们使用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="image.jpg" alt="">

改为：

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

该库会处理其他的工做，你可使用浏览器验证这一点。打开你的网站，找到你的图像标签。若是类从lazyload更改成lazyloaded，它就能够工做。

5.缓存 http 头

缓存是一种快速提升站点速度的方法。它减小了访问者的页面加载时间。咱们能够告诉浏览器在特定的时间缓存文件，若是你对后台的知识有些了解，那么配置缓存方不是很难的事情。

咱们可使用如下 API 进行缓存：

6. 内联关键的 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);
          // save this to a file for step 2
        }
      });
    }
  });
});

内联关键 CSS

HTML解析器遇到样式标签，并当即处理关键的CSS。

<head>
  <style>
  body {...}
  /* ... rest of the critical 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 异步/延迟加载/延迟加载

HTML 也是阻塞渲染,浏览器必须等待 JS 执行后才能完成对HTML的解析。可是咱们能够告诉浏览器等待JavaScript执行。

异步加载JavaScript

使用属性async，能够告诉浏览器异步加载脚本。

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

延迟JavaScript

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

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

重复排序内联的脚本

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

8.使用资源提示优化性能

HTML5的资源提示(Resource Hints)能够简单地理解为预加载，浏览器根据开发者提供的后续资源的提示进行有选择性的加载和优化。“有选择性”这一项是必须的且极其重要的，也是有别早先替代方案的重点，由于不少状况下，预加载会受到所分配到的计算资源以及带宽资源的限制，浏览器有权放弃那些成本较高的加载项。

资源提示帮助开发人员告诉浏览器稍后可能加载的页面。该规范定义了四种原语

preconnect
dns-prefetch
prefetch
prerender

此外，对于资源提示，咱们使用了连接属性的preload关键字。

preconnect

预连接, 使用方法以下：

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

咱们访问一个站点时，简单来讲，都会通过如下的步骤：

DNS 解析
TCP 握手
若是为 Https 站点，会进行TLS握手

使用preconnect后，浏览器会针对特定的域名，提早初始化连接(执行上述三个步骤)，节省了咱们访问第三方资源的耗时。须要注意的是，咱们必定要确保preconnect的站点是网页必需的，不然会浪费浏览器、网络资源。

DNS Prefetch

DNS 预解析, 这个大多数人都知道，用法也很简单：

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

DN S解析，简单来讲就是把域名转化为ip地址。咱们在网页里使用域名请求其余资源的时候，都会先被转化为ip地址，再发起连接。dns-prefeth使得转化工做提早进行了，缩短了请求资源的耗时。

何时使用呢？当咱们页面中使用了其余域名的资源时，好比咱们的静态资源都放在cdn上，那么咱们能够对cdn的域名进行预解析。浏览器的支持状况也不错。

prefetch

预拉取, 使用方法以下：

<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">

link标签里的as参数能够有如下取值：

audio: 音频文件
video: 视频文件  
Track: 网络视频文本轨道 
script: javascript文件
style: css样式文件
font: 字体文件   
image: 图片   
fetch: XHR、Fetch请求
worker: Web workers
embed: 多媒体<embed>请求 
object:  多媒体<object>请求
document: 网页

预拉取用于标识从当前网站跳转到下一个网站可能须要的资源，以及本网站应该获取的资源。这样能够在未来浏览器请求资源时提供更快的响应。

若是正确使用了预拉取，那么用户在从当前页面前往下一个页面时，能够很快获得响应。可是若是错误地使用了预拉取，那么浏览器就会下载额外不须要的资源，影响页面性能，而且形成网络资源浪费。

这里须要注意的是，使用了prefetch，资源仅仅被提早下载，下载后不会有任何操做，好比解析资源。

prerender

预渲染，使用方法以下:

<link rel="prerender" href="//example.com/next-page.html">

prerender比prefetch更进一步。不只仅会下载对应的资源，还会对资源进行解析。解析过程当中，若是须要其余的资源，可能会直接下载这些资源。这样，用户在从当前页面跳转到目标页面时，浏览器能够更快的响应。

preload

<link rel="preload" href="..." as="...">
<link rel="prefetch" href="...">

注意preload须要写上正确的as属性，才能正常工做喔(prefetch不须要)。可是它们有什么区别呢？

preload 是用于预加载当前页的资源，浏览器会优先加载它们
prefetch 是用于预加载后续导航使用的资源，浏览器也会加载它们，但优先级不高

9. 固定好你的谷歌字体

Google字体很棒，它们提供优质的服务，并被普遍使用。若是你不想本身托管字体，那么Google字体是一个不错的选择。你须要的是学习如何引用它们，哈里·罗伯茨（Harry Roberts）写了一篇有关《The Fastest Google Fonts》的出色深度文章。强烈建议你阅读它。

若是你快速取用，那么可使用下面集成片断的谷歌字体：

<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实现缓存，可使用户与站点的交互更快，而且即便用户不在线也能够访问站点。

总结

在这篇文章中，展现了 10 种快速的网络性能，你能够在5分钟内应用到你的网站，以提升你的网站速度。

感谢你们的观看与支持，咱们下期再见，不要忘了三连哦。

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://dev.to/marcradziwill/...

交流

文章每周持续更新，能够微信搜索「大迁世界」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。