溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何優(yōu)化 Web 性能的手段

發(fā)布時(shí)間：2020-10-28 10:20:04 來源：億速云 閱讀：168 作者：小新 欄目：web開發(fā)

小編給大家分享一下如何優(yōu)化 Web 性能的手段，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

1. 文件壓縮

文件壓縮，可以減少網(wǎng)絡(luò)傳輸?shù)淖止?jié)數(shù)。有幾種壓縮算法。Gzip是最流行的，但是對于Brotli，你可以使用一種更新的、甚至更好的壓縮算法。如果想檢查您的服務(wù)器是否支持Brotli，可以使用 Brotli.pro。

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

  • Nginx on Linux
  • Apache
  • NodeJs - Express

2. 圖像壓縮

未壓縮的圖像是一個(gè)巨大的潛在性能瓶頸。如果在將圖像提供給用戶之前沒有壓縮它們，那么就會傳輸不必要的字節(jié)。有幾個(gè)有用的工具可以用于快速壓縮圖像且不損失可見質(zhì)量。我主要使用Imagemin。它支持許多圖像格式，您w你以將其用作命令行界面或npm模塊。

imagemin img/* --out-dir=dist/images

你還可以 將npm 引入到項(xiàng)目里，使用imagemin-mozjpeg，可以將JPEG圖像壓縮到原有的60%：

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:

如何優(yōu)化 Web 性能的手段

3.圖像格式

使用現(xiàn)代圖像格式可以真正提高性能。 WebP 圖像比 JPEG 和 PNG 小，通常小25％-35％。 WebP 也被瀏覽器廣泛支持。

我們使用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);
})();

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

如何優(yōu)化 Web 性能的手段

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

4.圖像延遲加載

延遲加載圖像是一種稍后而不是提前加載屏幕外圖像的技術(shù)。當(dāng)解析器遇到正確加載的圖像時(shí)，會減慢初始頁面加載速度。通過延遲加載，可以加快這個(gè)過程并在以后加載圖像。使用lazysize很容易做到這一點(diǎn)。使用lazysize腳本和瀏覽器對loading屬性的支持，你可以這樣優(yōu)化：

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

改成：

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

該庫會處理其余的工作，你可以使用瀏覽器驗(yàn)證這一點(diǎn)。打開你的網(wǎng)站，找到你的圖像標(biāo)簽。如果類從lazyload更改為lazyloaded，它就可以工作。

5.緩存 http 頭

緩存是一種快速提高站點(diǎn)速度的方法。它減少了訪問者的頁面加載時(shí)間。我們可以告訴瀏覽器在特定的時(shí)間緩存文件，如果你對后臺的知識有些了解，那么配置緩存方不是很難的事情。

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

  • Cache-Control
  • ETag
  • Last-Modified

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

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

識別關(guān)鍵的 CSS

如果你不知道你的關(guān)鍵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
        }
      });
    }
  });
});
內(nèi)聯(lián)關(guān)鍵 CSS

HTML解析器遇到樣式標(biāo)簽，并立即處理關(guān)鍵的CSS。

<head>
  <style>
  body {...}
  /* ... rest of the critical CSS */
  </style>
</head>
滯后非關(guān)鍵CSS

非關(guān)鍵的CSS不需要立即進(jìn)行處理。 瀏覽器可以在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 執(zhí)行后才能完成對HTML的解析。但是我們可以告訴瀏覽器等待JavaScript執(zhí)行。

異步加載JavaScript

使用屬性async，可以告訴瀏覽器異步加載腳本。

<script src="app.js" async></script>
延遲JavaScript

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

<script src="app.js" defer></script>
重復(fù)排序內(nèi)聯(lián)的腳本

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

8.使用資源提示優(yōu)化性能

HTML5的資源提示(Resource Hints)可以簡單地理解為預(yù)加載，瀏覽器根據(jù)開發(fā)者提供的后續(xù)資源的提示進(jìn)行有選擇性的加載和優(yōu)化?！坝羞x擇性”這一項(xiàng)是必須的且極其重要的，也是有別早先替代方案的重點(diǎn)，因?yàn)楹芏嗲闆r下，預(yù)加載會受到所分配到的計(jì)算資源以及帶寬資源的限制，瀏覽器有權(quán)放棄那些成本較高的加載項(xiàng)。

資源提示幫助開發(fā)人員告訴瀏覽器稍后可能加載的頁面。該規(guī)范定義了四種原語

  • preconnect
  • dns-prefetch
  • prefetch
  • prerender

此外，對于資源提示，我們使用了鏈接屬性的preload關(guān)鍵字。

preconnect

預(yù)鏈接, 使用方法如下：

 <link rel="preconnect" href="https://example.com">

我們訪問一個(gè)站點(diǎn)時(shí)，簡單來說，都會經(jīng)過以下的步驟：

  1. DNS 解析
  2. TCP 握手
  3. 如果為 Https 站點(diǎn)，會進(jìn)行TLS握手

使用preconnect后，瀏覽器會針對特定的域名，提前初始化鏈接(執(zhí)行上述三個(gè)步驟)，節(jié)省了我們訪問第三方資源的耗時(shí)。需要注意的是，我們一定要確保preconnect的站點(diǎn)是網(wǎng)頁必需的，否則會浪費(fèi)瀏覽器、網(wǎng)絡(luò)資源。

DNS Prefetch

DNS 預(yù)解析, 這個(gè)大多數(shù)人都知道，用法也很簡單：

 <link rel="dns-prefetch" href="http://example.com">

DN S解析，簡單來說就是把域名轉(zhuǎn)化為ip地址。我們在網(wǎng)頁里使用域名請求其他資源的時(shí)候，都會先被轉(zhuǎn)化為ip地址，再發(fā)起鏈接。dns-prefeth使得轉(zhuǎn)化工作提前進(jìn)行了，縮短了請求資源的耗時(shí)。

什么時(shí)候使用呢？當(dāng)我們頁面中使用了其他域名的資源時(shí)，比如我們的靜態(tài)資源都放在cdn上，那么我們可以對cdn的域名進(jìn)行預(yù)解析。瀏覽器的支持情況也不錯。

prefetch

預(yù)拉取, 使用方法如下：

<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標(biāo)簽里的as參數(shù)可以有以下取值：

audio: 音頻文件
video: 視頻文件  
Track: 網(wǎng)絡(luò)視頻文本軌道 
script: javascript文件
style: css樣式文件
font: 字體文件   
image: 圖片   
fetch: XHR、Fetch請求
worker: Web workers
embed: 多媒體<embed>請求 
object:  多媒體<object>請求
document: 網(wǎng)頁

預(yù)拉取用于標(biāo)識從當(dāng)前網(wǎng)站跳轉(zhuǎn)到下一個(gè)網(wǎng)站可能需要的資源，以及本網(wǎng)站應(yīng)該獲取的資源。這樣可以在將來瀏覽器請求資源時(shí)提供更快的響應(yīng)。

如果正確使用了預(yù)拉取，那么用戶在從當(dāng)前頁面前往下一個(gè)頁面時(shí)，可以很快得到響應(yīng)。但是如果錯誤地使用了預(yù)拉取，那么瀏覽器就會下載額外不需要的資源，影響頁面性能，并且造成網(wǎng)絡(luò)資源浪費(fèi)。

這里需要注意的是，使用了prefetch，資源僅僅被提前下載，下載后不會有任何操作，比如解析資源。

prerender

預(yù)渲染，使用方法如下:

<link rel="prerender" href="//example.com/next-page.html">

prerender比prefetch更進(jìn)一步。不僅僅會下載對應(yīng)的資源，還會對資源進(jìn)行解析。解析過程中，如果需要其他的資源，可能會直接下載這些資源。這樣，用戶在從當(dāng)前頁面跳轉(zhuǎn)到目標(biāo)頁面時(shí)，瀏覽器可以更快的響應(yīng)。

preload
<link rel="preload" href="..." as="...">
<link rel="prefetch" href="...">

注意preload需要寫上正確的as屬性，才能正常工作喔(prefetch不需要)。但是它們有什么區(qū)別呢？

  • preload 是用于預(yù)加載當(dāng)前頁的資源，瀏覽器會優(yōu)先加載它們
  • prefetch 是用于預(yù)加載后續(xù)導(dǎo)航使用的資源，瀏覽器也會加載它們，但優(yōu)先級不高

9. 固定好你的谷歌字體

Google字體很棒，它們提供優(yōu)質(zhì)的服務(wù)，并被廣泛使用。 如果你不想自己托管字體，那么Google字體是一個(gè)不錯的選擇。 你需要的是學(xué)習(xí)如何引用它們，哈里·羅伯茨（Harry Roberts）寫了一篇有關(guān)《The Fastest Google Fonts》的出色深度文章。 強(qiáng)烈建議你閱讀它。

如果你快速取用，那么可以使用下面集成片段的谷歌字體：

<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是瀏覽器在后臺運(yùn)行的腳本。緩存可能是最常用的特性，也是你應(yīng)該使用的特性。我認(rèn)為這不是一個(gè)選擇的問題。通過使用 service worker實(shí)現(xiàn)緩存，可以使 用戶 與站點(diǎn)的交互更快，并且即使用戶不在線也可以訪問站點(diǎn)。

看完了這篇文章，相信你對如何優(yōu)化 Web 性能的手段有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手