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, what would be some good starting points to emphasize?
Add a comment
|
1 Answer
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
<link rel="preload">to for LCP & all critical assets => https://web.dev/preload-critical-assets/ - Add
<link rel="preconnect">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
<link rel="preload">to<head>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
<link rel="preload">to<head>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
<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.