In recent years, we expect most technologies to be fast and convenient. People don’t have time to wait around for a website to load. However, Magento is a complicated platform built to accommodate thousands of customers at once, which means it’s not light-weight and is challenging to optimize.
This series includes:
- Part 1: Simple tips to Optimize your Magento website from the backend
- Part 2: Take your website performance a step further.
Why do you need Magento 2 Speed Optimization?
Inconvenient for Admin and Customers
But why is a slow Magento website terrible? Well, there are a few reasons to boost. To start, customers don’t like to wait, and when they feel frustrated, it’s difficult for store owners to retain visitors and convert them to customers.
Second, a slow Magento website is slowing down admin activities inside their websites. After any action, the admin has to check if the right information is displayed in the frontend, and with the slow responsiveness of the site, it also hinders store owners, costing them more time configuring their store than focusing on more critical tasks at hand.
Low Google Ranking – Ineffective SEO
And if you think that the experience of users is the only thing affected by Magento speed optimization, then you’re mistaken – Google hates slow websites as well. If your website took longer to load, Google will take notice of that and rank you lower than your competitor, which will severely hurt your SEO. A slowly responding website will just slip lower and lower on Google result page until no customer can find your company online.
When companies try to speed up their website, they often consider the frontend performance. But that’s not all, and we’re going to introduce you 25 tips that will help with your Magento 2 Speed Optimization from a well-rounded perspective.
The article will be divided into two sections. The first part is easy tips for store owners to quickly speed up their website.
These tips are applicable, easy, and they don’t require a developer to execute. They’re a great suit for you if you’re in a small team with a limited budget.
The second part is the more challenging, demanding technical tips. You can either have a team of developers optimizing that for you or find a Magento speed optimization partner to work within optimizing your website. This part is optional for you to read or not.
If you want to take one step further and require more resources, you can choose to have a thorough discussion with us and find the best solution for your website’s speed.
SPEED your site up NOW with Magento 2 Speed Optimization Package before it DAMAGES your business’s sales badly!
Before Speed Up: Assessing your website’s speed.
To know which parts should be optimized to speed up your website, you need to measure your site in terms of speed. It’s no use to optimize your website speed based on subjective experience; we need to know objectively how much your site is slowing down, and what possible reasons have caused it.
We will be listing some tools for you to perform Magento 2 optimize speed testing that you can use to evaluate your site performance.
Google PageSpeed Insight is another tool to inspect a website performance and gives suggestions to make it better. Using Google’s PageSpeed Insight, you’ll see the overall performance score and the color in which determines which score range your site falls into. The color in Google’s PageSpeed Insight divided into three categories:
Red (poor score): 0-49
Orange (average): 50-89
Green (good): 90-100
You can switch between mobile or desktop to see how the site’s performance scores in the two modes, and suggestions made to improve performance in both mobile and desktop versions of the site.
Some points that Google PageSpeed will show in its report are:
The ‘field data’ shows the page’s performance in the last 30 days compared to others in the Chrome User Experience Report. If available, you can also view the origins’ summary and the specific URL that you’re testing. It’s important to note that all points assessed in the field data are generated from actual users in Chrome.
The ‘lab data’, in comparison to the ‘field data’, is taken from the Lighthouse analysis of the page, aggregated from a simulation device and connection. It’s often when your URL doesn’t have enough actual data that you could rely on the lab data to analyze your problems.
Google PageSpeed Insight uses the light coloring system in both data fields to indicate performance: a circle for green scores, a square for orange, and a red triangle.
GTMetrix is a popular website testing analysis tool that will grade the 25 factors of the page performance. You’ll not only know how fast your page loads, but also have some suggestions for Magento 2 speed optimization.
Some solutions that GTMetrix suggests include:
- Avoid bad requests
- Avoid landing page redirects
- Leverage browser caching
- Enable Keep-Alive
- Serve resources from a consistent URL
- Optimize images
- Minimize request size
- Minify HTML
- Minify CSS
Geek Flare checks your page performance, measures some essential metrics, and delivers some suggestions for improvement in the performance audit section.
Sucuri Loader Tester is a free and relatively simple tool for operating and analyzing web pages speed test. It measures the time that your page needs to load in different locations fully and gives the overall grades among the locations.
The tool also shows a progression graph in the course of testing time, focusing on connection time, first-byte time, and total time. You can track your site speed to see how far you’ve improved in terms of website performance.
However, Sucuri doesn’t offer much information and doesn’t point out the performance factors that might delay speed. All and all, Sucuri is a basic speed test that you can rely on for a quick check, but if you are seeking for a solution provider, it wasn’t recommended.
CRACK your site’s MINUTE speed problems with more Magento 2 Page Speed Test Tools!
I. Easy tips for your Magento 2 Speed Optimization
1. Choose the right Magento Hosting.
You are wondering if your hosting is slowing you down? It is a very likely possibility. Your Magento platform is a complicated system and consumes a lot of resources. Hosting in a more reliable and delivering better service would help you in having faster, and translating into sales and revenue would be a more profitable site.
Unfortunately, there is no way of going around getting a better Magento 2 hosting than to pay more, and getting consultants to choose the right hosting provider for your website.
2. Upgrade the Infrastructure for Better Server response
Along with upgrading your Magento 2 hosting, you should consider which hardware and software requirements are needed for a better Magento 2 server response.
In terms of hardware, you don’t have to invest much in the beginning, but CPU, RAM, and SSD availability are still emphasized. With the increasing customer volume as your business grows, you can upgrade your hardware along the way.
We recommended a minimum of 4GB RAM for a worksite with several hundreds of visitors/day, but the Magento 2 Speed Optimization should be done on that site, and the server should be dedicated to Magento 2 only; otherwise, it will still be slow even on a 32GB server.
For the software side, looking for HTTP/2 (Or HTTP/3) supports, Nginx 1.x.x, Redis or Memcached (Redis is preferred) for cached in the backend, MySQL 5.7 (Can use Percona to replace Standard MySQL Server), PHP 7.1.x, Varnish, Elasticsearch,etc. For MySQL 8.0 and PHP 7.3 – 7.4, they will be compatible with the soon-to-be-released version Magento 2.4.0.
Some of the software in the requirements are optional and will be elaborate in sections below, and would also state why your Magento website needed it.
3. Consider using PWA
There are several ways you can implement PWA for your Magento website, but the most common way is to go headless. For more information, headless refers to an eCommerce architecture that decouples the frontend from the backend for more customization flexibility. A headless PWA does not only make sure your store stays fast, but it also gives you more freedom to customize your mobile commerce experience.
If you are not experienced with the PWA technology, it’s recommended to have a professional Magento PWA development team take care of your web page to ensure smooth implementation with no further issues.
4. Update Magento 2 to the latest stable version
Magento often releases new versions every three months, and when the new version arrives, it often focuses on improving the security, fixing bugs, and Magento 2 speed optimization.
If the question of Magento optimize speed ever came across, you should note that upgrading your Magento 2 to a more stable version is critical to have a better performance, and the platform always keeps you in check about the updates by notifying you in the message inbox.
QUICK ACCESS to Magento FREE download all in one place and TRANSFORM your website!
5. Updating the Indexers when necessary.
Magento allows you to work with bulk data and from there, reducing the load time. But it needs to reindex the indexers. The core system updates indexers by default on every object stored, and normally, you don’t need to tamper with the process, as it will degrade your website if you do so. But the process isn’t perfect, and there are times when it requires manual updating the indexers.
While Magento 1 offers to reindex from the admin panel, Magento 2 doesn’t, and therefore if you wish to index Magento indexer manually, you need to execute the following CLI command on the root directory using the SSH terminal:
php bin/magento indexer:reindex
However, this way is not time effective as you have to constantly switch between the backend and the root directory to execute the command. A better suggestion would be to use Magento 2 Reindex from Backend, which lets you reindex Magento data in the backend with ONE click!
Note that you only use the reindex when feels that your website really needed it. Normally, we recommend stick with the automatically reindexing by default.
6. Turn on Varnish Cache Tool
The Varnish Cache Tool is a tool that works as an additional layer between the web server and the ecommerce user. The tool cached the frequently requested files on to RAM instead of SSD, which gives the priority of the frequently accessed pages above other pages.
RAM is faster than SSD and can return cached files in less than a second, which means users can almost instantly visit the pages.
Varnish tool is more flexible than FPC (Full Page Cache), and even Magento recommended it, but it was mentioned to use in the Production environment.
If you misconfigure Magento 2 Varnish cache, it will slow you down instead of increasing the website’s speed. And when using Varnish, minded that you’re compromising the pace with the stability because Varnish can sometimes make the page unstable.
To configure Varnish in the back end, you have to make sure that your hosting provider supports Varnish. Go to Store > Configuration > Advanced > System > Full Page Cache.
7. Disabling Flat Catalogs
Switching to a flat catalog has been the most beneficial method for Magento 2 speed optimization for years.
With Magento 1.x.x and Magento 2.2.x versions, Flat Catalogs works well. It gathered the applicable product attributes within your database and merged them into a more light-weight table based on the Entity-Attribute-Value (EAV) model. Flat catalogs are considered to lead fewer queries per action, by consolidating data and keeping it together.
But flat catalogs no longer work in newer versions of Magento. Magento 2.3.0 recommends disabling the function.
If you continue using flat catalogs, then you would risk performance degradation and indexing issues.
One point you should note that the extensions only work with flat tables might be at risk if you disable the feature.
To disable Flat Catalogs on your Magento 2 platform, go to store> Configuration > Catalog.
Expand the Storefront section, then set No to both the Use Flat Category and the Use Flat Catalog Product fields.
8. Using ElasticSearch
ElasticSearch is a faster and more trusting tool than the Magento default searching option. It includes multi-language, advanced search and indexing capabilities, and other features outside of searching. With the faster and more efficient tool, your Magento website would be more optimized in performance.
You can learn how to configure Nginx or Apache and how you can install Elasticsearch in Magento Devdocs Guides.
After installed Elasticsearch, you can check out how to configure them in this post:
DON’T WASTE simple steps configuring Magento 2 Elasticsearch to GAIN POWERFUL searching tools!
9. Use Gzip Compression
Gzip is a handy component to have for your website’s Magento 2 speed optimization. It compressed all pages that you request from the server into much lighter gzip archives. So, for instance, a 64KB will be sending in your browser as a 10KB gzip file. However, compression does take up your CPU time, which means you will be compromised between data saving and fetch time.
The way you can have your Gzip Compression for your website is very simple: Ask your hosting provider to have it turn on.
10. CDN to optimize your Magento 2 Content and Media
Your Magento theme makes the website load longer, even for users with a good internet connection. The not optimized themes also take up a lot of bandwidth, which affects other website elements loading and costs you more if you’re paying for a metered hosting data plan.
Then how can you avoid bad themes and large-size media that’s going to slow your site down?
There are two ways that you can go about it. The first, and most apparent, is making your media files lighter – by optimizing image sizes.
- Upload image size shouldn’t exceed the required format for a specific field. For example, you shouldn’t use the image size 700 x 700 when you’re trying to show an icon with 250 x 250. Preparing your image beforehand can reduce the loads that your site has to carry significantly.
- Minimizing the large image files by using minification tools. Tiny JPG is among the many tools that can help you create optimized but still fine-tuned images.
- Using CDN to help speed up delivery content.
- GET more tips to optimize images in Magento 2
CDN is short for Content Delivery Network, which is a global server system. It speeds up your content delivery by caching your file on remote servers, and users will get loads from the server that’s nearest to them. It would benefit your website in Magento optimize speed, with a broad and diverse audience worldwide.
For beginners, we recommend you use Cloudflare, as it’s quite user-friendly and easy to install:
- First, you should register an account, then add your domain name to Cloudflare.
- Then change the domain name to the one Cloudflare provided for you.
- Pointing Cloudflare to your server’s IP
- Order the module from Marketplace, and then set up Cloudflare Module for Magento 2
READ HERE for detailed instruction on Cloudflare CDN Magento 2 to SPEED UP your content!
11. Optimize CSS for faster loading time
I have already covered how to deal with large media and graphic files, but there are also some tricks that you can do to perform Magento 2 speed optimization on others. This could be performed in the Magento Admin panel, but only when you switch to Developer Mode. Start SSH and write the followings:
php bin/magento deploy:mode:set developer
Go to Magento 2 backend, and follow this path: Stores > Configuration > Advanced > Developer. Find the CSS developer setting, then set both Merge and Minify CSS Files to Yes.
This will optimize the CSS code, and maintain a limited number of connections with the server, hence will make the website download faster.
Magento tries to combine all JS files into a big bundle to improve the loading procedure. However, JS bundling prevents page load until all JS bundles have been downloaded.
Imagine customers’ painful experience when they have to wait for a 10+ MB JS bundle to download in addition to whatever media your page has.
To optimize the Magento JS setting, you should turn your Magento to Developer Mode, as with the CSS setting. Go to Stores > Configuration > Advanced > Developer > JS Settings.
13. HTML minification
The minified HTML, CSS, and JS would take less space on your server, making your site loads faster. Minimizing the HTML will cut off the developer comments, tidy up codes, and reduce clutters.
The same as CSS and JS, HTML minification only appears in Developer Mode.
Find Stores > Configuration > Advanced > Developer > Template Settings.
Set the value to Yes.
After you were done with the configuration for tips 10,11 and 12, change back to Production Mode.
Read more: [Case Study] Café Du Cycliste – A Complete Optimization In Speed
Above are the first 12 tips for your Magento 2 Speed Optimization, these are easy tips, and can mostly be performed without the help of a developer. In the next part, we will be presenting 13 tips, in which some of them are a bit more challenging and require technical support to optimize, but the results would be worth the efforts. STAY TUNED for more!
Come to BSS Commerce, we offer a well-rounded performance check and speed-up consultations, and our Magento solution specialists & senior developers will get rid of any hidden issues your site has with speed optimization. We also got you covered with any other service, from web development, and maintenance to migration, data entry, etc.
>> SEE our full services listing to find out your solution!
CONTACT NOW to explore our services and boost your business to the next height!
Charlie is an experienced Magento Tester and has started at BSSCommerce for some time. He loves writing about Magento products, e-commerce topics, and is a fan of all technical problems Magento related. If you have a question, he's happy to help.