How to Optimize Magento 2 Speed [Ultimate Guide]

Many leading marketing and SEO specialists say that website page speed is paramount for your success. And we fully agree with this.

Think of your users. What do they want?

• (a) To pay bills in a second.
• (b) Receive quick but relevant results.
• (c) Get what they want in a single clicke.

If your page loads longer than 3 seconds, 53 out of 100 visitors will irretrievably leave your page. When users quickly leave your pages, your website's bounce rate grows. Ultimately, Google views your site not only as "too slow" but also as one with poor-quality content and, therefore, ranks you lower than expected. However, Google also assures that even shrinking images can make your page more digestible, thus, fast-loading. In 2018 it claimed that 25% of web pages worldwide could save about 250KB and 10% even more than 1MB this way.

If you've been wondering how to speed up Magento 2 website, this post will provide all the information you need. Below, we’ll talk about Magento 2 speed optimization steps and methods, including cache activation, HHVM, .htaccess, minimization of CSS and JS files, Magento TTFB increase, and more.

But first, test your current Magento 2 loading speed with one of the tools we offer and pin the results in your browser.

How to improve Magento 2 speed?

If your Magento 2 site is slow, there are 2 key ways how you can deal with it. You can try to speed it up from the backend via special extensions, or you may need to optimize the server. For speed optimization, try the following:

• Images shrinking
• Lazy loading
• JavaScript and CSS files Optimization
• Magento cache activating
• HTTP/2 speed-up.

Images shrinking

Weighty images can ruin your performance. Run the speed test in PageSpeed Insights and look at the detailed report given below, which lists all the weightiest illustrations.

One of the Google tips is to use JPEG 2000, JPEG XR, and WebP formats to replace the images on your server and increase Magento 2 speed. At Amasty, we usually recommend clients to compress all images into the new format to be 100% sure they won’t cause slowdowns.

To make a complete audit, use this tool. Download a complete list of all the images on your website with their addresses and weight values and decide on what to do next: either find a solution that will automatically shrink all your heavyweight media files or handle them manually. As for the weight, an optimal value for a 400px wide .jpeg photo is about 35 – 70 Kb.

Lazy loading

This technology helps you save resources on loading unnecessary images. Your Magento will load images only in case a user scrolls down to them. Otherwise, it will leave the unviewed elements “untouched”. Amasty has applied this method on our main page: the images of brand logos and social proof badges load and become visible only as you scroll down.

How to apply this technology to your Magento in a click? Try out our Google Page Speed Optimizer.

JavaScript and CSS files Optimization

There are 4 JS optimization techniques:

• downloading each script separately
• bundling
• merging
• bundling & merging

The last one is one of the most effective because it helps you reduce the number of queries to a minimum. All your separate JS files can be merged into one single file. This will help you with performance tuning and significantly improve Magento 2 site speed. The same approach is also suitable for CSS files.

How to merge/minify CSS and JS files in Magento 2?

• Merge and/or minify CSS: navigate to System>Settings>Configuration>Advanced>Developer>CSS Settings, then choose the options you need and click on Save Config;
• Merge and/or minify JS files: stay in System>Settings>Configuration>Advanced>Developer but choose JavaScript Settings. After setting this up, click on Save Config:

How to merge CSS and JS files in Magento 1?

• Merge CSS: navigate to System>Configuration>Developer>CSS Settings>Merge CSS Files choose Yes and click on Save Config.
• Merge JS files: go to System>Configuration>Developer then set Merge JavaScript Files to Yes click on Save Config:

◊ Amasty's Pro Tip: If you want to take a more comprehensive approach to the task and ensure the best results, use our Magento/Magento 2 Google Page Speed Optimizer. With this extension, you’ll minify HTML, CSS and JS, merge CSS and JS, move JS to the page bottom and enable all-in-one Magento performance optimization to reduce the number of queries and their processing time.

Magento Cache Activation

This is one of the simplest and fastest methods of Magento 2 performance improvement. We have many useful articles on the topic where you can learn about browser caching in Magento 2, caching in Magento 1, and Magento 2 Backend caching solutions: (1) file system, (2) database, (3) Redis, and (4) Varnish, as well as the pros and cons for each of them.

If you run Magento 2, don’t forget about OPcache, which is bundled with PHP 5.5.0 and later. The module uses shared memory to keep precompiled script bytecode and speed up your website loading. Learn why and how to use OPcache from our partner’s blog post.

HTTP/2 speed-up

The web is becoming faster and mobile, which is why the new HHTP/2 protocol was created. In 2018, Google already started penalizing the “slow-mo” mobile websites that don't comply with the protocol. Still, if your website uses HTTP/2 technology and loads in under 3 seconds (the current “golden rule”), you can expect Google to boost your Magento's score as a best practice follower. 

How can HTTP/2 improve your Magento organic traffic?

One of the sure ways of speeding up your website is to make fewer HTTP requests - Magento store will immediately start working faster. But HTTP/2 uses a single TCP (Transmission Control Protocol) connection to asynchronously send numerous requests for data to your server. So you can download multiple files from a server in ASync mode with no risks to site performance. 

How to check if your Magento loads with HTTP/2?

You can simply choose to check this in the dev tool of your Chrome browser, just press Ctrl + Shift + i and go to Network from the upper horizontal navigation menu. (If there’s no such a column, add it by right-clicking):

If you see no http/2 protocol in the column, this means it’s not there. You can also double check this with a free online tool. Now it’s known that the protocol is used by 37.4% of all the worldwide websites and the trend still increases:

Source

How to optimize Magento 2 website server?

If your site is slow on localhost, you can use server optimization techniques like:

• reducing time to the first byte
• optimizing the .htaccess file
• using HipHop Virtual Machine (HHVM).

Let’s consider all these optimization options and improve your Magento 2 performance.

What is Magento TTFB and how do you improve it?

Magento time to first byte (TTFB) shows you how much time your Magento 2 needs to generate an HTML page. It is one of the main metrics of your website performance as it directly affects your position on SERP. To analyze the most time-consuming process and reduce your Magento 2 TTFB, you need to run a TTFB audit and perform a Magento TTFB optimization.

For this, you can run a native Magento profiler.

How to audit/reduce server response time with Magento 2 profiler?

You can enable and set up the profiler in two ways: using a command or with MAGE_PROFILER variable (see the devdocs). Below you can find out what info is contained in different columns of the audit report:

• Timer id – a unique identifier applied in the profiler function call. To identify a Timer id nested level, count the dots on the left;
• Time / Avg – time/an average period of time that the Timer id needs to pass from profiler start call to the stop call (in seconds);
• Cnt – identifies the number of times the block of code was run;
• Emalloc – memory consumed by PHP to execute the block of code (in bytes);
• RealMem – all memory taken by the system to run PHP processes. It includes unused pages as well.

◊ Amasty's Pro Tip: When running the audit, pay special attention to Time and Cnt to identify the Timer id’s with the most time spent and the largest number of code running. Once you’ve defined it, inspect Magento files to understand where these blocks are placed. Also, when looking for most time-consuming Timer id’s, pay attention to those with children, as profile entries are nested and one entry’s time includes all of its children’s. 

What is Magento .htaccess file and how do you optimize it?

In Magento, the .htaccess file is a configuration file used on Apache web servers to control various settings for the specific directory. It is crucial for controlling URL rewriting, access restrictions, and other server-related configurations required for proper functioning of the Magento website. The .htaccess file plays a significant role in defining the rules and permissions for handling web requests and protecting sensitive files from direct access.

Magento speed optimization, .htaccess file method

The first thing you can do to speed up Magento with .htaccess is to get rid of all the unnecessary customizations you added to the file or replace them. After that, proceed to more complex tasks:

• Set up PHP configuration of the domain.
• Enable Magento gZip compression.
• Use expire headers.

PHP configurations

Your Magento performance depends not only on the PHP version but also on the PHP configuration of the domain. In this case, you can preset limits for PHP values, like memory_limit, max_execution_time or switch off the session.auto_start or mods. To do so, use the next patch of code:

<IfModule mod_php5.c>
php_value memory_limit 512M
php_value max_execution_time 18000
php_flag magic_quotes_gpc off
php_flag session.auto_start off
php_flag suhosin.session.cryptua off
php_flag zend.ze1_compatibility_mode Off
</IfModule>

To achieve Magento 2 speed optimization, use this patch:

<IfModule mod_php7.c>
php_value memory_limit 2GB
php_value max_execution_time 18000
php_flag session.auto_start off
php_flag suhosin.session.cryptua off
</IfModule>

gZip compression

Why enable Magento gZip htaccess compression? It allows you to optimize the web pages and stylesheets before sending them to end-users, but you can still easily restore the original data by unzipping the files you compressed. To enable gZip compression, add this code to your Magento gZip .htaccess file:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Leveraging Expire Headers

Using expire headers in Magento helps optimize speed by instructing the client's web browser to cache static resources, such as images, CSS, and JavaScript files, for a specified period. Once cached, these resources do not need to be re-downloaded on subsequent visits, reducing the number of HTTP requests and improving page load times. By leveraging browser caching through expire headers, the server's load is reduced, and users experience faster and more responsive web pages.

To enable expire headers, insert the code below:

<ifModule mod_expires.c>
ExpiresActive On
############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>
</ifModule>

What is Magento HHVM and how does it work?

HipHop Virtual Machine (HHMV) is an open-source virtual machine your developers can install for running PHP5 or Hack. A few years ago, HHMV was even considered to be a contender to replace PHP7, since the former was designed and supported by Facebook to reduce server resources and deliver faster results. Using JIT (Just In Time), HHVM transforms PHP into machine code on the fly.

A word on HHMV vs. PHP7

The first thing you should know is that both PHP7 and HHMV outperform previous PHP versions. Despite the fact that PHP7 is much cooler than all the predecessors, it has room for improvement as well. If you run one of the older than 7th versions of PHP, HHMV is your chance to significantly increase Magento performance. Here you’ll find all the needed guides. Note that Magento 2.2+ does not support HHVM.

◊ Amasty's Pro Tip:  If you're running high-load projects on your Magento 2 (Commerce only), make sure to configure optional database replication and split database performance solution. It gives max improvement to your store performance. Read our blog post on how to improve Magento 2 speed using flat catalog.

How to make your Magento 1 / 2 fly with one mod?

We can talk about the ways for your Magento speed improvement for hours. However, all the necessary steps require wide technical expertise as well as time investments. But don’t worry, we’ve taken care of that when we designed Google Page Speed Optimizer.

• Optimize images automatically. All your JPEG, PNG, GIF files will be compressed without losses in quality.
• Minify HTML, CSS, JS and merge CSS and JS.
• Move JS to footer.
• Sign static files to make your customers see the freshest version of your styles and/or JS.
• Enable lazy load to save resources on loading off-screen images.
• Save and index order data asynchronously.

This solution has everything to help you make your website speed two times faster.

Check detailed settings in the guides:

→ Magento 1 extension user guide

→ For Magento 2 extension user guide

→ Frequently Asked Questions about Google Page Speed Optimizer

What is Magento 2 performance tuning for?

Magento 2 performance tuning is a set of actions necessary for appropriate interaction of the site with search engines. A website that has been properly optimized will rank better in SERP and meet the needs of the users who visit it, reducing bounce rate.

Feel free to check our optimization services that are tailored to solving all your Magento performance issues and achieving the fastest load time possible.

Summing up: performance optimization tips for Magento

Here's what we've discussed in the article and what you can do to accelerate the speed of your Magento:

1. Enable caching and utilize a full-page cache extension.
2. Optimize and compress images to reduce page load time.
3. Minify CSS and JavaScript files to reduce file sizes.
4. Enable flat catalog and indexing to improve database performance.
5. Use a content delivery network (CDN) to deliver static assets faster.
6. Enable Gzip compression to reduce file sizes during transmission. By implementing these optimization techniques, you can improve the performance and speed of your Magento store.

Useful links:

→ Speed tests Magento 1 vs. Magento 2

This post was delivered to you by Amasty's Technical Leader, Mihail Shagoiko.