為什麼要優化前端效能? | 前端效能優化

阿榮-avatar-img
發佈於前端
更新於 發佈於 閱讀時間約 2 分鐘
【shout out to 莫力全✨】
重點整理 & 重述 & 加一點點自己的補充

3大主因

  • 使用者體驗 (User Experience,UX)
  • 影響營收的重要指標
  • SEO

使用者體驗 UX

能不能「流暢且迅速地」使用一個網站,大大影響使用者體驗。前端效能差的網站,一下這邊卡 2 秒,那邊等 10 秒,功能多、網站美也是沒鹿用。換位思考,如果我們是使用者,肯定直接關掉跟他說聲:掰掰,慢走不送。


影響營收的重要指標

從前面 UX 太爛延伸的大問題就是!!!
用戶跟我們的網站掰掰,企業 $$$ 也跟著掰掰💸💸💸

Amazon:網頁載入的速度每增加 100 ms,營收就減少 1%。

Akamai:網站沒有在 3 秒內顯示完,40% 的消費者會選擇直接跳離網站。


SEO 搜尋引擎優化

從 2020年發的這篇文章可以看出網頁體驗的重要性,Google 會在搜尋結果中突顯出提供優質網頁體驗的網頁。(這是我目前找到相關度高且年份離比較近的文章,方針應該不會差距太大?)

莫大也說:會將 Page Speed 納入 SEO Ranking 考量也跟使用者體驗有關,用戶無法忍受一個緩慢且卡頓的網站,這類網站被關掉的機率高,搜尋引擎當然也不希望自己列出來的頁面充斥這類網站。

補充:查到 Google 在講搜尋的運作方式,其中一項就是「網頁的可用性」,有另一個連結連到 Google 網頁體驗的說明,也有其他如何提升 SEO 的重點。


說到底,雖說是 3 大主因,其實最根本都還是跟使用者體驗掛勾,能不能滿足用戶需求,讓用戶開心順暢使用,顧客開心,公司就開心。


多參考成功案例

文內有特別提醒:「有時候過早且過度的優化反而不是一件好事」,只能最小限度的避免效能瓶頸的出現,出現了瓶頸也許也沒辦法迅速找出問題在哪。

多參考知名企業的案例,看前人是發現什麼問題,怎麼找到問題,怎麼解決問題,還有效能的前後對比差異。

站在巨人肩上,學習他們的經驗與尋找問題時的脈絡思維


參考/學習資源

留言
avatar-img
留言分享你的想法!
avatar-img
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記,分享 Creative Coding 相關內容、作品
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/15
2024/04/15
看更多
你可能也想看
Thumbnail
本篇文章是根據知名 SEO 軟體開發商 Ahrefs 在分析一百多萬個網址後,所整理出來的技術性 SEO 問題以及對應的解決方案。
Thumbnail
本篇文章是根據知名 SEO 軟體開發商 Ahrefs 在分析一百多萬個網址後,所整理出來的技術性 SEO 問題以及對應的解決方案。
Thumbnail
在現代網絡世界中,網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗,還能改善搜索引擎排名和轉換率。為了優化網站速度,我們可以從以下10個面向進行改進,包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
Thumbnail
在現代網絡世界中,網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗,還能改善搜索引擎排名和轉換率。為了優化網站速度,我們可以從以下10個面向進行改進,包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
相信身為一個SEOer,最常聽到客戶掛在嘴邊說的,就是網站流量為什麼掉下來了?為什麼排名不見了?這些都是在做SEO時,經常耳熟能詳的問題之一,如果你還不瞭解網站出現的問題,那我推薦你可以看看這一篇文章了!
Thumbnail
相信身為一個SEOer,最常聽到客戶掛在嘴邊說的,就是網站流量為什麼掉下來了?為什麼排名不見了?這些都是在做SEO時,經常耳熟能詳的問題之一,如果你還不瞭解網站出現的問題,那我推薦你可以看看這一篇文章了!
Thumbnail
拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充
Thumbnail
拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充
Thumbnail
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
Thumbnail
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News