頁面壞UV效能最佳化

• 在實驗場景中：使用工具在穩定、受控的環境中模擬頁面載入

• 在實際場景中：基於真實使用者的實際頁面載入與頁面互動

► 開啟Gzip壓縮

►使用 HTTP 2

► 使用CDN

     圖片往往是一個 h5 頁面的重要組成部分，然而圖片佔用的資源往往也是很大的，因此圖片最佳化在效能最佳化中佔據很重要的地位。下面來看幾種最佳化圖片的方式。

• 圖片懶載入：當圖片出現在可視區域或者即將出現在可視區域時再載入圖片，避免一次性載入全部圖片，會對使用者體驗造成很大影響。

•  降低圖片質量：一些圖片適當降低圖片質量時，通常是看不出來區別的，尤其是作為背景圖片時，可以使用dis命令進行圖片壓縮。

• 儘量使用CSS代替圖片：一些簡單的圖片效果如果可以透過 CSS 效果實現則進行用 CSS 來實現，可以減小請求次數或者打包體積大小。

• 圖片指定尺寸：圖片裁剪成合適尺寸大小,img元素固定寬高，避免因網路載入導致頁面抖動。

• 使用webp圖片：WebP 的優勢體現在它具有更優的影像資料壓縮演算法，能帶來更小的圖片體積，而且擁有肉眼識別無差異的影像質量；同時具備了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 JPEG 和 PNG 上的轉化效果都相當優秀、穩定和統一。

► vue 路由懶載入

let router = createSimpleRouter({
    routes: [
        {
            path: `${URL_PREFIX}/index`,
            name: "index",
            component: () => import(/* webpackChunkName: "index" */ '../views/index/Index'),
            meta: meta
        },
        {
            path: `${URL_PREFIX}/cities`,
            name: "cities",
            component: () => import(/* webpackChunkName: "cities" */ '../views/cities/Index'),
            meta: {
                ...meta,
                subcategoryId: 11750,
            }
        },
        {
            path: `${URL_PREFIX}/success/:encryptedOrderId`,
            name: "success",
            component: () => import(/* webpackChunkName: "success" */ '../views/success/Index'),
            meta: {
                ...meta,
                subcategoryId: 14393,
            }
        }]
});

https://web.dev/metrics/