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 speed up Magento 2 website?
- How to optimize Magento 2?
- What is Magento TTFB and how does it work?
- What is Magento .htaccess file and how does it work?
- What is Magento HHVM and how does it work?
- How to make your Magento 1 / 2 fly with one mod?
- Useful links:
How to speed up 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
- Lazy loading
- Magento cache activating
- HTTP/2 speed-up.
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.
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.
- downloading each script separately
- 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;
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.
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.
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.
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:
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?
Time to the 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. 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: 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 Gzip compression
- and expire headers.
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:
When speaking about Magento 2 speed optimization, use this patch:
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 un-zipping the files you compressed. To enable gZip compression, add this code to your .htaccess file:
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:
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
- JIT compiler;
- Constant updates from Facebook;
- Dynamic translation;
- Hack for dynamic and static typing;
- Requests execution with less memory space.
- 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.
This solution deals with all Google PageSpeed Insights speed indicators!
- 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:
This post was delivered with the support of Amasty Technical Leader, Mihail Shagoiko.