# 作業2 前端效能調教

:::spoiler 目錄
[toc]
:::

## 前後比較圖

### 調整前


### 調整後


## 調整說明

### Performance

1. 排除禁止轉譯的資源

解法: 因為原本網頁中的禁止轉譯資源只有 google font，所以利用 [google webfonts helper](https://gwfh.mranftl.com/fonts) 後將字體下載，然後改為手動引用。

3. 圖片元素沒有明確的 width 和 height

解法: 按照要求，為每張圖片設定 width 和 height

4. 壓縮 JavaScript

解法: 利用線上 [JavaScript 的壓縮工具](https://jscompress.com/)將 js file 壓縮

6. 確認載入網站字型時文字不會消失

解法: 在每個 @font-face 內加入 font-display: swap;

8. 延後載入畫面外圖片

在 lighthouse 提及的圖片 <img\> 內加入屬性 loading="lazy"

### Accessibillity

1. 連結缺少可辨別的名稱

需要將 link 加上說明文字，具體來說就是要加上 `aria-lable attribute` 屬性和描述就可以了

### Best Practice

已經滿分

### SEO

1. 文件缺少中繼說明

加入 `<meta name="description" content="">`