Word count: 3,078 Reading Level: College Student Reading time: 11.11 Mins
45+ seconds to under <2 second load time for Magento store
Real world testing results at the end of the post.
Magento can be awesome eCommerce platform and it is our favourite to work with for too many reasons to list here. It is extremely customisable and can be made to look awesome and it has all the tools that an online store webmaster needs to be successful in ecomm retailing. However, one area that amateurs really seem to fail with is website loading speed. Principally, page loading speed and check out processing speed. The cause is normally a lot of basic detail things, which have been overlooked due to care factor or less experienced developers being unaware of the compounding effects some scrappy code can have when building on a larger scale. Furthermore, It is not often obvious when you first launch your Magento store, but as soon as traffic and stock levels increase things can quickly snowball to a grinding stop. The first indications can be a high abandon cart rate, followed by ever increasing bounce rates, even though you know your traffic is good quality. What a lot of Mage administrators don’t realise is a few excesses, rough areas and little errors can quickly compound causing major slowdowns and lost business.
Google now actively penalises slow loading websites. Consequently, you may have retained your search rank before and just lost users. Now you will also loose your rank and your store could literally starve your bank account. All caused directly from poor page loading performance.
Your first step for any page speed optimization service working on an eCommerce store should always be creating a baseline from which to work from. Before you start testing away like a mad person you need to know a few details first.
Target Audience location
You need to know where the bulk of your traffic is going to come from. We all love to think we are global and marketing to the world. However, the reality is you’ll spread yourself too thin doing this and you need to narrow your field down at least to start with. You need to know the country where the bulk of your customer will be connecting from. Note: For bonus points, confirming where you a 100% will not be marketing to can help with blocking using your firewall against; bots, DDOS attacks and any unwanted bandwidth/CPU/RAM stealers.
Peak time of activity
This is critically important as it will be your highest server load time and potentially your worst loading time. Therefore, it will be important to test your websites page loading speed during these high load times. Having a fast loading speed doesn’t mean a lot if your site is slowing to 40 seconds plus during peak times. Note: You need to be aware of the load your paid ads and marketing will put on the website as well. A number of times I have had a panicked call from a site owner because their product was shown on TV or posted on social media by an influencer only to have the site crash due to the unusually high loads.
Tools to test website speed
Do not forget to test from your target audiences location.
Note: Googles Mobile Friendliness Test is not a suitable page performance test.
The test results below are from WebPageTest.org and for this example everything needs attention. I’ll use webpagetest for simplicity today, but the three tools above have similar rating systems.
All Fails is a great place to start your tuning
So you have tested your Magento store on webpagetest and there are a lot of Fs in your score and its slow over 8 seconds, 30,60 seconds or even more. This is normally where finger pointing starts, the client blames the developer and the developer blames the designer, the hosting, the admin and the client…Then the tail chasing starts going from one exotic cause and fix after another. Moving from hosting to VPS. Then to bigger VPS. Additionally, talk of CloudFlare CDN will fix all problems (lol). All this talk is a way of avoiding the obvious.
If I have to tune a website and I see all Fs I am actually happy, because I know there are a bunch of things I can easily do to make big improvements. Aaron, Founder of MebMedia
Always start your website tuning with the basics and good practice first. I normally avoid changing the website hosting straight away, unless I know it is a dog. Rather I’ll refine everything first, then if needed I’ll move to better hosting.
Note: The minimum requirements for a Magento Store to run well in your hosting are 1GB of RAM (Ideally 2GB+) and a server side caching stack. If you don’t have this, save yourself some tears and move or upgrade so you do.
The ideal web page score
So how do you get the elusive all A score? It’s not too hard. Webpagetest.org tells you what you need and how to do. You should start with the basics. The first thing normally to do is assess your store’s images. Yes, boring old images are the heart of 80% of your issues in most cases. Here is what we look for to improve your store’s image performance, without getting exotic such as having a dedicated image server.
We love Kraken.io and there are an extension and API system to make it easier to compress your product and Magento theme images from the admin panel. You will still need to resize them manually.
You’ve not finished this job just yet because you get a green ‘A’ for compressed images. You need to keep going until you have done the best you can possibly do. Reworking and making compromises on the slowest loading pictures.
Pragmatic compromise, such as, does this image behind all this text at the bottom of the page really need to be 300 dpi and full size or can I cut it right down to a rather crappy looking quality because it is basically hidden and no one will really be looking at it.
Magento Loading time…whats slowing down rendering (when the customer sees something).
Look through your speed testing reports, I like to use Webpagetest, GT Metrix and Pingdom. What you’re now looking for is the order js loads, any extensions and widgets. Also which are the slow ones. Note: Google maps and youtube videos are notoriously slow loaders, which will kill render times.
The first thing to change is to get some of your basic resources loading externally. For example things like bootstrap, Fonts, fontawesome can all be loaded externally from high-performance CDN services. This will reduce your server load and request load. These external resources are often available as a minified version. Do this and watch your speed improve and server load reduce during peak times. Note: Don’t just accept it will load faster always test it first!
Furthermore, ideally you should combine your internal custom CSS and .js files, but we find if you have heavily customised Magento it often just breaks the theme. By all means, if you can combine your files manually do it it will reduce requests. However, don’t panic if you can’t. We will come to a workaround later.
Warning: Backup that Magento store or work on a parallel one before messing with the JS and CSS.
Also, disable or uninstall any extension which isn’t being used. It is very common for templates to be loading a lot of resources which you are not using. Remove them.
Some of the worst and most common offenders for slowing a page are youtube videos and Google maps. If you must have them, move them below the fold and add a script to force them to load last. However, an easy performance fix is to replace the live Google map for a compressed .jpeg image and a link to your contact page, where you can have the real map. Slow loading Youtube videos can also be replaced with an image placeholder, which either links to a dedicated video page or loads the video only on interaction. For example, click Image->hide image->show Video->play video. Tuning Google maps and Youtube videos can reduce load times by 2-10 seconds.
Check for website page for errors.
Nothing will slow your website down worse than a browser searching for lost files and broken links. Dust off your browsers Dev tool and check it all. Don’t leave until you are finished.
Turn on and check the store’s logs for errors.
Make sure all extensions are up to date and remove them if they are not in use.
Run Screaming Frog through your site looking for broken links. Fixing these will also improve your SEO.
Learn to compromise for performance. Performance tuning is part skill and part knowing when to compromise. For example, if you have a large high res picture obscured by text and in a forgettable part of the web page…does it really need to be high res? Could you compromise and make the file half as large, four times smaller or even 100 times smaller? I have seen many times useless background images that are huge, 15mbs in some cases. Reducing them down to 20kb or less can be very achievable and change a slow loading page into a lightening quick page.
Tuning can be a game of small gains in lots of areas that will add up dramatically. Remember performance issues compound through everything they rarely have a singular effect.
Server side tuning
I am going to assume you have a good high speed Magento web hosting account with at least 2+ gig of RAM Preferable running on SSD drives or a VPS of suitable size. I will also assume you have crunched the numbers for traffic/bandwidth/RAM/CPU/latency/peak traffic. So in theory, everything is right? If not you need to upgrade. There are now a few Magento specific hosting services, including our mebsites.com Magento hosting and you should move to one of these. Signing up to AWS is not enough and likely will give you a bunch of new issues, such as DDoS attacks, bots and configuring your software caching.
So after you have completed stages one to four let’s start to look at the server improvements.
Number one place to go is compression .gzip transfer. It flows on from the theory above, smaller files can be downloaded faster. Compression transfer basically compresses the content before transferring it. It is just you .zip a file on your desktop. If you are in Cpanel and the right modules are present all you will need to do is go to software/services section and then enable ‘Optimise website’ service. Now your files will be transferred via .gzip and likely caching will be turned on to the improvement can be quite significant.
If not you will need pagespeed module or similar to be installed to do this task. This is where having a Magento experience System Administrator comes in handy, but many hosting providers will perform the task for you.
I won’t go into much about the server side of things now. However, the stack we normally use is this;
(We are famous for making HA multi-location/nation server clusters for big installs/markets)
SSD Raid 10
4+ G RAM
Local to users
A later version of Php
[Update Jul-2017] We have loved our setup, however with many servers and other software improvements we are now using LiteSpeed caching to standise all our servers and performance.
So now we use:
SSD Raid 10
4+ GB if RAM
Cloudflare CDN (preference for pro+ rather than free)
Litespeed has fantastic benchmarks against other caching options, such as varnish. However, it is well supported and can run on SSL without issue. It also has specific WordPress and Magento performance modules. Overall the performance and management is much easier than other options. This makes things for the server with multiple installations, developments, developers, clients etc much easier to manage for all.
Note: I personally love varnish, but there are compatibility problems with some OS and Cpanel versions. It also can be a total nightmare with sites in development. Therefore for us it is not practical and the power we provide is similar or better and you are welcome to test it.
Performance wise for non-mega stores there isn’t a lot of difference once you’re under 2 seconds and the above stack will get you there. However, under load Litespeed caching can make a big difference.
If you combine this with this with Cloudflare CDN service you will dramatically reduce server load in peak times and keep your speeds more consistent.
You’ll also see we use cloudlinux which stops server resources being leaked away by other server users and improves security. Redis is a in-memory data structure store and is much more efficient method of database caching than the default most web admins run
The last thing to install for performance is CloudFlare’s CDN service. I’ll say now, with our servers the free CloudFlare plan will likely slow your website a couple seconds. However, it will add another layer of protection and more consistent speeds overall, so it is still worth using or upgrade to the pro plan. Additionally, even if you don’t run the CloudFlare CDN services you should use the CloudFlare DNS. It is one of the fastest DNS services available and I highly recommend it. You may pickup a half second or even more by using it. You can also run your site through a proxy which will reduce most basic DDOS attacks.
Here is a recent example of our Magento performance optimisation:
Target Market: Australia
It’s consistently over 15 seconds up to 37 which isn’t great as we know.
Half way mark of improvement
Mid-way through now and consistently getting under 4seconds, These tests are from swapping over to our fast servers and fixing a few errors. Now time to push towards 2 seconds.
Testing results from Melbourne
Testing results from Cal USA
Testing from Texas, USA
Final test results
Truthfully I misplaced my final results. However, I ran some more tests today 19-July-2017 during peak times and the store is still loading under 2 seconds.
Proof here: 1.58s load time
End result we scrubbed 14+ seconds off the page load time a 2,341% load time improvement or 23 times faster than the baseline test.
Trial Our High Speed Hosting for $1
Love to hear from you comment below.