WordPress 啟動前清單:12 個速度與安全提示(+ 3 個使用者體驗提示)

已發表: 2024-11-29

您準備好上線您的網站並最終向公眾開放了嗎?在此之前,請先查看我們關於速度和安全性的 WordPress 發布前清單!經過數週甚至數月的努力工作後,立即推出一個新網站很誘人,但一些最後的預防措施可以使一切變得不同。

在本文中,您將發現:

  • 確保您的網站快速加載並保持用戶參與的最佳效能技巧。
  • 保護您的網站和使用者資料的基本安全實務。
  • 作為獎勵,在最終發布之前對用戶體驗進行三個最重要的檢查。

遵循我們的 12 個提示,自信地啟動您的 WordPress 網站!

啟動 WordPress 網站之前的 12 個速度和效能最佳實踐

在點擊「發布」之前,還需要執行一些基本步驟。我們的清單將為您提供最佳效能和安全性提示,以確保您的 WordPress 網站快速、安全並準備好啟動。

1.測試您網站的效能

第一步是測試臨時站點的當前效能,以了解站點的效能。為什麼?因為頁面速度會影響使用者體驗和轉換率。根據 Portent 2023 年的研究,網站的載入速度對收入有顯著影響:

這就是為什麼頁面速度需要成為啟動前檢查清單的一部分 - 來源:WP Rocket
這就是為什麼頁面速度需要成為啟動前檢查清單的一部分 - 來源:WP Rocket

要在啟動網站之前評估效能和整體使用者體驗,您可以使用 Google PageSpeed Insights,這是一個效能測試工具,可測量您的網站速度和包括 Core Web Vitals 在內的關鍵指標的效能。

根據您的網站速度,PageSpeed Insights 會分享全球效能分數以及所分析的五個指標中每一個指標的具體等級。綠色分數表示良好的性能,橙色表示有改進的空間,紅色突出顯示關鍵問題。

帶有 KPI 的效能評分範例 - 來源:PageSpeed Insights
帶有 KPI 的效能評分範例 – 來源:PageSpeed Insights

除了總分和績效指標等級外,測試還包括全面的績效審核。您會發現診斷部分可幫助您識別主要問題並提供有關解決問題的可行建議,從而獲得更好的分數。

效能審核範例 - 來源:PageSpeed Insights
效能審核範例 – 來源:PageSpeed Insights

最佳實務與行動計劃:

經驗法則:確認頁面載入時間為 3 秒或更短。

請依照以下步驟執行 WordPress 網站的效能測試:

  • 開啟隱身 Chrome 視窗。
  • 前往 GTmetrix 或 PageSpeed Insights 等效能工具並新增您的 URL 以開始審核。
PageSpeed 的 KPI 範例 - 來源:PageSpeed Insights
PageSpeed 的 KPI 範例 – 來源:PageSpeed Insights
  • 閱讀帶有指標分數的表現結果,然後向下捲動到審核。
  • 應用建議來提高效能。
  • 再次測試,看看技術改進是否有效。

最佳工具:

使用 GTmetrix 和 PageSpeed Insights 這兩種效能工具。它們為您提供了類似的見解以及要遵循的建議列表,但 GTMetrix 還計算頁面載入時間(以秒為單位)、頁面總大小和 HTTP 請求數。

2.確保您的網站具有響應能力

在上線之前,請檢查您的網站在行動裝置、平板電腦和桌面裝置上是否能正常顯示。 StatCounter 表示,行動用戶數量多於桌上型電腦或平板電腦用戶。例如,2024 年 10 月,大約 60% 的用戶透過智慧型手機存取網絡,而透過桌面存取網路的用戶比例不到 42%。

為什麼需要行動優先的方法 - 來源:StatCounter
為什麼需要行動優先的方法 – 來源:StatCounter

由於全球行動用戶數量不斷增長,您需要專注於在所有裝置上提供積極的用戶體驗。響應式設計策略也有利於網站的效能。響應式網站載入速度更快,因為它透過提供優化的佈局和資源(例如適用於行動裝置的較小圖片或簡化的 CSS 和 JavaScript)來適應用戶的裝置。

提示:響應式網站可減少傳輸的資料量,從而在所有裝置上實現更快的載入和更好的效能。

最佳實踐和行動計劃:

  • 選擇明確標記為行動友善或響應式的 WordPress 主題或頁面建立器。
  • 在多個裝置上測試您的 URL,以確保您的網站在智慧型手機、平板電腦和桌上型電腦上看起來良好。
  • 在設計方面,使用百分比或靈活的網格。
  • 選擇可折疊或漢堡選單,以便在行動裝置上進行更直接的導航。

最佳工具和外掛:

您可以使用免費的響應式測試工具、BrowserStack 或響應式設計檢查器工具來查看您的網站在行動裝置和平板電腦上的顯示情況。

在啟動之前檢查您的網站是否響應 - 來源:響應式設計檢查器
在啟動之前檢查您的網站是否回應 – 來源:響應式設計檢查器
提示:始終在桌面和行動裝置上測量速度。請參閱我們的指南,其中說明如何測試行動效能(包括最佳效能測試工具)。

3. 實現快取和GZIP壓縮

快取和 GZIP 壓縮是 WordPress 速度檢查表的必備功能,因為它們可以提高您的效能。

將快取視為保存網站頁面的副本。您的網站無需每次有人造訪時從頭開始載入所有內容,而是可以快速顯示已儲存的版本,節省時間並減少伺服器負載。

快取解釋 - 來源:WP Rocket
快取解釋 - 來源:WP Rocket

GZIP 的工作原理類似於在電腦上壓縮檔案。它會先壓縮您網站的程式碼(HTML、CSS、JavaScript),然後再將其傳送到訪客的瀏覽器。由於整個程式碼檔案較小,因此它在使用者螢幕上載入和呈現內容的速度要快得多。

最佳實務與行動計劃:

  • 詢問您的主機提供者是否提供快取和 GZIP。
  • 在沒有外掛的情況下為 WordPress 網站實作快取涉及兩個主要步驟。
    • 首先,透過在 .htaccess 檔案中新增特定規則來啟用瀏覽器快取。
    • 其次,使用PHP實作伺服器端快取。這需要建立一個快取目錄,修改主題的 header.php 和 footer.php 文件,並使用自訂程式碼管理快取內容。
  • 如果您對編碼感到不舒服或想節省時間,請安裝自動實作快取和 GZIP 的 WordPress 外掛程式。
  • 驗證 GZIP 是否正在與 GZIP 壓縮測試等工具搭配使用,以確認已啟用。

最佳工具和外掛:

  • WP Rocket 外掛程式在啟動後會自動套用快取和 GZIP 壓縮,開箱即用,涵蓋約 80% 的效能最佳實務。這使得它成為在 WordPress 網站上實施快取和 GZIP 壓縮的最簡單方法,並以最少的努力提高網站的速度。
  • WordPress GZIP 壓縮在安裝時套用 GZIP 壓縮。

4. 優化您的程式碼(JavaScript 和 CSS)

優化 JavaScript 和 CSS 可以加快您的網站速度,因為它減少了瀏覽器渲染最終內容所處理的資料。程式碼優化是透過壓縮、刪除不必要的程式碼或延遲 JavaScript 的執行等技術來完成的。讓我們回顧一下每種優化技術,以便您可以在您的網站上快速實施它們。

  • 縮小意味著消除不必要的空格、註釋和冗餘腳本,使文件更小,加載到訪客螢幕上的速度更快。
啟動網站之前的程式碼優化範例 - 來源:WP Rocket
啟動網站之前的程式碼優化範例 – 來源:WP Rocket
  • 透過僅保留必要的樣式訊息,刪除未使用的 CSS 可以使網頁更輕、載入速度更快。
  • 延遲和延遲 JS 的執行可以確保關鍵內容首先加載,從而提高用戶感知的載入時間。例如,如果您安裝聊天插件,訪客將首先看到您頁面上最重要的內容,然後載入聊天。
線上縮小工具 - 來源:Minifying
線上縮小工具 – 來源:Minifying

最佳實踐和行動計劃:

  • 在對程式碼進行任何更改之前,請務必備份您的 WordPress 網站,以便在出現問題時可以還原先前的版本。
  • 縮小 CSS 和 JavaScript 並刪除不必要的空格和註解。
  • 刪除所有未使用的 CSS 程式碼以減少檔案大小。
  • 將 JavaScript 執行延遲到使用者互動為止,優先考慮重要內容並提高初始頁面載入速度。
  • 推遲主要內容呈現後加載的非關鍵 JavaScript,從而使用戶能夠更快地查看頁面並與之互動。
  • 檢查 PageSpeed Insights 上您的程式碼優化操作是否有效且位於「通過審核」部分。
優化後通過審核部分 - 來源:PageSpeed Insights
優化後通過審核部分 – 來源:PageSpeed Insights

最佳工具和外掛:

  • 手動:您可以透過直接編輯檔案來縮小程式碼,然後將它們重新上傳到您的網站。為了幫助您完成此過程,您可以使用 Minifier 等工具。此方法需要技術知識並且可能非常耗時。
  • 使用外掛程式:安裝 WP Rocket 等外掛程式來自動化流程。它處理縮小、刪除未使用的 CSS 以及延遲和延遲 JavaScript。
在使用 WP Rocket 啟動網站之前輕鬆進行程式碼優化的範例 - 來源:WP Rocket
在使用 WP Rocket 啟動網站之前輕鬆進行程式碼優化的範例 – 來源:WP Rocket

5. 優化和壓縮影像

    優化圖片是提高網站速度最有效的技術之一。圖像通常是導致網站速度變慢的最重要因素,佔網頁內容大小的 50% 以上(資料來源:HTTP Archive)。

    影像優化依賴三種主要技術:壓縮、使用正確的格式以及應用延遲載入。讓我們在下一個最佳實踐部分逐一介紹它們。

    最佳實踐和行動計劃(基於 PageSpeed 審核):

    • 對圖像應用壓縮以減小檔案大小而不犧牲品質。

    匹配 PageSpeed 審核:“有效地編碼圖像。”

    對 PageSpeed 中的影像進行高效編碼 - 來源:PageSpeed Insights
    有效率地對 PageSpeed 中的影像進行編碼 – 來源:PageSpeed Insights
    • 將所有影像轉換為下一代格式,例如 WebP 或 AVIF。與 JPEG 或 PNG 相比,這些新格式更適合網路;它們提供卓越的壓縮等級和相似的視覺品質。

    匹配 PageSpeed 審核:“以下一代格式提供圖像。”

    從 PageSpeed 以下一代格式提供圖像 - 來源:PageSpeed Insights
    從 PageSpeed 以下一代格式提供圖像 – 來源:PageSpeed Insights
    • 啟用延遲加載,這意味著僅在用戶向下滾動時加載圖像,從而縮短初始頁面加載時間。

    匹配 PageSpeed 審核:“推遲螢幕外圖像。”

    延遲 PageSpeed 的螢幕外影像 – 來源:PageSpeed Insights

    最佳工具和外掛:

    • WP Rocket 外掛程式可以選擇在圖片、影片和 iframe 上啟用延遲載入。
    一鍵套用延遲載入 - 來源:WP Rocket
    一鍵套用延遲載入 – 來源:WP Rocket
    • a3 延遲載入可以輕鬆延遲載入您的映像。
    • Imagify 插件是最簡單的圖像優化插件,可以在不影響品質的情況下壓縮圖像。得益於智慧壓縮功能,Imagify 預設平衡效能和品質。 Imagify 可以自動將您的圖像轉換為 WebP,或者您也可以選擇 AVIF。
    WEBP 或 AVIF 轉換 - 來源:Imagify
    WEBP 或 AVIF 轉換 – 來源:Imagify


    看看下面的兩張圖。右邊的已經被 Imagify 壓縮並轉換為 WebP。您能說出品質上的差異嗎?

    使用 Imagify 壓縮圖像:品質不變 - 來源:Imagify
    使用 Imagify 壓縮圖像:品質不變 – 來源:Imagify

    6.使用CDN

    內容交付網路 (CDN) 是在啟動網站之前提高網站速度的另一種有效方法。 CDN 將網站檔案的副本儲存在世界各地的伺服器上,這意味著國際訪客可以更快地從距離他們最近的伺服器看到內容。

    國際訪客可以從最近的伺服器載入內容 - 來源:RocketCDN
    國際訪客可以從最近的伺服器載入內容 – 來源:RocketCDN

    最佳實務與行動計劃:

    • 分析您網站的當前速度和效能以建立基準(無需 CDN)。
    • 選擇適合您需求的 CDN。首先評估您的表現需求並確定您的目標受眾。選擇在這些地區擁有強大網路、提供低延遲和快速內容交付的 CDN。
    • 更新網域的 DNS 設定以與 CDN 提供者連接,並調整伺服器配置以與 CDN 搭配使用。
    CDN 設定範例 - 來源:Pingdom
    CDN 設定範例 – 來源:Pingdom
    • 確保您網站的檔案分佈在 CDN 網路上。
    • 使用 cDN 測試您的效能,並檢查您網站的速度和效能,以衡量整合後的改進。

    最佳工具和外掛:

    • RocketCDN:像 RocketCDN 這樣的工具附帶了 WordPress 插件,因此您所需要做的就是啟動該插件 - 無需手動 DNS 記錄或複雜的技術設定。
    • Cloudflare:功能強大的 CDN,還附帶 WordPress 插件,可輕鬆為您的網站提供額外的速度提升。

    現在您已經了解了有關最重要的性能檢查表的更多信息,讓我們回顧一下為發布做準備時可以遵循的主要安全提示。

    7. 安裝安全插件

    安全外掛程式可以保護您的 WordPress 網站免受惡意軟體、暴力攻擊和其他可能危及敏感資料的漏洞等潛在威脅。

    最佳實務與行動計劃:

    • 根據以下功能選擇安全插件:
      • 透過防火牆、掃描、DDoS 防護和 IP 封鎖進行惡意軟體防護,以防止惡意活動。
      • 使用雙重認證 (2FA) 的存取控制可限制登入嘗試並管理使用者角色。
      • 垃圾郵件過濾器和其他工具(例如 reCaptcha)可保護網站的敏感區域。
    • 選擇外掛後,請在 WordPress 網站上安裝並設定它。
    • 執行安全掃描以檢查您的網站目前的安全狀況。
    WordFence 進行的掃描範例 - 來源:WordFence
    WordFence 進行的掃描範例 – 來源:WordFence
    • 積極主動並啟用針對未來潛在威脅的通知。

    最佳工具和外掛:

    Wordfence 或 Sucuri Security 是兩個最受歡迎的安全插件,它們提供了在啟動之前(和上線後)保護您的 WordPress 網站的最佳功能。

    8. 更新 WordPress 核心、外掛和主題

    過時的組件是駭客的常見入口點。定期更新主題和外掛可以防止已知漏洞。

    最佳實踐和行動計劃:

    • 啟用 WordPress 核心自動更新。
    • 安排外掛和主題的定期檢查和更新。
    • 啟動外掛程式的自動更新。前往外掛程式>已安裝的外掛程式>全選>啟用自動更新。
    在啟動前啟用 WordPress 自動更新 - 來源:我的 WP 儀表板
    在啟動前啟用 WordPress 自動更新 – 來源:我的 WP 儀表板

    最佳工具和外掛:

    Easy Updates Manager 或 ManageWP 可讓您監控和追蹤需要全域更新的網站。

    9.安裝可靠的備份解決方案

    備份對於在遭受駭客攻擊或技術故障後快速恢復網站至關重要。例如,每週進行一次備份可以讓您在外掛程式更新出錯時立即還原網站。

    最佳實務與行動計劃:

    • 設定每日或每週備份。
    • 將備份儲存在雲端和桌面上。
    • 偶爾測試您的備份以確保它們可以正確恢復。

    最佳工具和外掛:

    UpdraftPlus 和 BackWPup 是受歡迎的 WordPress 插件,可讓您一鍵執行備份。

    10.保護登入頁面和管理區域的安全

    登入頁面是駭客最常攻擊的目標,​​因此您必須在啟動 WordPress 網站之前對其進行強化。

    最佳實務與行動計劃:

    • 啟用雙重認證 (2FA)。
    • 使用包含特殊字元的強密碼。
    • 更改預設的“管理員”使用者名稱。
    • 新增驗證碼並限制登入嘗試,以阻止機器人猜測登入憑證。
    • 使用唯一的登入頁面 URL,而不是使用預設的 WordPress URL。例如,從 yourwordpressite.com/wp-admin 前往 yourwordpressite.com/my-account。
    安全登入頁面的最佳實務 - 來源:WP Rocket
    安全登入頁面的最佳實務 – 來源:WP Rocket

    最佳工具和外掛:

    您可以使用 Google Authenticator 進行 2FA、限制登入嘗試重新載入以確保登入限制,以及使用 WPS 隱藏登入來使用自訂 URL。

    11.仔細定義使用者角色

    在啟動網站之前,根據 WordPress 角色限制對內容的存取;這將有助於防止未經授權的使用者進行有風險的更改。只有管​​理員才能存取關鍵設置,而貢獻者的權限有限。

    最佳實務與行動計劃:

    • 定期檢查使用者角色,僅分配必要的權限,並透過前往使用者>所有使用者從 WordPress 管理員中刪除未使用的帳戶。
    在 WordPress 上指派角色 - 來源:我的 WordPress 管理員
    在 WordPress 上指派角色 – 來源:我的 WordPress 管理員

    最佳工具和外掛:

    使用者角色編輯器或成員外掛程式可協助您根據每個 WordPress 使用者的角色設定特定的權限等級。

    12. 安裝 SSL 憑證 (HTTPS)

    SSL 憑證表示您的網站和訪客之間交換的資料是加密的。簡而言之,它為登入或結帳頁面(客戶在其中放置信用卡詳細資訊)等重要頁面提供額外的安全性。對於登陸您網站的訪客來說,這也是可信度和可信度的標誌。

    最佳實務與行動計劃:

    • 取得 SSL 憑證並在您的網站上設定 HTTPS。
    HTTPS 範例 - 來源:WP Rocket
    HTTPS 範例 – 來源:WP Rocket
    • 請您的主機啟動它; SSL 憑證通常隨您的託管方案一起提供。

    最佳工具和外掛:

    嘗試Really Simple SSL 外掛程式或獨立的SSL 提供者(例如Let's Encrypt)。

    想成為 WordPress 安全專家嗎?詳細了解我們為保護您的網站而匯總的安全最佳實踐。

    獎勵:發布前的 3 個快速用戶體驗提示

    現在您已經了解了有關啟動前需要遵循的性能和速度提示的更多信息,請記住以下三個快速用戶體驗提示:

    1. 檢查 404 錯誤和損壞的鏈接

    使用損壞的鏈接檢查器等工具來識別和修復損壞的鏈接,因為它們可能會令訪問者感到沮喪,損害網站的用戶體驗,並通過向搜索引擎表明網站維護不善而對 SEO 產生負面影響。

    損壞連結偵測範例 - 來源:損壞連結檢查器
    損壞連結偵測範例 – 來源:損壞連結檢查器

    2. 測試所有表格

      確保聯絡人、登入和電子報訂閱表單正常運行,並充分設定電子郵件通知。

      3. 驗證 WooCommerce 購買流程

        • 對於數位產品,請確保下載在購買過程的最後一步進行。
        • 客戶購買後,請確認實體商品的結帳、稅務計算和運送資訊清晰且正確。
        • 檢查確認電子郵件並確保送貨或退貨政策足夠明顯。
        請閱讀我們完整的電子商務清單,以成功開設商店。

        總結

        透過遵循我們的 WordPress 預啟動清單,您將為網站奠定基礎,該網站不僅可以免受惡意攻擊,而且在效能方面也表現良好。

        在點擊「發布」之前,請花時間掃描您的網站,測試其效能,並實施建議的工具和技巧。然後,我們建議您重新執行測試,我們相信您會很高興看到所有改進!

        請記住,從長遠來看,現在採取一些額外的步驟將是有益的。

        立即開始使用 WP Rocket 優化您的網站。 14 天退款保證無任何風險,您可以立即享受超快的網站!