乐趣区

关于前端:当我们进行性能优化我们在优化什么LightHouse优化实操

jiezi

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_214

好的互联网产品不仅仅在性能上要高人一筹，在性能层面也须要超群绝伦，否则金玉其外败絮其中，页面是美轮美奂了，后果首屏半天加载不进去，不免让用户乘兴而来，败兴而归。

侥幸的是，前端的性能优化有诸多有迹可循的实践和办法，其中绝对权威的，无疑是 LightHouse。

LightHouse 是一个开源的自动化工具，它作为 Chrome 浏览器的扩大程序运行，提供一套残缺的站点评分标准，咱们能够根据此规范对站点进行基准测试，从而达到优化的成果。

怎么关上 LightHouse？能够在 Chrome 浏览器开发人员工具中找到 LightHouse。

要关上“开发人员工具”，请抉择：
“顶部菜单→查看→开发人员→开发人员工具”
或者应用快捷键：

Mac 零碎上的“⌥+⌘+I”
Win 零碎上的“F12+Ctrl+Shift+I”。

随后点击生成报告按钮即可：

LightHouse 评分大体上有四大指标，别离为：性能、无障碍、最佳做法以及 SEO。

性能指标（Performance）

性能指标里又分为六个小指标：

Largest Contentful Paint【简称 LCP: 最大内容渲染】
FCP 最大内容渲染工夫标记了渲染出最大文本或图片的工夫。
Total Blocking Time【简称 TBT: 总阻塞工夫】
TBT 测量了 FCP（首次内容渲染）和 TTI（可交互工夫）之间的总耗时。TTI 可能会被主线程阻塞以至于无奈及时响应用户。大于 50ms 的工作称为长工作，当任意长工作呈现时，主线程则称为被阻塞状态。因为浏览器不会打断正在进行中的长工作，所以，如果用户在执行长工作时和页面有交互事件时，浏览器必须等到该长工作实现能力响应。TBT 计算的是在 FCP 到 TTI 之间所有长工作工夫内总和。
First Contentful Paint【简称 FCP: 首次内容渲染】

FCP 测量了从页面开始加载到页面任意局部的内容渲染到屏幕上。

Speed Index【简称 SI: 速度指数】
SI 速度指数表明了网页内容的可见填充速度。lighthouse 首先捕捉页面加载的视屏，而后比照帧与帧之间视觉效果变动（通过计算构造类似指数 SSMI 来比拟 )。
Time to Interactive【简称 TTI: 可交互工夫】
可交互工夫是指网页须要多长时间能力提供残缺交互性能。TTI 测量了从页面开始加载到页面的次要从属资源加载结束，并且能够足够疾速回应用户输出的所用工夫。
Cumulative Layout Shift【简称 CLS: 累积布局偏移】
CLS 累积布局偏移旨在测量可见元素在视口内的挪动状况。CLS 值越小越好。

性能优化伎俩

有哪些伎俩能够进步这些性能指标？

首先须要优化的是页面“资源”，这里的资源指的是页面中加载的所有元素，蕴含但不限于：js 文件、css 文件、图片、视频等。

对于 js 文件来说，首先要做的是业务分拆，不同页面只加载对应须要的文件，并且做到单页面只加载一个 js 文件，缩小 Http 申请数，多余的文件要做合并压缩操作，但其实这里有一个根底问题，就是如果 js 文件自身就很宏大，压缩比例再高，也是无济于事，举个例子，个别状况下 Jquery 官网的压缩版就曾经高达 80kb 左右了，这样的体积很难有再次压缩的优化空间，所以还不如间接摒弃 Jquery，换成别的性能上能够替换的库，比方 zepto，后者的体积只有 26kb，是前者的四分之一。随后进行压缩合并操作，首先装置：

npm install uglify-js -g

以本站为例，业务上用到的 js 库别离为 zepto.min.js、my.js、lazyload.min.js、wordcloud2.min.js iconfont.js，将这五个 js 文件进行合并压缩：

uglifyjs zepto.min.js my.js lazyload.min.js wordcloud2.min.js iconfont.js -o ./1-min.js

如此，最初失去一个体积为 59kb 的 1 -min.js 文件，当然这是业务层面的压缩，还能够通过批改服务器进行 gzip 压缩：

location ~ .*.(jpg|gif|png|bmp|js|css)$ {  
                gzip on;  
                gzip_http_version 1.1;  
                gzip_comp_level 3;  
                gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp;  
                }

加载形式上，尽量应用预加载：

<link rel="preload" as="script" href="1-min.js" />

同时，对于一些站外 js 比方广告，或者一些 js 特效，咱们能够对其进行延时加载的操作，即首屏加载好之后，再加载这些逻辑：

<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">  
(function() {  
var done = false;  
var script = document.createElement('script');  
script.async = true;  
script.type = 'text/javascript';  
script.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';  
  
var createScript = setTimeout(function(){document.getElementsByTagName('HEAD').item(0).appendChild(script);  
WordCloud(canvas, options);  
}, 7000  
);  
  
script.onreadystatechange = script.onload = function(e) {if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {(adsbygoogle = window.adsbygoogle || []).push({});  
}  
};  
})();  
</script>

下面的逻辑就是首屏实现 7 秒后再加载 Google 广告和标签云特效。

对于 css 文件的解决，原理和 js 文件差不多，主旨也是分拆，放大体积，并且压缩：

cssMinifier(['./bootstrap.min.css', '../js/kindeditor/plugins/code/prettify_dark.css', './style.css'], './tidy_min.css');

优化后，失去体积为 17kb 的 tidy\_min.css 文件。

对于图片文件，不仅是首图，所有图片最好都采纳新的图片格式 Webp，用以缩小其体积，具体操作办法请移步：石火电光追风逐日 | 前端优化之次时代图片压缩格局 WebP 的我的项目级躬身实际 (Python3 PIL+Nginx)。对于特定的图片，比方 Logo，应用 svg 格局图片，请移步：Logo 小变动，心情大不同，SVG 矢量动画格局网站 Logo 图片制作与实际教程 (Python3)

同时，对于图片一律申明宽高属性，并且应用反对 lazyload.js 组件推延对屏幕外图片的加载。

应用 viewport 标签放慢挪动端的载入速度：

<meta name="viewport" content="width=device-width, initial-scale=1">  
    <meta name="applicable-device" content="pc,mobile"/>

无障碍（Accessibility）

拜访无障碍检测所有用户是否都能无效地拜访内容并浏览网站，无障碍性的每个指标项测试后果为 pass 或者 fail，与性能指标项的计算形式不同，当页面只是局部通过某项指标时，页面的这项指标将不会得分。例如，如果页面中的一些元素有屏幕阅读器敌对的命名，而其余的元素没有，那么这个页面的 screenreader-friendly-names 指标项得分为 0。

个别状况下，优化无障碍其实是对于站点标签的优化，比方页面元素是否具备 title 标签、title 元素是否按降序排列、是否申明了页面语言类型、元素是否具备 alt 标签等等，值得一提的是，页面对比度也是无障碍评分重要的一环，如果背景色是 white，那么前景色最好抉择高对比度的色彩，比方 black。

最佳做法（Best Practice）

最佳做法检测能够改善网页的代码健康状况的一些最佳做法，评分的分值由相干指标的加权平均值计算而来。

最佳做法指标咱们能够了解为就是站点安全性的指标，少数状况下，须要保障协定为 HTTPS，同时要开启 CSP 网页平安政策避免 XSS 攻打。

CSP 的本质就是白名单制度，开发者明确通知客户端，哪些内部资源能够加载和执行，等同于提供白名单。它的实现和执行全副由浏览器实现，开发者只需提供配置。CSP 大大加强了网页的安全性。攻击者即便发现了破绽，也没法注入脚本，除非还管制了一台列入了白名单的可信主机。

开启办法：

<meta http-equiv="Content-Security-Policy" content="script-src'self'; object-src'none'; style-src cdn.example.org third-party.org; child-src https:">

搜索引擎优化（SEO）

搜索引擎优化检测搜索引擎对网页内容的了解水平是怎么的，评分的分值由相干指标的加权平均值计算而来。

说白了，就是站点页面是否适宜搜素引擎蜘蛛的抓取以及收录，以本站为例，搜索引擎须要的标签如下：

<head>  
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <meta name="applicable-device" content="pc,mobile"/>  
    <title> 当咱们进行性能优化，咱们在优化什么（LightHouse 优化实操）- 刘悦 </title>  
    <meta name="description" content="好的互联网产品不仅仅在性能上要高人一筹，在性能层面也须要超群绝伦，否则金玉其外败絮其中，页面是美轮美奂了，后果首屏半天加载不进去，不免让用户乘兴而来，败兴而归。侥幸的是，前端的性能优化有诸多有迹可循的实践和办法，其中绝对权威的，无疑是 LightHouse。LightHouse 是一个开源的自动化工具，它作为 Chrome 浏览器的扩大程序运行，提供一套残缺的站点评分标准，咱们能够依">  
    <meta content="刘悦" name="Author">  
    <link rel="canonical" href="https://v3u.cn/a_id_214"/>  
    <link rel="miphtml" href="https://v3u.cn/mipa_id_214">  
    <link rel="stylesheet" href="/v3u/Public/css/tidy_min.css?v=11"/>  
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>  
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>  
    <link rel="stylesheet" href="/v3u/Public/css/share.min.css?v=1">  
</head>

包含页面题目、形容、作者、页面惟一标识等等元素。

当咱们实现下面这些指标的优化之后，就能够，坐下来，观赏这紫禁烟花一万重了：

正是：东风夜放花千树，更吹落，星如雨。

结语

前端的性能剖析和优化形式，无论是传统性能还是感官性能齐全能够依据 LightHouse 按图索骥。过程中能够针对某些指标进行肯定的取舍，尽管本站在 LightHouse 的优化实际中获得了肯定的成果，但路漫漫其修远兮，吾将上下而求索。

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_214

退出移动版