Magento2 前端性能优化建议

Some great starting points for someone looking to increase the front end speed and optimize the front end performance of an Adobe Commerce store, with an emphasis on lighthouse scores, are these:

Merge CSS => https://experienceleague.adobe.com/docs/commerce-admin/config/advanced/developer.html

Minify CSS => https://experienceleague.adobe.com/docs/commerce-admin/config/advanced/developer.html

Minify JS => https://experienceleague.adobe.com/docs/commerce-admin/config/advanced/developer.html

Move JS to the bottom of the page => https://experienceleague.adobe.com/docs/commerce-admin/config/advanced/developer.html

Enable Critical CSS => https://developer.adobe.com/commerce/frontend-core/guide/css/critical-path

Create unique Critical CSS per page => https://github.com/Joshua34/CriticalCSSPerPage

Add Assets to CSP Whitelist => https://developer.adobe.com/commerce/php/development/security/content-security-policies/#configure-csps-for-your-custom-codeextensiontheme

Lazy load all below-the-fold images => https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes

Add fetchpriority="high" to LCP element => https://web.dev/priority-hints/

Add to for LCP & all critical assets => https://web.dev/preload-critical-assets/

Add to for any external critical assets => https://developer.chrome.com/en/docs/lighthouse/performance/uses-rel-preconnect/

As needed, exclude any critical scripts from being moved => https://magento.stackexchange.com/a/363633/5880

Install, generate, bundle, and enable MagePack => https://github.com/magesuite/magepack

Add to for all generated magepack files

Reduce unused CSS => https://developer.chrome.com/en/docs/lighthouse/performance/unused-css-rules/

Filter all scripts and GTM tags to run on an "as needed" basis only

Ensure all scripts and external resources are running most up-to-date version

Filter any font libraries loaded, remove unused glyphs => https://web.dev/font-best-practices/

Add to for all external fonts => https://web.dev/optimize-webfont-loading/

Install & configure varnish => https://experienceleague.adobe.com/docs/commerce-operations/configuration-guide/cache/varnish/config-varnish.html

Serve cached resources to visitors => https://developer.chrome.com/en/docs/lighthouse/performance/uses-long-cache-ttl/

If using cloudlfare, enable webp support => https://developers.cloudflare.com/images/polish/activate-polish

Use http/2 delivery for all assets => https://www.cloudflare.com/learning/performance/http2-vs-http1.1/

Run Magento in Production Mode => https://experienceleague.adobe.com/docs/commerce-operations/configuration-guide/setup/application-modes.html

Cleanup site database

Remove any and all unused 3rd party modules, scripts, fonts

Check code for any duplicate calls to assets, scripts, fonts, styling rules

Fix any console errors

Fix any HTML code errors => https://validator.w3.org/

Add (after browser idle) for anticipated resources => https://web.dev/link-prefetch/