What Are the Best Ways to Speed up Magento 2?

Websites today have so many features that performance is always a concern. As a Magento store owner, you’ve likely encountered complaints about pages not loading or taking too long to load. Users don’t like slow sites, so your goal should always be to look for ways to speed up Magento 2 across a variety of conditions and devices.

Poor performance has various causes. The best course of action when your website is slow is to identify the bottlenecks and solve any existing technical issues. They may seem insignificant, but small delays can snowball, causing major problems for you and your customers — including frustration, lost revenue, and an awful brand image.

Why is having a fast site so important? [with examples]

Performance lags lead to site abandonment, high bounce rates, low conversion rates, and poor customer retention. Slow load times also slow the Google crawler, which hurts crawl efficiency and leads to fewer pages being indexed.

Here are five case studies (from companies you’ve heard of) that will show the importance of fast-loading sites home:

Akamai’s impressive conversion rate study

A case study by Akamai, which focused on monitoring mobile performance, found that “Pages that loaded in 2.4 seconds on average enjoyed the peak mobile conversion rate (1.9%) during this 30-day span [of data].” 

The case study also found that:

• At 3.3 seconds, conversion rate was 1.5%
• At 4.2 seconds, conversion rate was less than 1%
• At 5.7+ seconds, conversion rate was 0.6%

Pinterest shows improvements across the board

Pinterest increased their search engine traffic and sign-ups by 15% after rebuilding their pages for performance. “The result of rebuilding our pages for performance led to a 40 percent decrease in Pinner wait time, a 15 percent increase in SEO traffic and a 15 percent increase in conversion rate to signup. Because the traffic and conversion rate increases are multiplicative, this was a huge win for us in terms of web and app signups.”

COOK increases conversions and engagement

COOK increased conversions by 7%, decreased bounce rates by 7%, and increased pages per session by 10% when they reduced average page load time by 850 milliseconds. “After improving average load time by less than a second, COOK achieved a 7% increase in conversion rate, a 7% fall in bounce rate and a 10% increase in engagement.”

BBC retains more users with every second shaved off load time

The BBC found they lost 10% of users for every additional second their site took to load. “At the BBC we’ve noticed that, for every additional second a page takes to load, 10 percent of users leave. This is why, if the BBC site is slowing down due to load, certain features will automatically switch off to bring the speed up again. These will be low-importance things – such as a promo box at the bottom of a page – that are expensive on the server and few users will miss.”

Netflix wrangles its JavaScript for faster navigation and response times

Just last year, Netflix decided to overhaul their site by refining the JavaScript used for Netflix.com’s sign-up process. “Using prefetching techniques, the development team was able to provide a better user experience for both mobile and desktop users and offer several improvements.”

• Loading and Time-to-Interactive decreased by 50% (for the logged-out desktop homepage at Netflix.com).
• JavaScript bundle size was reduced by 200kB by switching from React and other client-side libraries to vanilla JavaScript. React was still used server-side.
• Prefetching HTML, CSS, and JavaScript (React) reduced Time-to-Interactive by 30% for future navigation

Google defines time-to-interactive as the time it takes a page to become interactive — meaning the page displays useful content, event handlers are registered for most visible page elements, and the page responds to user interactions within 50 milliseconds.

There are no one-size-fits-all performance tweaks. A lot depends on your case. The bottom line is — performance is about retaining users and allowing those users to interact with your online store which, at the end of the day, you measure in sales and revenue.

We’ve established the negative effects of slow, unresponsive websites, so how do we know what to optimize to improve Magento performance?

Every second counts: How to know for sure if your Magento website is slow

We’ve heard so many myths about web speed, the most common is probably, “My website loads fast for me, so it should load fast for everybody.” It can be difficult to explain the reasons why this assumption is incorrect. Speed is affected by the location of the server and which browser/device is being used, among other factors. We find it’s easier to show clients reports based on the two tools Google offers free of charge: Google’s PageSpeed Insights and Test My Site. We recommend these and not some random “Magento speed test online” because Google is the highest authority on site speed.

Please note that with any Magento performance testing you do to test your site is not meant to be one-size-fits-all. Google tools perform a broad-spectrum page analysis and deliver both raw results and improvement suggestions. One of the main indicators of a site’s speed is how you rate against the competition. If your site is easier to navigate, you’re already winning.

PageSpeed Insights

PageSpeed Insights (or PSI for short) measures the performance of a page on both mobile and desktop devices. All you have to do is enter your website in the box and you will have a full report in seconds. The report includes suggestions and opportunities for how the page can be improved.

At the top of the report, PSI provides a score which summarizes the page’s performance. This score is determined by running Lighthouse, a tool that collects and analyzes lab data about the page. A score of 90 or above is considered fast, and 50 to 90 is considered average. Below 50 is considered to be slow.

Here’s what it looks like for mobile:

You can switch to desktop to view your desktop web performance score. Desktop performance is generally higher, but that doesn’t mean you should ignore mobile:

If you scroll down, you will see a full breakdown of the Google metrics. For more information on what each metric means, you can use this PSI guide or click on the breakdown indicated by the red oval in this screenshot:

Google provides “Opportunities” —  in other words, optimizations that can speed up your page load time. Diagnostics are also shown and these can be used to tweak the page to squeeze out even more speed.

Google isn’t all about the bad news, they also highlight your successes in passed audits.

TestMySite

This is another Google tool, and you may wonder why Google would need two different tools for metrics, but TestMySite is more than just metrics on how to increase Magento 2 site speed. It shows you how you compare against competitors, has a calculator that evaluates the impact a faster site can have on your business, offers performance recommendations, and allows you to generate a PDF report with all this information.

Feedback

Often, the first indication that something is slow will be from your customers and visitors. It’s wrong to assume that because one person’s internet connection is slow, the page will be slow to load for everyone. We know that one complaint isn’t enough to warrant a full investigation, but you should keep track of complaints to see if there’s a trend. Customers matter, and the way they experience your brand should be a top priority.

Check out Google’s “How To Think About Speed Tools” guide for myths about web speed, tips on how to apply speed metrics in the real world, and recommendations for which speed tool to use (depending on your needs).

FYI: If you’re used to using Optimizely, you should know that the Optimizely Magento extension is no longer supported.

6 easy steps you can take to speed up Magento 2

Let’s get back to Magento. This guide is meant for Magento 2 users, but we know there are still many people that have stores with Magento 1. The end for Magento 1 support is less than a year away — it’s slated for June 2020. If you’re reading this and you’re still on Magento 1, let us show you what you’re missing and how you can improve Magento site performance.

 

Step 1 — Upgrade to Magento 2 if you’re still running Magento 1

Magento 2 was released in November 2015, and since then has been adopted by merchants ranging from startups to established corporations.

There are some challenges with Magento 2 migration. But the performance benefits are hard to pass up. Magento published a white paper titled “Site Performance and Scalability Optimizations” — it includes detailed explanations on software architecture differences, caching, and other optimizations. In the white paper, the Magento team looked at small and large merchant scenarios.

Magento migration case study — Magento 2 vs Magento 1 performance

The following information is from a Magento white paper on improving performance and scalability. Magento 2.0 outperformed its older counterpart across all use cases.

• Magento 2 processes 39% more orders per hour, reaching up to 2,558 orders per hour
• It delivers nearly instant response times for catalog pages
• It enables up to 66% faster add-to-cart server response times that are under 500 milliseconds
• It provides 51% faster guest checkout response times and 36% faster customer checkout response times for all checkout steps combined

How to improve Magento site speed: Update to the latest version

Keep in mind, Magento 2.0 isn’t the newest version. The latest and most optimized version is 2.3.2 — which is even faster than 2.0. Below are just some of the improvements.

• Magento 2.3.2 has a feature that loads scripts last 
  • All non-critical JavaScript code is relocated to the bottom of storefront pages, which speeds up page rendering and allows users to see the complete page sooner while nonessential elements remain inactive.
  • To enable this performance enhancement, you must navigate to Stores > Configuration > Developer > JavaScript Settings and enable the Move JS code to the bottom of the page option.
• 2.3.2 has a better image slider allowing images to load faster.
  • Product images are loaded as quickly as other page content. In previous releases, although the product page loaded quickly, product images needed two to four additional seconds to load completely.
• 2.3.2 offers significant improvement to storefront page response time.
  • The page response times for the catalog, search, and advanced search pages have been significantly improved under high load.

If you’re already running the latest version, let’s look at Magento 2 performance tuning and optimization tips to make your site even faster. If you’re worried about breaking something, leave it to your IT or development team to handle the more technical stuff.

 

Step 2 — Make sure you’re following the Magento Performance Best Practices

Magento 2 documentation has a special section titled Performance Best Practices. This is an invaluable resource for improving page speed.  It includes Magento performance tips, hardware/software recommendations as well as best practices for configuring your store. A lot is covered in this guide, so we will give you some of the highlights and easy fixes you can implement today, all handpicked by our development team.

Caches

Magento recommends turning on all the caches from the System > Tools > Cache Management page. They also highly recommend using Varnish in particular. Varnish Cache is an open source web application accelerator that allows you to reduce the server response time and bandwidth consumption. We will talk about other caching solutions in Step 4.

Asynchronous email notifications

By enabling this setting, checkout and order processing email notifications are handled as background processes. To enable this feature, go to Stores > Settings > Configuration > Sales > Sales Emails > General Settings > Asynchronous Sending.

Client side optimization settings

If you don’t have these settings enabled, make sure you change this ASAP. Go to the Admin in Default or Developer mode — Stores > Configuration > Advanced > Developer — and change the following settings to improve site responsiveness:

Additional tips from Magento:

Magento considers JavaScript (JS) Bundling a vital tool for speeding up Magento. Merging JS resources results in faster page performance, fewer server requests, and helps the browser cache files. However, as the Magento documentation notes, “this setting is not recommended for stores where the first page load time is extremely critical, because all JS content will be loaded on the first call.”

Magento also offers these tips:

• Use third-party tools like Magento speed optimization extensions for minification and bundling (like r.js). Magento built-in mechanisms are not optimal and are shipped as fallback alternatives.
• Activating the HTTP2 protocol can be a good alternative to using JS bundling. The protocol provides pretty much the same benefits.
• Magento does not recommend using deprecated settings like merging JS and CSS files, as they were designed only for synchronously-loaded JS in the HEAD section of the page. Using this technique can cause bundling and require JS logic to work incorrectly.

 

Step 3 — Choose the right hosting provider and plan

There are things you can skimp on, but hosting isn’t one of them. There’s no way you can have a fast site with a cheap hosting provider. Make sure you choose a hosting plan with solid-state (SSD) hard drives and at least 2GB of RAM. The exact requirements will vary depending on your store. And if you’re choosing shared hosting or virtual private hosting, server location should be taken into account.

There are four main types of web hosting options:

1) Shared Server Hosting – A beginner’s best friend

Shared hosting is when your website is located on a server that hosts other websites as well. This is perfect for people just starting out. Examples include Nexcess, Lexiconn, and ZeroLag.

2) Virtual Private Server (VPS) Hosting – Shared hosting on steroids

VPS is similar to shared hosting because all sites are hosted on one physical server. However, VPS hosting providers can house multiple virtual machines. Examples of VPS hosting: Amazon Lightsail, Microsoft Azure, and IBM VPS.

3) Dedicated Server Hosting – Enterprise-level hosting

Dedicated hosting is when you have a server all to yourself. The biggest advantage is that you have full control of everything. However, this type of hosting is very expensive, and if you go cheap, you’ll run into more problems than you were trying to solve.

4) Cloud Server Hosting – Web hosting of the future

Cloud hosting is akin to VPS, except websites are hosted on a network of computers. You don’t have to worry about server location or ping. This is the best option if you’re looking to scale fast because you can simply subscribe to a different plan and instantly get more resources, and subsequently, more speed. If you want quick Magento speed optimization, look into the following cloud hosting providers: Amazon Web Services and DigitalOcean.

 

Step 4 — Increase “cache” flow

You’ve heard the word before. Cache is a way to pre-load web pages or parts of a web page for faster content delivery and faster loading. Essentially, when you open a web page, the server has to figure out how the page should look. Cache pre-loads elements like text and images so that the server doesn’t have to go through the calculations again. Since there are fewer server requests, you get faster load times.

Your caching strategy should be aligned with your store. For example, if your related products block has dozens of attributes per product (which the database has to sift through), that block will load slowly.

Magento and Elogic recommend using Varnish and Redis in tandem. They are caching solutions that perform similar tasks. They cache parts of your website (what the users see) and the backend (what the developers see).

Varnish full page caching

Varnish is an open source caching solution that acts as a web accelerator. It works by storing parts of a page (files, page elements) in its memory to reduce response time and save bandwidth. Once you load the page the first time, the next time you load it will be much faster. Varnish was designed specifically for website acceleration.

Redis session storage caching

Redis is another open source solution used for caching sessions in Magento. It supports different types of data structures and can cache full pages as well as user sessions.

 

Step 5 — Look into CDNs

CDN stands for Content Delivery Network. CDNs are great because they have geographically distributed servers worldwide. No matter where your customers are, they will have a similar experience. This type of architecture allows CDNs to deliver content like images, media, and CSS/JS files, lightning fast. You can think of it as a distributed Magento image optimizer and overall site optimizer in one. The majority of web traffic today is delivered through CDNs. If you get your site theme and media delivered from the server faster, your site will load faster.

Magento comes pre-configured to support CDNs. Unfortunately you have to do it manually by following the Magento CDN Setup. This means that no matter which CDN you decide to use, be it Akamai, Cloudflare, Amazon Cloudfront, or any other CDN, you’ll have to get your hands dirty.

Just to reiterate, these optimizations might not shave seconds off load times. Depending on your site (extensions, themes, modules, content), the time saved could be measured in milliseconds. This may seem insignificant until you plug the numbers into the TestMySite Impact Calculator mentioned earlier. A millisecond is money, and slow load speed costs.

 

Step 6 — Get a site audit to identify bottlenecks

A Magento development agency, or your own IT team, are the best candidates for a site audit. There are so many things that could be causing bottlenecks, like the number of server requests, page weight, lazy page elements, lazy image loading, third party extensions, and poorly written or unoptimized code. An audit identifies issues and any technical debt, solves those issues, and then shows the performance after modifications.

What are the most common bottlenecks and how do we solve them to increase Magento website speed?

Disable core modules you don’t use

The first suggestion is disabling unused core modules. These include:

• Extra languages
• Offline shipment and payments
• Backup, Captcha, Persistent, RSS
• MSRP, Send Friend, Weee
• Multishipping, Checkout agreements
• Product types
• And others, depending on your store

Disable unnecessary features

Remove unneeded features like reports from observers, plugins, and layout elements. Event reports are generated for all sorts of user actions like adding products to cart, viewing certain products, etc.

You can speed up Magento 2 simply by disabling these reports (if you have no need for them).

Check third party extensions and modules

The demands on Magento merchants are real. Users want more functionality, and sometimes it feels like a catch-up game. Third party extensions and modules do wonders for workflows and quickly processing and automating certain procedures. However, they can be crushing your site’s performance because of how they have been implemented.

The best way to move forward is to assess which modules are causing bottlenecks, test Magento speed, and come up with a strategy to optimize them or replace them with a faster option.

Code optimization and database audit

Magento 2 is a highly-optimized platform that serves as the core of your store. Everything else you add on later, like your design, menus, features, plugins, etc, may not be in line with your speed goals. An audit of the code and database is a must. Maybe there are Magento MySQL optimization tweaks that can significantly speed up Magento databases. Or, maybe the search function on your site is ineffective; we can replace it with Elasticsearch or Algolia search. It all depends on your goals.

Google performance guidelines

For most of our clients, we do an assessment and go through a checklist to narrow it down to the main culprits. As a set of guidelines, we follow the Google recommendations for how to optimize images in Magento and use Google’s performance guidelines — Google’s guide to image optimization and Google recommendations for performance — to make sure that we leave no stone unturned.

Here’s an example of how we managed to increase performance with a few simple steps:

Our client, Bauwerk Colour, requested an audit. After we assessed the issues, we decided to switch the hosting to Amazon Web Services. We also did some frontend tweaks.

This is the result:

Before

After

Bonus: Magento performance optimization tips for mobile pages

It doesn’t make sense to have an ecommerce store without the ability to buy items online. This fact, combined with the advent of mobile shopping — and the fact that smartphones’ share of US online retail sales, excluding apps, climbed to 31.8% in Q3 2018 — means having an online presence isn’t a suggestion, it’s the only way to do it. Since people who visit your site expect that they can do everything from their smartphone, they also expect a smooth user experience.

To improve Magento site speed for mobile pages, you need to:

1. Reduce the overall size of your page — image compression, minification.
2. Cache properly — with caching solutions and a CDN so users worldwide get the same experience.
3. Reduce server requests — the fewer API calls and HTTP requests, the better.
4. Avoid redirects — if your store is loaded with redirects (when browsing to a website, a redirect triggers the user’s browser to load a different page), you’re losing precious time for loading pages.
5. Prioritize content — decide which content loads first and which content starts loading as a user scrolls, and you will have less issues with lazy loading.
6. Test your mobile site — make sure to test your store on different devices. Some mobile operating systems and browsers process websites differently.

Takeaways: How to speed up Magento 2

Don’t be discouraged if your site scores low on PageSpeed or any other speed test. The score you see isn’t a direct indicator of performance, but it can give you a more objective view of what needs to be optimized. You also need to consider your performance budget. If you aim too low, you’ll lose revenue, so deciding what to fix is a matter of setting priorities.

Because your top priority is your customer (and potential customer) the overall user experience has to be top notch. A lot of the things we’ve mentioned require help from professionals skilled in Magento performance optimization that have seen and done it. Professionals know how to optimize Magento 2 to solve problems like bottlenecks, lag, and resources that are limiting site speed.

If you are interested in a full comparison of the top hosting and CDN providers, let us know by leaving a comment below!