行動裝置網站設計:90%因素在於速度

行動裝置網站設計:90%因素在於速度

根據 Google 研究,如今 65% 英國成年人使用智慧型手機作為上網的主要途徑,人們透過手機來搜尋資訊、下載APP、使用通訊軟體、登入社群媒體、線上購買產品…等等,所有的消費行為與生活都已離不開智慧型裝置,使用者偏好的轉變(從線下到線上)使得線上服務的需求與要求相對增加。由於生活步調大幅的加快,大部分的使用者對於緩慢的網頁載入速度、不斷轉圈等待的APP應用程式…等等,都比過去來得更沒有耐心等待,當你的網頁載入速度過慢時,使用者就很有可能會棄用、跳出、前往下一個頁面。

無論是手機版本網頁或是手機APP應用程式,速度都是取決於使用者繼續使用的首要重要條件之一。

當我們在設計一個網站時,不僅要考慮到UI&UX設計,今天要深度了解的是第一關卡「速度」。

首先工程師應該避免使用冗長的程式碼來拖緩頁面加載的數量與速度,透過簡潔的程式碼與壓縮過的Script,能有效的讓載入速度時間縮短,讓使用者能更快的看到網站畫面而不需要等待。

網頁加載速度過慢

線上的競爭非常激烈,任何讓使用者等待一秒鐘都有可能會讓使用者放棄購買或使用,現今使用者有更多的選擇等著他們去挑選,因此使用者等待的意願急速下降。

研究指出,70%的手機使用者表示,網頁加載所使用的時間對於他們來說整體的影響最為嚴重。

Google 曾經針對全球90萬個行動裝置網站進行速度檢測,發現了平均完全加載網頁的時間為22秒。

與此同時,Google 也發現到,當網頁加載時間超過3秒時,53%的使用者通常會跳出網頁。

從這些研究數據來佐證,網頁加載速度與使用者體驗和使用習慣息息相關,因此網頁加載速度過慢會惡煞整個網頁內容,因為大部分的使用者根本不會進一步去看到網頁的內容。

優化網頁加載速度

Google 為解決行動裝置網站的載入速度問題,提出了 Google AMP 架構,透過 Google AMP 架構來制定你的手機版本網站,可以讓手機版本的使用者更快的顯示網站內容而無需等待。

此外,透過使用 Google AMP,使用者將會在手機瀏覽器當中看到專屬的 AMP 標示,提供使用者辨識「此網站正使用AMP架構」,如此能有助你在搜尋結果頁面當中獲得更多的注目。

此外,使用 Google AMP 也能夠有助於 SEO 排名,加載速度乃是使用者體驗一環,而使用者體又是 SEO 因素一環,環環相扣的影響之下,任何對於使用者有利的改變與影響,都有助於 SEO 的提升。

除了採用 Google AMP 架構之外,你也需要針對其他可能會造成網站載入速度緩慢的原因做檢討,試著找出速度緩慢的原因,如此才能夠對症下藥,改善網頁加載速度。

通常頁面加載速度會受到下列因素影響:

  • 視覺元素:視覺元素包括圖片、影片、特殊效果..等。
    圖片的格式有很多種,圖片的大小也是影響載入速度的重要因素,我們常使用高清圖片來顯示給使用者,雖然圖片美觀,但卻會因檔案過大而需要讓使用者花費更多時間來等待這些圖片的加載。
    影片格式則會依據不同的串流媒體所提供的程式架構而有所不同,當你的加載來源速度不穩定時,也會造成使用者觀看上的體驗下降問題,導致影片不斷等待,從而讓使用者跳出該頁面。
    特殊效果時常需要使用到大量地CSS與Script才得以實現,當使用過多不合理或重複的CSS時,就會拖垮整體網站的加載速度,讓使用者每次觀看都需要加載無關緊要的程式碼。
  • 網站字體:許多網站可能會使用自定義的字體來顯示網站內容,當使用者從你的網站當中下載自定義字體時,會需要載入時間,即使是採用第三方的字體來源,也會需要使用者花費額外的時間來下載字體,從而發生在未達到字體顯示之前,使用者反而已經離開了。
  • 網站伺服器:網站所放置的伺服器也會影響使用者連線進入時的體驗,當你的網站伺服器所使用的硬體性能不佳時,頻寬速度、CPU配置…等等都會影響到使用者載入網站的速度快慢。

測試網站速度

透過測試網站速度,我們可以很輕易地發現上面我們所提到的眾多問題,那麼有哪些工具可以方便我們檢測網站的載入速度呢?

1.PageSpeed Insights – Google Developers

Google 本身提供 PagesSpeed Insights,使用者可以輸入自己的網址來測試自己的網站存在的問題。他會告訴你手機版本與桌電版本載入時各別有哪些問題會影響速度,同時也會簡單地告訴你該如何解決。

Google-PagesSpeed-Insights

Google-PagesSpeed-Insights

2.Pingdom Website Speed Test

Pingdom Website Speed Test則是告訴你網站載入時所有需要存取的資源的載入時間,透過這個網站的分析,可以讓你知道載入網頁時,總共會有哪些資源被載入,載入的時間是多少…等等,可以讓你清楚的了解哪些資源花費的時間太長,讓你可以針對那些載入過久的資源進行針對性的優化。

Pingdom-Website-Speed-Test

Pingdom-Website-Speed-Test

結論

當今的網路世界當中,每一秒都至關重要,減少使用者等待的時間除了有利於SEO之外,最重要的是讓使用者有流暢的使用體驗,一但載入的時間多了一兩秒,那使用者可能就會離開你的網站,你就會失去了得到客戶的機會。


Whoops SEO 是白帽SEO專家,專門研究Google SEO搜尋引擎排名演算法,以優化網站結構與提升網站質量為主軸,幫助各中小企業提升網站排名競爭力。同時Whoops SEO也會提供免費SEO教學,讓有興趣的人能夠以正確的方式更了解SEO。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *