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

在漢源等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供做網(wǎng)站、成都網(wǎng)站制作 網(wǎng)站設計制作定制網(wǎng)站開發(fā),公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,成都品牌網(wǎng)站建設,全網(wǎng)整合營銷推廣,成都外貿(mào)網(wǎng)站制作,漢源網(wǎng)站建設費用合理。

1. 文件壓縮

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

如果你的服務器不支持Brotli，則可以按照以下簡單指南進行安裝：

• Nginx on Linux
• Apache
• NodeJs - Express

2. 圖像壓縮

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

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

你還可以 將npm 引入到項目里，使用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:

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>

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

4.圖像延遲加載

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

改成：

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

5.緩存 http 頭

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

我們可以使用以下 API 進行緩存：

• 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解析器遇到樣式標簽，并立即處理關(guān)鍵的CSS。

滯后非關(guān)鍵CSS

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

7. JavaScript 異步/延遲加載/延遲加載

HTML 也是阻塞渲染,瀏覽器必須等待 JS 執(zhí)行后才能完成對HTML的解析。但是我們可以告訴瀏覽器等待JavaScript執(zhí)行。

異步加載JavaScript

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

延遲JavaScript

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

重復排序內(nèi)聯(lián)的腳本

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

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

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

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

• preconnect
• DNS-prefetch
• prefetch
• prerender

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

preconnect

預鏈接, 使用方法如下：

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

1. DNS 解析
2. TCP 握手
3. 如果為 Https 站點，會進行TLS握手

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

DNS Prefetch

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

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

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

prefetch

預拉取, 使用方法如下：

link標簽里的as參數(shù)可以有以下取值：

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