日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

本人已經(jīng)過原作者制授權(quán)翻譯。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站與策劃設(shè)計(jì),江孜網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:江孜等地區(qū)。江孜做網(wǎng)站價格咨詢:13518219792

在這篇文章中，主要介紹10種快速提高網(wǎng)站性能的方法，你只需5分鐘內(nèi)就可以將它應(yīng)用到你的網(wǎng)站上，廢話不多說，讓我們進(jìn)入正題吧 。

1. 文件壓縮

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

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

• Nginx on Linux
• Apache
• NodeJs - Express

2. 圖像壓縮

未壓縮的圖像是一個巨大的潛在性能瓶頸。如果在將圖像提供給用戶之前沒有壓縮它們，那么就會傳輸不必要的字節(jié)。有幾個有用的工具可以用于快速壓縮圖像且不損失可見質(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:

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ù)。當(dāng)解析器遇到正確加載的圖像時，會減慢初始頁面加載速度。通過延遲加載，可以加快這個過程并在以后加載圖像。使用lazysize很容易做到這一點(diǎn)。使用lazysize腳本和瀏覽器對loading屬性的支持，你可以這樣優(yōu)化：

改成：

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

5.緩存 http 頭

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

我們可以使用以下 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。

滯后非關(guān)鍵CSS

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

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

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

異步加載JavaScript

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

延遲JavaScript

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

重復(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ù)鏈接, 使用方法如下：

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

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

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

DNS Prefetch

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

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

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

prefetch

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

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

 
 
 
 

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