「前端效能優化」前傳 | 前端效能優化

阿榮-avatar-img
發佈於前端
更新於 發佈於 閱讀時間約 1 分鐘

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

有鑑於最近半年做的兩個專題,載入速度都好慢,需要等待過長的時間,才會成功呈現完整畫面,使用者體驗非常非常差,那我想面試時的 demo 效果也不會太好,趁現在有兩個大好的練習機會,速速把這個我一直很想嘗試的坑給補起來。而且學習優化效能,就可以知道什麼部分容易導致速度變慢,以後寫網頁就可以從源頭避免,預防勝於治療。

資源盤點

之前就有印象莫力全大大有寫「今晚,我想來點 Web 前端效能優化大補帖!」的系列文章,也有先把這本書買起來放 (終於可以把這頭猛獸從箱子裡解放拉)。會以這個 iT 系列文作為主要 guideline,AI 和 Google 輔助查詢了解不懂的內容。

目標成果

紀錄網站優化前後的數據,以及體感上使用的網站流暢度是否提升,並把數據變化放在 repo 的 readme 以及履歷中做為亮點。

留言
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
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
在現代網絡世界中,網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗,還能改善搜索引擎排名和轉換率。為了優化網站速度,我們可以從以下10個面向進行改進,包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
Thumbnail
在現代網絡世界中,網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗,還能改善搜索引擎排名和轉換率。為了優化網站速度,我們可以從以下10個面向進行改進,包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News