0%
In This Article:
Key Areas for Magento Performance Optimization
Magento 2 Backend Optimization
Magento 2 Frontend Optimization
Cache Optimization
Using Full-Page Cache
Adding Header for User-Agent Variation
Using Extensions for Cache Management
Image Optimization
Image Optimization Tip from Google
Lazy Loading Introduction
Flat Catalog Configuration
Using a Content Delivery Network (CDN)
Minifying and Merging CSS/JS Files
Magento 2 is a powerful e-commerce platform that offers a rich set of features and flexibility. However, as your online store grows, it can become slow if not optimized properly. In this guide, we will walk you through key strategies to optimize your Magento 2 store.
Key Areas for Magento Performance Optimization
Due to its modular architecture features, Magento 2 can be resource-intensive. Common performance issues include slow page load times, high server response times, and inefficient database queries. Recognizing and addressing these challenges is the first step toward optimizing your store.
Several methods can you to make Magento store faster. All of them can be divided into two general categories – backend and frontend optimization:
Magento 2 Backend Optimization
Backend performance optimization techniques are aiming to optimize the Magento 2 website server and reduce the number of database queries. This includes:
- Code optimization
- Server settings optimization
- Indexing configurations
- Management of extensions
Magento 2 Frontend Optimization
Frontend performance optimization deals with everything that happens on the user's side of your store – the client side. This includes:
- Caching
- Lazy loading introduction
- JavaScript and CSS file minification
- Image optimization
Now let’s focus on the most popular methods to improve your Magento store.
1. Cache Optimization
Using Varnish for Full-Page Cache
Varnish Cache is an accelerator for web applications, also known as a caching HTTP reverse proxy. Unlike Apache and Nginx, Varnish is created to be used with the HTTP protocol exclusively. This HTTP accelerator was made for content-heavy dynamic websites – just like your Magento 2 store.
How to implement Varnish Cache?
- Navigate to Stores > Configuration > Advanced > System > Full Page Cache.
- Select 'Varnish Cache' as the caching application.
- Configure Varnish settings according to your server environment.
Using Full-Page Cache
Enable backend caching is another method to speed up your site. Among other various server caching methods like object and block caching, full-page caching is particularly effective for Magento speed optimization. It serves cached versions of your site pages for users, significantly improving site loading time and user experience. On the other hand, block and object caching help optimize the rendering of individual page elements and the database data retrieval.
Adding Header for User-Agent Variation
Ensuring that the correct version of cached content is served to users based on their device or browser type enhances performance and user experience.
Steps to implement:
On the server: Configure your server or caching system to include the Vary: User-Agent header in HTTP responses. This configuration might be set at the server level or within your caching settings.
Using Extensions for Cache Management
Using extensions is one of the easiest and most effective ways to optimize your cache in Magento 2. Based on our experience, Amasty's Full Page Cache Warmer is one of the best extensions for cache management. Our clients have reported an 80% improvement in site speed by using this extension alone.
2. Image Optimization
Large images can significantly slow down your website. The trickiest thing here is to find a balance between image quality and size. On the one hand, including low-quality images to your website can ruin user experience, but high-quality images are demanding for your site infrastructure.
Case from Transform Agency
One of our clients, an art, and craft e-commerce website, asked us to create a vibrant site with high-quality images. Due to the specifics of their niche, they were not willing to compromise image quality for speed. At Transform Agency, we accepted this challenge and crafted a captivating design that showcased their products in stunning detail. We successfully developed all the necessary pages for both desktop and mobile versions without any drop in performance.
Read the full Magento case study here.
Image Optimization Tip from Google
Improve your Magento 2 store's speed by using modern image formats like JPEG 2000, JPEG XR, and WebP, which provide better compression and quality. For a 400px-wide image, aim for a file size of 35-70 KB. Resize images to the desired dimensions before uploading them, rather than relying on CSS resizing, to ensure optimal performance and avoid slowdowns.
Lazy Loading Introduction
To save even more resources on loading of images, you can implement the Lazy Loading technology. That means, your Magento store will load images only if your user scrolls down to them. Otherwise, unviewed elements will be left untouched. The easiest way to implement Lazy Loading is by using extensions. One of our clients managed to achieve a 15% faster website and a higher Page Speed Insight Score using Google Page Speed Optimizer – all without any coding!
3. Flat Catalog Configuration for Improved Performance
In Magento, product and category data are stored in multiple tables in the database to support the platform's highly flexible and customizable nature. While this structure allows for a great deal of flexibility, it can also slow down the database queries required to retrieve product information, especially as your catalog grows larger.
Key flat catalog configuration steps:
- Enabling flat category and product:
– Navigate to Stores > Configuration > Catalog > Catalog > Storefront.
– Set "Use Flat Catalog Category" and "Use Flat Catalog Product" to "Yes". - Update on save or update on schedule:
– Choose the appropriate indexing mode based on your store's activity level. - Set production mode:
– Use the command php bin/magento deploy:mode:set production to set your store to production mode for optimized performance.
Considerations
Adobe no longer recommends using a flat catalog as a best practice. It may lead to potential performance decline and indexing issues over time.
4. Using a Content Delivery Network (CDN)
Using a content delivery network (CDN) is another way to achieve faster speeds in your Magento website.
Benefits of a CDN include
Faster load times – Content is delivered from the server closest to the user.
Reduced bandwidth costs – Offloads traffic from your origin server.
Improved security – Provides protection against DDoS attacks.
Steps to configure a CDN
1. Access the configuration settings
– Go to the Magento admin panel.
– From the admin sidebar, navigate to Stores > Settings > Configuration.
2. Update base URLs
– In the Configuration panel, go to General > Web.
– In the Base URLs section, enter your CDN URL for static files (e.g., CSS, images) in the Base URL for Static View Files field and your CDN URL for media files in the Base URL for User Media Files field.
3. Update secure base URLs
– Navigate to the Base URL (Secure) section.
– Enter the secure CDN URLs by specifying the secure URL for static files in the Secure Base URL for Static View Files field and the secure URL for JavaScript and media files in the Secure Base URL for User Media Files field.
4. Save and clear cache
– Click on the “Save Config” button to apply the changes.
– Navigate to System > Cache Management. Click on “Flush Magento Cache” to clear the cache and ensure your CDN settings are applied.
5. Minifying and Merging CSS/JS Files
Reducing the size and number of CSS and JavaScript files can significantly improve page load times by decreasing the amount of data that needs to be transferred and reducing the number of HTTP requests.
Steps to configure in Magento 2
- Go to Stores > Configuration > Advanced > Developer.
- Configure CSS file
– Merge CSS files: Set this option to Yes to combine all CSS files into a single file. This reduces the number of HTTP requests required to load your site.
– Minify CSS files: Set this option to Yes to compress CSS files by removing unnecessary characters, such as whitespace and comments, which further reduces file size. - Configure JavaScript files:
– Merge JavaScript files: Set this option to Yes to combine all JavaScript files into a single file. This helps minimize the number of HTTP requests for JavaScript resources.
– Minify JavaScript files: Set this option to Yes to compress JavaScript files by eliminating whitespace, comments, and redundant code, which decreases file size and improves load times
Conclusion
Implementing strategies like full-page caching with Varnish, image optimization, and CDN integration can significantly improve your store’s performance. These optimizations help reduce server load times, improve server response, and ensure that your site is fast and responsive for users worldwide.
However, optimizing performance is not a one-time task. It requires regular monitoring and adjustments. This is where partnering with professionals can help. At Transform Agency, we specialize in Magento performance optimization. With our expertise, you can trust that your site will be finely tuned for peak performance, allowing you to focus on what you do best – growing your business.
Alex excels in creating and approving customization architecture, ensuring robust and efficient solutions for e-commerce platforms. His expertise in Magento allows him to effectively manage tech resources and drive technical projects to successful completion.
Alex excels in creating and approving customization architecture, ensuring robust and efficient solutions for e-commerce platforms. His expertise in Magento allows him to effectively manage tech resources and drive technical projects to successful completion.
