I work as an apprentice web developer who has been left in charge of the web team (all of my colleagues have left) and have been left with an impossible task.

We have a 10-core Windows server, with more than enough memory, and host multiple Joomla! websites, as well as custom-built HTML and PHP websites. There are no issues with the custom-built websites, all loading is instant. However, all of the Joomla! websites (all are eCommerce) are so slow and can take 30 seconds to load.

I have ran multiple speed tests on the websites and believe me, i know what most of you are thinking.

"Reduce image size and compress CSS and JavaScript"

I have already done this. The issue lies with TTFB (Time To First Byte), as this can take up the whole 30 seconds.

The following website shows you the TTFB.

http://www.bytecheck.com/results?resource=http%3A%2F%2Fhealthypetstemp.co.uk.5-189-187-215.premierepos.co.uk%2Fen%2F

This is just one of the Joomla! websites that we host and i can provide more if needed. You can also check the speeds using Google Chrome DevTools, but it will just tell you the same thing.

Like I said, it is this that is causing the issue and would greatly appreciate some assistance in this matter.

Thanks in advance.

Ok, let's start from the beginning.

Firstly, you should be running Chrome's Lighthouse test to detect any performance related issues. In Chrome, press F12, then go to the Audit tab.

I ran an audit on Desktop with no throttling and the performance is simply terrible.

So, first thing first, disable the Joomla JCH Optimize plugin so that you can see all of the assets being loaded.

1 - General:

You appear to be loading way too many assets and your Node list is over 4.5k when it should be under 1.5k. Start thinking about changing your page structure and moving certain elements to other pages if need be. Only display critical content on the homepage.

As for the many assets, one example being that you're loading 7 fonts. This simply isn't justified at all. If you want to load FontAwesome for icons, that's fair enough, but you do not need 6 other fonts to style your content. This is poor design. Choose 1 font for your brand, stick with it, and remove the rest.

2 - HTTP/2.0:

Get a free SSL certificate from LetsEncrypt, install it on your server, then enable HTTP/2.0. This update changes the way assets are fetched and thus will reduce the time taken to load them.

3 - LazyLoad:

A good website in 2018 renders the HTML first with a small chunk of critical CSS so that the initial page load doesn't look all over the place. Once the basic HTML is loaded, you then lazy load your CSS, JS and images. What you're currently going it loading all CSS and JS in the <head>, meaning the browser will wait until they have downloaded, before it continues rendering the rest of the HTML.

I prefer doing this at the template level (faster) rather than relying on plugins...but then against, I'm a UI developer so I develop my own templates.

You may want to consider building your own template.

Someone I've personally worked with on the Joomla CMS has some great tutorials on how to create your own template:

https://www.youtube.com/channel/UCSinMbPPdEPx6Hw5QcueITg/featured

4 - SVG'S:

There are several images on your site that can be SVG's instead of PNG's. You're loading 200x200 pixel images and they're being rendered at 94x94. Start using SVG's which will in most cases be smaller in size, and won't lose clarity when the page is zoomed in or on a retina device.

5 - Images:

Your images are simply too large in size for what they are. Each slider image is between 250kb and 500kb. Furthermore, the images are not lazy loaded. For images such as photos or anything else that won't perform optimally as an SVG, use WEBP which is a format developed by Google. You will need to have a fallback for browsers that don't support it though.

5 - Caching:

Do not use PHP to cache your assets! Do it at the server level (Apache, NGinx, etc). Have a look around for some tutorials on this or maybe talk to your hosting provider/server amdinistrator.

I hope this gives you a little insight to help you improve your product.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.