行動裝置效能 | 如何使網站適合行動裝置

為什麼行動效能很重要？

Web 正在行動化。Statista 的數據顯示，全球 51％ 的網頁檢視次數來自於行動裝置。在亞洲和非洲等一些地區，這個百分比還要更高，而且每年都在穩步增長。

主流搜尋引擎意識到了這一趨勢，因而優先排序行動端載入時間較短的網站。行動使用者的頻寬可能有限，但仍然希望快速找到資訊。這些使用者往往不夠耐心，因此載入緩慢的網站具有較高的退回率。（「退回率」是僅瀏覽單個頁面後即離開的網站訪客的百分比）。

Google 和其他網站速度權威機構認定，行動網站的最大載入時間應為三秒左右。三秒鐘後, 使用者保留率急劇下降。搜尋引擎將「懲罰」載入緩慢的網站，進一步降低它們在搜尋結果中的排名，特別是對於行動使用者。

透過行動連線的三秒鐘載入時間限制並不是很寬容，但是有一些嘗試和真正的策略可以減少行動載入時間。

如何改善行動效能

有許多因素會影響行動效能，因此有許多策略和最佳做法可以縮短載入時間。

盡量減少檔案大小和檔案數量

為了確保更快的載入時間，所有網站檔案都應盡可能小。影像通常是要求的最大檔案，可以透過使用影像最佳化程式或將其轉換為輕量級影像格式（例如 SVG）來縮小這些檔案。

也可以透過縮製來縮小 HTML、JavaScript 和 CSS 檔案的大小。程式碼縮製意味著從程式碼中刪除所有空白和註解，並以盡可能緊湊的方式進行重建。這會將檔案大小減至最小。儘管這會使程式碼幾乎對人類不可讀，但 Web 瀏覽器仍然可以正常執行程式碼。

除了建立更小的檔案外，總體檔案數量也應保持最少。載入網站時每多一個檔案都意味著請求和回應變多，而這些往返都會延長載入時間。網站上若有多個 JavaScript 和 CSS 檔案，則應將所有 JavaScript 程式碼合併為一個檔案，CSS 同樣如此。如果頁面只需很少的 JavaScript 或 CSS，那麼使用內置樣式*可以顯著縮短載入時間。

*通常，Web 開發人員在不同的檔案中編寫 HTML、JavaScript 和 CSS 程式碼。使用稱為「內置樣式」的技巧，開發人員可以將 JavaScript 和/或 CSS 程式碼與 HTML 寫在同一檔案中。

在邊緣快取資源

通常，當使用者造訪網站時，使用者的裝置必須與網頁伺服器通訊以獲取網站檔案。如果網頁伺服器位於舊金山，而使用者位於柏克萊（10 英里外），則速度應該很快。但是，如果使用者在東京（5,000 英里外）呢？這意味著每個請求和回應都必須穿越數千英里，大幅加劇網站載入的延遲。

緩解此問題的常用方法是利用內容傳遞網路 (CDN)。全域 CDN 在網路邊緣快取內容。也就是說，CDN 擁有許多快取伺服器，遍布於世界各地的資料中心。任何存取網際網路的人都不會離資料中心太遠。這些資料中心伺服器可以與原始網頁伺服器通訊以快取網站資料，以便存取使用 CDN 的網站的使用者可以從當地的資料中心獲取網站檔案。這可確保為使用者提供快速的請求回應時間，無論他們身在何處。

快取 API 呼叫

API 呼叫是從外部資源擷取資料的 HTTP 請求。例如，像 Rotten Tomatoes 之類的電影評論網站可能會對 Fandango 這樣的票務服務進行 API 呼叫，以便瀏覽 Rotten Tomatoes 的使用者可以查看當地的電影放映時間。雖然 API 呼叫有助於打造可靠的體驗並減少多餘的工作，但也會帶來新的 HTTP 請求，而這會減慢載入時間。

可以快取 API 呼叫，最大程度減少這些額外的 HTTP 請求。在上面的電影放映時間範例中，Rotten Tomatoes 每天只需擷取一次洛杉磯電影放映時間。他們可以將網站設定為每天快取一次這個 API 呼叫。這樣，如果每天有 10,000 個洛杉磯使用者存取 Rotten Tomatoes，只有第一個使用者必須等待對 Fandango 的 API 呼叫。

優先排序可見內容

在載入網頁時，使用者立即看到的通常只是冰山一角；他們必須向下捲動才能看到頁面的其餘部分。捲動之前出現在使用者螢幕上的內容稱為「頭版畫面」內容。Web 開發人員在編寫程式碼時，應採用頭版畫面內容始終最先載入的方式。有一種稱為消極式載入的技巧可以實現這個目標，它透過在使用者向下捲動頁面的同時動態載入非頭版畫面內容來運作。

避免重新導向

由於各種原因，一些網站會在頁面載入時建立重新導向。例如，改換過名稱或或品牌的網站上通常使用 301 重新導向。這種做法應盡可能避免，因為重新導向會消耗寶貴的載入時間。

概述

隨著行動瀏覽漸成趨勢，擁有高效能行動版網站變得越來越重要。快速的行動版網站將獲得更高的參與度和轉換率，其 SEO 也會加強。網站擁有者應實作以上部分或全部策略，從而獲得這些益處。