How to speed up your Magento 2 store and increase performance

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.

NOTE: If you're using our Pearl Theme for Magento 2, we have a comprehensive guide for speeding up your Magento 2 store with it, which can be found here: How to speed up your Magento 2 store with the Pearl Theme

 

1. Enable all Magento caches

System->Cache Management->Select all-> Enable-> Submit

 

2. Enable GZIP compression

There are some additional steps that you can take in order to squeeze even more speed out of your Magento 2 store. On Apache Servers, you can edit the .htaccess file found in the root of your project by adding the following for an even greater speed boost, courtesy of the Nexcess Docs.

 

This section discusses how to compress both static content such as text, CSS, JavaScript, and individual HTML files, and dynamic content such as content generated by CMSs like Magento, WordPress, and ExpressionEngine, among others.

Static content: 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
		## http://developer.yahoo.com/performance/rules.html#gzip

    		# Insert filter on all content
    		SetOutputFilter DEFLATE
    		# Insert filter on selected content types only
    		AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript 

    		# 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[678] 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
			

 

Attention: The following will not function on LiteSpeed servers. Browsers use Expires headers to define the lifespan of cached page components. While all page components should include Expires headers, static components and images should use far-future Expires headers. To activate this feature, uncomment the appropriate line and, directly above it, add ExpiresActive On. For example:

            	############################################
		## Add default Expires header
		## http://developer.yahoo.com/performance/rules.html#expires

    		ExpiresActive On
    		ExpiresDefault "access plus 1 year"
			

 

ETags allow browsers to validate cached page components from visit to visit. While useful, they can hamper websites hosted on server clusters in some cases. Disabling them as follows will often improve performance:

            	############################################
		## If running in cluster environment, uncomment this
		## http://developer.yahoo.com/performance/rules.html#etags

    		FileETag none

 

Dynamic content

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

Stores-> Configuration-> Advanced-> Developer-> Javascript  Settings / CSS Settings

 

 

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. Move JS files to the bottom of the page, preload CSS files and Advanced JS Bundling

- By using the MAGENTO 2 SPEED OPTIMIZATION & ADVANCED JS BUNDLING MODULE you can further improve your store speed. 

This is achieved by implementing a series of improvements like reducing the number of server requests in an efficient way through the following optimizations:

• Magento 2 Advanced Bundling implementation
• Moving JS files to the bottom of the page
• Preloading CSS files

You can check a Study case example with the results of implementing some simple solutions and the module setup: Improve Magento store speed: Disable unused Pearl Theme extensions and Design Elements, implement Advanced JS Bundling

 

5. 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 WebSitePlanet or 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. 

 

 

6. Enable Flat Categories and Products

Stores-> Configuration-> Catalog-> Catalog-> Storefront

 

7. 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

 

8. 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.

 

9. 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. 

 

10. 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.

 

11. 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. 

 

12. 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.

 

 

 

13. 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).

 

14. 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.

 

 

See also: Improve Magento store speed: Disable unused Pearl Theme extensions and Design Elements

See also: How to speed up your Magento 2 store with the Pearl Theme