2020 年 3 月 25 日

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

WordPress 利用 gzip 與外掛提升網站速度

2 min read
costco

WordPress 利用 gzip 與外掛提升網站速度

當網站的載入的速度太慢時,會讓網友不想等而直接跳離,這就無關於文章的品質了,為了解決這個問題,有幾個方法可以嚐試作調整,例如在 Apache 伺服器上對於 Module mod_deflate 作設定,或是透過 WordPress 的外掛,如 autoptimize 或是 wp-optimize …等。由下面兩張圖可以發現,沒啟用 gzip 時,載入的時間要 826ms , 啟用後的載入時間卻只要 505ms,提升了有 321 ms。所以 gzip 確實有提升網站速度。

Before gzip

speed up your website

 

接下來我們來進行對網站的優化調整吧!!

  1. Apache 伺服器上設定 GZIP
  2. 使用 .htaccess 來作設定
  3. 使用 WordPress 的外掛 autoptimize 與 wp-optimize 及 jetpack

 

  • Apache 伺服器上設定 GZIP

要在 Apache 伺服器上設定 GZIP 其實不難,可以參考官方網站的 Apache Module mod_deflate 說明,簡單的設定只要將 httpd.conf 修改下列設定即可。

LoadModule filter_module modules/mod_filter.so
LoadModule ext_filter_module modules/mod_ext_filter.so
LoadModule deflate_module modules/mod_deflate.so

<IfModule mod_deflate.c>
  <IfModule mod_filter.c>
    #AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
  </IfModule>
</IfModule>

 

設定完後,可以在 Chrome 按下 F12 去觀察 Apache 伺服器是否有啟用 gzip,這裡要注意的是,應該觀察 Response Headers 裡的 Content-Encoding 是否有出現 gzip ,因為 Response 是代表 伺服器 端的回應,至於 Request Headers 則是流覽器 ( Chrome, Firefox … ) 端的要求。

gzip enable verified

 

  • 使用 .htaccess 來作設定

有很多網站是租用雲端虛擬伺服器,為了主機的安全性,通常是不允許您去修改 Apache 伺服器的設定,那麼該怎麼辧呢? 還有另一個方法,就是去修改 .htaccess 的設定,若雲端虛擬伺服器是 Apache 伺服器服務,可以加入下列的參數:

<IfModule mod_filter.c>    
# Compress HTML, CSS, JavaScript, Text, XML and fonts
 AddType application/vnd.ms-fontobject .eot
 AddType font/ttf .ttf
 AddType font/otf .otf
 AddType font/x-woff .woff
 AddType image/svg+xml .svg
 
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
 AddOutputFilterByType DEFLATE application/x-font
 AddOutputFilterByType DEFLATE application/x-font-opentype
 AddOutputFilterByType DEFLATE application/x-font-otf
 AddOutputFilterByType DEFLATE application/x-font-truetype
 AddOutputFilterByType DEFLATE application/x-font-ttf
 AddOutputFilterByType DEFLATE application/x-font-woff
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE font/opentype
 AddOutputFilterByType DEFLATE font/otf
 AddOutputFilterByType DEFLATE font/ttf
 AddOutputFilterByType DEFLATE font/woff
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE image/x-icon
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/xml
  
# Remove browser bugs (only needed for really old browsers)
 BrowserMatch ^Mozilla/4 gzip-only-text/html
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 Header append Vary User-Agent  
</IfModule>

若是 Nginx 伺服器服務,則需要上傳一個檔案 nginx.conf ,內容如下:

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript application/vnd.ms-fontobject font/ttf font/otf font/x-woff;

 

除了在 ApacheNginx 伺服器上啟用 gzip 以外,還可安裝外掛 autoptimize ,對 JS, CSS, HTML 將檔案中的空白去除,減小檔案 szie。

autoptimize

 

wp-optimize 則可以啟用 Cache 功能,當前端流覽器 ( Chrome, Firefox … ) 重覆載入時,可以有效減少 TTFB 的等待時間。TTFB 是 Time to First Byte 的縮寫,指的是流覽器開始收到伺服器回應資料的時間(幕後處理時間+重定向時間),是反映服務端回應速度的重要指標。

wp-optimize-cache

 

jetpack 中可以啟用 Lazy-loading images 以加快頁面載入速度,提供最佳化影像品質,為訪客提供更快速的瀏覽體驗。

jetpack-optimize

 

經過上述的調整後,相信 WordPress 利用 gzip 與外掛提升網站速度應該可以大大的提升網站載入速度。本站的效能從原先的 1.60s,而提升到只要 105ms。速度之快令人讚賞哦!!

polinwei-tunning-before

polinwei-tunning-after

 

Copyright © All rights reserved. | Newsphere by AF themes.