當我們進行性能優化，我們在優化什麼（LightHouse優化實操）详情 - 前端,前端優化,性能優化,優化,lighthouse 劉悦的技術博客日志

原文轉載自「劉悦的技術博客」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>

包括頁面標題、描述、作者、頁面唯一標識等等元素。

當我們完成上面這些指標的優化之後，就可以，坐下來，欣賞這紫禁煙花一萬重了：