Skip to main content
Magento

Return to Answer

(changed emphasis from Core Web Vitals to lighthouse score)
Source Link
Joshua34
Joshua34
  • 2.3k
  • 1
  • 19
  • 25

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 Core Web Vitals (CWV)lighthouse scores, are these:

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 Core Web Vitals (CWV), are these:

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:

Source Link
Joshua34
Joshua34
  • 2.3k
  • 1
  • 19
  • 25

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 Core Web Vitals (CWV), are these:

  1. Merge CSS => https://experienceleague.adobe.com/docs/commerce-admin/config/advanced/developer.html
  2. Minify CSS => https://experienceleague.adobe.com/docs/commerce-admin/config/advanced/developer.html
  3. Minify JS => https://experienceleague.adobe.com/docs/commerce-admin/config/advanced/developer.html
  4. Move JS to the bottom of the page => https://experienceleague.adobe.com/docs/commerce-admin/config/advanced/developer.html
  5. Enable Critical CSS => https://developer.adobe.com/commerce/frontend-core/guide/css/critical-path
  6. Create unique Critical CSS per page => https://github.com/Joshua34/CriticalCSSPerPage
  7. Add Assets to CSP Whitelist => https://developer.adobe.com/commerce/php/development/security/content-security-policies/#configure-csps-for-your-custom-codeextensiontheme
  8. Lazy load all below-the-fold images => https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes
  9. Add fetchpriority="high" to LCP element => https://web.dev/priority-hints/
  10. Add <link rel="preload"> to for LCP & all critical assets => https://web.dev/preload-critical-assets/
  11. Add <link rel="preconnect"> to for any external critical assets => https://developer.chrome.com/en/docs/lighthouse/performance/uses-rel-preconnect/
  12. As needed, exclude any critical scripts from being moved => https://magento.stackexchange.com/a/363633/5880
  13. Install, generate, bundle, and enable MagePack => https://github.com/magesuite/magepack
  14. Add <link rel="preload"> to <head> for all generated magepack files
  15. Reduce unused CSS => https://developer.chrome.com/en/docs/lighthouse/performance/unused-css-rules/
  16. Filter all scripts and GTM tags to run on an "as needed" basis only
  17. Ensure all scripts and external resources are running most up-to-date version
  18. Filter any font libraries loaded, remove unused glyphs => https://web.dev/font-best-practices/
  19. Add <link rel="preload"> to <head> for all external fonts => https://web.dev/optimize-webfont-loading/
  20. Install & configure varnish => https://experienceleague.adobe.com/docs/commerce-operations/configuration-guide/cache/varnish/config-varnish.html
  21. Serve cached resources to visitors => https://developer.chrome.com/en/docs/lighthouse/performance/uses-long-cache-ttl/
  22. If using cloudlfare, enable webp support => https://developers.cloudflare.com/images/polish/activate-polish
  23. Use http/2 delivery for all assets => https://www.cloudflare.com/learning/performance/http2-vs-http1.1/
  24. Run Magento in Production Mode => https://experienceleague.adobe.com/docs/commerce-operations/configuration-guide/setup/application-modes.html
  25. Cleanup site database
  26. Remove any and all unused 3rd party modules, scripts, fonts
  27. Check code for any duplicate calls to assets, scripts, fonts, styling rules
  28. Fix any console errors
  29. Fix any HTML code errors => https://validator.w3.org/
  30. Add <link rel="prefetch"> (after browser idle) for anticipated resources => https://web.dev/link-prefetch/

Following these steps allowed me to improve my lighthouse score from a 49 to a 96.