How to improve Magento load times [Updated for 2018]

Jun 15, 2015 0 Comment

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.

  • Webpagetest
  • Pingdom Speed Test
  • GTMetrix
    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.

    website tuning perfect score

    The ideal web page score

    Stage one

    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.

  • Check all images are sized correctly or better yet I like them to be just under what they need to be. 10% reduced size than required is my sweet spot normally. The more undersized the better because it means you have a smaller file. Small files download from your server quicker and require less caching and RAM.
  • Ensure your code specifies the image size to take advantage of server side compression and resizing. GZip compression transfer and caching.
  • All images should be in the smallest possible format, such as, .jpg instead of a .png. Avoid; tiff, gif, svg (I Do like having the logos in svg, but it’ll cost you load time). It is all a balancing act between performance and tuning.
  • Compress your images just below whats required quality wise. Keep your high res pictures with less compression for where they will count. What I mean here is there is no point having a magazine quality image behind a filter or in a spot where users will pay little attention to it. You can afford to have a little blur where the image is just supporting or literally filler.

    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.

  • If you can combine pictures we recommend this, so there are less resource requests. An example might be a series of individual images broken up into separate columns. These could be combined into one single image, which will likely decrease the overall weight of the images combined and will be few resource requests. Every tenth of a second counts with tuning, because everything compounds.
  • In some extreme cases you may want to change or delay the order some images load in. If you have a big heavy page, firstly I’d recommend reducing it. However, if you can’t I’d recommend adding a little javascript to delay the loading of non-important or images below the fold. While the total site load time will not reduce, the user-perceived render time will improve having the same effect on the user’s experience.
  • Rinse and repeat over and over. Keep running your Magento store through Webpagetest.org and look for the slow loading pictures in your waterfall graph and work on them. Once you hit a green A you are good enough, though feel free to continue so your site loads even faster.

    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.

    Stage two

    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.

  • The one thing that is pretty safe to do and will greatly improve your render time is move all your js so it loads last. This gives the customer the impression the site has loaded faster and stops the visual elements from being held up by any slow loading scripts. Especially anything from third party sources, such as; Facebook, Google, Beetailer. After you move your scripts to load last the site will get a real snap to it and you’ll see your waterfall graph looking a lot healthier.
  • The last thing is to look for those slow loading extensions and third-party widgets. For some of the slow ones look to move them to another page not as important as your main page or add scripts to have them load last and perhaps put them below the fold so user don’t see a blank spot when the site page loads. Make sure all your extensions are up to date. Replacing them. Modify them to work better. Also, check they aren’t spamming or sending data off spying on you. All this behaviour, morals aside, will slow your site down.

    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.

    Stage Three

    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.

    Stage Four

    Compromise
    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.

    Stage Five

    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)

    Centos
    Cpanel
    SSD Raid 10
    4+ G RAM
    Local to users

    Nginix
    Fast CGI
    A later version of Php
    Pagespeed CPC
    Redis

    [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:
    Proxmox
    SSD Raid 10
    4+ GB if RAM
    Cloudlinux
    Litespeed
    Redis
    Cloudflare DNS
    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

    Baseline tests

    Baseline Tests
    https://tools.pingdom.com/#!/cBTI6a/Turboairvic.com.au
    https://tools.pingdom.com/#!/cZO2YF/Turboairvic.com.au
    https://tools.pingdom.com/#!/dQT4qw/Turboairvic.com.au

    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
    https://tools.pingdom.com/#!/eM8weL/http://www.turboairvic.com.au/
    https://tools.pingdom.com/#!/ecPhXz/http://www.turboairvic.com.au/ 2.76seconds
    https://tools.pingdom.com/#!/2FXGt/http://www.turboairvic.com.au/ 4.14seconds
    https://tools.pingdom.com/#!/eK1nDh/http://www.turboairvic.com.au/ 2.93seconds
    https://tools.pingdom.com/#!/eddKHZ/http://www.turboairvic.com.au/ 2.79seconds
    https://tools.pingdom.com/#!/siLCD/http://www.turboairvic.com.au/ 3.00seconds
    https://tools.pingdom.com/#!/dqVvSA/http://www.turboairvic.com.au/ 2.90seconds

    Testing results from Cal USA
    https://tools.pingdom.com/#!/juKJT/http://www.turboairvic.com.au/ 6.80seconds

    Testing from Texas, USA
    https://tools.pingdom.com/#!/3dPrm/http://www.turboairvic.com.au/

    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
    https://tools.pingdom.com/#!/bKFmA2/Turboairvic.com.au

    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.