There are multiple ways to optimize the performance of a Magento 2 store. We'll briefly present them below, and recommend, if possible, taking into consideration all the points below 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 transfering 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, you can create a file called .user.ini in your site's document root folder with the following contents instead:
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: Do some speed tests, bundling JS does not always help as it increases the "Start render" time and "dom content loading" time. These 2 indicators really count on the user experience side and you may want these values to be as low as possible. If these values are low, the user will "feel" that like 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 best fit the format where they are going to be used (ex: no need to use a 5760x3240px image on your homepage banner - instead you can use 1920x1080px).
- Use image compression with lossless quality (can reduce file size by up to 50%) 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,the delivered images are most likely already compressed.
These 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's 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 at: 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 the page and product images as the user scrolls down the page. You can check more details about the WeltPixel Lazy Loading extension HERE.
10. Use a CDN (Content Delivery Network)
CDN services provide advanced speed and performance optimizations. 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. Use HTTP/2 async file loading instead of HTTP/1
In order to be able to benefit of the speed enhancement provided by HTTP/2 async file download, you need to use a secure https connection for your website and a hosting partner that supports Http/2.
HTTP/2 can send multiple requests for data in parallel over a single TCP connection. This is the most advanced feature of the HTTP/2 protocol because it allows you to download web files via ASync mode from one server.
If http/2 is not used, files are downloaded one by one, each file waiting for the previous one to finish downloading before the second one starts, generating this way a bigger loading time.
See below how you can check that HTTP/2 protocol is being used on your website.
12. Keep your Magento and 3rd party extensions up to date.
Constantly check for Magento updates, these updates contain bug fixes, security fixes and performance improvements.
Note: Before upgrading your Magento installation to the 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 the Pearl Theme change log. The Change log for each WeltPixel extension is provided on the product page (bottom area).
13. Avoid conflicts between 3rd party extensions
Using multiple 3rd party extensions from different vendors will most likely cause conflicts in your store. In some cases, the conflicts can be minor and cause only small impact problems but in other cases these conflicts can cause severe performance issues.
We include a Magento 2 debugger in all WeltPixel extensions that highlights Rewritten Classes. This way, you or your developer will be able to identify and fix any 3rd party conflicts easier. You can find a short preview of the debugger below, 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. It might be a good starting point for your current project.