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

阿榮-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
每次出國旅行,最讓人頭痛的就是要穿什麼? 不同國家的氣候差很大,從零下低溫到艷陽高照,一趟旅程可能要準備兩季的衣服! 這次我整理出我出國最愛帶的 WIWI 輕旅穿搭清單,全部都能在 蝦皮雙11活動 期間用超優惠價格入手,還能同時參加 蝦皮分潤計畫,一邊分享一邊賺旅費 💰 雙11優惠懶人包:
Thumbnail
每次出國旅行,最讓人頭痛的就是要穿什麼? 不同國家的氣候差很大,從零下低溫到艷陽高照,一趟旅程可能要準備兩季的衣服! 這次我整理出我出國最愛帶的 WIWI 輕旅穿搭清單,全部都能在 蝦皮雙11活動 期間用超優惠價格入手,還能同時參加 蝦皮分潤計畫,一邊分享一邊賺旅費 💰 雙11優惠懶人包:
Thumbnail
大家好久不見,趁著連假有時間寫文來分享我這陣子的近況~ 大約 8 月中後的時候,我自己去了一小趟的釜山+福岡獨旅,主要是因為想讓自己沈澱放鬆,也加上自己好久沒有好好休息,所以希望可以有一段自己的時間。 當然,也因為這次是獨自出發,所以身為小小自媒體工作者還是會需要拍照記錄一下生活,所以這次旅程還
Thumbnail
大家好久不見,趁著連假有時間寫文來分享我這陣子的近況~ 大約 8 月中後的時候,我自己去了一小趟的釜山+福岡獨旅,主要是因為想讓自己沈澱放鬆,也加上自己好久沒有好好休息,所以希望可以有一段自己的時間。 當然,也因為這次是獨自出發,所以身為小小自媒體工作者還是會需要拍照記錄一下生活,所以這次旅程還
Thumbnail
在現代網絡世界中,網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗,還能改善搜索引擎排名和轉換率。為了優化網站速度,我們可以從以下10個面向進行改進,包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
Thumbnail
在現代網絡世界中,網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗,還能改善搜索引擎排名和轉換率。為了優化網站速度,我們可以從以下10個面向進行改進,包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
幾乎所有的網站都一定會用到圖片和 icon,甚至可能會需要載入大量的圖片,它們也是網站中佔比最多的資源,所以透過優化這些圖片資源,就可能帶來很大的效能提升。
Thumbnail
拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充
Thumbnail
拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News