Simple tricks to improve website speed for better user experience (Joomla edition)

A slow website isn't just frustrating for your visitors; it's a death knell for conversions and SEO. As website design experts, we've seen countless businesses struggle with sluggish sites, and trust us when we say it's a problem you can solve. If you're running a Joomla website, you're in luck! There are many ways to optimise your site's speed and deliver a stellar user experience for your customers.

Here's a Joomla-specific guide to supercharging your website's performance:

Image optimisation: One of the easiest ways to speed up your website

Unoptimised images on the page are one of the most common issues we see when websites load slowly. Unoptimised images are images that haven’t had their file size reduced before being uploaded to the Joomla media manager.

Reducing the file sizes of your images is imperative if you wish for your website to load quickly. Given that websites, now more than ever, are visually-rich and load multiple images (particularly on the homepage), making sure your photos have been reduced in size will help your pages load quickly.

Both https://tinyjpg.com/ and https://pixlr.com/express/ are great online tools for resizing your images. For example, Tiny JPG will compress a 1.5MB image and compress it to approx 300Kb with no image loss (a 72% reduction in file size).

Lazy loading: Website optimisation with a single click

Lazy loading means images only load when they're about to appear on the user's screen. Joomla 4+ has this built-in and is accessible when you insert images into a page. Many templates also have options available for automated lazy loading.

How to lazy load images with JCE Editor

By delaying the loading of images until they're about to appear in the user's viewport, you reduce initial page load times and improve overall performance. Here's how to implement lazy loading with the JCE Editor.

• Insert your image into the page
• Navigate to the ‘advanced’ tab in the Image Manager
• Under the ‘loading’ field, choose ‘lazy’

That’s it; you’ve now enabled lazy loading on that particular image.

How to lazy load images with TinyMCE Editor

Here's how to implement lazy loading with the default Tiny MCE Editor

• Insert your image into the page by clicking ‘CMS Content / Media’
• Choose the image you wish to insert
• Make sure the ‘Image will be lazyloaded’ option is ticked

That’s it, you’ve now enabled lazy loading on that particular image.

How to enable lazy load with Joomshaper templates

Most of our clients have had their Joomla websites built with Joomshaper templates. Joomshaper makes it super easy to enable lazy load in their templates. You can do this by going to:-

• System / Site Template Styles and choosing your template
• Click on Template options
• Navigate to the advanced tab
• Click on the ‘Image’ section
• Enable Lazy Loading

Enable Joomla caching for faster load times

By enabling Joomla caching you can significantly reduce server load and improve website loading speeds by storing and reusing generated page content, database queries and other resources that generally slow your site down.

To enable Joomla caching, simply go to:-

• Global Configuration: Joomla's Global Configuration offers caching options. Experiment with Conservative or Progressive caching to find what works best.
• System Page Cache Plugin: This plugin can dramatically speed up page loads by caching the final output.

Leverage a content delivery network (CDN)

A content delivery network helps to speed up your website by distributing your website's static content across a network of geographically dispersed servers, reducing latency and improving loading times for users worldwide.

CDNs store copies of your website's static files (images, CSS, JavaScript, etc.) on servers located in various locations around the globe. When a user visits your website, the CDN delivers the content from the server closest to their location.

Two of the more popular CDN’s are Cloudflare and Google’s Cloud CDN.

Minify and optimise CSS & JavaScript

By minifying and optimising CSS & JavaScript on your Joomla website you will reduce file sizes, decrease the number of HTTP requests, and ultimately improve your website's loading speed.

Minification removes unnecessary characters (spaces, line breaks, comments) from your CSS and JavaScript files. This significantly reduces the file size, making them faster to download.

Gzip compression is a way to reduce the size of files sent from your web server to a user's browser, resulting in faster loading times and reduced bandwidth usage. Here’s how to enable this in Joomla:-

• Go to Global Configuration
• Navigate to the ‘server’ tab
• Enable Gzip compression

If you would like to minify your CSS and Javascript files, this is typically done in the Template Manager. If you have a Joomshaper template, you can do this by going to:-

• System / Site Template Styles and choosing your template
• Click on Template options
• Navigate to the Advanced tab
• Click on the ‘Compression’ section
• Enable ‘Compress CSS Files’, Compress Javascript Files’
• Click on the ‘SCSS’ section
• Enable ‘Compile SCSS to CSS’

It’s worth noting that you should test the speed of your website after enabling each of these to figure out which combination gives you the best results. Often there can be conflict between plugins or caching options which can actually cause your website to perform slower than if you don’t have certain options enabled.

You can test your website speed using www.gtmetrix.com, www.tools.pingdom.com or https://pagespeed.web.dev.

Following these simple steps can significantly improve your website, giving your customers a fast and easy website experience.

Remember, a quick website enhances user satisfaction and increases conversion, positively impacts your search engine rankings, and strengthens your brand reputation.