author img

Michał Kloczkowski

HOW TO SPEED UP A MAGENTO 2-BASED ONLINE STORE WITH MINIMAL DEVELOPER INVOLVEMENT?

Here are 6 universal tips to speed up your Magento 2-based online store, or any other popular e-commerce platform, with little to no involvement from developers.

Introduction

Since the implementation of the Web Vitals algorithm as a ranking factor and the increasing importance of mobile traffic, online store owners have been paying more attention to optimizing their websites for performance and loading speed. Even with great products and user experience, impatient customers may leave your site if it takes too long to load.

Unfortunately, performance optimization of a technology can often be a time-consuming process that may yield disappointing results. It could be due to the complexity of the system or unclear interpretations of performance audits (e.g., popular tools like Lighthouse). However, there are certain actions and standards that can help you improve results at a reasonable cost. Let's explore them below.

#1 Review tracking scripts and GTM container

Google Tag Manager (GTM) is a fantastic tool that allows efficient implementation of various scripts on websites and online stores. These scripts usually track user interactions and measure conversions for advertising platforms like Google Ads, Facebook/Meta Ads, or marketing automation tools.

While GTM gives marketers more control, the development team may lose control over site elements. Often, GTM users lack technical knowledge, resulting in inefficient script implementations on the website. How to check this?

Conduct an audit using Lighthouse and check if "unused JavaScript" is one of the significant factors slowing down your website. Review the problematic scripts and domains, then verify if some of them come from GTM and can be removed. The usual candidates for removal are:

  • old analytics tools that are no longer in use,

  • temporary tools like HotJar, used to collect user behavior data for a specific period,

  • analytic events/goals that no one is actually analyzing.

However, it's essential to keep analytics on the site for optimization purposes. For external domain scripts that are necessary, you can speed them up using a simple "preconnect" technique in the code. Your developers can add a "preconnect" tag in the code, pointing to domains where the preconnection should occur, reducing the waiting time for loading the appropriate script.

Example:

<link rel="preconnect" href="https://www.googletagmanager.com">

#2 Check your hosting servers

The server's hardware also affects how quickly your website loads, not just the code itself. Magento 2, in particular, has certain requirements regarding server power. Even the best-optimized Magento code won't perform well if the server lacks power. Adding some hardware resources can often be a cost-effective optimization method. But how do you verify if it works for you?

Check when your server was purchased. Technology advances rapidly, so consider what modern hardware can offer compared to a server purchased several years ago. Fast disks are crucial; ensure you're using SSD NVMe disks and, if your server is still on HDD disks, consider upgrading.

Request a server analysis, particularly during periods of high traffic or promotions. Make sure CPU and RAM resources were sufficient during these times. RAM can be easily upgraded, but SWAP memory may be less desirable. These upgrades can boost performance without requiring a full application reinstallation.

Also, consider the location of your data center. If your store operates within one country, it's best to have the server located there. However, for international stores, server response times can significantly vary depending on the data center's distance from your customers.

#3 Verify your Magento 2 cache system

Cache is a mechanism that stores frequently used data in memory to maximize access time. In e-commerce, cache is essential for significantly speeding up your online store's performance and reducing server load, which improves customer service quality and boosts conversion rates. Cache usage can also minimize hosting costs and reduce the risk of server failures due to excessive loads.

Magento 2, like other systems, comes with built-in caching systems. In Magento, you can natively use its default cache or Varnish. If you're not already using Varnish, installing and configuring it on the server should be enough.

Be cautious, as some custom code elements may be incompatible with Varnish and cause issues or even make the entire site inaccessible. While implementing Varnish should be straightforward, thorough testing is essential.

#4 Benefit from Cloudflare

For caching, you can use additional "layers." Cloudflare offers one of the most effective solutions in this regard. Cloudflare's Content Delivery Network (CDN) is a distributed network of servers that efficiently store and serve content.
With Cloudflare's Pro plan (around $20 per month), you gain access to its global network of servers, which brings various benefits:

  • Offload your server: Properly configured cache in Cloudflare ensures that a significant portion of your content is served from there, reducing the load on your server,

  • Speed up page loading for international customers: CDN serves content from the server closest to the user's location,

  • Optimize images: The "Polish" service converts images to modern formats like WebP, reducing page size.

These are just a few benefits that come at a low cost compared to the advantages you gain. Cloudflare also offers automatic DNS mapping for domain migration, but it's better to have an experienced individual handle this, especially if you're working with an existing site.

#5 Implement lazy loading and use WebP images

Unfortunately, Magento 2 doesn't natively support the WebP image format or built-in lazy loading, and these elements are often the most crucial points in Google audits affecting your site's loading time.

Lazy loading serves content to the user only when they are about to view it on the screen. This significantly reduces the initial data that needs to be loaded to display the page. Magento can easily implement lazy loading using a free plugin from Magefan. Your team should be able to efficiently implement additional classes in critical areas of the site with this plugin.

WebP is a graphic file format developed by Google, allowing image compression without losing quality while reducing file size compared to traditional formats like JPG or PNG. WebP can be implemented with the help of Cloudflare, but there are also ready-made plugins that either allow you to upload original WebP images or convert images for you.

#6 Invest in New Relic

The steps mentioned above should help with hosting and maintenance-level optimization. The last step is to equip yourself with a tool that allows actions on the code level. While general optimization can be done following best practices, in-depth optimization requires data to pinpoint areas to optimize without incurring unnecessary costs on manual searching.
New Relic is a monitoring and analytics tool for analyzing the performance of web and mobile applications. It enables tracking processes, detecting errors, and performance issues, as well as profiling and analyzing code. Although there are alternatives to New Relic, this particular tool has basic support within Magento 2, even in the open-source version. By observing your production store with New Relic, you can identify specific processes causing issues and resource spikes on the server, which are the areas to focus on for optimization.

Conclusion

By following the above steps, your online store should achieve decent performance results, likely reaching around 50-60 points on Lighthouse audits for mobile. However, in today's competitive landscape, this may not be sufficient. Magento 2's architecture poses challenges to achieving top-level performance without significant investment. For those aiming for top-tier results, Progressive Web App (PWA) solutions have emerged. If you want to learn more, feel free to contact us and schedule a free 60-minute consultation.

Read also: