There are multiple ways to optimize the performance of a Magento 2 store. We'll briefly present them below, and recommend if possible to take into consideration all below points as each one highly influences your store speed and performance.
1. Enable all Magento caches
System->Cache Management->Select all-> Enable-> Submit
2. Enable GZIP compression
This will activate the Apache mod_deflate module and compress static resources into smaller files before transfer to the browser. To enable, uncomment the appropriate lines as shown below:
## enable apache served files compression
# Insert filter on all content
# Insert filter on selected content types only
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0 no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
If, however, your site relies on dynamically generated content, instead create a file called .user.ini in your site's document root folder with the following contents:
zlib.output_compression = on
If you are a Nexcess client, you can request this as default setting.
3. Enable CSS, JS minification and file merging
Important: Make some speed tests, bundling JS not always help as it increases the "Start render" time and "dom content loading" time. This 2 indicators really count on the user experience side, you may want this values as low as possible. If this values are low, the user will "feel" that the site is already loaded while page elements with lower priority are still loading.
Check Page Speed Here: https://www.webpagetest.org
4. Image optimization
- Use web resolution and not print resolution. Usually designers provide you high resolution images to fit various purposes. Make sure to scale down all images to the format where they are used (ex: no need to use a 5760x3240px image on your homepage banner - instead you can use 1920x1080px).
- Use image compression with loos-less quality (can reduce up to 50% file size) in order to reduce the image file size. You can use tools like TinyPNG. In case you are using a CDN (Content Delivery Network) solution, most probably delivered images are already compressed.
This actions are easy to implement and will save both loading time and server bandwidth.
5. Enable Flat Categories and Products
Stores-> Configuration-> Catalog-> Catalog-> Storefront
6. Enable Production Mode
Use the following SSH command to set Production mode as your Magento installation is much faster when the code is compiled in Production Mode.
php bin/magento deploy:mode:set production
Note: For more details on how to enable Production mode, follow this article: How to set Magento 2 Developer and Production mode via SSH
7. Enable backend caching (Redis, Memcache) by following your hosting provider specifications. Make sure they are optimized for Magento 2 environments
Note: More details here on How to choose the right Magento 2 hosting.
8. Use Varnish Cache instead of built in Magento cache.
Magento recommends the use of Varnish cache instead of Built In cache for improved performance, more details in Magento Documentation.
9. Use Lazy Loading for images
Lazy Loading Enhanced for Magento 2 (free extension) highly improves the page loading time by only loading page and product images as the user scrolls down the page. You can check more details about WeltPixel Lazy Loading extension HERE.
10. Use a CDN (Content Delivery Network)
CDN services provide advanced speed and performance optimisations. By using a CDN solution, not only you will increase performance but also will increase security for your online business. A good CDN solution that also includes Varnish Cache is Section.io . CDN & Varnish Setup is easy and can be applied to any hosing that you are currently using.
11. Keep your Magento and 3rd party extensions up to date.
Constantly check for Magento updates, this updates contain bug fixes, security fixes and performance improvements.
Note: Before upgrading your Magento to latest version, check with your 3rd party extension providers that all 3rd party extensions installed are fully compatible. Usually Magento Partners are first to update their extensions as they already have access to Magento releases before the official release. WeltPixel is an Premier Magento Extension Builder.
For reference, check here Pearl Theme change log . Change log for each WeltPixel extension is provided on the product page (bottom area).
12. Avoid conflicts between 3rd party extensions
Using multiple 3rd party extensions from different vendors will most probably cause some conflicts in your store. In some cases the conflicts can be minor can cause only small impact problems but in other cases this conflicts can cause severe performance issues.
Shortly we'll include in all WeltPixel extensions a Magento 2 debugger that will highlight Rewrite Classes. This way you or your developer will be able to identify and fix any 3rd party conflicts easier. Below is a short preview of the debugger, pointing the classes and modules that are overwriting the same class.
If you are not too advanced with your current project, you can take a look at our integrated solution. It may be more cost / time efficient to use it instead of working on compatibility issues:
Take a look at Pearl Theme for Magento 2 that already includes Google Tag Manager , Quick View, Banner Slider, Instagram Widget and 10 other WeltPixel extensions that are already provided with the theme and fully compatible. We created this starting point solution for Magento 2 projects in order for the users to be able to focus on store development instead of compatibility issues. Maybe it's a good starting point for your current project.