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

阿榮-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
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
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個面向進行。
Thumbnail
在現代數位時代,架設網站已成為企業和個人展示品牌、提供資訊、吸引客戶的不可或缺之一。然而,要建立一個成功的網站不僅僅是擁有吸引人的設計,還需要考慮多方面的因素,以確保網站的效能和使用者體驗達到最佳化。
Thumbnail
在現代數位時代,架設網站已成為企業和個人展示品牌、提供資訊、吸引客戶的不可或缺之一。然而,要建立一個成功的網站不僅僅是擁有吸引人的設計,還需要考慮多方面的因素,以確保網站的效能和使用者體驗達到最佳化。
Thumbnail
好的網站應該要有直覺性網站版面配置與迅速的網頁載入速度,需要具備好的使用者體驗,進而提升SEO關鍵字排名。隨著時代演進,網站設計經歷了五個世代的變革,並逐漸注重UI/UX的整合。本文說明網站版面的重要觀念、配色的重要性、動畫對網站行銷的影響,以及改善網站PSI分數的優化方法。
Thumbnail
好的網站應該要有直覺性網站版面配置與迅速的網頁載入速度,需要具備好的使用者體驗,進而提升SEO關鍵字排名。隨著時代演進,網站設計經歷了五個世代的變革,並逐漸注重UI/UX的整合。本文說明網站版面的重要觀念、配色的重要性、動畫對網站行銷的影響,以及改善網站PSI分數的優化方法。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News