How to Optimize Magento 2 Speed and Performance Tuning [Beginner's Guide]

optimize-your-magento-1-and-2-speed
Posted in: Magento 2 Guides

Many leading marketing and SEO specialists say that speed is a killer for your website. 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, and (c) get what they want just when clicking. If your page loads more than 3 seconds –53 out of 100 visitors will irretrievably leave your page. Leaving your pages fast they provide input to the growth of the bounce rate. 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 the thing seems a long-standing problem to you, read on. In this post we’ll speak about Magento 2 speed optimization steps such as cache activating, Magento HHVM, speed increase using .htaccess, merging and minifying of CSS and JS files, increasing Magento TTFB and more.

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

How to optimize Magento 2 website?

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

Images shrinking

Too weighty images can blow the whole work. Say, you’ve run the test in PageSpeed Insights, then see not only the average score but also the detailed report given below.

Here you’ll see the list of 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 save on the website loading speed. It’s worth pointing out that you may also compress the images in the new format to be 100-percent sure they won’t call a speed reduction.

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 to find a solution that will 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. Thus, your Magento will load images only in case a user scrolls to them. Otherwise, it will leave the untapped elements “untouched”. On our side, we applied one of the elements, you can see it on the main page. Our lightweight image of “ten” becomes clear at the page load. To find more about the lazy load, read this official developers page.

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 enhance an average Magento 2 page load 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 after that 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:

If you want to take a complex approach to the task, 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 activating

This is one of the simplest and fastest ways of breaking your website free from deadlock. We have many useful articles on the topic. Thus, you can find out everything about caching in Magento 1, leverage browser caching in Magento 2, and delve deeper into Magento 2 Cache Backend and 4 caching solutions for the purpose: (1) file system, (2) database, (3) Redis, and (4) Varnish, as well as the pros and cons for each of them.

Also, if running 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

What you have to know about the protocol is that the web becomes faster and the new HHTP/2 type is forged specially for these reasons and mobile traffic, of course. 3-sec fast page speed load is a current “golden rule”, as many specialists say. In this, user experience is one of the algorithms Google sees as the prime. Therefore, if the new HTTP/2 technology enhances site loading speed and performance, you definitely can expect that Google will encourage your Magento as its follower. One of the ways to speed up your website is to make fewer HTTP requests and the Magento store will start working faster.

Another reason for thinking about it is that in 2018 Google already started penalizing the “slow-mo” mobile websites when had rolled out their speed update, so, what’s next? (Some SEO specialists said a high hurray here!?)

How can HHTP/2 improve your Magento organic traffic?

Despite the predecessors, HTTP/2 can use a single TCP (Transmission Control Protocol) connection to asynchronously send numerous requests for data to your server. Thus, 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 HHTP/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 on your mouth):

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?

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

  • reduce time to the first byte
  • optimize the .htaccess file
  • use HipHop Virtual Machine.

Let’s consider all these speed optimization options and help your slow Magento 2 have better performance.

What is Magento TTFB and how does it work?

Magento time to first byte (TTFB) shows you how much time your Magento 2 needs to generate page HTML, and it is one of the main metrics of your website performance. This metric affects your position on SERP. To analyze the most time-consuming process and reduce your Magento 2 TTFB, you need to make a TTFB audit and perform a Magento TTFB optimization. For this, you can run a native Magento profiler.

Time to the first byte magento 2

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

You can enable and set up the profiler in two ways: either using a command or with MAGE_PROFILER variable, see the devdocs to make it right. Below you can find out what info contains 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 – one or an average period of time in seconds that the same Timer id takes to pass from profiler start call to the stop call;
  • Cnt – identifies the number of times the block of code was run;
  • Emalloc – a memory consumed by PHP to execute the block of code, measured in bytes;
  • RealMem – all memory taken by the system to run PHP processes. It includes unused pages as well.

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. Thus, often you have to make it down to the first level to understand where the skeletons are buried. After, analyze them to see whether you’ve missed some unoptimized patterns or not. Say, you see that a template is run 4 seconds 2 times, that’s the food for thought.

What is Magento .htaccess file and how does it work?

Using the .htaccess file your admin users can change the main configurations defined in the httpd.conf/apache.conf. Thus, they can restrict access to directories by password, enable 301 redirects and rewrites, prevent hotlinking and more. However, the dark side is that the usage of the .htaccess files can slow down your Apache server. Therefore, specialists recommend not to add too much custom information.

How to optimize Magento speed with .htaccess?

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 complicated tasks:

  • set up PHP configuration of the domain
  • enable Magento Gzip compression
  • and 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>

When speaking about 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 do you need in Magento to enable gzip compression? The HTTPS protocol allows you to gZip data you send. It lets you optimize the web pages and stylesheets before sending them to end-users. However, in so doing, you can 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>

Expire headers

By using the headers you tell browsers either to ask the file from the server or take it from the cache. To enable the headers, insert the next code:

<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. Though a few years ago there was hype – PHP7 vs. HHMV, the latest is designed then supported by Facebook and is already in demand due to its better showings in comparison with PHP5. The machine was created to reduce server resources and deliver faster results. Thus, using JIT (Just In Time) it transforms PHP into machine code on the fly.

A word on HHMV vs. PHP7

HHMV pros:
      • JIT compiler;
      • Constant updates from Facebook;
      • Dynamic translation;
      • Hack for dynamic and static typing;
      • Requests execution with less memory space.

 

 

HHMV cons:
      • Convert custom extensions before adding them;
      • No support for all WP themes and modules;
      • Not supported by not high-end machines;
      • No support for Magento 2.2+;
      • Needs more memory than 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.

See the latest benchmarks by Kinsta to check one more time, maybe HHMV is already a thing of the past. However, if you run one of the older than 7th versions of PHP, HHMV is your chance to increase Magento performance. Here you’ll find all the needed guides. Note that Magento 2.2+ does not support HHVM.

And that’s not all. If running high-load projects on your Magento 2 (Commerce only), pay attention to configure optional database replication and split database performance solution. It gives max improvement to your store performance. Also, 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 for hours about the ways for your Magento speed improvement, however, all the steps require wide technical expertise, as well as major time and money investments. But don’t worry, we’ve taken care of that and designed Google Page Speed Optimizer.

What does it offer?
  • 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.
  • Use 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

→ How optimizer addresses Google warnings

→ 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. As a result, a site that has been optimized will rank better in SERPs and meet the needs of the users who visit it.

Please, check our optimization service that is perfect to solve all your performance problems.

Useful links:

→ Speed tests Magento 1 vs. Magento 2

This post was delivered with the support of Amasty Technical Leader, Mihail Shagoiko.

April 21, 2020
April 23, 2020
April 16, 2020
Comments
amine Dahimene
December 29, 2020
I think there is a code missing because you said "To enable the headers, insert the next code:" but there is no code after that paragraph? can you please let me know if there is any code missing. Thank you
Reply
Polina Kratovich
January 22, 2021
Hello there! Thanks for your careful reading. Here is the code you were looking for: <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>
Mark Richard
May 24, 2022
How to Optimize Your Magento 1 & Magento 2 Speed 1. Defragment your server 2. Install a CDN 3. Use the right hosting provider 4. Use Redis Caching 5. Optimize your images 6. Utilize browser caching 7. Speed up JavaScript and CSS rendering 8. Upgrade your Magento version 9. Use a web server with PHP 7+ and HHVM 10. Remove unused modules
Reply
Leave your comment

Your email address will not be published

This blog was created with Amasty Blog Pro

This blog was created with Amasty Blog Pro

© 2009-2022 Amasty. All Rights Reserved.