# **前端效能調教** # **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"/> ```