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>