search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

如何快速在 WordPress 中啟用 GZIP 資料壓縮功能 - TechMoon 科技月球

SiteGround 3 折主機優惠 + WordPress 一鍵安裝完整教學SiteGround 3 折主機優惠 + WordPress 一鍵安裝完整教學
Hostinger 1.2 折主機優惠 + WordPress 一鍵安裝完整教學Hostinger 1.2 折主機優惠 + WordPress 一鍵安裝完整教學
3 分鐘閱讀

想要在 WordPress 網站當中加快頁面的載入速度減少網站頁面檔案大小是其中一個好方法

當你縮小頁面的程式碼後,就能加快使用者和搜尋引擎在抓取網站索引時,瀏覽器讀取你的網站資訊內容的速度。

此時,啟用 GZIP 壓縮就能夠大大幫助你減少網頁檔案的大小,幫助你減少使用者端下載網站資源的時間,不僅能減少伺服器的負載,也能縮短網站首次顯示頁面的時間(TTFB)。

因此,在 WordPress 當中啟用 GZIP 資料壓縮功能對於網站優化以及速度優化來說,是相當不可或缺的一部份。

現在幾乎所有的 Web 瀏覽器都支持 GZIP 壓縮的請求,因此如果你想要透過啟用 GZIP 壓縮來提升 WordPress 網站的速度與性能的表現,那麼接下來就讓我帶你來看看「如何在 WordPress 當中啟用 GZIP 壓縮」吧!

什麼是 GZIP 壓縮?

GZIP 是一種檔案格式,同時也是一個軟體程式,應用於文件檔案壓縮與解壓縮。

GZIP 通常會在主機伺服器當中啟用,透過 GZIP 能夠減少 HTML 檔案、CSS 樣式和 JavaScript 檔案的大小。而圖片類型的檔案就無法透過 GZIP 來進行壓縮了,因為他們兩個是完全不同的檔案類型。

如果想要壓縮圖片,建議你可以採用 recompressorsquoosh…等等的圖片壓縮服務來進行圖片的優化。

有些網站光是單單啟用 GZIP 壓縮就能夠減少 75% 的檔案大小。

因此,在我們使用 WordPress 與優化 WordPress 的時候,啟用 GZIP 壓縮就成為了優化速度與性能的方法之一

在我們消除了任何不必要的資源之後,下一步就是將瀏覽器必須下載的剩餘資源總大小縮減至最小,也就是進行壓縮程序。根據資源類型 (文字、圖片、字型等),我們有許多不同的技術可以選用,例如可以在伺服器上啟用的通用工具、適用於特定內容類型的預先處理最佳化,以及需要開發人員輸入的特定資源最佳化。

Ilya Grigorik

Ilya is a Developer Advocate and Web Perf Guru

當 Web 瀏覽器瀏覽網站時,首先它會查看網站是否提供「content-encoding:gzip」來辨別網站是否提供與啟用 GZIP 檔案壓縮功能。

如果有,那麼瀏覽器就會載入由 GZIP 所提供的較小的檔案文件。

如果沒有,那麼就會載入原始大小的網站檔案。

想要知道你的網站有沒有啟用 GZIP 的方式有很多,你可以透過 Google PageSpeed InsightsGTmetrix 或是 Pingdom Tools 等線上測速工具來檢測網站是否啟用 GZIP 壓縮。

透過 Google PageSpeed Insights 檢測 GZIP 壓縮

透過 Google PageSpeed Insights 可檢測網站是否啟用 GZIP 壓縮透過 Google PageSpeed Insights 可檢測網站是否啟用 GZIP 壓縮

如果你的網站正確啟用 GZIP 壓縮功能,那麼透過 Google PageSpeed Insights 檢測出來的畫面就會類似上圖所示。

透過 GTmetrix 檢測 GZIP 壓縮

透過 Gtmetrix 可檢測網站是否啟用 GZIP 壓縮透過 Gtmetrix 可檢測網站是否啟用 GZIP 壓縮

如果你的網站沒有正確啟用 GZIP 壓縮功能,那麼透過 GTmetrix 檢測出來的畫面就會類似上圖所示。

透過 Pingdom Tools 檢測 GZIP 壓縮

透過 Pingdom Tools 可檢測網站是否啟用 GZIP 壓縮透過 Pingdom Tools 可檢測網站是否啟用 GZIP 壓縮

如果你的網站沒有正確啟用 GZIP 壓縮功能,那麼透過 Pingdom Tools 檢測出來的畫面就會類似上圖所示。

透過線上工具檢測 Gzip 啟用狀況

如何在 WordPress 當中啟用 GZIP 壓縮?

剛剛提到啟用 GZIP 壓縮的好處多多,那麼如果你從來沒有優化過,那麼該如何才能在 WordPress 網站當中啟用 GZIP 呢?

使用 WordPress 外掛啟用 GZIP 資料壓縮功能

這個方式是在 WordPress 當中啟用 GZIP 最簡單的方式,那就是透過 WordPress 外掛來啟用 GZIP 資料壓縮功能。

舉例來說,WP Rocket 緩存快取外掛就有提供「mod_deflate」Module,自動幫你在 .htaccess 檔案當中加入 GZIP 資料壓縮的程式碼規則。

當你使用有提供 GZIP 壓縮功能的外掛時,通常就能夠非常輕鬆地幫你的 WordPress 網站啟用 GZIP 資料壓縮功能。

在 Apache 伺服器上啟用 GZIP 資料壓縮功能

即便你今天不是使用 WordPress 建立網站,只要你是使用 Apache 的環境,你就還是可以透過編輯 .htaccess 檔案來手動添加程式碼規則來啟用 GZIP 資料壓縮。

由於大部分的虛擬主機都是使用 Apache,因此你在虛擬主機的根目錄底下都可以找到「.htaccess」這個檔案。

只要透過 FTP 或是主機所提供的檔案管理系統,都可以找到「.htaccess」並對他行編輯。

.htaccess 檔案添加 GZIP 程式碼規則如下:

PHP
# Compress HTML, CSS, JavaScript, Text, XML and fonts 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-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf 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

或是你也可以使用以下程式碼規則啟用 GZIP 資料壓縮功能:

PHP
# compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript 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 font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddType x-font/otf .otf AddType x-font/ttf .ttf AddType x-font/eot .eot AddType x-font/woff .woff AddType image/x-icon .ico AddType image/png .png

上面兩個規則隨便取其中一個使用就可以了。

以下使用 WordPress 的 .htaccess 檔案作為範例:

在 .htaccess 當中手動加入程式碼規則啟用 GZIP在 .htaccess 當中手動加入程式碼規則啟用 GZIP

即使你不是使用 WordPress 網站,也是擁有 .htaccess 這個檔案,因此照樣寫入上面的程式碼規則即可。

在 NGINX 環境中啟用 GZIP 資料壓縮功能

如果你的網站伺服器的環境是使用 NGINX 而非 Apache 的話,那麼在 NGINX 環境當中你需要將程式碼規則加入到「nginx.conf」這個文件當中才能生效。

C
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;

在 IIS 環境當中啟用 GZIP 資料壓縮功能

如果你的網站伺服器的環境使在 IIS 上運行的,此時你應該會有兩種不同類型的 GZIP 壓縮,分成動態和靜態。

想要了解更多有關在 IIS 上啟用 GZIP 資料壓縮功能,建議你前往 Microsoft 官網查閱如何啟用壓縮的教學。

結論

以上就是 GZIP 資料壓縮的介紹與如何在 WordPress 當中開啟 GZIP 資料壓縮功能的方法。

我建議你最好最快的方式就是使用 WordPress 外掛來幫助你啟用 GZIP 資料壓縮的功能,不僅省時省力,如果搭配有緩存快取功能的外掛(例如:WP Rocket),那麼不僅啟用 GZIP,還順便幫你的網站加上緩存快取功能,讓你網站速度變得更快呢!

你的網站速度表現如何?不妨留言告訴我你的網站使用 Google PageSpeed Insights 所測得的分數吧!

猜你喜歡



熱門推薦

本文由 techmoonxyz 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦