# 作業2 前端效能調校-當機等候網頁 ## 效能調校前 ### 網站:https://genelin0128.github.io/HW1/ --- ### 效能調校前分數 ![](https://i.imgur.com/3OZbO9S.jpg) --- ### Performance ![](https://i.imgur.com/DIQLAAg.jpg) > ==DIAGNOSTICS== > - Image elements do not have explicit width and height > - Does not have a <meta name="viewport"> tag with width or initial-scale No <meta name="viewport"> tag found > ==修改== ```htmlembedded= <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Costco_Wholesale_logo_2010-10-26.svg" width="432" height="155" alt="costco image" class="costco_img" > ``` ```htmlembedded= <meta name="viewport" content="width=device-width, initial-scale=1"> ``` --- ### Accessibility ![](https://i.imgur.com/pI70eg7.jpg) --- ### Best Practices ![](https://i.imgur.com/Tftdvwq.jpg) --- ### SEO ![](https://i.imgur.com/BGXTGux.jpg) > ==MOBILE FRIENDLY== > - Does not have a <meta name="viewport"> tag with width or initial-scaleNo <meta name="viewport"> tag found > - Document doesn't use legible font sizesText is illegible because there's no viewport meta tag optimized for mobile screens. > - Tap targets are not sized appropriatelyTap targets are too small because there's no viewport meta tag optimized for mobile screens > ==CONTENT BEST PRACTICES== > - Document does not have a meta description > ==修改== ```htmlembedded= <meta name="viewport" content="width=device-width, initial-scale=1"> ``` ```htmlembedded= <meta name="description" content="Costco" /> ``` --- ## 效能調校後 ### 網站:https://genelin0128.github.io/HW2/ --- ### 效能調校前分數 ![](https://i.imgur.com/q2hNbF9.jpg) --- ### Performance ![](https://i.imgur.com/aRnnO2k.jpg) --- ### Accessibility ![](https://i.imgur.com/xu58CbP.jpg) --- ### Best Practices ![](https://i.imgur.com/hrFjT90.jpg) --- ### SEO ![](https://i.imgur.com/Y3jAyQV.jpg) ---