可以獲得效能分數跟最佳化建議
舉個例子
這個建議我優化圖片
提供的建議是將png 換成 webP
一查WebP 是一種以減少檔案大小為目標開發的圖片檔案格式，
支援Chrome、Opera、Edge、Firefox等主流瀏覽器。
阿不支援safari
哭 要調兼容太麻煩 直接棄用
但至少我知道圖片降低了網頁效能
有了個優化的方向
於是試著給了圖片 lazy loading 參數
最上面的大圖 png拿去 tinyPNG 壓一壓
分數成功飆升 以此類推其它建議 就能逐步優化整個網站
<picture class="picture">
<!-- avif 最新的圖片格式，比webp小20%左右，但是目前兼容性比較差-->
<source type="image/avif" srcset="image.avif">
<!-- webp 圖片格式，比png小50%左右，現階段兼容性比較好 幾乎所有主流瀏覽器都支持 所以項目中 採用這種 使得瀏覽器加載速度要更快-->
<source type="image/webp" srcset="image.webp">
<!-- 常規圖片 在瀏覽器不支持上面 這個2中圖片的時候，自動加載常規圖片 -->
<source type="image/png" srcset="image.png">
<!-- img 加上width和height，使其在初次加載時候預留出指定大小來供圖片加載 -->
<img class="image" src="image.png" width="100" height="100">
</picture>
<!-- 定義一個方法，在項目啟動的時候執行，返回true or false， 將這個值存入 store（store的值必須做持久化）-->
let isSupportWebp = function () {
try {
return document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0;
} catch(err) {
return false;
}
}
<!-- 在有使用圖片的地方 根據這個 true or false ，動態加載class(是有2個class的，一個為正常常規圖片，一個為webp圖片，根據true or false 進行動態加載)-->
文章標籤
全站熱搜
留言列表
