網站效能：設計以效能為導向的網站
1 分鐘
透過優先考慮表現的設計決策，建立快速且吸引人的網站。當您選擇優先顯示的內容、放置圖片和影片的位置以及整理內容的方式時，即可協助頁面快速載入，讓人員更輕鬆地找到所需資訊。請參考這些專注於表現的秘訣來提升網站速度、吸引訪客，並在任何裝置上提供平滑且專業人員的體驗。
最佳化元件載入順序
網站上的元件會根據其類型和大小依特定順序載入。了解此順序有助於優先處理最先顯現的內容，並確保無縫的體驗。
- 靜態元件：包括載入速度最快的文字和基本形狀。請將這些元件置於首屏以確保快速顯現。
- 流動元件：圖片和影片屬於此類別。雖然能為網站增添活力，但可能會降低表現。請盡可能將這些元件置於首屏下方。
- 互動式元件：iFrame、動畫和第三方應用程式等元件會最後載入。請謹慎且有策略地使用，以免載入時間過長。
提示：
建議特別留意首頁，因為這通常是訪客接觸到的第一個頁面。
設計高效能首屏區段
「首屏」區段是指使用者開始捲動前可見的網頁區域。由於此區段會優先載入，保持其輕量且具備明確目的至關重要。
建議使用的元件：
- 文字： 使用簡潔有力且能清楚傳達頁面目的的文字。建議使用系統字型，並避免過度使用多種字型系列與粗細。
- 行動呼籲 (CTA)： 加入清晰的按鈕或連結以引導使用者操作，例如「立即購物」或「瞭解更多」。避免在 CTA 附近放置會分散注意力的元件。
應盡量減少的元件：
- 大型圖片或影片
- 動畫
- 過度使用高解析度圖片
提示：
使用 Google PageSpeed Insights 或 Wix 網站速度管理介面 等工具，確保首屏內容已針對快速載入進行最佳化。
使用專屬頁面
頁面（尤其是首頁）若載入過多元件會影響表現。建議改為針對特定網站功能或應用程式建立 專屬頁面。
新增商店、部落格或影片等功能頁面，並透過首頁的按鈕或選單項目連結至這些頁面。將內容分散至各個網站頁面並減少不必要的元件，將頁面長度保持在大約 8 個畫面 以內。
最佳化圖片與影片
媒體檔案通常會因檔案過大或解析度過高而導致網站速度變慢。以下是有效管理媒體檔案的方法：
圖片：
- 使用 WebP 或 JPEG 等輕量格式。
- 在上傳至 Wix 前壓縮檔案。
- 在專業圖庫中展示圖片以使用內建的最佳化功能。
影片：
- 將影片託管於 Wix Video、YouTube 或 Vimeo 以最佳化表現。
- 避免在首屏放置影片，以加快初始頁面載入速度。
延遲載入
延遲載入會延後圖片和影片的載入時間，直到其出現在使用者的檢視範圍內，進而縮短初始頁面載入時間。此功能在 Wix 中為自動啟用，但若將圖片和影片放置在支援的元件（如圖庫或條紋）中，並將首屏內容保持極簡以加快顯現速度，效果會最佳。
管理其他元件
其他設計決策也可能影響網站的速度與表現：
- 按鈕： 建立清晰簡潔的按鈕，連結至網站其他位置的相關內容。例如，您可使用「探索目錄」或「檢視更多專案」。
- 自訂程式碼： 確保所有自訂程式碼皆已最佳化，並使用 "defer" 或 "async" 等屬性來減少延遲。
- 分頁或載入更多按鈕： 針對產品數量較多的網站，請避免在單一頁面上同時顯示所有產品。請實作 分頁 或按需載入功能以維持載入效率。
提示：
- 定期測試： 使用 Google PageSpeed Insights 和 Wix 網站速度管理介面 監察並提升表現。
- 優先處理首屏內容： 透過新增輕量化和固定元件，確保關鍵內容快速載入。
- 減少第三方應用程式： 僅使用必要的應用程式或小工具，避免不必要的效能降低。
常見問題
點擊下方問題即可瞭解更多。
為什麼 Wix 網站載入速度緩慢？該如何提升速度？
為什麼行動版網站的速度比桌面版網站慢？
如何改善最大內容繪製 (LCP) 分數？
在不降低商店速度的前提下，顯示大量產品的最佳方式為何？