Top 50 eCommerce Tips - Part Seven, Performance

Magento remains one of the most popular eCommerce systems in the world, but it’s not without some areas of weakness.

It’s a platform for selling that leads the way when it comes to features, scalability and flexibility – but all this advanced functionality inevitably has an impact on the speed and performance of your site. Until recently, this hasn’t been a huge issue, but with a sharp increase in mobile online shopping and Google’s expectation that all sites should load within a few seconds, the performance of your online store should be high on your list of priorities.

This article takes a look at some of the key areas you can work on to boost your site’s speed and overall performance. As one of our in-house Magento developers, the content of this post may seem a little overwhelming if you’ve little-to-no experience when it comes to the more technical side of things – so please do get in touch if you need any support!

Server Setup

Magento runs on the Linux operating system, and requires an Apache and/or Nginx web server, a modern database (such as MySQL), the PHP programming language and various types of caching. All of this needs to be tweaked, optimised and kept up to date for the best performance, so a good server and hosting provider is essential. Magento also needs a server with enough memory and CPU power to handle the traffic, especially on more complex sites with a lot of products.

We’d recommend you choose a hosting provider that can provide you with a dedicated server specifically optimised for Magento and has detailed knowledge of the platform, so can provide good support if and when you need it.

Also, remember that security is important and a properly configured server will help to protect your site from malicious attacks.

A properly configured server should also have caching to speed up the site. For example, adding Varnish cache will significantly speed up the site for the end user and reduce the load on the server. Redis cache is also recommended and is used for backend caching and session storage.

The best Magento setup would have a combination of Nginx and Apache web servers, Varnish and/or a full page cache, and Redis cache.

The perfect setup also needs to have enough CPU power and memory to operate efficiently as Magento is a resource-heavy application. The bigger sites often also have a separate database server which also needs to be optimised if dealing with high amounts of traffic on a regular basis.

Image Optimisation

Optimising the images across your entire site can help to increase the performance of your Magento store by decreasing page size and load times. To check out the performance of your site, take a look at the Google Pagespeed Insights tool and GTmetrix.

When using these tools on your site, one of the main things they look for is image compression, format and size. Ideally, images should be as small as possible without sacrificing quality as this all counts towards reducing your individual page size and therefore decreasing loading times.

Tools can also be run on your server to compress images down to 70-80% quality if further optimisation is required. The jpeg format is generally considered the best for most images as it uses compression and results in a smaller file size when compared to another file type. PNGs and GIFs can also be used however they are best for simpler, low colour images, or images that utilise transparency.

One final tip for your images – jpegs on the web are more efficient if they are ‘progressive’, which means the full image is loaded in gradually rather than loading top to bottom.

Merging & Minification

Minifying Javascript and CSS is one of the best and easiest ways to improve your site score and gain a small performance boost. It works by compressing the files used by removing unnecessary characters, spaces and lines. To go one step further, you can also look at merging Javascript and CSS, which will reduce the number of files that need to be loaded on each page. Magento does this by merging files together, eg. 20 individual stylesheets can be merged into just 1 or 2.

Minifying and merging are only recommended when the site is well built and the code is good. Any existing problems in the code can actually be amplified by turning this on.

Thankfully though this kind of performance enhancement isn’t as crucial as it used to be, primarily because of higher internet speeds and the adoption of HTTP/2 which allows multiple resources to load simultaneously. The second version of HTTP is one of the most refreshing advancements of the web, despite the fact it will only work over HTTPS (with an SSL) so your site needs to be secure to enjoy any benefits here.

Errors

You should always monitor your server logs for errors. Identifying errors here can make a huge difference in your site’s performance and reliability.

If you want to take a look at your Magento logs, these are stored in the ‘log’ directory within the ‘var’ folder. If there are any problems with Magento or third-party extensions, they will be logged in system.log and exception.log, so these logs are a good place to start if you encounter any errors. These should be checked regularly as important errors can slow down the site and affect performance.

If there are any errors on the front end of the site, (for example ‘There there has been an error processing your request’), this will usually have an error report number which you can find in the /var/reports folder.

There will also be server logs, the three main ones are for PHP errors, server errors and a server access log, which lists IP addresses and which type of device the user is connecting with. All of these can help you solve errors quickly and effectively, avoiding site downtime or performance issues.

Extensions

One of the best things about Magento is its extensibility. There are so many ways to customise your store and there are a huge number of third-party extensions to provide additional functionality. Many eCommerce store owners install too many extensions though. It’s hard to avoid, but it’s definitely about quality over quantity.

The more extensions you have, the more things can go wrong – it’s that simple. A site with a significant number of extensions can see an increase in loading times and higher usage of server resources, not to mention the possibility of conflicts and errors. It’s because of this it’s always best to have as few plugins as possible and stick with the default Magento functionality wherever possible.

Also, make sure you keep Magento patched and up-to-date. This is one of the easiest ways to maintain performance and security, as patches include bug fixes as standard. Magento 2 doesn’t need to be patched but there are frequent updates that improve security and add new functionality.

Leverage Browser Caching

Leverage browser caching/add expires headers is another common point to fix. It’s also one of the easiest to fix and will give you an instant performance boost.

Images, javascript and CSS etc have to be downloaded each time a page is loaded for it to display properly, but most of these files can be cached by the browser if they don’t change very often. If no expiry times have been set, users will be downloading every resource on every page and this will significantly increase load times. When properly configured, resources that change frequently will have low expiry times so the browser occasionally re-downloads them, and things like the logo and other theme images will have high expiry times.

You shouldn’t need to change anything if your server is configured correctly, but if you see this warning then you should ask your hosting provider to fix it. Sometimes this refers to external resources through (like Google Analytics, Facebook or Nosto for example) and you don’t have any control over the caching of those, so don’t panic, but try and use as few external services as possible.

Notes & Summary

Sometimes people obsess over the scores on Google Pagespeed or GTmetrix, constantly trying to get the perfect score – but sometimes what really matters is the actual perceived loading time (how fast the site runs for the average user). You can have a site with a perfect score but this won’t mean anything if your site just feels slow to the user, so get the page size and load times down as low as you can. A fast and smooth experience for the customer means more sales.

In an ideal world, you want to try and get your homepage size under 2 megabytes, primarily by reducing image sizes wherever you can.

Don’t forget that Google is now putting more emphasis on mobile optimisation so it’s more important than ever to focus on the mobile version of your site. Google’s ‘Lighthouse’ tool (https://developers.google.com/web/tools/lighthouse/) will check the mobile loading time on a 3G connection and look for Progressive Web App features (PWA). PWA features can be small things like colouring the address bar, right through to making the site work offline, with a prompt for the user to add the site to their phone’s home screen (so it behaves like an app).

Ultimately, if you implement any or all of these changes, you should see a marked improvement in your site’s speed and overall performance. If you’d like more personalised guidance on what can be done to boost your site speed, get in touch and we’ll be happy to help.