Zi 字媒體

SiteGround 3 折主機優惠 + WordPress 一鍵安裝完整教學 Hostinger 1.2 折主機優惠 + WordPress 一鍵安裝完整教學 3 分鐘閱讀 想要在 WordPress 網站當中加快頁面的載入速度，減少網站頁面檔案大小是其中一個好方法。 當你縮小頁面的程式碼後，就能加快使用者和搜尋引擎在抓取網站索引時，瀏覽器讀取你的網站資訊內容的速度。 此時，啟用 GZIP 壓縮就能夠大大幫助你減少網頁檔案的大小，幫助你減少使用者端下載網站資源的時間，不僅能減少伺服器的負載，也能縮短網站首次顯示頁面的時間（TTFB）。 因此，在 WordPress 當中啟用 GZIP 資料壓縮功能對於網站優化以及速度優化來說，是相當不可或缺的一部份。 現在幾乎所有的 Web 瀏覽器都支持 GZIP 壓縮的請求，因此如果你想要透過啟用 GZIP 壓縮來提升 WordPress 網站的速度與性能的表現，那麼接下來就讓我帶你來看看「如何在 WordPress 當中啟用 GZIP 壓縮」吧！ 目錄 hide 1 什麼是 GZIP 壓縮？ 1.1 透過 Google PageSpeed Insights 檢測 GZIP 壓縮 1.2 透過 GTmetrix 檢測 GZIP 壓縮 1.3 透過 Pingdom Tools 檢測 GZIP 壓縮 1.4 透過線上工具檢測 Gzip 啟用狀況 2 如何在 WordPress 當中啟用 GZIP 壓縮？ 2.1 使用 WordPress 外掛啟用 GZIP 資料壓縮功能 2.2 在 Apache 伺服器上啟用 GZIP 資料壓縮功能 2.3 在 NGINX 環境中啟用 GZIP 資料壓縮功能 2.4 在 IIS 環境當中啟用 GZIP 資料壓縮功能 3 結論 3.1 延伸閱讀 3.2 猜你喜歡 什麼是 GZIP 壓縮？ GZIP 是一種檔案格式，同時也是一個軟體程式，應用於文件檔案壓縮與解壓縮。 GZIP 通常會在主機伺服器當中啟用，透過 GZIP 能夠減少 HTML 檔案、CSS 樣式和 JavaScript 檔案的大小。而圖片類型的檔案就無法透過 GZIP 來進行壓縮了，因為他們兩個是完全不同的檔案類型。 如果想要壓縮圖片，建議你可以採用 recompressor、squoosh…等等的圖片壓縮服務來進行圖片的優化。 有些網站光是單單啟用 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 Insights、GTmetrix 或是 Pingdom Tools 等線上測速工具來檢測網站是否啟用 GZIP 壓縮。 透過 Google PageSpeed Insights 檢測 GZIP 壓縮 透過 Google PageSpeed Insights 可檢測網站是否啟用 GZIP 壓縮 如果你的網站有正確啟用 GZIP 壓縮功能，那麼透過 Google PageSpeed Insights 檢測出來的畫面就會類似上圖所示。 透過 GTmetrix 檢測 GZIP 壓縮 透過 Gtmetrix 可檢測網站是否啟用 GZIP 壓縮 如果你的網站沒有正確啟用 GZIP 壓縮功能，那麼透過 GTmetrix 檢測出來的畫面就會類似上圖所示。 透過 Pingdom Tools 檢測 GZIP 壓縮 透過 Pingdom Tools 可檢測網站是否啟用 GZIP 壓縮 如果你的網站沒有正確啟用 GZIP 壓縮功能，那麼透過 Pingdom Tools 檢測出來的畫面就會類似上圖所示。 透過線上工具檢測 Gzip 啟用狀況 https://www.giftofspeed.com/gzip-test/ https://varvy.com/tools/gzip/ https://smallseotools.com/check-gzip-compression/ 如何在 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 即使你不是使用 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 所測得的分數吧！ 猜你喜歡 6 個實用的小技巧，告別 WordPress 網站速度變慢的問題，加速你的 WP 網站 該如何申請註冊網域？如何購買最便宜的網址？一篇從購買網址、網域設定到管理的完整教學！ 網站頁面載入速度在 2019 年對於 Google SEO 排名的影響 Udemy 免費學習 Coupon 折價券 – 100% Free 免費線上課程 如何優化 WordPress 網站，提升網站速度？初學者也能自己優化網站的 4 個方法 14 個最佳 WordPress Cache Plugins 緩存快取外掛推薦 – 2019 免費/付費通通有 Cloudflare – 免費 DNS 代管網域名稱提升網站安全性，提供免費 CDN 與免費網站優化加快網站的載入速度 什麼是 Waiting TTFB 加載時間過長？ 3 步教你如何在 WordPress 當中優化 TTFB 速度 超過 40 個線上學習網站 – 網頁設計、程式語言、各種領域線上課程免費/付費資源索引 On-page SEO 網站優化 – 改善內容提升排名的秘訣