NitroPack｜我最推薦的免費 WordPress 網站速度優化外掛

先前我介紹過，新手要架設網站可以從 高 CP 值的共享主機 Bluehost 開始，但共享主機的硬傷就是資源比較少，導致網站速度通常比較慢。

像是用 Google 網站測速工具 PageSpeed Insights 測試，就能很明顯地看到，分數常常只能拿到黃燈，表現差強人意。

為了解決這個問題，我找到了一個超方便的 WordPress 外掛 —— NitroPack。

它的操作很簡單，不需要懂複雜的技術知識，用了 NitroPack 之後，測速分數可以輕鬆衝到 90 分以上。

最棒的是，這個外掛還是免費的！

如果你也想提升 WordPress 網站速度，對 NitroPack 也有興趣，就繼續看下去吧！

如果你偏好用影片學習，歡迎觀看下面的 YouTube 影片。

如果你喜歡透過圖文學習，請繼續往下閱讀吧！

圖文筆記會比較詳細、方便快速瀏覽，還會持續更新與補充內容。

為什麼選擇 NitroPack？

在說明為什麼選擇 NitroPack 之前，我們先聊聊網站速度有多重要。

Google 非常重視網頁的載入速度，如果網站速度太慢，訪客體驗會大打折扣。

想像一下，如果每打開一個網頁就要等 10 – 20 秒的時間 …… 大部分人都沒有這個耐心吧？通常就直接關掉網站了。

這會造成網站跳出率增加，Google 自然就不會推薦這個網站。

所以，提升網站速度不只可以留住更多訪客，還能讓搜尋引擎更喜歡你的網站，進一步提升 SEO 排名。

正因如此，我開始研究怎麼提升網站速度。

我試用了很多 WordPress 速度優化外掛，這些外掛通常分別專注在不同領域，大多數的外掛只專精在特定 1、2 個小項目的優化。

有的針對圖片加載進行優化；有的著重於 HTML、 CSS 和 JavaScript 的效能提升；有的專門處理快取機制和 CDN 。

當同時安裝多個速度優化外掛的時候，它們之間很常會因為功能重疊而發生衝突，反而導致網站效能下降或功能異常。

這個問題讓我苦惱了好幾個月，還好，最後我找到了一個整合性的解決方案：NitroPack！

NitroPack 能真正做到了「只用一個外掛就達成非常好的速度優化效果」，一次包辦了原本需要好多個外掛才能達到的功能。

更棒的是，使用 NitroPack，你不用花時間在研究複雜的技術細節，它能幫你一次搞定所有優化設定，輕鬆提升網站速度！

這次我架設了一個部落格網站，實際帶大家比較一下，在使用 NitroPack 前後，網站速度能有多大的進步。

測試網站速度 (PageSpeed Insights)

我們先來測試一下「未優化」的網站，看看在 Google 提供的網站測速工具 PageSpeed Insights 中會拿到幾分。

第 1 步

👉 點擊前往：Google 網站速度測試工具

第 2 步

輸入網址 —— 圖片標註 ➀。

點擊「分析」 —— 圖片標註 ➁。

來看到測試結果，會分別顯示行動裝置和電腦裝置的測速分數。

電腦裝置的分數通常比較好，大多在 90 分以上，這部分就不需要太擔心。

而行動裝置通常比較難拿高分，這次測試的行動裝置分數是黃燈，拿到 67 分。

在這篇筆記，我不會詳細說明每個評分項目的細節，這次的目標很簡單，就是把行動裝置的測速分數提升到綠燈，也就是 90 分以上！

使用 NitroPack 優化網站速度

(1) 註冊 NitroPack 帳戶

第 1 步

點擊下方按鈕 前往 NitroPack 官方網站。

第 2 步

點擊「Get Started」(開始使用)。

第 3 步

選擇「Free Plan」(免費方案)。

第 4 步

填寫 Email —— 圖片標註 ➀。

點擊「Continue」(繼續) —— 圖片標註 ➁。

第 5 步

到 Email 信箱接收 NitroPack 寄來的驗證碼，複製它。

⌨️ 快捷鍵：複製
Windows 系統：Ctrl + C
Mac 系統：Cmd + C

第 6 步

回到 NitroPack 後台，貼上驗證碼。

⌨️ 快捷鍵：貼上
Windows 系統：Ctrl + V
Mac 系統：Cmd + V

第 7 步

依照下圖的翻譯填寫對應的資料，再點擊「Continue」(繼續)。

第 8 步

點擊「Add your website」(新增你的網站)。

第 9 步

輸入網址 —— 圖片標註 ➀。

選擇「Free」(免費) 方案 —— 圖片標註 ➁。

第 10 步

點「Add」(新增)。

這樣就完成註冊流程了。

(2) 安裝 NitroPack 外掛

我們需要在 WordPress 網站安裝 NitroPack 外掛，才能連結網站速度優化服務。

下載 NitroPack 外掛

第 1 步

選擇「Follow the setup guide」(遵循設定指南)。

第 2 步

點擊 設定指南 裡的連結，下載最新版本的 NitroPack 外掛。

Bluehost 主機事前準備：關閉 Cloudflare CDN

提醒你一下！

如果你是使用 Bluehost 主機架設網站，在安裝外掛前，記得先關閉 Bluehost 後台的 Cloudflare CDN 服務，避免和 NitroPack 的速度優化服務發生衝突。

第 1 步

進入 Bluehost 後台，選擇「SPEED」(速度)。

第 2 步

點擊「REMOVE CLOUDFLARE」(移除 Cloudflare) 。

第 3 步

點擊「CONFIRM」(確認)。

大約等 1 個小時，設定就會生效。

Cloudways 主機事前準備：新增快取規則

如果你用的是 Cloudways 主機架設網站，因為 Cloudways 跟 NitroPack 的快取方式不相容，需要在 Cloudways 手動新增快取規則後，才能搭配使用。

第 1 步

在 Cloudways 後台，選擇「Application Settings」(應用程式設定)。

第 2 步

切換到「Varnish Settings」(Varnish 設定)。

第 3 步

點擊「Add New Exclusion」(新增排除項目)。

第 4 步

Type (類型) 選擇「Cookie」—— 圖片標註 ➀。

Value(值) 填入「nitropack-nocache」—— 圖片標註 ➁。

點擊「Save」(儲存) —— 圖片標註 ➂。

這樣就完成設定了。

事前準備：停用其他網站速度優化外掛

除了主機端的事前準備，要是你先前有使用其他網站速度優化的外掛，記得到 WordPress 後台外掛列表，把它們全部停用！

這樣才能避免外掛設定之間互相衝突，導致網站出現問題。

事前準備都做好後，就可以開始安裝 NitroPack 外掛。

上傳 NitroPack 外掛

第 1 步

點擊「安裝外掛」。

第 2 步

點擊「上傳外掛」。

第 3 步

把剛剛下載的外掛檔案拖曳上傳。

第 4 步

點擊「立即安裝」。

第 5 步

安裝完成，點擊「啟用外掛」。

(3) 連結 NitroPack

第 1 步

找到外掛列表裡的 NitroPack，點擊「Settings」(設定)。

第 2 步

點擊「Connect」(連線)，外掛就會自動和 NitroPack 後台串接。

請注意！看到打勾的畫面並不代表成功連線了，不要自己關掉小視窗。

耐心等待小視窗自動關閉，才是連結完成。

(4) NitroPack 自動進行網站速度優化

連結完成後，回到 NitroPack 後台，現在 NitroPack 已經在自動優化網站速度了。

我會另外「開啟」「Cache warmup」(快取預熱)。

並按下「Save」(儲存)。

NitroPack 會開始建立網站頁面的快取，未來只要網站有改動，它也會自動更新快取，讓網站隨時保持最佳優化狀態。

目前我使用的是 Free subscription (免費訂閱)，它支援每個月 5000 次的網頁瀏覽，和 1GB 的 CDN 頻寬。

使用免費方案的網站，頁尾會被加上 NitroPack 的廣告。

我覺得對剛起步、流量不大的圖文部落格來說，免費方案就很夠用了！

優化後的成果

我們再次用 PageSpeed Insights 進行測試。

結果顯示，網站經過優化後，行動裝置的測速分數來到了 96 分，變成了綠燈，原先還沒優化時相比，分數進步相當明顯。

不過，除了看速度分數，我們不能忽略網站實際顯示效果。

由於 NitroPack 的優化設定有些跟網站外觀元素相關，所以，建議到網站前台檢查一下，網站的版面、動態效果等有沒有出現 bug。

我用無痕模式模擬訪客瀏覽網站的情況，測試發現，初次讀取網頁時，動畫會卡在第一個動作，直到滑鼠移動才會觸發動畫播放。

接下來，我們來看看怎麼解決這個問題。

選擇適合的優化模式

NitroPack 的預設優化模式是最強的「Ludicrous」(極速模式)，這個模式雖然可以讓網站速度最大化提升，但像延遲加載 JavaScript 這類設定，可能會影響到網站的動態效果。

要解決這個問題，我建議從兩個方向調整：

如果你希望保留網站的動態效果，可以試著改用其他優化模式。

第 1 步

在 NitroPack 後台，打開左側欄位的「Cache Settings」(快取設定) —— 圖片標註 ➀。

點擊「General」(一般) —— 圖片標註 ➁。

第 2 步

依優化程度弱到強排列，總共有 4 種模式可以選擇，點擊 Strong (強效模式) 的「Select mode」(選擇模式) 。

第 3 步

點擊「Switch mode」(切換模式)。

第 4 步

點擊「Purge now」(立即清除)。

第 5 步

點擊「Purge cache」(清除快取)，讓 NitroPack 開始產生新的快取。

可以點擊左側欄位的「Cache Insights」(快取洞察)，檢查新的快取生成了沒有。

確認快取已更新後，我重新用 PageSpeed Insights 測試，分數雖然下降了一點點，但還是保持在 90 分以上。

但重要的是，小動畫在瀏覽網頁時能夠正常運行了。

如果你想保持優化強度，則可以手動關閉網站的某些動態效果。

例如：Blocksy 自訂器中的「資訊卡揭示效果」。

選擇哪個方向，其實取決於你的需求。

是要犧牲掉一點速度分數，優先保留視覺效果？

還是讓網站跑得更快，但減少一些動態感？

兩者沒有絕對的對錯，就看你自己比較在意哪方面，找到平衡就好。

推薦升級 NitroPack 付費版嗎？

要是你的網站流量漸漸成長，免費版的額度不夠用了，你可能就需要升級到 NitroPack 付費版。

如果你只是想要快速提升網站速度，而且不想花太多力氣研究技術細節，最值得考慮的就是 Business 方案，它支援每個月 50,000 次瀏覽，和 25 GB 的 CDN 頻寬。

以前我就是用了這個方案大概 1 年半的時間，覺得還滿不錯的。

如果選擇「年付」能享有免費 2 個月的優惠，相當於 $17.5 美金/月 (約 $525 台幣/月)。

備註：
台幣價格是用美金兌台幣匯率 30 來估算。不過，因為匯率會隨時間浮動，實際的台幣價格還是要看交易時的匯率喔。

我有幫大家爭取到額外折扣，點擊下方連結 註冊 NitroPack，會自動帶入諾特斯折扣碼 NOTESSTARTUP，可以再打 95 折！

至於其他方案的價格我覺得實在太貴，就不用考慮了！

如果你願意花多一點錢優化網站速度，我最推薦 FlyingPress 搭配 FlyingCDN，這個 諾特斯網站 現在就是用這個組合，速度優化效果真的很不錯。

網站流量高的時候，費用比 NitroPack 更划算，速度優化的效果也更好。

我很喜歡 FlyingPress 搭配 FlyingCDN 這個超強組合， 但比較可惜的這個組合沒有免費版。

要是你願意花一些成本投資在 WordPress 網站速度優化上，歡迎 在諾特斯觀眾許願池留言 告訴我，如果有很多人想看，我會優先安排製作相關筆記！

其他網站速度優化方法

如果你在使用 NitroPack 之後，還想讓網站速度快上加快，以下我整理了幾個可以進一步優化的方法：

方法 1：換掉笨重的佈景主題

選用輕量化的主題，例如 Blocksy、GeneratePress 或 Astra。

這些輕量化主題優化了代碼結構、減少請求數量，能有效降低資源消耗，提升網站速度。

像是 諾特斯網站 就是使用 Blocksy 製作的，在追求速度的同時，網站設計還是很簡約好看。

⭐️ 延伸閱讀： Blocksy 主題教學 (未來開放)

方法 2：刪掉太耗效能的外掛

有些外掛雖然功能強大，但非常吃效能，例如多功能外掛 Jetpack，這類外掛功能包山包海，對資源需求很高。

建議針對網站的實際需求，只安裝真的需要的外掛就好。

外掛越精簡，網站速度就越快，也比較不容易出問題。

方法 3：升級主機

預算足夠的話，從共享主機 Bluehost 升級到使用雲端主機的 Cloudways，速度提升會很有感。

雲端主機提供專屬資源和靈活的主機位置選擇，不僅加快了網站加載速度，還能提升穩定性和使用者體驗。

⭐️ 延伸閱讀

以上幾個方法對網站速度提升都有幫助，大家可以試試看。

結論：推薦免費 WordPress 網站速度優化外掛 NitroPack

經過實測我們可以看到，網站在 NitroPack 優化後，PageSpeed Insights 的測試分數有明顯的提升。

NitroPack 的使用非常簡單，只要註冊後連結網站，就能幫我們自動完成網站速度優化，真的很方便，推薦給大家！

如果你想要架設一個部落格網站，我會推薦你使用高 CP 值的 Bluehost 共享主機，再搭配 免費版 NitroPack 來提升速度。

這樣的組合可以用最划算的價格，打造一個瀏覽體驗很不錯的圖文部落格網站囉！

參考資料

• Boost Your Google Pagespeed Insights Score from 47 to 90 with NitroPack!| NitroPack Setup & Settings
• NitroPack for WordPress and WooCommerce
• Cloudways Hosting Configuration for NitroPack
• Increase Your Site’s Loading Speed with NitroPack cache CDN plugin – A Must Have Tool
• How to Speed Up Your WordPress Website for FREE With A Few Clicks! 🚀
• Google PageSpeed Insights: Step-by-Step tutorial to Boost Site Speed
• Connect your WordPress site to NitroPack

製作團隊

總編輯、發佈：諾特斯
文字撰寫、文字編輯、圖片製作、圖片編輯：鹹魚
圖片製作：蚊子