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

阿榮-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
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記,分享 Creative Coding 相關內容、作品
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/15
2024/04/15
看更多
你可能也想看
Thumbnail
拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充
Thumbnail
拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
相信身為一個SEOer,最常聽到客戶掛在嘴邊說的,就是網站流量為什麼掉下來了?為什麼排名不見了?這些都是在做SEO時,經常耳熟能詳的問題之一,如果你還不瞭解網站出現的問題,那我推薦你可以看看這一篇文章了!
Thumbnail
相信身為一個SEOer,最常聽到客戶掛在嘴邊說的,就是網站流量為什麼掉下來了?為什麼排名不見了?這些都是在做SEO時,經常耳熟能詳的問題之一,如果你還不瞭解網站出現的問題,那我推薦你可以看看這一篇文章了!
Thumbnail
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
Thumbnail
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
Thumbnail
在現代網絡世界中,網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗,還能改善搜索引擎排名和轉換率。為了優化網站速度,我們可以從以下10個面向進行改進,包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
Thumbnail
在現代網絡世界中,網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗,還能改善搜索引擎排名和轉換率。為了優化網站速度,我們可以從以下10個面向進行改進,包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
在現代數位時代,架設網站已成為企業和個人展示品牌、提供資訊、吸引客戶的不可或缺之一。然而,要建立一個成功的網站不僅僅是擁有吸引人的設計,還需要考慮多方面的因素,以確保網站的效能和使用者體驗達到最佳化。
Thumbnail
在現代數位時代,架設網站已成為企業和個人展示品牌、提供資訊、吸引客戶的不可或缺之一。然而,要建立一個成功的網站不僅僅是擁有吸引人的設計,還需要考慮多方面的因素,以確保網站的效能和使用者體驗達到最佳化。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News