How to optimise website performance on customer sites 

Site performance is important to anyone who owns a website, but especially critical for website resellers who manage hundreds or even thousands of customer websites. Sites are your product, so it needs to perform well. 

Site performance – or Core Web Vitals as Google defines it – is complex to get right. A lot has to do with the infrastructure of the site, so picking the right platform to build on is the first step.

Even when site infrastructure is doing its job, there are still things you can do to improve your customer sites' performance. We want to give you some pointers as to how you can achieve this. Some of these tips are specific to the Mono white-label website builder, but we have also included best-practices that you can use on any platform. 

How to test the performance of your customer websites

Before you start tweaking your sites, you might want to check how well they perform to begin with. That way, you can document what you did and how well it worked. You can also document the site performance to your customers.

These website testing tools can be useful in that regard: 

• Google Page Speed Test: The Google Page Speed Test is a great base tool to test the initial performance and speed of the website. It provides concrete suggestions on how to improve the website that you can use the page speed insights as a basis for your site optimisation project.
• Mobile Page Speed: With consumers increasingly turning to their mobile devices, mobile page speed is crucial to driving business. According to a study by Google, 53% of mobile site visitors will leave if a mobile site takes more than 3 seconds to load. Use this mobile friendly test to see how your prospect’s website performs!
• Google Lighthouse: Use Google Lighthouse to test for the latest standards in modern website design, including accessibility, SEO, progressive web apps (PWA), overall performance and more.

How to optimise performance on your customer websites

1: Choose a white-label website builder that focuses on core web vitals

As mentioned in the introduction, tweaking won’t get you far if the platform itself is not performing. Some hosting solutions and website builders might not be built with speed in mind, as they are targeted towards private users. Some can perform wonderfully, such as WordPress, but require a lot of knowledge about which plugins you can use without slowing down your site, as well as a lot of manual upkeep.

As a website reseller, your needs are probably quite unique in that you need to turn over a lot of sites in a short amount of time, and those sites need to perform exceptionally well out of the box.

That is also a sentiment we have heard from our own partners and the reason why Web Vitals has been a key focus for us, and still is.

The Mono team works hard on creating templates for our resellers that are best-in-class when it comes to page load speed, security, and SEO. Our templates are consistently scoring in the 90th percentile on all parameters in the Google Lighthouse report - and this translates to published websites. 

Here are a few of the improvements we've released in 2022: 
 
✅ Reducing legacy JS on modern browsers: This means old code used for old browsers won't slow down websites in modern browsers! 
 
✅ Option to defer JavaScript files (along with CSS which was already possible): You can delay the loading of styles (CSS) and JavaScript files for certain elements on your website in order to speed up the initial load 
 
✅ Image formats convert automatically to WebP on publish - which on average results in a 90% reduction in file size. Compressed images mean faster load times. 
 
We are committed to continuing to improve. Web vitals continue to be one of our key points of focus in our 2023 roadmap. If you would like to try Mono's white-label website builder, click here to request a demo. 

2: Choose the optimal image format and file size

Big images take longer to load than small ones.

Choosing the right format and size for your image is important to the site’s performance. Big images can slow a site down even if the infrastructure is great. Go for the smallest possible file size without compromising on quality.

When considering the size of an image, there are two categories to keep in mind:

• File size: This is how much space your image takes up on the server in kilobytes. A good file size for web is 100-500kb.
• Image resolution: The bigger the number of pixels, the higher the resolution and the larger the file size also typically becomes. You may need a resolution of 2500px if using the image for a Hero or a full-width banner, but you will almost never need anything bigger – it would only slow down your site.

Image format also impacts the size of the image. The most common image formats for web are PNGs and JPEGs, but a new format called Webp is also an option.

JPEGs result in a smaller file size, so they work better for complex images with lots of details that otherwise would be huge.  PNG are bigger but are also more versatile, namely they allow transparent backgrounds. Graphics, such as illustrations and icons should be saved as PNGs. 

Webp is a fairly new format put out by Google. It has the benefit of being even more compressed than PNG and JPEG while retaining its image quality. We have recently launched an update that means all images used on the Mono Editor are automatically converted to WebP on publish.

For more information on image files and formats, read our blog post specifically on this topic: Best practices: formatting images for web.

3: Defer JavaScript and CSS

On some website builders, including Mono’s, you can delay the loading of styles (CSS) and JavaScript (JS) files for certain elements on your website in order to speed up the initial load.

With deferred loading enabled, these elements' styles and JavaScript won't load until the visitor is scrolling down and about to view them.

Here is an example of deferred loading of CSS and JavaScript on a page with a Gallery module in the Mono Editor:

 

 
The deferred loading technique may sometimes result in elements performing a small "jump" if the style sheets and JavaScript don't finish loading before the visitor views them. 

This is why we have given partners the option to enable or disable this functionality in the editor settings. Read more about how to defer JS and CSS in the Mono White-Label website builder here.

4: Reduce the number of redirects

Every time a page redirects somewhere else, it adds extra processing time to the HHTP request and response progress. Having the option to use redirects is great if you really need them, for example if you have distributed an old link that is no longer live - it could be to an event that no longer exists. But it is better to design your pages so you won’t need as many redirects. You may for example have a standard URL for all events and “retire” old events to an archive page, that way eliminating the need for redirects in this specific case. 

5: Avoid HTML, long pages and other ‘fluff’

Simplicity, performance and functionality are more important than fancy effects, video heros and animations! These things tend to slow down a site. That is also why Mono’s white label website templates are built with simplicity, rather than flashiness, in mind. 

When setting up customer websites, avoid custom HTML as much as possible. We also recommend avoiding very long pages with lots of content. HTML can be great if you need to add something specific requested by a client but depending on what it does it can slow down page speed. Additionally, longer pages with visual and interactive content can often diminish load times as these types of pages become heavier to load. 
If you are using another website builder than Mono’s, such as WordPress or Wix, consider also avoiding heavy widgets or apps. Simplicity and functionality most often trump pizzazz in our experience.

Maps are another one of those things that you should not overuse. Map modules are great to show website visitors where a physical shop is located but can also be heavy to load. This is caused by the number of pixels used for the map and the code used to make it interactive. Aim for one map per page – you really don’t need more. Note that if you use a map in the footer these counts as using it on all pages across your website.

6: Minimize render blocking requests

Optimize the output of styles to have as few render blocking requests as possible. In the Mono Editor, there is a setting to accomplish this. It makes the default browser font load and thereby ensures that the page is readable before your selected font(s) load. This helps improve the initial load speed of your pages.

This setting additionally defers the loading of Map modules on your website, improving your page's initial load speed as off-screen maps won't be loaded until the visitor is about to view them.

7: Prefetch internal pages

Prefetching content means that the content is being fetched before a request is made: A user might scroll down the homepage and as they do so, be presented with links to different pages. Prefetching means fetching the content on those pages before the user clicks the link – so they enter the page instantaneously even if, say, their internet is slow.

Some website builders allow you to enable prefetching. Learn more about how you can enable prefetching on the Mono website creator here.

8. Enable Lazy Loading for images

Enabling lazy loading for your website images will improve your page speed. This means only visible images will be loaded which ensures that the website won't be too heavy to load.

How to speed up your site: A summary

The infrastructure is the most important step in producing high-performing customer sites. Picking a good platform is key.

Once you have a good foundation, the rest relies on best-practice and tweaks. The first goal is to make sure the site isn’t slowed down by heavy content or inappropriate use of code or widgets. Best practice is to use the optimal file format for the purpose, such as PNG for logos and JPG for photos, avoiding heavy content and apps and keep pages short, without ‘fluff’ such as custom codes or heavy heroes.

From here you can tweak your sites to speed it up further, by playing around with the settings, such as lazy loading and deferring JS.

About Mono

Mono believe small businesses deserve the same level of online presence and performance as larger companies. With Mono white-label website builder, we provide website resellers with an all-in-one solution to build and manage hundreds or even thousands of customer websites, specifically designed with the SMB end-user in mind. Get a demo here.