As your Magento website catalog grows and you add more extensions and other third party integrations, the performance and speed of the website diminishes. We’ve seen this time and again with our clients. A good example is installed extensions that are not used and left enabled in the Magento admin to run in the background.
The recommendations on this post focus on optimizing a live Magento website for both desktop and mobile performance. These sort of optimization techniques come handy mainly for websites that have been running for some time, and when merchants have added too many extensions and other add-ons over time and the website has slowed down.
To be clear, one of the most important factors on how fast a Magento website loads is the hosting environment. Server optimization will not be covered here. If you host on a shared server with Hostgator, Bluehost, or on any of the other mainstream hosting companies, then the first thing you need to do is switch to a hosting provider that specializes in Magento hosting. To see best results, you must choose a dedicated server or at the very least a VPS. After you have changed hosts, read below and implement these recommendations.
Magento Performance Testing Tools
To get started with optimizing a Magento website, we first need to measure and test performance. The testing can be done using publicly available online tools like:
- https://www.webpagetest.org/
- https://gtmetrix.com/
- https://developers.google.com/speed/pagespeed/insights/
These websites provide various reports that can help pinpoint what’s slowing down a page and sometimes they provide instructions on how to fix the problem areas. Keep in mind that it is almost impossible to optimize a website to get a 100% score. Plus all the above-mentioned tools are benchmark tools. To further diagnose what’s slowing down your website run tests on your site using inspect element and your developer should check the code using profilers and other tools.
What Google Suggests
Recently we worked on optimizing a website where the customer had reached out to Google directly for help with their shopping feed and optimizing the website.
– To our surprise, the Google engineers themselves suggested using https://www.webpagetest.org/ for testing, rather than PageSpeed.
– Ideal Speed Index is 2000 or Less (but is not very bad if it is up to 6000)
– Google can’t cache everything on the page.
What Shero Recommends for Speeding Up a Magento Website
The ultimate goal when optimizing a Magento website for faster page load speed is to see FTTB and other WebPageTest results like in the photo below. How can one get there?
When taking on an optimization project, the first thing we do is to separate improvements in phases. Doing so helps developers and clients see progress and also gives an idea what optimization steps work well and what steps don’t. Keep in mind that no website is the same and the phases of work are interchangeable.
Let’s go over what each step we follow when optimizing a Magento website:
1) Site Wide HTTPS
Site wide HTTPS makes the website secure and improves performance by 0.1 seconds
2) Image Optimization
Product and homepage banner image size is one of the most important factors that affects a Magento website’s performance. Usually, merchants upload raw images with full resolution on the website and don’t follow guidelines to scale down the size of the images to an acceptable resolution. Sometimes such images can be up to 50MB and the website takes forever to load. Conversion tools like https://optimizilla.com/ are super valuable for scaling down the images. With Optimizilla you can upload multiple images on this same time and optimize them with one touch.
It is even better to optimize images for web usage before even uploading them to a tool like Optimizilla. For example, if you’re using Photoshop, the images need to be optimized there first and then uploaded to the optimization tool.
3) Minify Jvascript and CSS
Minifying CSS and JS is sometimes recommended but doesn’t actually work all the time and is quite complex. Plus you have to deal with an unreadable code/script which makes it impossible to debug. One of the best tools used for minification is YUI Compressor (https://yui.github.io/yuicompressor/).
There are some cases when minification breaks the website, or it really slows it down. What we suggest is to find the conflicts between the different Javascript or CSS files and try to minify again. If that doesn’t help, don’t minify at all.
4) Enable GZIP Compression
For GZIP compression we add the following at the bottom of .htaccess files:
You can play with your own apache rules, but this has worked fine for us. If your website has woff files, you need to add the following for fonts or icons at the bottom of the .htaccess file.
And in case .htaccess doesn’t give the expecting results, we can add it on
index.php
5) Merge CSS and JS
To merge JS and CSS we can use default setting of Magento by going to:
System -> Configuration -> Advanced -> Developer.
You should again keep in mind that CSS and JS merging does not work every time. So, it’s better to keep an eye on both “real-life” performance and what the benchmarking tools tell us.
6) Use Caching
Depending on the caching system that your server comes with, for the cache enablement step you will have to enable one of the following caches:
- Memcached https://memcached.org/
- Apc https://www.php.net/manual/en/index.php
- Varnish https://varnish-cache.org/
- Redis https://redislabs.com/rlec-flash
The cache should be installed and configured by your developer or the hosting company who administers the server.
7) Product List Block Cache
For Magento Community installations where the category pages consume a lot of resources we use a module that enables block caching on product lists. For Magento Enterprise installations you don’t need this module because Magento EE uses APC cache. This module is free and adds caching information on Mage_Catalog_Block_Product_List. Below is a screenshot of the results with the module enabled and disabled.
8) Install Amasty Full Page Cache
Amasty’s Full Page Cache is an awesome extension that greatly improves wbsite performance. From our experience we always see an impact (decrease) for Time To First Byte (TTFB).
9) Use CDN for Static Content
Using a CDN is a good way to improve the website performance. That’s because you actually using another server to deliver images or JS/CSS files.
10) Flat Magento Category
This option can be enabled in the Magento admin. Enabling it removes EAV tables and reduces the load speed since the data on the database tables can be found more easily.
You can find at System -> Configuration -> Advanced -> Developer -> Catalog -> Catalog -> Frontend
11) Limit External Links & API Calls
Using
as few as possible external links will reduce the load time, thus making the website faster. Also reducing API calls will reduce the server load and increase performance overall.
Last, most optimization efforts tend to focus only on the desktop and neglect to optimize for mobile and tablets. As online shopping through mobile devices and tablets increases, don’t forget to test and optimize your mobile version of the website. Feel free to comment below if you have any other ways of optimizing a Magento website.
Back End Developer
