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

閱讀時間約 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 大主因,其實最根本都還是跟使用者體驗掛勾,能不能滿足用戶需求,讓用戶開心順暢使用,顧客開心,公司就開心。


多參考成功案例

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

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

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


參考/學習資源

主要放程式學習筆記,分享 Creative Coding 相關內容、作品
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Nuxt 的安裝流程,一起來試試看吧
對,沒錯。Nuxt 是一個框架 (Vue) 的框架。
CSR(Client Side Rendering)是一種將渲染資料的過程交由瀏覽器端處理的方法。
伺服器端渲染(SSR)是一種在伺服器端渲染 HTML 頁面的技術。
Nuxt 的安裝流程,一起來試試看吧
對,沒錯。Nuxt 是一個框架 (Vue) 的框架。
CSR(Client Side Rendering)是一種將渲染資料的過程交由瀏覽器端處理的方法。
伺服器端渲染(SSR)是一種在伺服器端渲染 HTML 頁面的技術。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
在前端的開發中,除了切版與串 API 外,大部分的時間都在針對表單內容進行檢核、驗證、阻擋,一方面是讓使用者在操作頁面的過程中有良好的使用者體驗,不會因為一些例外狀況(Edge Case),例如:莫名其妙的 4xx 錯誤,導致使用者卡在某個操作流程中逃不出來,另一方面是讓傳遞到後端的資料更加正確⋯⋯
Thumbnail
本文講述了作者在大學時期因家人及工作的壓力導致身體狀態緊繃,後因驗血報告自行發現幽門桿菌超標的情況,通過調整生活方式和接受治療恢復健康的經歷,提醒讀者關注自己的健康並給予自己更多關愛。
Thumbnail
手工訂製沙發之所以受到廣泛推薦,主要是因為它能夠滿足個人的特定偏好和空間需求。以下是一些選擇定制沙發的主要優點,供您參考: 尺寸客製化:定制沙發可以按照您的居住空間尺寸進行專門調整,這對於那些擁有不規則空間布局或空間較小的客廳來說尤其重要。 空間使用
Thumbnail
SEO 是什麼?讓專業的SEO公司教你該如何提升 SEO 流量吧!資訊不斷更新的時代,抓住流量的祕密就更有機會把自己的網站或是想要推廣的產品讓更多人看見,它不等於廣告,卻能提升在搜尋引擎的排名,給你帶來的效益是有效並且長期的。
Thumbnail
前言- 為什麼要買債券ETF 大家在投資金融產品的時候,都是在考慮投資報酬率,如果把範圍縮小,只討論ETF的時候,通常會去看每一年的投資報酬率,再往下細分的話,可能去看二大因素:殖利率、價差。 殖利率越高表示每單位時間拿到的股息就越多,價差則是賣出後和原先買入價格的差距,在這二個因素下,通
Thumbnail
為什麼霧眉有那麼重要!!! 曾經的我糾結一年才決定去霧眉,霧眉後才後悔自己怎麼這麼晚才做,還沒霧眉前,出門前的我畫眉毛花了十分鐘以上,不想承認自己手殘,但怎麼畫都很難對稱又不滿意,畫完出門三不五時又要擔心眉粉眉色因汗水消失,畫眉花太多時間、眉毛每天都不一樣、眉型還不滿意、還要擔心眉色眉型不見。而眉毛
高明的作家會構思想跟讀者溝通的概念,需要讀者長時間去關注、閱讀,才能完整地吸收、融會貫通。
Thumbnail
台灣OBU為國際金融業務分行之簡稱。投資客戶要申請海外帳戶,在坊間常誤以為OBU就是指境外公司,正確來說OBU其實是指境外公司的在台灣開的帳戶,簡稱OBU境外公司帳戶 ,政府將其與當地金融體系分開,以境外通貨為交易仲介,境外客戶為交易對象,給予租稅減免、或免除金融管制等優惠條件,吸引國際金融業者前來
Thumbnail
目前外資在新加坡登記公司,選擇的註冊型態多為私人有限公司,也是投資者選擇設立新加坡公司最受歡迎的商業實體。成立私人有限公司成員數最多限制為50人,股東和董事具有單獨法人地位,是獨立於其股東/成員的法人實體。這表示該成立新加坡公司每個股東的責
Thumbnail
好文挑選 你曾經有沒有被長輩或是身邊的朋友說,你這輩子只要做好一份工作就好了?但你卻總是對這個領域有興趣,也對那個領域有興趣,總喜歡嘗試新鮮有趣的事物,腦袋中不斷地冒出新的想法,而那些想法會讓你轉換出新的動力,如果你也是這樣子定不下來的人,或許你是擁有多重潛能的人。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
在前端的開發中,除了切版與串 API 外,大部分的時間都在針對表單內容進行檢核、驗證、阻擋,一方面是讓使用者在操作頁面的過程中有良好的使用者體驗,不會因為一些例外狀況(Edge Case),例如:莫名其妙的 4xx 錯誤,導致使用者卡在某個操作流程中逃不出來,另一方面是讓傳遞到後端的資料更加正確⋯⋯
Thumbnail
本文講述了作者在大學時期因家人及工作的壓力導致身體狀態緊繃,後因驗血報告自行發現幽門桿菌超標的情況,通過調整生活方式和接受治療恢復健康的經歷,提醒讀者關注自己的健康並給予自己更多關愛。
Thumbnail
手工訂製沙發之所以受到廣泛推薦,主要是因為它能夠滿足個人的特定偏好和空間需求。以下是一些選擇定制沙發的主要優點,供您參考: 尺寸客製化:定制沙發可以按照您的居住空間尺寸進行專門調整,這對於那些擁有不規則空間布局或空間較小的客廳來說尤其重要。 空間使用
Thumbnail
SEO 是什麼?讓專業的SEO公司教你該如何提升 SEO 流量吧!資訊不斷更新的時代,抓住流量的祕密就更有機會把自己的網站或是想要推廣的產品讓更多人看見,它不等於廣告,卻能提升在搜尋引擎的排名,給你帶來的效益是有效並且長期的。
Thumbnail
前言- 為什麼要買債券ETF 大家在投資金融產品的時候,都是在考慮投資報酬率,如果把範圍縮小,只討論ETF的時候,通常會去看每一年的投資報酬率,再往下細分的話,可能去看二大因素:殖利率、價差。 殖利率越高表示每單位時間拿到的股息就越多,價差則是賣出後和原先買入價格的差距,在這二個因素下,通
Thumbnail
為什麼霧眉有那麼重要!!! 曾經的我糾結一年才決定去霧眉,霧眉後才後悔自己怎麼這麼晚才做,還沒霧眉前,出門前的我畫眉毛花了十分鐘以上,不想承認自己手殘,但怎麼畫都很難對稱又不滿意,畫完出門三不五時又要擔心眉粉眉色因汗水消失,畫眉花太多時間、眉毛每天都不一樣、眉型還不滿意、還要擔心眉色眉型不見。而眉毛
高明的作家會構思想跟讀者溝通的概念,需要讀者長時間去關注、閱讀,才能完整地吸收、融會貫通。
Thumbnail
台灣OBU為國際金融業務分行之簡稱。投資客戶要申請海外帳戶,在坊間常誤以為OBU就是指境外公司,正確來說OBU其實是指境外公司的在台灣開的帳戶,簡稱OBU境外公司帳戶 ,政府將其與當地金融體系分開,以境外通貨為交易仲介,境外客戶為交易對象,給予租稅減免、或免除金融管制等優惠條件,吸引國際金融業者前來
Thumbnail
目前外資在新加坡登記公司,選擇的註冊型態多為私人有限公司,也是投資者選擇設立新加坡公司最受歡迎的商業實體。成立私人有限公司成員數最多限制為50人,股東和董事具有單獨法人地位,是獨立於其股東/成員的法人實體。這表示該成立新加坡公司每個股東的責
Thumbnail
好文挑選 你曾經有沒有被長輩或是身邊的朋友說,你這輩子只要做好一份工作就好了?但你卻總是對這個領域有興趣,也對那個領域有興趣,總喜歡嘗試新鮮有趣的事物,腦袋中不斷地冒出新的想法,而那些想法會讓你轉換出新的動力,如果你也是這樣子定不下來的人,或許你是擁有多重潛能的人。