How to Improve Core Web Vitals on a Multilingual Website
Core Web Vitals are a collection of metrics to measure the quality of the user experience on websites. Google counts them as ranking signals and they are, therefore, also important for (multilingual) SEO. If you neglect them, you risk being shunned by visitors and search engines alike.
To avoid this scenario, in this post, you will learn everything you need to know about improving these metrics on your multi-language website. We will explain what Core Web Vitals are, how to test your site’s current performance, and step-by-step instructions on how to improve each of the metrics on your website.
What Are Core Web Vitals?
As mentioned, Core Web Vitals measure user experience on websites. All of them are in some way related to loading speed and website interactivity. The metrics were introduced by Google in 2020 and have become part of their search algorithm. Let’s go over them one by one.
Largest Contentful Paint (LCP)
The first one is Largest Contentful Paint (LCP). It measures the time it takes for a page to load until it becomes viewable and usable. It determines this by detecting the largest content element of a web page, which is often an image or a text block, and when it becomes visible to visitors.
This interval is measured in seconds and used as the LCP score. Google has defined a number of cutoff points to define what kind of timing your site should shoot for.
As you can see above, a good score is up to 2.5 seconds for the LCP element to load. Up to 4 seconds is acceptable but should be improved, and anything beyond that Google considers too long.
Cumulative Layout Shift (CLS)
This next metric tracks the stability of a website layout while it loads, meaning how much movement it shows when new elements appear on the page. It is called Cumulative Layout Shift or CLS.
Why does this matter?
A high degree of CLS can be disruptive to a user’s interaction with your site. Besides simply not looking good, it can also make them lose their place on the page due to moving text or cause them to accidentally click on the wrong element because it shifts at the wrong moment.
CLS is calculated by looking at how much the layout moves while loading, as well as how big those movements are. Those two ratios are multiplied by one another to get to the score.
A CLS score below 0.1 is good; up to 0.25 needs improvement and anything above that is unacceptable.
One note: Page movement within 500 ms of a user’s interaction with the page (such as a click) won’t affect your CLS score. Those are considered to be on purpose.
Interaction to Next Paint (INP)
Interaction to Next Paint or INP is the latest Core Web Vitals metrics addition. It will replace First Input Delay (FID), one of the original measurements, in March 2024.
Both of them track the time between when a visitor interacts with a page element and how quickly it responds. Of course, the quicker the reaction, the better.
While First Input Delay only looks at the visitor’s first interaction, Interaction to Next Paint tracks all page engagements during a visit and shows the worst score. That way, you have a more accurate picture of the page’s responsiveness.
What is a good INP score to shoot for?
Up to 200 ms is good, and up to 500 ms is fair; anything beyond that will negatively impact Google’s view of your site.
How to Test Your Website’s Core Web Vitals
Once you know what exactly Core Web Vitals are, the next logical question is, how do you find out where your site stands? The easiest way to find out is to use a speed testing tool like PageSpeed Insights.
Simply enter your website URL at the top and run the test. Once finished, it not only tells you whether your website has passed the Core Web Vitals assessment but also provides values for each of the mentioned data points.
If available, you get a mix of both real-life and lab results. This includes information from CrUX, where Google collected website user data from its Chrome browser. If they don’t have that, you only get measurements from Lighthouse, which computes them ad hoc.
Other tools that can tell you about your Core Web Vitals performance are GTmetrix, WebPageTest, or the Chrome Web Vitals extension.
Improving Core Web Vitals on Multilingual Websites
So, what are you supposed to do if your values are less than stellar? Let’s talk about that now.
From here on out, we’ll go over step-by-step explanations on how to improve each Core Web Vital metric on your multilingual site. We will cover how to do it manually, along with an easy way to do this for WordPress users with the help of the WP Rocket plugin.
WP Rocket makes it super easy for people without technical knowledge to implement sophisticated performance improvements quickly and effortlessly. It is easily one of the most powerful and beginner-friendly caching plugins.
General Performance Improvements
Let’s start off with some general tips on how to make sure your website loads fast:
- Choose a good hosting company – The quality of the hosting provider your website is placed on has a lot of influence on how fast it loads. Make sure you go with a reputable provider by reading some speed comparisons and user reviews before making a decision.
- Keep your site updated – If your website is based on a content management system like WordPress, make sure to keep everything up to date. That means the software itself, as well as any plugins, themes, the server’s PHP version, and everything else belonging to the site. Only that way can you benefit from new speed improvements.
- Use fewer plugins – At the same time, try not to go overboard with the things you add to your site. Every plugin and extension comes with extra code, which can potentially slow down your site. So, keep what you have on your site to the absolute minimum.
- Go for high-quality components – For the extensions that do get a place on your website, make sure they are of high quality and optimized for performance, such as Weglot.
The above tips will lay a good foundation for generally fast performance before you get to more specific measures.
Fixing Largest Contentful Paint
There are two main avenues for improving the Largest Contentful Paint: optimizing page loading speed in general (as covered above) and making the delivery of your LCP elements faster.
What’s your LCP element? PageSpeed Insights will tell you that under Diagnostics.
Implement Caching and Compression
Caching and compression are two fundamental techniques for improving site performance. The first means storing rendered page data to make it faster to access for visitors. It is especially effective when using WordPress to power your website.
Why?
On a CMS like WordPress, pages are usually created dynamically from PHP code and content pulled from a database. The server turns it into HTML documents and sends them to the browser.
Caching speeds up this process by storing pre-rendered HTML versions of your web pages on the server so you can send them directly to your visitors. This can eliminate several roundtrips per visit and make the user experience much faster and better.
Compression, on the other hand, is the same as creating zip files, only that it happens on a server instead of your home computer. It shrinks the files that make up a website so that they can download and display faster.
In order to activate both caching and compression on your server, you need to edit a file named .htaccess. It contains important directives for the functionality of your web server, and you usually find it in the root directory of your website.
You can copy and paste the following code into it to activate both the aforementioned speed optimization techniques:
Both code snippets are courtesy of GTmetrix and work for Apache servers. You can find instructions for other servers, such as NGINX, online, for example, in this tutorial at KeyCDN.
If that seems intimidating, you can achieve the same using the aforementioned WP Rocket plugin. Here, you only have to install and activate the plugin-it implements both compression and caching automatically, including for mobile devices.
Optimize Code and Code Delivery
Whatever you can do to streamline the delivery and processing of your website code will help improve Largest Contentful Paint on your multilingual website. Let’s go over some good options for that:
- Removing unnecessary markup – If you have a lot of redundant JavaScript and CSS code on your site, you can improve performance by eliminating everything that’s not strictly necessary.
- Minification – This means removing whitespace and comments from website files. Doing so shrinks the file size, making them faster to download and process.
- CSS and JavaScript optimization – Here, you set up your website files so that they don’t block the rest of your website from loading. It’s the infamous “eliminate render-blocking resources” message you might receive from speed testing tools. Two popular tools for that are the defer and async attributes. Respectively, they move JavaScript execution to the end of the loading queue and tell the browser to download files in the background and only execute them once available.
For minification by hand, you can use tools like Minifier or Grunt. Optimizing CSS and JavaScript usually means a lot of analysis of what is blocking your pages from loading. Speed testing tools will let you know about problematic scripts.
After that, it’s up to you to manually add defer and async tags to them. They look like this:
You might also split up some code to only load what’s essential at first. More on that below when we talk about optimizing INP.
If you want to automate these processes, WP Rocket can minify code, remove unused CSS, defer JavaScript, and load it asynchronously by simply ticking a few boxes.
Optimize Images
Image optimization means reducing the size of visuals on your website without compromising quality. This is a great general performance improvement and particularly helps improve Largest Contentful Paint since images often end up being the LCP elements.
How can you optimize images on your site?
- Translate images – Translating your website isn’t limited to just the text. You’ll also have to convert text in your images and/or use more culturally appropriate imagery. Thankfully, Weglot has you covered in this area.
- Compression – Just like text files, you can strip away unnecessary data from images to shrink them in size.
- Use modern formats – Images in next generation formats, such as WebP or AVIF, are much smaller than JPG or PNG while looking just as good.
- Size visuals correctly – Display images that are just as large as they appear on your website. Otherwise, you are making your visitors load unnecessary data.
- Switch on lazy loading – This technique only loads images that are actually visible in the browser during the initial load and fetches those further down the page as visitors scroll. This also prevents wasting bandwidth on non-LCP images so the important ones can load faster.
Available Tools
You can use tools like TinyPNG to compress images and convert them to other file formats. Something like Image Resizer can also cut them to any dimensions you need. You also find options for that in WordPress under Settings > Media.
Plus, if you are running the latest version of WordPress (or anything later than version 5.4), your site should have lazy loading enabled by default.
If you want an automatic solution, there is Imagify. It’s an easy image optimizer plugin that works well together with WP Rocket. It can automatically process your images to make them lighter while balancing quality and performance. The plugin converts your visuals into WebP and Avif, resizes large images, and displays the optimized versions on your WordPress website automatically.
In addition, WP Rocket offers lazy loading not just for images but also for CSS backgrounds and embedded media, like videos. Plus, you can exclude media from being lazy-loaded when it makes sense.
Use a CDN
A content delivery network (CDN) consists of a number of interconnected computers located in different areas of the world that contain your website files. Its purpose is to deliver them to your visitors from the location closest to them to do it as fast as possible. This is especially important for multilingual websites with an international audience.
For that reason, Weglot automatically sets up a CDN so you can deliver your translated content quickly all over the world. If you are not a Weglot user, you usually need to sign up for a CDN and configure it for your site. This is different from provider to provider; here are example instructions.
If you want some help, WP Rocket has dedicated add-ons for Sucuri and Cloudflare, two popular solutions. They make it faster and easier to configure these content delivery networks for your site.
You can also enable other networks in the CDN settings by providing the CNAME of your provider.
Finally, WP Rocket also has its own network, called RocketCDN, that you can configure automatically from inside the plugin. In addition, WP Rocket’s ability to shrink code files can reduce CDN traffic and costs.
Addressing Cumulative Layout Shift
Next on our list of Core Web Vitals to improve on your multilingual website is CLS. Here’s how you can make sure you succeed in that department.
Include Image Size Attributes
One of the biggest factors in bad CLS scores is often images without defined height and width attributes.
If you don’t state how large an image is going to be on the final page, the browser can’t reserve the right amount of space for it. As a consequence, when the actual size is different from the placeholder, the image suddenly pops into existence, pushing down everything below it. This can especially happen for lazy-loaded media, which doesn’t show when loading the page for the first time.
So, the first rule of optimizing CLS is to add height and width definitions to your images. How do you do that?
In pure HTML, it simply looks like this:
If you are using the WordPress block editor, it should set dimensions automatically, but you can also define specific sizes while creating your content.
Additionally, WP Rocket has an option to add missing width and height declarations to your media files in case you missed some.
Reserve Space for Embeds, Iframes, and Ad Slots
The same rule as above also applies to dynamic content like embedded elements or ads. They, too, need height and width definitions to avoid moving around the rest of the page layout.
The problem here is that you can't always control how large these elements are going to be because they often come from third-party sources. In that case, it’s good practice to at least make an estimate to reserve the space. Even if the final element ends up larger, the shift won’t be as pronounced, leading to a lower CLS score.
In WordPress, the editor also automatically adds width and height to embedded content. In addition, as mentioned, WP Rocket comes with an option to lazy load your embedded media. This automatically reserves the needed space for when they load.
Optimize Web Font Delivery
Fonts, too, can cause layout shifts, especially when you are using custom fonts on your website. The two most common problems here are:
- Flash of Unstyled Text (FOUT) – This means that a visitor first sees your website text in a standard font that changes the moment the font file loads, potentially leading to layout movement.
- Flash of Invisible Text (FOIT) – Here, you can’t see any text at all at first. It only appears together with the web font file.
You can avoid these issues through the following strategies:
- Use modern font formats – Like images, fonts come in larger and smaller file formats. The fastest to load are usually WOFF or WOFF2.
- Define a similar fallback font – Putting a fallback font in place that is very similar to your actual typeface reduces page movement when the switch happens. You can use Font Style Matcher to find good combinations.
- Preload fonts – Prioritize web font files by placing them early in the document and adding rel=preload to the call. That way, the browser will load them more quickly.
If you are using WP Rocket, the plugin comes with an option to preload font files. All you have to do is input the path where they are located.
By the way, part of font optimization for a multilingual website is also to use fonts that are compatible with different alphabets. This is especially true if you offer RTL languages (written from right to left) on your site.
Deal With Dynamic Content
By dynamic content, we mean elements that appear after a page has finished loading. Examples of that include lazy-loaded images, banners, forms, etc.
To keep their impact on your CLS score low, follow the same advice as above:
- Define their containers beforehand and give them fixed dimensions.
- Connect their appearance with a user interaction. That way, you avoid a CLS penalty.
By the way, Weglot is fully capable of translating dynamic content. So, you don’t have to worry about your audience members not understanding it.
Working On Interaction to Next Paint
Finally, let’s talk about how you can make sure your INP is on point.
Optimize JavaScript
JavaScript is usually one of the main factors when it comes to problems with Interaction to Next Paint, especially so-called “long tasks”. Those are JavaScript tasks that take longer than 50ms to complete and they can block the browser’s ability to process user interactions on the page. In addition, having a lot of scripts on your site in general can impede the responsiveness of pages.
We’ve already talked about how you can optimize JavaScript in the LCP section. For INP, it is specifically important that you deal with long tasks on your site. If those exist, you can find them in the Chrome developer tools. They are marked with small red triangles.
See if you can split them up into smaller chunks that can load consecutively without permanently blocking the browser’s main thread. You can find detailed information on this in this web.dev tutorial. Minification, deferring, asyncing, and removing unnecessary code also help to keep the browser responsive to user interaction.
If you are using WP Rocket, the plugin allows you to make detailed configurations for what JavaScript files you want to delay loading and which you don’t.
Reduce Unused CSS
Everything that applies to JavaScript is also valid for CSS. Downloading and processing style sheets can keep the browser busy and delay its reaction to user input.
Here, you can also use speed testing tools to find unused CSS. In addition, you can split your style sheets to load crucial CSS first or inline it.
As mentioned, WP Rocket has options to automatically remove unused CSS.
Add Lazy Loading
We already talked about lazy loading for image optimization. It can also have a positive impact on INP as it frees up browser resources to react to user input. Heed the instructions above to implement it.
By the way, if you are running into problems with translating lazy-loaded images, Weglot, by default, translates image URLs added to data-src or srcset attributes. If your lazy-loading uses custom attributes, Weglot will not translate them out of the box—you’ll have to add a PHP filter, which is specifically for WordPress integrations.
If you are using the Weglot JavaScript integration and/or still cannot translate your images, contact support for more information.
Improve Core Web Vitals on Your Multi-Language Website Today!
Core Web Vitals are an important quality indicator for the usability of your multilingual website. Not only do visitors care about this topic, Core Web Vitals also impact search rankings. For that reason, optimizing your site for them is definitely something you should take seriously.
As you have probably seen above, this isn’t all that difficult. It’s mostly about making sure your web pages load fast and stay stable and responsive during that time. There are some key measures you can take for that, which we have covered above in detail.
If you feel like wrangling with code and website files is beyond your capabilities, you can also opt for a plugin solution like WP Rocket. It can optimize your site for you without the need for development or technical skills and does a lot of the work by default.
Time to open your website to the world
Get started for free and have a multilingual website up and running in minutes.
Ready to display your website in multiple languages?
Try Weglot on your website for free (no credit card required).
Nick Schäferhoff
