---
# System prepended metadata

title: 前端效能調教

---

# **前端效能調教**
#  **B e f o r e -**
## **原先的CSS網站模板**
[https://www.free-css.com/free-css-templates/page295/applight](https://)
![螢幕擷取畫面 2025-03-29 222433](https://hackmd.io/_uploads/BkLnGFr61e.jpg)
**原先的CSS網站模板-Lighthouse效能分數**
![1](https://hackmd.io/_uploads/BJEDQtS61x.jpg)
# **A f t e r -**
## **修改完的CSS模板網站**
**針對Lighthouse效能分數提出需要修改的部分的結果**
https://iiil.io/lCky
![螢幕擷取畫面 2025-03-29 223018](https://hackmd.io/_uploads/BkIGVYr61g.jpg)
**修改完的CSS網站模板-Lighthouse效能分數**
![螢幕擷取畫面 2025-03-29 221301](https://hackmd.io/_uploads/Bk6V4YBp1g.jpg)


---

## **🔺🔺🔺🔺🔺需修改部分🔺🔺🔺🔺🔺**
## 1.搜尋引擎最佳化(SEO)-需修改部分

**🔺文件缺少中繼說明:**
![螢幕擷取畫面 2025-03-29 224420](https://hackmd.io/_uploads/H1_x_YB61l.jpg)

你可以在搜尋結果中加入中繼說明，簡要描述網頁內容。進一步瞭解中繼說明。
```
<head>
<meta name="description" content="最佳應用網站模板 這個很棒的模板由W3 Template設計。">
</head>

```
**🔺圖片元素缺少 [alt] 屬性:**
請設定適當的 HTML 格式，讓檢索器更容易辨識你的應用程式內容。
![螢幕擷取畫面 2025-03-29 224420](https://hackmd.io/_uploads/H1_x_YB61l.jpg)
![螢幕擷取畫面 2025-03-29 224756](https://hackmd.io/_uploads/SJNNdYHayx.jpg)
```
<img src="images/logo.png" alt="logo" class="logo-1" width="160" height="40"> </a>
<img src="images/appstore.webp"alt="apple store下載按鈕" class="wow fadeInUp" data-wow-delay="0.4s" width="180" height="55"/>
<img src="images/playstore.webp"alt="play store下載按鈕" class="wow fadeInUp" data-wow-delay="0.7s" width="180" height="55"/>
<img src="images/iphone-screen.webp"alt="封面手機螢幕展示圖片" class="img-fluid wow fadeInUp" width="230" height="310"/>
<img src="images/iphone-screen.webp"alt="封面手機螢幕展示圖片" class="img-fluid wow fadeInUp" width="230" height="310"/>
<img class="svg-hero" alt="這是裝飾性元素白色的色塊" src="images/applight-wave.svg" width="1920" height="90">
<img src="images/iphone-screen-with-shadow.webp"alt="封面手機螢幕展示圖" class="img-fluid wow fadeInUp" width="290" height="510"/>
<img src="images/user1.jpg"alt="user1" class="img-fluid" width="157" height="157"/>
<img src="images/user2.jpg"alt="user2" class="img-fluid" width="157" height="157"/>
<img src="images/user3.jpg"alt="user3" class="img-fluid" width="157" height="157"/>
<img src="images/user1.jpg" alt="Placeholder" width="157" height="157">
<img src="images/user3.jpg" alt="Placeholder" width="157" height="157">
<img src="images/user3.jpg" alt="Placeholder" width="157" height="157">
<img src="images/appstore.webp"alt="apple store下載按鈕" class="wow fadeInUp" data-wow-delay="0.4s" width="180" height="55"/>
 <img src="images/playstore.webp"alt="play store下載按鈕" class="wow fadeInUp" data-wow-delay="0.7s" width="180" height="55"/>

```


---

## 2.最佳做法-需修改部分
**🔺使用者體驗:**
提供的圖片解析度過低
![螢幕擷取畫面 2025-03-29 230238](https://hackmd.io/_uploads/HJXGhFBaJx.jpg)
![螢幕擷取畫面 2025-03-29 230303](https://hackmd.io/_uploads/HktG2Krakg.jpg)
修改網站使用到的圖片
因不能替換掉網站圖片，所以將png檔案轉換成webg檔案
![螢幕擷取畫面 2025-03-29 221442](https://hackmd.io/_uploads/r1TUnYHaJg.jpg)
```
<img src="images/logo.png" alt="logo" class="logo-1" width="160" height="40"> </a>
<img src="images/appstore.webp"alt="apple store下載按鈕" class="wow fadeInUp" data-wow-delay="0.4s" width="180" height="55"/>
<img src="images/playstore.webp"alt="play store下載按鈕" class="wow fadeInUp" data-wow-delay="0.7s" width="180" height="55"/>
<img src="images/iphone-screen.webp"alt="封面手機螢幕展示圖片" class="img-fluid wow fadeInUp" width="230" height="310"/>
<img src="images/iphone-screen.webp"alt="封面手機螢幕展示圖片" class="img-fluid wow fadeInUp" width="230" height="310"/>
<img class="svg-hero" alt="這是裝飾性元素白色的色塊" src="images/applight-wave.svg" width="1920" height="90">
<img src="images/iphone-screen-with-shadow.webp"alt="封面手機螢幕展示圖" class="img-fluid wow fadeInUp" width="290" height="510"/>
<img src="images/user1.jpg"alt="user1" class="img-fluid" width="157" height="157"/>
<img src="images/user2.jpg"alt="user2" class="img-fluid" width="157" height="157"/>
<img src="images/user3.jpg"alt="user3" class="img-fluid" width="157" height="157"/>
<img src="images/user1.jpg" alt="Placeholder" width="157" height="157">
<img src="images/user3.jpg" alt="Placeholder" width="157" height="157">
<img src="images/user3.jpg" alt="Placeholder" width="157" height="157">
<img src="images/appstore.webp"alt="apple store下載按鈕" class="wow fadeInUp" data-wow-delay="0.4s" width="180" height="55"/>
 <img src="images/playstore.webp"alt="play store下載按鈕" class="wow fadeInUp" data-wow-delay="0.7s" width="180" height="55"/>
 $('.navbar-logo img').attr('src','images/logo-black.webp');
 $('.navbar-logo img').attr('src','images/logo.webp');
 $('.navbar-logo img').attr('src','images/logo-black.webp');
 $('.navbar-logo img').attr('src','images/logo-white.webp');
```


---

## 3.無障礙功能-需修改部分
**🔺圖片元素缺少 [alt] 屬性:**
這部分已經在搜尋引擎最佳化(SEO)-需優改部分增加了img的[alt] 屬性。
![螢幕擷取畫面 2025-03-29 231523](https://hackmd.io/_uploads/SJInAtH6kx.jpg)
![螢幕擷取畫面 2025-03-29 231540](https://hackmd.io/_uploads/By5hAtHTyx.jpg)
```
<img src="images/logo.png" alt="logo" class="logo-1" width="160" height="40"> </a>
<img src="images/appstore.webp"alt="apple store下載按鈕" class="wow fadeInUp" data-wow-delay="0.4s" width="180" height="55"/>
<img src="images/playstore.webp"alt="play store下載按鈕" class="wow fadeInUp" data-wow-delay="0.7s" width="180" height="55"/>
<img src="images/iphone-screen.webp"alt="封面手機螢幕展示圖片" class="img-fluid wow fadeInUp" width="230" height="310"/>
<img src="images/iphone-screen.webp"alt="封面手機螢幕展示圖片" class="img-fluid wow fadeInUp" width="230" height="310"/>
<img class="svg-hero" alt="這是裝飾性元素白色的色塊" src="images/applight-wave.svg" width="1920" height="90">
<img src="images/iphone-screen-with-shadow.webp"alt="封面手機螢幕展示圖" class="img-fluid wow fadeInUp" width="290" height="510"/>
<img src="images/user1.jpg"alt="user1" class="img-fluid" width="157" height="157"/>
<img src="images/user2.jpg"alt="user2" class="img-fluid" width="157" height="157"/>
<img src="images/user3.jpg"alt="user3" class="img-fluid" width="157" height="157"/>
<img src="images/user1.jpg" alt="Placeholder" width="157" height="157">
<img src="images/user3.jpg" alt="Placeholder" width="157" height="157">
<img src="images/user3.jpg" alt="Placeholder" width="157" height="157">
<img src="images/appstore.webp"alt="apple store下載按鈕" class="wow fadeInUp" data-wow-delay="0.4s" width="180" height="55"/>
 <img src="images/playstore.webp"alt="play store下載按鈕" class="wow fadeInUp" data-wow-delay="0.7s" width="180" height="55"/>
```

**🔺連結缺少可辨別的名稱:**
![螢幕擷取畫面 2025-03-29 231321](https://hackmd.io/_uploads/BJ9D0tHaJx.jpg)
![螢幕擷取畫面 2025-03-29 231340](https://hackmd.io/_uploads/B1g_0tB6yx.jpg)

```
<li>
<a href="#" aria-label="前往 Apple Store 下載 App">
</li>
<li>
<a href="#" aria-label="前往 Google Play 下載 App">
</li>
```
**🔺背景和前景顏色沒有足夠的對比度:**
![螢幕擷取畫面 2025-03-29 233457](https://hackmd.io/_uploads/HJf479Sp1e.jpg)
![螢幕擷取畫面 2025-03-29 233457](https://hackmd.io/_uploads/H15w79Bayx.jpg)
![螢幕擷取畫面 2025-03-29 233529](https://hackmd.io/_uploads/BJCvXcrp1g.jpg)
![螢幕擷取畫面 2025-03-29 233545](https://hackmd.io/_uploads/rymuQ9BTJl.jpg)
```
style.css
a {
	color:#262626;
}
a:hover {
	color:#262626;
}
.sectioner-header p {
	color:#262626;
	font-size: 17px;
}
.icon-box p {
	color: #262626;
	font-size: 14px;
	width: 80%;
	margin: 0 auto;
}
.faq-content p {
	color: #262626;
	font-weight:300;
	margin-top:15px;
}
.footer-copy {
	background: #ffffff;
	color: #262626;
	font-size: 13px;
	text-align: center;
	padding:15px 0px;
}
```
**🔺<html> 元素缺少 [lang] 屬性:**
    ![螢幕擷取畫面 2025-03-29 233950](https://hackmd.io/_uploads/HyD845B6ye.jpg)
```
<html lang="en">
```
    
---

## 4.效能-需修改部分
    
**🔺最大內容繪製元素 1,790 毫秒:**
這是在可視區域中繪製的最大內容元素。進一步瞭解最大內容繪製元素LCP
![螢幕擷取畫面 2025-03-29 231842](https://hackmd.io/_uploads/r1Uw19Spkg.jpg)
```
<!--  加上 preload（優先載入圖片）-->
    <link rel="preload" as="image" href="images/iphone-screen.webp">
```
**🔺啟用文字壓縮 可減少 104 KiB:**
提供的文字資源應經過 (gzip、deflate 或 brotli) 壓縮，將網路傳輸的資料量降至最低。進一步瞭解文字壓縮。FCPLCP
![螢幕擷取畫面 2025-03-29 232347](https://hackmd.io/_uploads/ryE5e9B6kg.jpg)


**🔺排除禁止轉譯的資源 可減少 280 毫秒:**
網頁的資源過多，因此妨礙了首次顯示畫面的時間。建議你先載入重要的內嵌 JavaScript/CSS，並延後載入不重要的 JavaScript/樣式。瞭解如何排除會妨礙顯示的資源。FCPLCP
![螢幕擷取畫面 2025-03-29 232200](https://hackmd.io/_uploads/Hk27ecHpyg.jpg)

```
<!-- 預連線至 Google Fonts 與字型檔案來源 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
```
**🔺減少無用的 CSS 可減少 106 KiB**
移除樣式表中的無用規則，並延遲載入在不需捲動位置內容中未使用的 CSS，即可減少網路活動消耗的流量。瞭解如何減少未使用的 CSS。FCPLCP
![螢幕擷取畫面 2025-03-29 232530](https://hackmd.io/_uploads/Hk3eb5H61l.jpg)
```
<!-- 2. 頁面引入了不少第三方 CSS，但都會阻塞畫面首次繪製，這樣優化 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"></noscript>
<!-- 2. 頁面引入了不少第三方 CSS，但都會阻塞畫面首次繪製，這樣優化 -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"></noscript>
```
**🔺圖片元素沒有明確的width和height**
請明確設定圖片元素的寬度和高度，以減少版面配置轉移並改善 CLS。瞭解如何設定圖片尺寸CLS
![螢幕擷取畫面 2025-03-29 232821](https://hackmd.io/_uploads/BkYRW9rpJg.jpg)
![螢幕擷取畫面 2025-03-29 232838](https://hackmd.io/_uploads/BJARb9Hake.jpg)
![螢幕擷取畫面 2025-03-29 232851](https://hackmd.io/_uploads/BJBkz9HT1e.jpg)
![螢幕擷取畫面 2025-03-29 232907](https://hackmd.io/_uploads/HkF1f9B6yl.jpg)
```
<img src="images/logo.png" alt="logo" class="logo-1" width="160" height="40"> </a>
<img src="images/appstore.webp"alt="apple store下載按鈕" class="wow fadeInUp" data-wow-delay="0.4s" width="180" height="55"/>
<img src="images/playstore.webp"alt="play store下載按鈕" class="wow fadeInUp" data-wow-delay="0.7s" width="180" height="55"/>
<img src="images/iphone-screen.webp"alt="封面手機螢幕展示圖片" class="img-fluid wow fadeInUp" width="230" height="310"/>
<img src="images/iphone-screen.webp"alt="封面手機螢幕展示圖片" class="img-fluid wow fadeInUp" width="230" height="310"/>
<img class="svg-hero" alt="這是裝飾性元素白色的色塊" src="images/applight-wave.svg" width="1920" height="90">
<img src="images/iphone-screen-with-shadow.webp"alt="封面手機螢幕展示圖" class="img-fluid wow fadeInUp" width="290" height="510"/>
<img src="images/user1.jpg"alt="user1" class="img-fluid" width="157" height="157"/>
<img src="images/user2.jpg"alt="user2" class="img-fluid" width="157" height="157"/>
<img src="images/user3.jpg"alt="user3" class="img-fluid" width="157" height="157"/>
<img src="images/user1.jpg" alt="Placeholder" width="157" height="157">
<img src="images/user3.jpg" alt="Placeholder" width="157" height="157">
<img src="images/user3.jpg" alt="Placeholder" width="157" height="157">
<img src="images/appstore.webp"alt="apple store下載按鈕" class="wow fadeInUp" data-wow-delay="0.4s" width="180" height="55"/>
 <img src="images/playstore.webp"alt="play store下載按鈕" class="wow fadeInUp" data-wow-delay="0.7s" width="180" height="55"/>
```





