你是否有過這樣的線上消費體驗？當你看到喜歡的商品，可能是喜歡的衣服或是心儀的旅遊行程，點擊商品加到購物車後，進入了結帳頁面並輸入信用卡付款，這時頁面卻突然停止載入。而當你想知道這筆交易是否完成，你開始覺得困惑，但是你擔心如果再次輸入付款資訊是否會被重複收款，然後你就會開始厭惡這次的購買行為，並想遠離這個商家品牌。
以上的經驗我們認為大多數的消費者都有遇過，給消費者惡劣的使用體驗是商家品牌老闆們的夢靨，你一定不希望這件事發生在你的身上；那麼你在創建網站時，就應該先解網站性能的重要性。
網站性能是什麼？
網站性能可以衡量網頁在用戶的瀏覽器中加載和顯示的速度，從而影響整體交互性和可用性。 簡而言之：網站加載和顯示的速度越快，它的“性能”就越好。
其中，伺服器(server)和平台的基礎設施在網站性能中佔據關鍵作用，但是其他因素也會影響性能，例如你上傳了一張超大容量的圖片，使得網站的載入速度過慢。在本文中，我們將介紹關於網站性能的所有基礎知識，並分享你可以採取哪些措施來優化你的網站。
重點提醒：Wix網站自2021年起的表現已比之前更加出色，該公司不斷的加強基礎建構，例如持續優化程式碼和自動將圖像轉換為較輕盈的WebP格式，幫助網站更快地加載瀏覽。
為什麼網站性能很重要？
因為要創造給你的網站用戶良好體驗的第一印象。
要確保他們不僅會再次與你的網站互動，甚至還可能轉化為一個購買的客戶。例如，如果網站訪問者遇到網站當機或加載時間過長的時候，他們可能的離開率很高，再回頭購買的可能性就很低。這不僅會影響你網站的生意，也會讓你的品牌印象觀感不佳。
讓我們更全方位地研究為什麼網站性能如此重要，它會影響以下6個面向：
使用者體驗
跳出率和訪客留存率
轉換率
品牌認知
行動優先
搜索引擎優化(SEO)
1. 使用者體驗
設計網站時請你先考慮性能表現，我們看過很多設計師的作品，他們的網站看起來很美很漂亮。但是載入速度緩慢(可能圖檔上傳過大或動畫用的過多)、移動不規律或是反應遲鈍，即使第一眼看起來很漂亮，但這可能會造成你的用戶不耐煩、沮喪最後離開不再回頭，如何在美學與效能之間取得平衡，是一個優秀的網站設計師必備的認知。Designing for Performance 一書的作者 Lara Hogan 說：“當你設計和開發一個新網站時，你需要考慮其用戶體驗的許多組成部分：如佈局、層次結構、直觀性、易用性等。”
“網站性能 = 用戶體驗。” - 《Designing for Performance》的作者 Lara Hogan
2. 跳出率和訪客留存率
請記得，你只有非常短的時間來給你的網站的訪問者留下良好的第一印象。Google分析裡的跳出率指的是，訪問者僅訪問一個頁面，或是未點擊任何連結動作就離開的百分比。根據Google官方的對外說法，如果一個頁面載入速度超過3秒，訪問者跳出的可能性要會比一個優良好的網站高出32%。
3. 轉換率
如果用戶對你流暢快速的網站有著良好的體驗，他們很可能會留在你的網站上，並有著後續的點擊動作。這種體驗甚至可能會促使他們返回您的網站，購買你的產品或服務。根據 Cloudflare公司的說法：“網頁的載入速度越快，用戶就越有可能在該網頁上執行有目的性的操作。”
在2019年，Portent公司研究指出，頁面加載時間的前5秒對顧客轉換率的影響最大，也就是那第一印象，即使你的網站只有多一秒鐘的延遲，也會減少約4.42%的轉換率，原文見此。
4. 品牌認知
上述我們了解網站效能不佳，所造成的一些影響數據。但一次糟糕的體驗可能會影響品牌信任和整體品牌的認知度。
想像一下：一個KOL網紅穿著你們家品牌的流行服飾，向他主要的Z世代粉絲發出號召性用語：只要輸入我的優惠碼就享有專屬折扣，於是成千上萬的粉絲用戶點擊進入你的網站，但卻遇到一個載入速度的商品頁面，或是更糟糕的是你的網站使用一頁式工具平台，讓人覺得看起來像詐騙網站。粉絲用戶於是不耐煩等待，或是看了覺得詭異，於是他們就放棄購買跳走了。
IBM公司在2022年的研究指出：“無法滿足Z世代高期望的公司可能會迅速失寵，並把機會讓給你的競爭對手。”
5. 行動優先
根據BankMyCell提供的統計報告，台灣的智慧手機用戶每天檢查手機的次數不少於47次，平均在智慧手機上花費了2小時51分鐘，每天產生2617次點擊，滑動和點擊。關注行動用戶的體驗已經是老生常談的話題，用戶可能會在公車捷運通勤或等待咖啡時瀏覽你的網站，這意味著分心無處不在，速度至關重要。研究表明，行動網站速度每提高0.1秒，對於零售網站的轉換率就可能提高8.4%。
6. 搜尋引擎優化(SEO)
網站性能不僅會影響你的用戶體驗，更甚者還會影響訪問者是如何找到你的網站。Google的網站核心指標(Core Web Vitals)是Google衡量用戶體驗的重要依據，可以影響網站在搜索引擎結果頁(Search Engine Results Page)上的顯示。
然而，Google的搜尋引擎分析師John Mueller認為：網站核心指標不完全是影響關鍵排名的因素，他表示內容相關性仍然更為重要。
“頁面體驗只是用於對頁面進行排名的眾多信號之一。請記住，搜索查詢的意圖仍然是一個非常強烈的信號，因此如果頁面體驗不佳，但如果它有很好的相關內容，它的排名可能仍然很高。但是，如果你的企業在SERP的查詢中與競爭對手並列排名，則性能更好的網站在頁面上的排名可能更高。” - John Mueller
名詞認識：網站核心指標(CWV)
網站核心指標的英文全名叫作Core Web Vitals，簡稱CWV。
根據Google官方的說法，Core Web Vitals是長期以來，Google根據大量的網站使用者體驗所制定的指標。Google提及若是75%以上的使用者，在網站的瀏覽體驗都能夠通過以下3種指標，就能夠大幅的提升使用者的搜尋體驗，甚至能夠讓原本因等待而離開的使用者減少 24%！
這3種分標分別為：
LCP：Largest Contentful Paint 顯示最大內容元素所需時間，簡稱「載入速度」
FID：First Input Delay 首次輸入延遲/封鎖時間總計，簡稱「可開始互動的時間」
CLS：Cumulative Layout Shift 累計版面配置轉移，簡稱「頁面穩定性」
頁面載入速度的評估指標有哪些？
在2018年的Google Web Performance Made Easy開發者大會上，Google稱他們的75%用戶群裡，將速度視為他們最重視的使用者體驗需求。
而頁面速度可以通過多種方式測量，包括：
Speed Index：表示頁面加載期間內容顯示的速度。
First Contentful Paint (FCP)：測量從頁面開始加載到頁面內容(文字、圖像和其他圖形元素)呈現在螢幕上的時間。
Time to Interactive (TTI)：衡量從用戶登陸頁面到完全互動(當用戶可以點擊按鈕並以其他方式與網站互動時)所需的秒數。
Total Blocking Time (TBT)：簡單地說，衡量你的網頁被阻止的總時間，阻止用戶與你的頁面交互。
Time to First Byte (TTFB)：測量瀏覽器請求頁面和從伺服器接收到資訊的第一個字節之間的時間。
影響網站性能的因素
1. HTTP 請求
HTTP或超文本傳輸協議，請求構建了瀏覽器和伺服器之間的聯繫方式。當你在瀏覽器中輸入 URL時，你實際上是在要求瀏覽器從網頁的主機伺服器請求這些頁面的每個文件。通常，網頁越複雜，加載整個站點所需的HTTP請求越多，載入速度就會越慢。
一般來說，一個站點的HTTP請求越少，它的性能就越好。而可能影響 HTTP 請求數量的因素包括圖像、JavaScript、CSS文件和第三方工具。
2. 頁面重量
雖然請求的數量會影響性能，但實際請求的內容也會影響性能。頁面重量，也稱為頁面大小，是指網頁的文件量，例如頁面上包含的 HTML、圖像或其他媒體、JavaScript、CSS和第三方資源。網站越重，頁面上需要加載的元素和物件越多，頁面執行速度就越慢。
圖片大小：圖片在你的網站設計中起著至關重要的作用，它們傳達品牌信息、吸引訪問者和部落格內容，甚至可以充當號召性用語 (CTA)。但是，圖像比純文字的HTML文件更重，加載時間更長，因此會顯著影響網站的性能。
為確保最佳性能，請將你的圖像優化。在不影響品質的情況下，儘可能壓縮圖像，您可以使用不失真圖像縮放工具將圖像縮放到您想要的確切尺寸。
然後，您可以以 JPG、PNG 或 GIF 文件格式下載它們。重要的是要注意，就性能而言，最好的格式是JPG，因為JPG圖像最多可以比PNG小10 倍，因此它們的加載速度要快得多。避免使用GIF也是最好的做法，因為這些動畫圖像往往具有較大的文件大小，這會導致較長的加載時間。
文件大小：文件檔案越小，發送和下載的速度越快。為了提高性能，文件可以由網絡服務器“壓縮”，或者在不影響資訊的情況下盡可能縮小文件，然後發送到瀏覽器以正常接收和呈現它們。
3. 網路主機伺服器
網絡託管是指將網站文件提供給用戶瀏覽器。 不同的託管選項會根據網站大小、流量數量和可擴展性影響你網站的性能。
提醒：Wix網站通過在全球多個位置的服務器上提供所有網站，由CDN自動提供和緩存，確保快速的服務器響應時間，特別是首字節時間 (TTFB)。
4. 緩存
緩存是存儲數據（在伺服器上或通過瀏覽器）的過程，將來可以更容易地獲取數據，以避免 HTTP 請求和響應週期。例如你的LOGO或圖像，它們會出現在每個頁面的相同位置。 如果沒有緩存，則每次用戶單擊新頁面時，頁面都必須下載。
5. 所在地理位置
儘管網路感覺無所不在，但使網站正常運行的基礎設施是有形的，而且遍布世界各地。每個 HTTP請求都必須從瀏覽器傳送到服務器，然後信息必須從服務器傳回並傳遞給瀏覽器。物理距離數據在服務器和瀏覽器之間傳輸的時間越長，完成請求和響應週期所需的時間就越長。
實際上你的電腦離主機機房的空間愈近，速度就會愈快，因為數據可以傳輸的物理距離更少。
為了減少數據傳輸請求所需的距離，託管服務提供商還在全球範圍內戰略性地放置服務器（稱為代理服務器），作為內容交付網絡的一部分。這些服務器託管網頁、圖像和視頻的緩存副本，並快速響應離它們最近的瀏覽器的請求。
6. 瀏覽器插件、擴展和第三方應用程序
第三方插件通過訪問存儲在另一台服務器上的數據為您的網站提供附加功能。由於它們需要向這些服務器發出額外的 HTTP 請求，因此它們通常加載緩慢。要優化性能，請將附加組件僅限於那些對用戶體驗有很大貢獻的附加組件。
7. 網址重定向
將前向網站訪問者和搜索引擎重定向到與他們最初請求的頁面不同的 URL。當瀏覽器向服務器發送 HTTP 請求以獲取已重定向到另一個頁面的特定頁面 URL 時，它們會被觸發。服務器使用新頁面 URL 響應瀏覽器的請求，然後瀏覽器使用對該 URL 的新請求進行響應。由於它需要完成額外的 HTTP 請求，因此會對頁面的性能產生負面影響。多個重定向請求可能會對瀏覽器資源造成相當大的負擔，並最終減慢頁面加載時間。
隨著業務的增長和在線內容的變化，您可能需要使用重定向來更新網站的流程。例如，假設您創建了幾篇涵蓋同一主題的博客文章，並且您希望將它們合併為基於主題集群模型的一篇戰略文章。雖然重定向對於 SEO 來說通常是不可避免和必要的，但請盡可能保持其簡單明了以保證良好的性能。
結論：看完以上這麼多，那我該如何優化我的網站性能？
如果你使用的是開店平台或是其他自架網站的工具(如WordPress)，請洽你的開店平台服務商，或是你一如往常的需要自已去尋找問題的來源並努力改善。
如果你是Wix網站的用戶，我們主要建議只有2項：
將每一個上傳至網站的圖檔素材作不失真壓縮
在美觀與效能之間取得平衡：適度使用你的物件動畫
至於其他的因素，只要交由Wix公司託管就可以搞定。
《資源來源：Wix.com》
Comments