僅需 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和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。