Magento performance optimization–Actionable tips and strategies

Is your ecommerce store traffic resulting in enough conversions? If not, your store might be facing performance issues. Amazon loses 1% of its $141 billion online sales for every 100ms of latency. BBC risks 10% of its website visitors for every additional second of load time.

As your business grows, the need to build new features, customize code, and integrate third-party systems grows. Overwhelmed by these increasing needs, brands often ignore the negative impact this may have on their store: Slow site loading speed.

Even a slight difference in site speed could heavily impact your bottom line. Addressing it should be your utmost priority. Slow site speed not only affects conversions. Instead, it results in a quick surge in traffic, too. Google says that a 0.5s site speed delay can cause a 20% traffic drop.

Platforms like Adobe Commerce (Magento), with advantages like sturdy infrastructure and several built-in features, pose challenges in the form of loading speed. Optimizing your store on an ongoing basis with your Magento development services partner is a mandate to drive sales. In this blog, you’ll learn why page loading time matters and the best Magento speed optimization techniques to achieve it.

Why does Magento speed optimization matter?

Site speed has a direct impact on factors that determine your ecommerce ROI, such as user experience, conversions, bounce rate, and SEO.

Having discussed the factors that highlight how vital page speed can be for an ecommerce business, let’s dive into the best performance optimization techniques that work for Magento store owners.

Magento performance optimization best practices

1. Emphasize First Meaningful Paint (FMP)

First Meaningful Paint (FMP) or loading above-the-fold content means showcasing the most relevant part of the page first. By prioritizing above-the-fold to load first, you showcase content to users faster, which reduces the bounce rate.

You can achieve it by refraining JavaScript from loading upfront. When a web page starts rendering, the JS code also runs in parallel, increasing the load time. To restrict JS from loading simultaneously, you can defer the code parsing using third-party extensions (Ex - Defer JavaScript) and move unnecessary JS code to the bottom of the page. Less JS code to process results in faster page loading speed.

2. Code optimization

You customize code for requirements like building new functionalities and improvising extensions and themes. Any outdated or unnecessary codes in customization could cause performance issues and slow down your store’s performance.

Sign up for dedicated Magento managed services to perform code audits, identify bottlenecks, and review and refactor the code to improve efficiency

3. Search optimization

A responsive product search system that fetches relevant results for queries can enhance user experience. Stores that hold thousands of product catalogs and attributes might suffer indexing issues, resulting in delays in product discovery. 

To speed up search functionality, configure Magento’s search indexing best practices to optimize indexers meant for the price, product, category attribute, and so on.

Effect of indexers on your store’s performance:

Indexers could slow down your store by consuming server resources upon indexing products you keep adding to your portfolio. There are two modes available for Magento indexers - ‘Update on Save’ and ‘Update on Schedule’.

If you enable ‘Update on Save,’ indexers will run whenever you save a product, category, or attribute. The better option, especially if you are frequently expanding your product portfolio, is ‘Update on Schedule’. Using this indexer, you can schedule the time when the products and related information need to be indexed. It’s recommended that the cron job be set for indexing during low traffic periods.

To know the current indexing mode your store is in, use the following command:

• php bin/magento indexer:show-mode
• Or, you can go to System > Index Management in your admin panel
• Change the mode to ‘Update on Schedule’ using the command: PHP bin/magento indexer:set-mode schedule 

You can also select all the indexers and turn the ‘Update on Schedule’ by:

• Choosing System > Index Management: ‘Actions’ dropdown list 

To schedule the cron job for the ‘Update on Schedule’ indexer: 

• Store > Settings > Configuration > Advanced > System > Cron (Scheduled Tasks)

4. Elasticsearch

Elasticsearch is an open-source search engine that generates accurate and relevant search results faster. Based on Apache Lucene, a search library (open-source), the search and analytics engine auto-suggests keywords and completes search queries. 

Contextual search enables the search engine to look only for relevant results instead of searching for the entire database. Thus, by reducing the look-up, search results are generated faster.

For related search queries, the search engine generates products, images, prices, etc, narrowing down the search and ultimately speeding up the product discovery process for users. 

If your store is operating on Magento 2.4.x or later versions, Elasticsearch will be enabled by default. If you are using older versions, you can enable it by following these steps:

• Go to - Stores > Settings > Configuration.
• Go to - Catalog > Catalog > Catalog Search.
• In the Search Engine dropdown, Click Elasticsearch.
• Click ‘Save Config’ 

5. Optimize Time-to-First-Byte (TTFB)

Time-to-first-byte is the time taken by a server to send the first byte of information after receiving a request (user) from a web application. In other words, it is the latency between a browser request and a server’s response time to send the first byte.

Optimizing TTFB is important for dynamic pages like cart, checkout. Factors like unoptimized code, poor web server configuration, slow database, routing, etc, increase TTFB.

Google’s recommended TTFB is 800ms or 0.8 seconds or less. You can optimize TTFB by configuring caching and the web server, performing extension audits, and code refactoring.

6. GZip Compression

GZip compression is an excellent way to compress files rendered when a page loads. Turn on GZip compression for your store. By configuring GZip, you can compress files like CSS, JavaScript, fonts etc. This reduces the time taken by the server to download the
files, resulting in better performance.

Enabling GZip Compression

7. Minification of CSS, JS and HTML

Magento provides a built-in feature to minify CSS and JavaScript. The optimization of CSS and JS enables faster page loading by reducing the number of requests sent to the server by more than 25 times. To enable the built-in feature:

Turn the store to production mode (Minification works only in production mode)

• Go to - Stores > Configuration > Advanced > Developer and enable modification.
• Choose the option ‘Yes’ under Minify JavaScript Files feature
• Click – Save Config
• Go to System > Cache Management and choose Flush Cache

Source - Magento

8. Image optimization

Images are an integral part of ecommerce, but optimizing them is a mandate to help your store perform better. You can use third-party Magento extensions to reduce file size without compromising quality.

Use image optimization techniques like Lazy Loading, which loads images after the entire page loads. You can also use AWS or a CDN to deliver your content faster.

Other image optimization tips include avoiding oversized images and using advanced image formats like Adopt WebP and JPEG 2000, which deliver files in smaller sizes with zero compromise on quality.

9. Advanced JS bundling

While JS Bundling reduces the number of HTTP requests sent to the server, it loads all the JS bundles when a page loads. Advanced JS bundling manages this shortcoming by restricting the need to load all the JS bundles when a page load request is sent to a server.

Every page in your store, be it PDP or PLP, needs only a specific set of JS bundles to load. Using Advanced JS bundling, you can define bundles based on the type of the page like checkout, CMS pages, product detail pages, category, etc.

Source - Magento

10. Audit third-party extensions

Auditing your third-party Magento extensions is an important exercise to find out if they are causing speed issues for your store.

To perform the audit, choose one third-party extension and turn it off. Clear cache and perform a speed test on pages like the home page, checkout, cart, product detail page, and category pages. Look for changes in the performance of your store. If you note a positive impact on speed, you’ve located the extension.

Perform this procedure for all the third-party extensions to see if they have any performance impact. Contact the appropriate vendor, report issues, and ask for a fix.

11. Leverage flat catalogs

If your Magento store is showcasing huge volumes of catalogs, enabling flat catalogs becomes a handy performance optimization practice.

Magento stores product data and attributes using an EAV (Entity Attribute Value) model. EAV is a data model that Magento uses to denote entities. The model allows you to add entities along with attributes that describe them. In this model, an entity holds data like products, categories, customers, and orders. Attributes are data related to an entity, like name, price, etc. 

The EAV model enables the platform to store data in an organized way and concisely hold all the relevant data.

Attributes of each entity are stored in different tables based on the value type. Requests are sent to multiple tables to fetch data when product information is required. This slows down query response time.

The ‘Flat Tables’ option in Magento merges multiple attributes of an entity into a single table (Flat Table). So, to render product information, only one table is queried, speeding up the response.

Upon indexation, Magento generates and updates flat tables. Enable it using the following steps:

• Go to Stores > Configuration > Catalog > Catalog > Storefront
• Under use flat catalog category, choose ‘Yes’
• Under use flat catalog product, choose ‘Yes’
• Click - Save config

Source - Magento

12. Integrate CDN

Using CDN (Content Delivery Network), you can reduce response time significantly. A CDN caches the dynamic elements of your store, like CSS, JavaScript, images, videos, and fonts, and renders them, thereby minimizing the load on the servers.

CDN ensures high availability by utilizing multiple delivery networks to render static content on your Magento store. To implement CDN for your Magento store:

• Go to Store > Configuration > ‘General’
• Choose the tab ‘Web’ under ‘General’
• Choose base URLs
• Under the field ‘Base URL for Static View Files’, provide the CDN location where static files are stored.
• Under the field ‘Base URL for User Media Files’ provide the CDN location of the JavaScript files.
• Click – Save config

Source - Magento

13. Clear database logs

Magento generates logs to keep track of actions performed (Ex - products viewed). Eventually, these logs accumulate in the database, slowing up the response. Database cleaning helps clear up logs, which improves site performance and latency.

• Go to > Stores > Configuration
• Click on the ‘Advanced’ option.
• Upon expansion, choose the ‘System’ tab and open ‘MySQL Message Queue Cleanup’
• Under the ‘MySQL Message Queue Cleanup’ field, set the time to trigger auto cleanup for logs.
• Click ‘Save config’

Source - Magento

14. Expiration headers and render-blocking

Expiration Headers instruct Magento 2 on how long it should cache static contents of your store. By configuring expiration headers, you can eliminate the browser from querying the server to render the unchanged portions of a page. You can add expires headers on configuration files on servers like Apache or Nginx.

Render blocking prioritizes CSS over JavaScript when a page loads, rendering the visible content faster.

15. Varnish cache

Varnish Cache is the caching technique for Magento 2 that serves as a proxy for web servers. When a client (browser) sends a request to a server to load a web page, the server processes the necessary CSS, HTML, JavaScript, and images.

Varnish cache creates temporary storage for these elements. When subsequent requests are received, the Varnish case renders the cached assets to the client, thereby significantly reducing the queries on the server. This improves the response time and facilitates faster loading. 

16. Redis cache

Redis cache plays an integral role in Database caching and Session-store caching. For websites with more dynamic pages, Database caching helps reduce server loads.

Session-store captures data like profile information, recommendations, discounts, etc. from a user sign-in to sign-out.

Redis, being an in-memory caching system, can be used to cache both. Using its eviction mechanism, Redic cache enables you to remove data to free up space for new caching through 6 eviction scenarios. 

17. Switch to production mode

Make sure your Magento store is operating under ‘Production’ mode. Production mode is optimized to render the best performance. You can set your store to production mode using the following command: bin/magento deploy:mode:set production 

18. Version upgrades

Upgrade your Magento store to leverage all the improvements of its latest version. Magento regularly provides upgrades aimed at enhancing the overall technicalities of the system and addresses shortcomings in the previous versions with an emphasis on security and performance.

Keeping your Magento store up to date can help in leveraging performance improvements. You can get help from your Magento / Adobe Commerce development agency to upgrade your store.

19. PWA

Progressive web apps mimic a mobile app-like experience for customers. PWA is focused on improving the performance of web applications on mobile, which not only improves your customer experience and conversions but also earns SEO rankings. Rendering a mobile app-like experience, PWA eliminates the need to download your store’s mobile app or the cost of building a mobile app.

As a store operating on Magento, you can leverage PWA Studio, Magento’s SDK, to build progressive web apps.

Summary

Speed matters. Period. The fact is your months-long development, and years-long marketing efforts will pay off only if your site is fast enough to deliver its content. In addition to giving a great first impression, a better site speed keeps customers coming back and can also be your differentiating factor among competitors.

Make Magento performance optimization your top priority. Follow the Magento site speed optimization techniques we’ve discussed above. Get help from an official Magento partner agency with hands-on experience in performance optimization.

As many of the strategies involve server optimization, choosing a partner with expertise in providing platform-specific server environments like Platform.sh can ensure optimal performance tailored to the unique needs of your Magento store.