05 August 2019
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.
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:
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:
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 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.”
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.”
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?
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 (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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
|Grid Settings||Asynchronous indexing||Enable|
|CSS Settings||Minify CSS Files||Yes|
|Template Settings||Minify HTML||Yes|
Magento also offers these tips:
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.
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 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 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.
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.
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?
The first suggestion is disabling unused core modules. These include:
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).
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.
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.
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:
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:
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!