MODX: the fast CMS that maximises your PageSpeed score.
Having a fast website has always been a good idea. With a fast website, your visitors' user experience is better, which means they will stay longer and convert faster. With Google's Core Web Vitals, a fast website is also good for your online findability. And that, of course, is what everyone wants! But how do you make sure your website is fast, what do these 'Core Web Vitals' mean and which CMS will help you get started? Find out in this blog!
In this blog you will discover:
- Why a fast website is important
- What Google's Core Web Vitals are
- Key takeaways to make and keep your website fast
- The difference in speed between different CMSs
- How MODX helps you with your online speed
Rank better and grow conversions with a fast website
Many organisations put the focus on a fast website. And for good reason: Amazon indicates that a second longer loading time costs them $1.6 billion annually. Google also tested its search results pages with 30 visible results vs the current 10. Although the difference in loading time was not extremely large (0.5 seconds), the result was huge: 20% less traffic on the longer, slower pages. Comparatively, a 400 ms delay in Google's search results results in 8 million fewer ad impressions per day.1
So fast websites convert a lot better.
Not only that: with its Core Web Vitals, Google has also sent a clear message about the importance of speed for your site ranking. Your website's load time and how your website behaves are now just as important as SSL and mobile-friendliness were before. So to stay ahead of your competition and make sure you are found, speed is crucial.
Often referred to as: go fast or go home.
Google's Core Web Vitals
Speed has always been important, and with Google's Core Web Vitals, it has become completely clear: you won't get there without speed. Google's Core Web Vitals measure user experience and thus how good an impression your website leaves. And we all know how important a first impression is. It can make the difference between a loyal customer and a visitor who leaves your page and never comes back.
Google research shows that a delay in load time from 1 to 3 seconds leads to a 32% increase in bounce rate. This probability increases even more when loading takes 5 seconds. Then even 90% of your visitors will leave your website.2
Via PageSpeed Insights you can see how your website performs on mobile and desktop. In addition, this tool gives tips on how to improve your score. If you then click on 'See calculator', you can also see which factors are most important for improving your PageSpeed score:
The Core Web Vitals look at the three main factors for determining your Pagespeed score: load time, interactivity and stability of the page while loading:
Load time, also known as Largest Contentful Paint (LCP)
The Largest Contentful Paint (LCP)
The Largest Contentful Paint measures loading time based on how long it takes until the largest piece of content visible in the screen (without scrolling) is loaded. Where content is an image, an image within an SVG element, background image, the thumbnail of a video or a text block. So any piece of content that goes off-screen is also not included with the Largest Contentful Paint.
A good load time is less than 2.5 seconds. Between 2.5 and 4 seconds is still acceptable and anything above that really just takes too long and causes visitors to leave your website. So it's high time to get to work!
The LCP is mainly influenced by render-blocking JavaScript and CSS files, slow server response time, loading times of various resources and client-side rendering. To improve LCP, you can do the following:
- Let resources load instantaneously by applying the PRPL pattern
- Preload the most important resources
- Render what is visible on the screen first
- Pre-cache elements
- Lazyload other, less important elements (that are not immediately visible)
- Let elements load progressively
- Optimise your CSS by resizing it and removing unused CSS
- Optimise your images by compressing them, using a smaller resolution and using file format WebP
- Optimise web fonts by reducing file sizes, displaying a system font while loading the web font and using caching.
Interactivity, or First Input Delay (FID)
How long does the website take to respond to certain interactions? We have all experienced a website that loads, but as soon as we click on something, nothing happens! The reason clicking has no immediate effect is because the browser is still busy with another task, such as loading large JavaScript files. The browser cannot then respond to the user's action yet, because the JavaScript the browser is loading might be telling it to do something else. As a result, it can sometimes take a long time to process the action you performed.
FID thus measures the time between the user's first interaction (clicking a link, touching a button or any other JavaScript-driven action) until the browser responds to this action. In addition, FID is measured only when clicking, tapping or pressing a button. Scrolling and zooming in and out do not affect FID. So it may be the case that if you run your website through a PageSpeed check, it does not give an FID score. After all, there has been no user interaction at all.
To score well with FID you have to go for 100ms or less, 300ms is already too slow. Because FID is only measured when the user performs an action, it might be difficult to determine your score. A good technique to measure it though is by looking at Total Blocking Time (TBT). This measures the time between the First Contentful Paint - the time it takes for the first piece of content to load - and the Time to Interactive (TTI) - the time a page loads far enough that it can quickly respond to any user interactions.
To improve the TBT and thus the FID, you can apply the following optimisations:
- Reduce the impact of third-party code for Google Analytics, ad networks, social media buttons and HubSpot, for example.
- Diminish the time it takes the browser to load and execute JavaScript files.
- Keep the number of network requests low and the size of data transfers small.
Visual Stability, or Cumulative Layout Shift (CLS)
You've probably experienced it before: you're doing some online reading and suddenly the text shifts and you've lost where you left off. Or you just wanted to click on a link and BOOM the link shifts and you click on another random link that leads you to a page you didn't want to be on at all. Super irritating, of course. That's why Google has included this as a Core Web Vital.
The reason the layout of a page changes is because elements are loaded asynchronously or dynamically. This could be, for example, images or videos of unknown dimensions, a font that is larger or smaller than the fallback version or a third-party ad or widget that resizes itself to the correct size.
Within CLS, the largest unexpected displacement of each element within a page is considered. This does not consider new elements that appear in a frame. So looking at the image above, the CTA button in the second frame does not count towards the score, only the displacement of the green text block.
The score is determined using the following formula:
layout shift score = impact fraction * distance fraction
Where impact fraction is the impact that unstable elements have on what you can see in the screen. In the image, this is the amount that the green block occupies in the display + the visibility of the same element after displacement. So in this case, the red dotted line occupying 50% of the image. So the impact fraction is 0.5.
The distance fraction is the amount that the element moved within the visible area of a page. In the image, this is the blue arrow, about 15%. So the distance fraction is 0.15. That makes the layout shift score 0.5 x 0.15 = 0.075.
A good CLS is less than 0.1. Between 0.1 and 0.25 needs improvement and anything higher than that is really just bad. But fortunately, there are ways to improve even this score:
- Reserve the space that images and videos need on a page. For example, by putting the size of an image in the code. This ensures that the browser puts all elements in the right place on a page during loading and does not have to 'cram' any more elements in between.
- Never add content on top of existing content, unless a user interaction requests it. This way, you ensure that content does not move unexpectedly.
- Animations can still be used, of course, but make sure they do not cause content displacement. Instead, ensure that animations contribute to the user experience by giving users context with the animations as to what is happening on a page (such as a loading animation).
Fast, faster, fastest
Okay, it's pretty clear now: speed is EVERYTHING. So it's high time to put that pepper into your website with these takeaways:
Optimise images
Maybe the most important tip for keeping your website fast is by optimising images. A step in the right direction for this is to use Google's file format WebP. This file format is preferred by Google because it is smaller and thus loads a lot faster. You can also ensure yourself that each image you upload is a maximum of 300mb by keeping the resolution low (72dpi) and the image small. Optimising images is also very important. Here, photo editing programmes like Photoshop can give you a hand.
Apply lazyload
In addition, you can apply lazyload so that not all the content of a page is loaded at once. It can take a very long time to load all the content, especially if you have a large website, while this is not necessary at all. Visitors to a website only see a small part of the entire website when they land on it. With lazyload, we make sure that what is visible in the image is loaded first and then other elements are loaded.
With these first two tips, you make sure that the website's biggest delayer is taken out: rendering the images.
Prevent redirect loops
To improve the speed of your page as much as possible, it's important not to overuse redirects. While redirects are otherwise completely fine, it is important to keep in mind not to use more than one redirect. When you do, it causes Google and other web browsers to have to go through a path two or more times to get to the website. This is because the web browser is first sent to a certain online location, only to be told there that it should not be there, but somewhere else. Then the web browser goes to the next location, and the next, until it arrives at the right page. You can imagine that with that, loading a website page can soon take twice as long.
Host on a super-fast server
Sometimes your website can be as fast as it is, but unfortunately that is worth nothing (or not as much) if your server or web hosting party is not fast enough. Nowadays, you will find web hosting providers everywhere where some are even cheaper than others, which can lead to compromises having to be made when it comes to hosting. Which in turn can come at the expense of your speed, security and online performance.
Caching = Caching
'Cache is king', a statement that is increasingly common and certainly not a lie. Caching is storing content from the pages your users have viewed. By storing them, the content does not have to be completely reloaded the next time the website is visited.
Speed is in the CMS
Content management systems are the backbone of the internet: most websites do run on a CMS. Choosing a CMS that complies with Google's Core Web Vitals is therefore essential for a fast website. And there is quite a difference in that shows research by Sistrix. They analysed the load times of 18.5 million domains and came up with the following results for the CMSes:
The German CMS Jimdo is proudly at the top. With 82% of Jimdo domains tested meeting Google's expectations, this CMS delivers the top score for Largest Contentful Paint. WordPress, on the other hand, the most widely used CMS worldwide, shows much weaker results. Only 58.3% of the WordPress websites tested met the Core Web Vitals. With that, it narrowly misses the last spot. This was taken by Wix, which, like #1 Jimdo, is a cloud-based CMS. This shows that it doesn't matter whether you use a cloud-based CMS or an open-source CMS.
Finally, you may have also seen our favourite CMS shining in its third spot: MODX! Websites based on the MODX CMS meet Google's Core Web Vitals in almost 80% of cases. And that makes MODX one of the fastest CMSes. How MODX managed that, we tell you below.
The full study by Sistrix (definitely recommended!) can be found here: https://www.sistrix.com/blog/core-web-vitals-wix-vs-wordpress-shopify-vs-shopware-whats-fastest/
Exceed the competition with MODX
In principle, we believe that a CMS should have precisely no impact on the speed of your website (the frontend), because we as an agency create this website/frontend. So this is completely separate from the CMS. Yet MODX is one of the fastest CMSes. And that's not surprising: MODX is built from the ground up for speed. MODX doesn't add any additional proprietary code to the front end of the website, nor does it require it via weird plugin systems. Something that other popular CMSs do.
Combined with a robust caching system and smart semantic code, MODX remains light and fast as well as outperforming the load times of most other CMSes. In addition, we've also written scripts that further help improve PageSpeed by automatically optimising images.
Robust caching system
MODX has a robust caching system that caches content by default, creates a folder where all cached content can be found and empties the cache when a 'Resource' (a page in the CMS) is created or saved. In addition, MODX provides some caching options that let you decide whether or not a cache is emptied and what is extracted from it.
Automatic conversion to WebP
One example of the scripts we wrote for MODX ensures that uploaded images are automatically converted to the new image format WebP, developed by Google. This file format is smaller and therefore improves the loading speed of your website. Through this script, you can upload any file format and it will be automatically converted to this new file format.
Automatic image optimisation
Another script we created is the one that automatically optimises images for web. Images that are uploaded are often not 100% optimised, even if you specify this in an image editing programme like Photoshop. This script checks all images every hour and automatically optimises them in the best possible way.
So: speed should be your priority anyway when building and optimising your website. MODX is built with speed in mind, which is one of the reasons why this CMS scores so highly. So to make your Google PageSpeed score as high as possible, you can go for MODX or another fast CMS, and work with your developers to see how you can improve it even further.
Learn more about MODX? Download our MODX guide here or discover the CMS inside-out with a MODX demo!
1: https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
2: https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/