Web 性能優(yōu)化的10 個快速有效手段

猿友 2020-09-25 11:39:47 瀏覽數(shù) (3129)

反饋

文章來源于公眾號：充實(shí)的腦洞，作者:瘋狂的技術(shù)宅

優(yōu)化網(wǎng)站的性能需要花費(fèi)大量的時間，并且如果要根據(jù)自己的需求進(jìn)行優(yōu)化則花費(fèi)的時間可能更多。

在本文中，我將向你展示 10 個快速優(yōu)化 Web 性能的手段，能在 5 分鐘內(nèi)用于你自己的網(wǎng)站。這些捷徑對你的代碼庫或服務(wù)器配置幾乎沒有什么影響。它們簡單且容易實(shí)現(xiàn)，無需詳細(xì)了解它們的原理，并且能夠?qū)δ愕男阅墚a(chǎn)生重大影響。

1. 使用文本壓縮

使用文本壓縮，可以最大程度地減少通過網(wǎng)絡(luò)傳輸?shù)淖止?jié)數(shù)。有幾種壓縮算法。gzip[1] 是最受歡迎的，但Brotli[2] 是一種更新甚至更好的壓縮算法。如果要檢查服務(wù)器是否支持Brotli，則可以使用 Brotli.pro[3] 工具。

如果你的服務(wù)器不支持 Brotli ，則可以按照以下簡單指南進(jìn)行安裝：

Nginx on Linux[4]
Apache[5]
NodeJs - Express[6]

這是你能夠免費(fèi)得到的第一個優(yōu)化手段，大多數(shù)托管平臺或 CDN 默認(rèn)都會提供壓縮。

2. 圖像壓縮

未壓縮的圖像是潛在的巨大性能瓶頸。如果不對圖像進(jìn)行壓縮，將會消耗很大的帶寬。有幾種有用的工具可用于快速壓縮圖像，而不會損失可見質(zhì)量。我通常使用 Imagemin[7]。它支持多種圖像格式，你可以在命令行界面下使用[8]或使用 npm 模塊[9]。

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中查看演示代碼[10]。

單位	文件大小，無壓縮	壓縮文件大小	文件大小減少百分比
Bytes	4156855 Bytes	103273 Bytes	-97%
MB/kB	4MB	103 kB	-97%

3.圖片格式

使用現(xiàn)代圖像格式可以真正提高性能。WebP 圖像比 JPEG 和 PNG 都小，通常小 25％～35％。WebP 得到了瀏覽器的廣泛支持[11]。

我們使用 imagemin npm 包并為其添加 WebP 插件[12]。以下代碼可將圖像的 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);
})();

再看一下文件大?。?/p>

單位	文件大小，無壓縮	壓縮文件大小	文件大小減少百分比
Bytes	4156855 Bytes	58940 Bytes	-98%
MB/kB	4MB	59 kB	-98%

結(jié)果表明，與原始圖像相比，文件大小減少了 98％，并且與壓縮的 JPG 文件相比，WebP 更加明顯的壓縮了圖像。WebP 版本比壓縮的 JPEG 版本小 43％。

4. 圖像惰性加載

圖像惰性加載是一種在以后加載暫時不顯示在屏幕上的圖像的技術(shù)。當(dāng)解析器遇到圖像時立即加載的話會減慢初始頁面的加載速度。使用惰性加載，可以加速頁面加載過程并稍后加載圖像。使用 lazysizes[13] 可以輕松完成此操作。你可以把下面這樣的代碼：

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

改為：

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

lazysizes 庫會處理其余的工作，可以使用瀏覽器進(jìn)行驗(yàn)證。打開你的站點(diǎn)并找到圖像標(biāo)簽。如果該 class 從 lazyload 變成了 lazyloaded，則意味著它可以正常工作。

5. 緩存你的資源：HTTP 緩存頭

緩存是一種可以快速提高網(wǎng)站速度的方法。它減少了老用戶的頁面加載時間。如果你有權(quán)限訪問服務(wù)器緩存，則用起來非常簡單。

你可以使用以下API進(jìn)行緩存：

Cache-Control[14]
ETag[15]
Last-Modified[16]

6. 內(nèi)聯(lián)關(guān)鍵 CSS：推遲非關(guān)鍵 CSS

CSS 是渲染阻止的。這意味著瀏覽器必須先下載并處理所有 CSS 文件，然后才能繪制像素。通過內(nèi)聯(lián)關(guān)鍵的 CSS，可以大大加快此過程。

你可以按照以下步驟進(jìn)行操作：

識別關(guān)鍵的 CSS

如果你不知道你的關(guān)鍵 CSS 是什么，則可以通過 Critcal[17]、CriticalCSS[18] 或 Penthouse[19] 來幫忙。這些庫都用來從給定視口中可見的 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);
          // 將其保存到文件以進(jìn)行第 2 步
        }
      });
    }
  });
});

內(nèi)聯(lián)關(guān)鍵CSS

當(dāng) HTML 解析器遇到 style 標(biāo)簽時會立即處理關(guān)鍵的 CSS。




  
  body {...}
  /* ... 其余的關(guān)鍵CSS */

延遲不重要的CSS

非關(guān)鍵的 CSS 不需要立即進(jìn)行處理。瀏覽器可以在 onload 事件之后再加載它，使用戶不必等待。

7. JavaScript 異步及延遲加載

JavaScript 是 HTML 解析器阻止的。瀏覽器必須等待 JavaScript 執(zhí)行才能完成對 HTML 的解析。但是你可以告訴瀏覽器等待 JavaScript 執(zhí)行。

異步加載 JavaScript

通過 async 屬性，你可以告訴瀏覽器異步加載腳本。

Defer JavaScript

defer 屬性告訴瀏覽器在 HTML 解析器完成文檔解析之后再運(yùn)行腳本，但在事件發(fā)生之前，將會觸發(fā)DOMContentLoaded。

調(diào)整內(nèi)聯(lián)腳本的位置

內(nèi)聯(lián)腳本會立即執(zhí)行，瀏覽器對其進(jìn)行解析。因此，你可以將它們放在 HTML 的末尾，緊接在 body 標(biāo)記之前。

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

資源提示[20]能夠訴瀏覽器以后可能加載什么頁面。該規(guī)范定義了四個原語：

preconnect（預(yù)連接）
dns-prefetch（DNS預(yù)取）
prefetch（預(yù)?。?/li>
prerender（預(yù)渲染）

另外，關(guān)于資源提示，我們將 preload[21] 關(guān)鍵字用于 link 屬性。

preconnect

下面的代碼告訴瀏覽器你要建立與另一個域的連接。瀏覽器將為此連接做準(zhǔn)備。使用預(yù)連接鏈接標(biāo)簽可以將加載時間縮短 100–500 ms。那么什么時候應(yīng)該用它呢？直白的說：當(dāng)你知道在哪里拿東西但不知道該怎么拿。比如哈希樣式文件（styles.2f2k1kd.css）這類的東西。

dns-prefetch

如果你想告訴瀏覽器將要建立與非關(guān)鍵域的連接，則可以用 dns-prefetch 進(jìn)行預(yù)連接。這大約能夠?yàn)槟愎?jié)省 20–120 毫秒。

prefetch

使用預(yù)取，你可以告訴瀏覽器下載鏈接標(biāo)記中所指的整個網(wǎng)站。你可以預(yù)取頁面或資源。預(yù)取在加快網(wǎng)站速度方面非常有用，但是要注意有可能降低網(wǎng)站速度的情況。

低端設(shè)備或網(wǎng)速較慢的情況下可能會遇到問題，因?yàn)闉g覽器會一直忙于預(yù)取。你可以考慮將預(yù)取與自適應(yīng)加載結(jié)合使用，也可以將智能預(yù)取與 quicklink[22] 和 Guess.js[23] 結(jié)合使用：

prerender

使用預(yù)渲染時，將會先加載內(nèi)容，然后在后臺渲染。當(dāng)用戶導(dǎo)航到預(yù)渲染的內(nèi)容時，內(nèi)容會立即顯示。

preload

借助預(yù)加載功能，瀏覽器會得到引用的資源很重要的提示，應(yīng)盡快獲取?，F(xiàn)代瀏覽器很擅長于對資源進(jìn)行優(yōu)先級排序，所以應(yīng)該只對關(guān)鍵資源使用預(yù)加載?？煽紤]用預(yù)連接和預(yù)取代替，或者嘗試使用instant.page[24]。

9. 使用 Google Fonts

Google Fonts 很不錯。他們提供了優(yōu)質(zhì)的服務(wù)，并且應(yīng)用廣泛。如果你不想自己托管字體，那么 Google 字體是一個很不錯的選擇。但是你應(yīng)該注意如何實(shí)現(xiàn)它們。Harry Roberts[25] 寫了一篇非常出色的文章，內(nèi)容涉及怎樣用 Google Fonts 來為網(wǎng)站加速[26]。強(qiáng)烈建議閱讀。

如果你只想知道怎樣用，可以通過下面的代碼段進(jìn)行 Google 字體集成，但功勞歸功于 Harry。

10. 用 service worker 來緩存你的資源

service worker 是瀏覽器在后臺運(yùn)行的腳本。緩存是最常用的功能之一，也是你最應(yīng)該使用的功能。我認(rèn)為這不是選擇問題。通過 service worker 實(shí)施緩存，可以使用戶與你的站點(diǎn)之間的交互速度更快，而且即使用戶斷網(wǎng)也可以訪問你的網(wǎng)站。