<div class="draft-block draft--p left">期待你的優化經驗分享</div>

<div class="draft-block draft--p left">
              <a href="/user/@annchouillust" target="_blank" class="draft--mention">
                <i class="icon-mention"></i>
                <span>Ann Chou</span>
              </a>
             耶~ 看有什麼成效再來跟大家說</div>

<html lang="en"><head><style>              .article-container {                width: 100%;                font-family: Microsoft JhengHei,Helvetica Neue,Helvetica,Arial,sans-serif;              }              ul, ol {                margin: 12px auto;                max-width: 740px;                color: #535150;                line-height: 1.8;                padding-left: 0px;              }              .graf--img {                display: table;                justify-content: center;                align-items: center;                text-align: center;                color: gray;                font-size: 14px;                letter-spacing: 0px;                margin: 10px auto 50px;                width: 100%;                position: relative;                clear: both;              }              .graf--img.center img {                width: 100%;                max-width: 740px;                margin: 10px auto 0px;                display: block;                margin: 0 auto;              }              .graf--img.full img {                width: 100%;              }              .captionTheme__wrapper {                width: 100%;                font-style: normal;                line-height: 22px;                font-size: 16px;                max-width: 600px;                margin-top: 8px;                display: inline-block;              }              .graf--img.full {                max-width: 100%;                margin: 40px 0px;                display: block;                margin: 0 auto;                align-items: center;              }              .graf--figure {                text-align: center;                color: gray;                font-style: italic;                font-size: 15px;                margin: 28px auto;                box-sizing: border-box;              }              .graf--figure iframe {                width: 100%;                max-width: 740px;                margin: 0 auto;              }              .graf--p {                font-size: 16px;                line-height: 1.8;                font-family: "Microsoft JhengHei fixed", "Helvetica Neue" ,"Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif;                letter-spacing: 1px;                font-weight: 400;                max-width: 740px;                color: #535150;                text-align: left;              }              .graf--p > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              .graf--li > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              .graf--quotesSpecial > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              .graf--blockquote > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              a.graf--mention {                color: #535150 !important;                text-decoration: underline !important;                font-weight: 700;              }              .graf--h2 {                font-size: 24px;                padding: 0;                max-width: 740px;                text-align: left;                letter-spacing: 1px;                font-weight: 700;                margin-top: 34px;              }              .graf--h3 {                font-size: 18px;                padding: 0;                max-width: 740px;                text-align: left;                letter-spacing: 1px;                font-weight: 700;                margin-top: 28px;              }              .graf--li {                font-size: 16px;                padding: 0px 0px 0px 4px;                font-weight: 400;                letter-spacing: 0px;                list-style-position: outside;                text-align:left;                margin-left: 24px;              }              .graf--hr {                width: 100%;                margin: 0px auto;                transform: translateY(-50%);                position: relative;                padding: 0px;                text-align: left;                max-width: 740px;                margin: 0 auto;              }              .graf--hr hr {                height: 0;              }              .graf--blockquote {                padding: 10px 0px 10px 16px;                font-size: 16px;                color: #7A7574;                letter-spacing: 1px;                margin: 28px 0px;                border-left: 4px solid #DDD9D8;                width: 100%;                max-width: 740px;                text-align: left;              }              .graf--quotesSpecial {                display: table;                color: #7A7574;                position: relative;                padding: 31.5px 40px;                text-align: center;                letter-spacing: 0px;                position: relative;                margin: 29px auto;                font-family: "Microsoft JhengHei fixed", "Helvetica Neue", "Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif;                font-size: 16px;                -webkit-box-ordinal-group: 1;                -webkit-box-flex: 0;              }              .embed-wrapper {                max-width: 740px;                border: 1px solid #DDD9D8;                display: block;                padding: 12px;                border-radius: 8px;                margin: 12px 0px;                text-decoration: none !important;              }              .embed-title {                font-size: 16px;                font-weight: 700;                color: #535150;                margin-bottom: 8px;                text-align: left;                line-height: 1.5;                text-decoration: none !important;              }              .embed-description {                width: 100%;                font-size: 14px;                color: #7A7574;                line-height: 1.5;                max-height: 150px;                text-align: left;                overflow: hidden;                padding: 12px 0px;              }              .embed-url > a {                width: 100%;                font-size: 14px;                color: #141413 !important;                text-decoration: none !important;                line-height: 1.5;                text-align: left;              }                            .embed-thumbnail-wrapper {                padding-left: 12px;              }              .embed-thumbnail {                width:100px;                border-radius: 8px;              }              pre {                background: #F6F6F6;                border-radius: 8px;                padding: 16px;                font-size: 16px;                color: #535150;                line-height: 180%;                text-align: left;              }              .lexical__textBold {                font-weight: bold;              }              .lexical__textItalic {                font-style: italic;              }              .lexical__textUnderline {                text-decoration: underline;              }              .lexical__textStrikethrough {                text-decoration: line-through;              }              .lexical__textUnderlineStrikethrough {                text-decoration: underline line-through;              }              .lexical__textSubscript {                font-size: 0.8em;                vertical-align: sub;              }              .lexical__textSuperscript {                font-size: 0.8em;                vertical-align: super;              }              .lexical__textCode {                background-color: rgb(240, 242, 245);                padding: 1px 0.25rem;                font-family: Menlo, Consolas, Monaco, monospace;                font-size: 94%;              }            </style></head><body><div class="article-container"><h2 class="graf--h2" dir="ltr"><span style="white-space: pre-wrap;">為什麼要學前端效能優化?</span></h2><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">有鑑於最近半年做的兩個專題，載入速度都好慢，需要等待過長的時間，才會成功呈現完整畫面，使用者體驗非常非常差，那我想面試時的 demo 效果也不會太好，趁現在有兩個大好的練習機會，速速把這個我一直很想嘗試的坑給補起來。而且學習優化效能，就可以知道什麼部分容易導致速度變慢，以後寫網頁就可以從源頭避免，預防勝於治療。</span></p><h2 class="graf--h2" dir="ltr"><span style="white-space: pre-wrap;">資源盤點</span></h2><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">之前就有印象莫力全大大有寫「</span><a href="https://ithelp.ithome.com.tw/users/20113277/ironman/3877" target="_blank" rel="noreferrer noopener"><span style="white-space: pre-wrap;">今晚，我想來點 Web 前端效能優化大補帖！</span></a><span style="white-space: pre-wrap;">」的系列文章，也有先把這本書買起來放 (終於可以把這頭猛獸從箱子裡解放拉)。會以這個 iT 系列文作為主要 guideline，AI 和 Google 輔助查詢了解不懂的內容。</span></p><h2 class="graf--h2" dir="ltr"><span style="white-space: pre-wrap;">目標成果</span></h2><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">紀錄網站優化前後的數據，以及體感上使用的網站流暢度是否提升，並把數據變化放在 repo 的 readme 以及履歷中做為亮點。</span></p></div></body></html>

以行動支持創作者！付費即可解鎖

軟體開發

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

在現代網絡世界中，網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗，還能改善搜索引擎排名和轉換率。為了優化網站速度，我們可以從以下10個面向進行改進，包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。

Kant Chan的沙龍

網站速度優化：從這10個面向提高您的網站速度

幾乎所有的網站都一定會用到圖片和 icon，甚至可能會需要載入大量的圖片，它們也是網站中佔比最多的資源，所以透過優化這些圖片資源，就可能帶來很大的效能提升。

阿榮 | 前端 ~ 互動藝術程式

圖片最佳化 | 前端效能優化

Code Minimize & Uglify (程式碼最小化和醜化)

Code Minimize & Uglify | 前端效能優化

網站效能優化工具 | 前端效能優化

先學習 HTML, CSS, JavaScript 基礎觀念，
再透過實作專案，慢慢熟悉不同的語法使用方式。

學習

職場

親子與教育

前端攻略指南

零基礎到成功轉職，一路上會遇到哪些挑戰、應該如何解決？
- 猶豫階段：「這適合我嗎？薪水如何？...」
- 起步階段：「怎麼開始學？要不要做 side project？...」
- 成長階段：「如何優化開發效率？選擇框架？...」
- 面試階段：「怎麼準備技術和行為面試？...」

前端轉職經驗談

[前端自學轉職攻略] 5. 決定要學了，怎麼開始？

圖片大小

漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具

隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的

音樂藝文

Jason Kim的沙龍

架設網站需要注意什麼的細節看過來！

先說一下我的背景，非本科系從 2022/3 開始接觸到前端領域，在摸索過程中遇到六角學院，買了 ＨTML 和 CSS 課程從基礎學起。

Amber hh的沙龍

前端工程師 2024 面試紀錄

隨著數位時代的快速發展，擁有一個出色的網站已成為企業和個人成功的不可或缺之一。然而，僅僅擁有一個網站不足以保持競爭力。

設計

SEO大師筆記的沙龍

網站優化大全：提升你的網站效能，吸引更多訪客

投資理財

科技

前端

主要放程式學習筆記，分享 Creative Coding 相關內容、作品

拜讀 莫力全大大的 Day02 X 為什麼要在前端做效能優化?
重點整理 & 重述 & 加一點點自己的補充

面試題

互動藝術

IG：codeitaday

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

Ann Chou 耶~ 看有什麼成效再來跟大家說

<h2 class="lexical__h2" dir="ltr"><span style="white-space: pre-wrap;">為什麼要學前端效能優化?</span></h2><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">有鑑於最近半年做的兩個專題，載入速度都好慢，需要等待過長的時間，才會成功呈現完整畫面，使用者體驗非常非常差，那我想面試時的 demo 效果也不會太好，趁現在有兩個大好的練習機會，速速把這個我一直很想嘗試的坑給補起來。而且學習優化效能，就可以知道什麼部分容易導致速度變慢，以後寫網頁就可以從源頭避免，預防勝於治療。</span></p><h2 class="lexical__h2" dir="ltr"><span style="white-space: pre-wrap;">資源盤點</span></h2><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">之前就有印象莫力全大大有寫「</span><a href="https://ithelp.ithome.com.tw/users/20113277/ironman/3877" target="_blank" rel="noreferrer noopener"><span style="white-space: pre-wrap;">今晚，我想來點 Web 前端效能優化大補帖！</span></a><span style="white-space: pre-wrap;">」的系列文章，也有先把這本書買起來放 (終於可以把這頭猛獸從箱子裡解放拉)。會以這個 iT 系列文作為主要 guideline，AI 和 Google 輔助查詢了解不懂的內容。</span></p><h2 class="lexical__h2" dir="ltr"><span style="white-space: pre-wrap;">目標成果</span></h2><p class="lexical__paragraph" dir="ltr"><div class="ad-placeholder" style="min-height: 124px;"></div><span style="white-space: pre-wrap;">紀錄網站優化前後的數據，以及體感上使用的網站流暢度是否提升，並把數據變化放在 repo 的 readme 以及履歷中做為亮點。</span></p>