Performance
- Delay third-party scripts
- Use next-gen images
- Use optimal settings
- Switch to production mode
- Reset to developer mode
When your store is ready to sell, do not forget properly configure Magento and enable production mode.
Delay third-party scripts
If you have some inline scripts in Miscellaneous HTML
field, we recommend using
“lazy” script feature. It will delay script execution until user interaction:
<!-- 🐌 Without "lazy" feature -->
<script>
(function(){...})();
</script>
<!-- 🦸 With "lazy" feature -->
<script type="lazy">
(function(){...})();
</script>
Use next-gen images
There are few ways to get next-gen images in Breeze theme:
- Third-party Magento module:
- Third-party service. Cloudflare for example.
- Nginx-based image resize and optimization. View our guide.
Use optimal settings
Here is a one-line command that will set configuration to the recommended values:
bin/magento config:set dev/template/minify_html 1 &&\
bin/magento config:set dev/js/merge_files 1 &&\
bin/magento config:set dev/js/enable_js_bundling 0 &&\
bin/magento config:set dev/js/minify_files 1 &&\
bin/magento config:set dev/js/move_script_to_bottom 1 &&\
bin/magento config:set dev/css/merge_css_files 1 &&\
bin/magento config:set dev/css/minify_files 1 &&\
bin/magento config:set dev/css/use_css_critical_path 1
Switch to production mode
The next command will switch your store to the production mode:
bin/magento maintenance:enable &&\
bin/magento cache:clean &&\
rm -rf generated/code &&\
rm -rf generated/metadata &&\
rm -rf var/view_preprocessed/pub/static/frontend/ &&\
rm -rf pub/static/frontend/ &&\
bin/magento deploy:mode:set production --skip-compilation &&\
bin/magento setup:di:compile &&\
bin/magento setup:static-content:deploy &&\
bin/magento maintenance:disable
That’s all. It’s also recommended to run a crawler (Cache Warmer) afterward to warm up Magento’s cache.
You can then check your score at Google PageSpeed Insights and share your result with us on Twitter 😉.
Reset to developer mode
When you need to make a changes, use this command to revert recommended values to their defaults:
bin/magento config:set dev/template/minify_html 0 &&\
bin/magento config:set dev/js/merge_files 0 &&\
bin/magento config:set dev/js/enable_js_bundling 0 &&\
bin/magento config:set dev/js/minify_files 0 &&\
bin/magento config:set dev/js/move_script_to_bottom 0 &&\
bin/magento config:set dev/css/merge_css_files 0 &&\
bin/magento config:set dev/css/minify_files 0 &&\
bin/magento config:set dev/css/use_css_critical_path 0 &&\
bin/magento deploy:mode:set developer &&\
bin/magento cache:clean &&\
rm -rf generated/code &&\
rm -rf generated/metadata &&\
rm -rf var/view_preprocessed/pub/static/frontend/ &&\
rm -rf pub/static/frontend