對於希望提高 Adobe Commerce 商店前端速度和優化前端性能的人來說，以下是一些很好的起點，重點是 Lighthouse 分數：
- 合併 CSS => https://experienceleague.adobe.com/docs/commerce-admin/config/advanced/developer.html
- 壓縮 CSS => https://experienceleague.adobe.com/docs/commerce-admin/config/advanced/developer.html
- 壓縮 JS => https://experienceleague.adobe.com/docs/commerce-admin/config/advanced/developer.html
- 將 JS 移至頁面底部 => https://experienceleague.adobe.com/docs/commerce-admin/config/advanced/developer.html
- 啟用 Critical CSS => https://developer.adobe.com/commerce/frontend-core/guide/css/critical-path
- 為每個頁面創建獨特的 Critical CSS => https://github.com/Joshua34/CriticalCSSPerPage
- 將資源添加到 CSP 白名單 => https://developer.adobe.com/commerce/php/development/security/content-security-policies/#configure-csps-for-your-custom-codeextensiontheme
- 懶加載所有在頁面下方的圖片 => https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes
- 對 LCP 元素添加
fetchpriority="high"=> https://web.dev/priority-hints/ - 對於 LCP 和所有 Critical 資源，添加
<link rel="preload">=> https://web.dev/preload-critical-assets/ - 對於任何外部 Critical 資源，添加
<link rel="preconnect">=> https://developer.chrome.com/en/docs/lighthouse/performance/uses-rel-preconnect/ - 根據需要，排除任何關鍵腳本的移動 => https://magento.stackexchange.com/a/363633/5880
- 安裝、生成、打包並啟用 MagePack => https://github.com/magesuite/magepack
- 對於所有生成的 magepack 文件，在
<head>中添加<link rel="preload"> - 減少未使用的 CSS => https://developer.chrome.com/en/docs/lighthouse/performance/unused-css-rules/
- 只選擇需要運行的腳本和 GTM 標籤
- 確保所有腳本和外部資源都使用最新版本
- 過濾加載的字體庫，刪除未使用的字形 => https://web.dev/font-best-practices/
- 對於所有外部字體，在
<head>中添加<link rel="preload">=> https://web.dev/optimize-webfont-loading/ - 安裝並配置 varnish => https://experienceleague.adobe.com/docs/commerce-operations/configuration-guide/cache/varnish/config-varnish.html
- 將緩存資源提供給訪問者 => https://developer.chrome.com/en/docs/lighthouse/performance/uses-long-cache-ttl/
- 如果使用 cloudflare，啟用 webp 支援 => https://developers.cloudflare.com/images/polish/activate-polish
- 對於所有資源，使用 http/2 傳遞 => https://www.cloudflare.com/learning/performance/http2-vs-http1.1/
- 在生產模式下運行 Magento => https://experienceleague.adobe.com/docs/commerce-operations/configuration-guide/setup/application-modes.html
- 清理網站數據庫
- 刪除所有未使用的第三方模塊、腳本和字體
- 檢查代碼中是否存在重複調用資源、腳本、字體和樣式規則
- 修復所有控制台錯誤
- 修復所有 HTML 代碼錯誤 => https://validator.w3.org/
- 在瀏覽器閒置後，對預期的資源添加
<link rel="prefetch">=> https://web.dev/link-prefetch/