Having a fast website has always been a great idea. A fast website improves the experience of your visitors, so they stay longer and convert faster. The introduction of Google’s Core Web Vitals turned having a fast website into a necessity for online visibility. And that’s what everyone desires! But how do you make sure your website is fast, what are these ‘Core Web Vitals’, and which CMS helps you to become lightning-fast? That’s exactly what you’ll find out in this blog!
In this blog, you’ll discover:
- Why having a fast website is vital
- What Google’s Core Web Vitals are
- Key takeaways to enhance the speed of your website
- How CMSs compare in speed
- How MODX helps you to become lightning-fast
Let’s dive in!
Rank better and grow conversions with a fast website
Countless organizations focus on having a fast website. And for good reason: Amazon shows that only a second slower loading speed costs them 1.6 billion dollars. Likewise, Google tested its search results pages showing 30 results vs. the current 10. Although the difference in loading time wasn’t that much (0.5 seconds), the result was ginormous: 20% less traffic on the longer, slower pages. Similarly, a delay of 400 ms in Google’s search results makes for 8 million fewer ad impressions per day.1
So: Fast websites convert a lot better.
But it doesn’t stop there: Google’s Core Web Vitals signaled the importance of speed for your site ranking. The loading time of your website and how your website behaves during loading are now just as important as SSL and mobile-friendliness have been for a while now. To stay ahead of your competition and become visible, you need to make sure your website is FAST.
In other words: Go fast or go home.
Google’s Core Web Vitals
Speed has always been of the utmost importance, and Google’s Core Web Vitals have made it even more clear: without speed, you aren’t getting anywhere. Google’s Core Web Vitals measure the user experience, and with that the impression your site makes. And we all know the importance of making a good first impression. This can make the difference between a loyal customer and a visitor instantly leaving your website and never coming back.
Google’s research shows that a delay in loading time from 1 to 3 seconds, causes an increase of 32% in bounce rate. This rate is even bigger when loading takes 5 seconds: 90% of visitors will leave your website.2
You can determine how your website performs on desktop and mobile through PageSpeed Insights. It also shows tips on how to improve your score. After clicking on ‘See calculator’, it also shows you which factors are most important for improving your PageSpeed score.
The Core Web Vitals are mainly focusing on three factors: loading time, interactivity, and visual stability of the page during loading:
Loading time, ie Largest Contentful Paint (LCP)
The Largest Contentful Paint measures the loading time based on how long it takes for the biggest piece of content visible on the screen to load (without scrolling). “Content” is every image, whether it’s a stand-alone image, an image within an SVG element, a background image or the thumbnail of a video, and a text block. Every piece of content shown outside the viewport does not count toward the Largest Contentful Paint.
A good loading time is less than 2.5 seconds. Between 2.5 and 5 seconds is acceptable, and everything above that can be called slow and makes visitors leave your site. High time to get started!
LCP is mainly influenced by render-blocking JavaScript and CSS files, slow server response time, loading times of different resources, and client-side rendering (rendering from the browser/user-side). To improve the LCP you can do the following:
- Load resources instantly with the PRPL pattern
- Preload the most important resources
- Render the things visible on the screen first
- Pre-cache elements
- Lazyload other, less important elements (not visible in the viewport)
- Load elements progressively
- Optimize your CSS by minifying the files and removing unused CSS
- Optimize images by compressing them, using a smaller resolution, and using file format WebP
- Optimize WebFonts by reducing WebFont size, showing a system font during loading, and using caching.
Interactivity, ie First Input Delay (FID)
First Input Delay is all about the time it takes a website to react to certain interactions.
We’ve probably all experienced a website loading, but when we want to click on something, nothing happens! The reason for this is that the browser is busy with other tasks, such as loading big JavaScript files. Doing so, the browser can’t react to the user interaction, because the JavaScript loading might tell him to do something entirely different. That’s why it feels like it takes super long before the site reacts.
The FID measures the time between the user’s first interaction (clicking a link, tapping a button, or any other JavaScript-driven interaction) up until the browser reacts to this action. On top of that, FID is only measured after a click, tap, or when a button is pushed. Zooming in or out and scrolling don’t affect the FID. When you want to see how your website performs for FID, the PageSpeed check probably won’t show you anything, since there was no real user interaction.
When you want to get into the green for FID, you have to point for 100 ms or less. 300 ms is already too slow. Because FID is only measured after a user interaction, it could be problematic to define this score. A good solution for this is to look at the Total Blocking Time (TBT). This factor measures the time between the First Contentful Paint (FCP) and the Time to Interactive (TTI). Whereas the FCP is the time it takes for the first piece of content to load, and the TTI is when the page is loaded far enough so that it can quickly respond to any user interactions.
To improve the TBT and with that the FID, you can use the following optimizations:
- Reduce the impact of any third-party code for running Google Analytics, advertising, social media buttons, and HubSpot
- Minimize the time the browser needs to render JavaScript files
- Keep network requests low and transfer sizes small.
Visual stability, ie Cumulative Layout Shift (CLS)
You’ve probably experienced it at least once. You’re reading something online and out of nowhere the text moves and you’ve lost where you are. Or you wanted to click a link and BOOM the link moves and you click on another random link which leads you to an entirely different page than where you wanted to be on. Talk about annoying. That’s why Google named this ranking factor a Core Web Vital.
The reason the layout of a page shifts is that elements are loaded dynamically. This can be because of images or videos with unknown dimensions, a font that’s bigger or smaller than its fallback font, or an ad or third-party widget that changes its size.
CLS measures the largest unexpected layout shift of any element within the viewport. It doesn’t look at elements that newly appear in the next frame. So if we look at the image above, the CTA button in the second frame doesn’t count for the score, only the shift of the green text block.
To calculate the score, we can use the following formula:
layout shift score = impact fraction * distance fraction
Impact fraction is the impact any unstable element has on what is visible in the viewport. In the image, the impact fraction is the amount of space the green block takes + the visibility of the same element after the shift. In this case, this will be the red dotted line which takes up 50% of the screen. The impact fraction is therefore 0.5.
The distance fraction is the amount an element shifts within the viewport. The image shows a blue arrow which indicates the shift the green block had. This is around 15%. The distance fraction is 0.15, which makes the layout shift score 0.5 * 0.15 = 0.075.
A good CLS needs to be less than 0.1. Between 0.1 and 0.25 needs improvement and everything above that can be called bad. Luckily, there are ways to improve this score:
- Reserve space that any image and video will take within the page. Put, for example, the right dimensions of the image within the code. That’s how you make sure all elements of the page appear in the right place and won’t have to squeeze in between elements during loading.
- Never add content above content that’s already loaded, except when it’s because of a user interaction. This will make elements stay in their place and no unexpected shifts happen.
- Animations are a difficult one. You can still use these, unless they create a shift within the page. Only use animations if they give users context on what’s happening on a page (such as a loading animation).
Fast, faster, fastest
Okay, we think it’s clear by now: speed is EVERYTHING. High time to spice up your website with these takeaways:
Optimize images
It might as well be the most critical tip to keep your website fast by optimizing images. You can do this in multiple ways:
- Use Google’s file format WebP. This file format is smaller and will therefore load faster.
- Make sure every image uploaded is 300 MB maximum by keeping the resolution low (72 dpi) and the image small.
- Optimize images with the help of tools such as Photoshop.
Use lazyload
You can also use lazyload so that not all content on a page is loaded at once. Because loading all content can take a while, especially if a page is huge. And loading all content at once is not at all necessary since your visitors will only see a small part of the page when they visit. Lazyload makes sure that only the things visible within the viewport are loaded and after that the other elements follow.
These two tips help you speed up the biggest delayer of your website: rendering images.
Prevent redirect loops
To enhance the speed of your website as much as possible, it’s important to not use too many redirects. Although redirects are great to prevent losing the SEO value you build on a page, it’s important to use just one redirect. When you do use multiple redirects, it makes Google and other web browsers walk a path twice or even more times to get to your website. The browser is send to a certain location, only for it to hear that it needs to go somewhere else. Next, the browser will visit the next location, and after that the next, and so on until it gets to the right page. You can imagine that loading your web page this way will take ages.
Host on a fast server
Although your website is oh so fast, it still isn’t worth anything when your web hosting partner isn’t at the top of their game. Nowadays, almost any company wants to be your web hosting partner. One is even cheaper than the other. But cheaper web hosting comes with its limitations in speed, security, and online performance overall.
Caching = Kaching
‘Cache is king’, a common saying nowadays. Caching is saving the content of the pages your visitors have already visited. By saving this content, it doesn’t have to be loaded from the ground up which makes the entire loading process faster.
Speed is in your CMS
Content management systems are the backbone of the internet: most websites are managed through a CMS. Choosing a CMS that complies with Google’s Core Web Vitals is, therefore, well… Vital! And there’s a huge difference between CMSs, research of Sistrix shows. They’ve analyzed the page speeds of 18.5 million domains, and these are the results for the different CMSs:
The German CMS Jimdo is proudly at the top. With 82% of all tested Jimdo domains complying with Google’s expectations, this CMS achieved the best score for the Largest Contentful Paint. WordPress the most popular CMS in the world, on the other hand, shows a lot worse results. Just 58.3% of all WordPress websites tested complied with the Core Web Vitals. That being said, it still doesn’t end up in last place. This place is reserved for Wix, which is just like #1 Jimdo a cloud-based CMS. This shows that it doesn’t matter if you use a cloud-based CMS or an open-source CMS.
Finally, you’ve probably seen it shining in third place: our favorite CMS MODX! Websites based on the MODX CMS complied in almost 80% of all cases with Google’s Core Web Vitals. This makes MODX one of the fastest CMSs. How MODX made this happen is something we’ll reveal below.
You can read the complete research of Sistrix (certainly recommended!) here: https://www.sistrix.com/blog/core-web-vitals-wix-vs-wordpress-shopify-vs-shopware-whats-fastest/
Beat the competition with MODX
We think a CMS shouldn’t impact your website’s speed, since we as an agency built it. So this shouldn’t actually be a problem. Still, MODX is one of the fastest CMSs. And for good reason: MODX is built for speed. MODX doesn’t add any own code to the frontend of the website and doesn’t require it through weird plugin systems. Something that most popular CMS do need.
Combine this with a solid caching system and smart semantic code, and MODX stays light and fast and beats the loading times of most other CMSs. Besides that, we’ve also created several scripts that help you optimize the page speed even further.
Solid caching system
MODX has a solid caching system that caches all content by default, creates a folder where all cached content is stored, and empties the cache whenever a ‘Resource’ (a page within the CMS) is created or saved. Besides, MODX offers several other caching options that allow you to decide if the cache does or doesn’t need to be emptied.
Automatically convert to WebP
One of the scripts we made for MODX automatically converts any uploaded image into Google’s image format WebP. This format is smaller and will therefore enhance the loading speed of your website. This script allows you to upload any image format and it will automatically convert it into WebP.
Automatic image optimization
Another script we built is a script that automatically optimizes images for the web. Not one uploaded image is fully optimized for the web, even when you export them using this setting in Photoshop. This script checks all uploaded images every hour and automatically optimizes them in the best possible way.
The bottom line is that you’ll have to constantly prioritize speed when building or optimizing your website. MODX is built for speed, which makes it one of the fastest CMSs out there. To improve your PageSpeed score, MODX or another well-graded CMS can help you start up. Next, you ask some developers to look into further optimization.
Want to know more about MODX? Download our MODX guide 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
