Google’s Page Experience Update, also known as the Core Web Vitals update, focuses on measuring page health, in terms of an uninterrupted user experience. In this article, we’ll cover how you can improve the functionality of a WordPress website for effective SEO optimization. Optimizing your website is crucial when considering your page rank performance.
There’s a lot of WordPress themes and builders you can choose from to design your website, but only a few that really benefit the Core Web Vitals. We highlight the best options you can work with installing a theme or builder.
Essentially, Core Web Vitals is a set of user-centric metrics, created by Google. This update was introduced to measure page health, with attention being placed on an uninterrupted user experience. Content loading speed, interactivity and visual stability make up the set of measurements.
This update is also referred to as the Page Experience Update. The Core Web Vitals are included in the Page Experience Update, along with several signals that Google uses to allocate a Page Experience score. Page Experience is all about creating an optimal browsing experience for users.
It’s main focus is on creating a value-adding web browsing experience, on desktop and mobile. This update comes to help Google provide users with only the best search results, in relation to their search terms and phrases.
The image below illustrates what the Core Web Vitals are and what they measure:
For more information, read our previous article, What are Google Core Web Vitals?. This will help you to learn more about Core Web Vitals as a ranking factor, why they are important for Google and for user experience.
In simple terms this means that if your page offers a painless, user friendly engagement, you’ll be considered to rank higher on the search engine results page.
For Google, this update is an important one, as they are a service provider who’s area of expertise lies in establishing a comfortable web browsing experience. They constantly roll out new updates and implement new algorithms to address a variety of items that contribute to SEO health.
For the user, this update means the chances of accessing a deficient website is less likely, as Page Experience prevents websites that are not consumer-centric from ranking first. This update reflects how a site performs for the user, so a quality experience is reassured.
It’s important to remember that a website should be optimized for speed and performance, taking into consideration the standard of user experience. A fast website with poor user experience will negatively impact your conversion rate, page views and customer satisfaction. Improving the Page Experience will help to fix this.
Google is a service provider, whose task it is to provide a comfortable web browsing experience. The Page Experience Update will include user experience as a direct ranking signal, with the Core Web Vitals influencing rank as well.
‘Code bloating’ is the term we use in computer programming to describe code that is deemed as unnecessarily long, slow and packed with an excessive use of resources. Processing bloat code is heavy on the server and will slow your page response time down.
Choosing a theme or website builder with smaller bloat code is to your own advantage, in terms of speed and performance. Usually, a WordPress site runs slower when it uses cheap web hosting, it contains too many scripts, it has too many redirects, or it contains boat code.
Themes help you to spruce up your website. The nice thing about WordPress themes is that they come with premade icons, images, a bunch of elements and much more you can use for your website.
Wordpress is a content management system that uses a template set-up to function. This means that a WordPress website needs to have a theme installed, in order to work.
The theme you choose will impact your site’s speed. This is important to consider when optimizing for the Core Web Vitals. You’d want to stay away from themes with a lot of built-in features, because this usually amounts to bloat code.
Choosing a theme that allows you to disable features you don’t need is great, since you can improve loading time by turning off the functions that don’t contribute to your site’s functionality.
Pairing premade designs from your theme with custom designs is a great way to optimize your WordPress website. You can regulate what code you disable, remove or replace. All of this influences loading time, input delay and stability.
Using a builder, like Oxygen Builder, with your pre-designed theme gives you the benefit of flexibility and control over your site. A theme and a builder are supposed to work together to optimize your website and positively influence your page rank score.
When choosing a theme, look for:
The type of theme you use for your website design also influences the loading times and functionality of your website. The best option is to pick a theme that does not have a lot of built-in features, because this adds to the level bloat code. Rather opt for a basic theme and customize it with your builder.
To cut back on bloat code, you should choose the right theme or builder for your website. Oxygen Builder is a good builder to use when fixing code bloating.
A website builder allows you to replace all or some sections of your existing WordPress theme with your own custom designs. A builder, like Oxygen Builder, makes it easier to put together custom designs. This also helps to erase bloat code from your site, by replacing the selection with ‘lightweight’ custom code.
You don’t need a premade theme to start building a website, however, starting from scratch will take a lot of coding knowledge and a good understanding of PHP and CSS. Luckily, Oxygen Builder is an easier option to go with. It uses a visual, drag-and-drop interface and simple options panel to help you design your website.
Oxygen’s code output is clean, lightweight and free of bloat. This is why pages built with Oxygen load quickly and get excellent scores from Google PageSpeed and Lighthouse.
Unlike Elementor and Divi, two of the leading competitors, Oxygen only loads the scripts and styles you need for your design. Other builders load everything, even when you’re not using those specific motion effects, slide scripts and icon libraries.
The other benefit of Oxygen is that it contains the Bloat Eliminator feature. WordPress automatically loads various unnecessary scripts and styles, which you can easily disable in Oxygen. This results in faster loading times and site functionality.
Oxygen will work with any WordPress SEO plugin. The builder already has a built-in integration for Yoast to get SEO scores for content designed in Oxygen.
Oxygen Builder is a builder that’s free of bloat code. Since it delivers a lightweight code output, your website will load faster and help improve your page scores. The nice thing about Oxygen is that it only loads the scripts and styles you need for your page design, it doesn’t load all the code.
No matter the theme you have installed, you can follow these steps to clean up and speed up your website, with the added benefit of a positive user experience.
Google is a fully-automated search engine. They use software called "web crawlers" to explore the World Wide Web on a regular basis to find sites to add to their index. The purpose of this is to give users the best results that match their search terms. Effectively, the Page Experience Update comes to help Google provide users with only the best search results.
JavaScript is a text-based programming language. It’s used on client-side and server-side to make your website interactive. It takes the page from being static to interactive. The problem is that you could run into some troubleshooting if your JavaScript is old.
It can slow down your page loading speed if the JavaScript hasn’t been updated in a while. The easiest way to clean this up is by removing unused code, updating code and making sure it's compatible with modern browsers.
Check your hosting provider to see that you’re using the latest PHP version. This impacts page speed and loading times.
PHP is a server side scripting language and is embedded in HTML. We use it to manage dynamic content, session tracking and to keep databases. Having your PHP up to date means that the PHP is more secure and contains less bugs, meaning that scripts can be run faster and smoothly.
Get rid of unnecessary plugins and third party code. Also, make sure that your useful plugins are updated. This seems like a logical thing to do, perhaps even very simple. However, simple as the task may be, it holds a great deal of influence on improving site performance.
Using a cache and optimization plugin is beneficial for improving page speed and performance rates. WP Rocket, SG Optimizer (only for SiteGround customers), Autoptimize and WP3 Cache are some useful plugins you can install to help you optimize your website.
Optimize images and videos. Next-gen formats help load content faster, without diminishing the quality of your visuals. Some optimization plugins do this work.
Consider using a CDN (Content Delivery Network), especially if you have international traffic. This will help minimize loading delays of web page content. It works by reducing the physical distance between the server and user. So no matter from where your site serves and where your users are, slow loading times are canceled.
Following these steps will help you identify troubleshooting areas, where to optimize and which plugins to remove or deactivate on certain pages. Overall, cleaning out your website is essential for speed and functionality. Using a cache and updating your PHP are two important steps for quicker server response times.
LCP quite literally translates to the largest content part that’s within view on a page. For example, this could be the main featured image, a video element or article text. The faster this content loads, the better your LCP score will be. A healthy LCP score is 2.5 seconds or less.
You can see which elements on your page are detected as LCP if your website is set up with a Google Search Console profile. You’ll find the needed information in the Core Web Vitals report. Remember, Search Console is a field tool, so results are based on real user engagements.
Factors that affect LCP:
The easiest way to improve your LCP score is to format images to smaller file sizes or by using next-gen formats. You can also use a shortcut by breaking text into smaller paragraphs and headings to improve loading time. But if you want to see great results, optimizing CSS, web-fonts and JavaScripts will greatly benefit your website.
This is greatly beneficial when serving international audiences. A Content Delivery Network (CDN) is a network of servers distributed across many different locations. If your page is being hosted on a single server, your site will load slower for users who are far away.
If your audience is in a different country, their browsers literally have to download content from across the globe. This takes time, but a CDN will quicken the processing time. It basically brings content closer to the user’s browser.
Using a CDN is great when serving international audiences. It ensures that everyone receives the same service delivery and equal response times.
Caches minimize resource usage. They act as a memory bank from where information can be accessed by the browser. This means that the browser can spend less time re-downloading content from a web page, as it simply retrieves information from the cache.
Caches help the server to fetch information from your website quicker.
Cascading Style Sheets (CSS) is a style sheet language. You use it to describe the presentation of a document that’s written in a markup language, like HTML.
You can ensure that only the minimum amount of necessary CSS is blocking render on your by minifying CSS. Minification helps to remove unnecessary bits of code that the browser doesn’t have to read and reduces its file size.
Spacing, indentation, comments, etc., are all characters that the browser doesn’t need to read. By reducing the amount of blocking CSS, the time it takes to fully render the main content on the page will improve.
Minification helps to get rid of the code that the browser doesn’t need to read. It also reduces file sizes for faster retrieval.
JavaScript is a text-based programming language that allows you to give web pages interactive elements that engage the user. Only serve the minimal amount of needed JavaScript to users. By cutting back on blocking JavaScripts, you create faster rendering times.
JavaScripts can slow down rendering times, try to only use JavaScript where needed and erase the Scripts you don’t need.
First Input Delay refers to the time it takes for a page to respond to the user’s first input. For example, when a user clicks a button on the website, but the button doesn’t respond - that’s FID.
A good score is 100 ms and 300 ms leans in the direction of needing improvements. Depending on your web host, you can use a caching plugin (like WP Rocket) to optimize file delivery.
What causes user input delay?:
Cleaning up your code is one of the most impactful ways to improve FID. Reducing the amount of code that the server needs to retrieve, means that it can spend more time focusing on the action that the visitor is trying to perform.
Third-party code, or third-party scripts, refers to any script on a domain that’s loaded from a different domain. It’s added to a webpage with the purpose of providing functionality beyond the core function of the website. For example, social media buttons are added using third-party scripts.
You can improve the performance of third-party code by removing it if there’s no clear value-adding benefit from it or you can optimize the loading process. Lazy-load images, CND hosting, using service workers to cache scripts and preconnected origins are some actions you can consider to improve the responsiveness of third-party code.
WP Rocket is a solution for WordPress websites. It’s an optimization tool that will highlight code that’s hindering loading time and that’s impacting website performance.
Third-party code is any script or code that’s loaded from a different domain, meaning that the server needs to retrieve it. By reducing the amount of third party code, you allow the server more time to focus on the action the visitor is trying to perform.
JavaScripts is used client-side and server-side, the main function thereof is to take a website from static to interactive. Keeping your JavaScript up-to-date and removing unused code will speed up the page, giving more time for the server to focus on the actions being performed by the visitor.
When your page is running a lot of code, before the code is needed, it delays the interaction time - one of the key metrics related to how users perceive page speed. You can make sure that code is only loaded when needed by implementing code splitting.
Minifying and compressing code will also aid you in improving loading time. Gzip is the most common format used to compress data for server and client interactions.
JavaScripts ad to the interactivity of your website, but it can delay interaction time. Using GZip compression or minifying code will benefit the server response time.
A blocked main thread is a common cause of input delay. When a thread is blocked, it means an execution gets stuck while the processor works another thread. With a web worker, it is possible to run JavaScript on a background thread.
The web worker enables tasks to load, without interfering with the user interface. When up and running, the web worker can send messages to the JavaScript code that creates it, vice versa.
In simpler terms, a web worker helps the server to prioritise the code that needs loading to perform the user’s execution, without delay. Code is run in the background, but does not interfere with the current actions being performed on the page.
A web worker helps the server to prioritize the code that should be loaded. This way, code can run in the background and not interfere with the user interface.
With third-party code and plugins, make sure that what you’re showing on a specific page is really needed there. The code that’s being loaded should serve a purpose and be relevant to the page’s content.
You don’t need a “subscribe now” pop-up on every page, it interrupts the user activity and slows down the loading time of code that should take priority on the page. It sounds simple, but cleaning out pages really helps to speed up FID.
Always think about what content you’re showing on which page. It isn’t necessary to have all the possible action on all the pages, for example a “subscribe now” button does not have to be loaded on every page.
Cumulative Layout Shift (CLS) is all about page stability. It looks at how likely objects or text is to make sudden shifts or to make unwanted movements upon interaction. Content shifts usually happen when a button is clicked or if content is loaded late.
A good CLS score is 0.1, this ensures that the page user will have a good experience. A 0.25 means that your page is in need of great improvement.
To calculate your layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two render frames. Impact fraction and distance fraction are two measures that amount to the layout shift score.
What causes CLS:
Visual elements should always have dimensions allocated to them. This way the browser knows exactly how much space to allocate to the image in the document, while the imagery is still loading. This way the page layout isn’t distorted once the imagery is fully loaded.
Width and height dimensions on images and using iFrames will help specify the exact amount of space visual contents need. Pre-defining the aspect ratio for any banners, static and interactive content already makes it easier to control CLS.
Setting specific dimensions and frames for visual content helps to make sure the content knows exactly where to load and how much space it has. This means that it won’t distort a page to make space for itself when fully loaded.
If your site contains advertisements or pop-ups, make sure they know exactly where to go. You don’t want an ad to randomly appear anywhere on the page and push its content around. Setting a specified box and location for ads will combat unwanted appearances and shifts.
Set a placeholder for ads or pop-up materials, this eliminates unwanted changes to the page layout when the ad is loaded.
Embeds enables you to display web content, that’s retrieved from elsewhere, on your page. For example, YouTube videos and Google Maps.
One embed method is to employ iFrames (Inline Frames). This is an HTML document that’s embedded inside another HTML document on a website. It’s usually used to insert content, like an advertisement, from another web source into a web page.
By using iFrames, you preset enough space for embeds to load in, with a placeholder or fallback. This way, once content is done loading, it doesn’t disrupt the page layout with unwanted shifts.
iFrames allows you to insert content from another web source into your web page. With an iFrame, you preset enough space for embeds to load in.
You don’t want to insert new content over existing content. Only when it’s a wanted outcome of a user interaction. Layout shifts can happen when an UI (User Interface - buttons, icons, interactive content, etc.) pops up at the top or bottom of the viewpoint.
If you need an UI, reserve enough space for it to fit in, for example, use a placeholder. This way it doesn’t disturb the page layout when it is done loading, because it knows exactly where to go and what its sizes are.
Dynamic contents also need placeholders. You don’t want a pop-up interfering with the user experience, so you need to tell the pop-up where to go and when to load.
Optimization plugins are great tools to assist with improving the Page Experience for site visitors. Although an excessive amount of plugins negatively impact your site performance, there are a few recommended optimization plugins to install for speed and overall page performance enhancements.
In our opinion, WP Rocket is the best plugin you could use to optimize your website performance. It is easy to use and you don’t need coding knowledge or prior experience to navigate through the different functions.
The licence only costs $50 a year. With all the functions you get, this is much cheaper than competitor programs and plugins. The great thing is that you have an abundance of optimization options included in the package, making WP Rocket a solid investment.
With WP Rocket, you can generate critical CSS for every page. It can be very tedious when you have to manually set-up critical CSS. To save you time and frustration, WP Rocket automated the process. You can optimize CSS delivery in one click to resolve the “eliminate render-blocking JavaScript and CSS” warning.
The plugin is also very easy to use with a CDN. In one click, you can automatically set everything up. Not only does this save you time, but it helps to improve the user experience as well.
In addition, the program is solution-based. WP Rocket is constantly updating their services and releasing guides to help you optimize along every Google update.
Unfortunately, WP Rocket doesn’t have image optimization included. However, the company developed Imagify. You can install this plugin, in addition to WP Rocket, to optimize images.
WP Rocket is a speed optimization plugin. It will help with improving the overall speed and performance of your website. With an array of functions, this plugin will assist you to optimize your website for desktop and mobile performance.
Developed by SiteGround, SG Optimizer is designed exclusively for its WordPress hosting customers. The main purpose of this plugin is to connect the WordPress system with SiteGround’s performance services.
The benefit of using SG Optimizer is that your site loads faster, because it uses server-side caching and binaries, not file-based caching.
Keep in mind that SG Optimizer and WP Rocket cannot be used at the same time, because they perform most of the same functions. SG Optimizer officially makes WP Rocket obsolete when using SiteGround.
You can’t use SG Optimizer to generate critical CSS. When optimizing for Core Web Vitals, this is a big deal.
We suggest that you choose your optimization plugin based on the image optimization features and if you can pass all images to net-gen format. With SG Optimizer, you are able to optimize images. However the plugin is limited in other optimization areas.
Autoptimize is a free WordPress optimization plugin. Autoptimize is able to optimize HTML, CSS and JavaScrips, it can also optimize Google Fonts, remove query strings from static resources and preconnect third-party domains.
Autoptimize is free to use. However, this means you have far less optimization features than that of a paid for optimization plugin. You also need more knowledge about how website coding works if you want to use this plugin.
Autoptimize does not come with a full page cache option, it also doesn’t have free critical CSS. You have to pay for the add-on features. So, if your goal is to optimize for Core Web Vitals, this might not be the best option for you.
Autoptimize is great to use when optimizing page speed for image heavy pages. It allows you to aggregate, minify and cache scripts and styles, as well as to lazy load images.
This plugin is not the best to use for improving the SEO and user experience of your site. However, it does benefit website performance by reducing the load times and providing transparent content delivery network (CDN) integration.
W3 Cache does not have any critical CSS options. By now we know that this is not ideal when you want to optimize for Core Web Vitals.
W3 Cache is great to optimize SEO and user experience, especially for mobile. CDN integration is done easily, without interfering with the current site performance.
Next to WP Rocket, LiteSpeed is one of the better options to opt for when optimizing your website for the Core Web Vitals update.
It is relatively easy to use, but the set-up is more complex and configuration takes longer. Unlike WP Rocket that has dedicated support for free, with LiteSpeed you need to pay $40 per issue.
Other features like full page cache, image optimization, lazy loading and critical CSS are included with LiteSpeed. You just need to be prepared to spend more time working with the program.
LiteSpeed offers very similar options to WP Rocket. However, the user friendliness of this plugin is not as great. You need a little bit more knowledge to use the program and this could take you longer when optimizing your site.
Before we go any further, do a backup of your website! It’s important to always have a fallback if you need to redo a step or undo an action. When you’re minifying code or combining files, do them 1-by-1 and check on the health of your website.
Addresses to ‘reduce critical requests’
GZip compression reduces the site’s file sizes and improves LCP. Most optimization plugins do this automatically, so you don’t have to activate this yourself.
When considering ‘combine files’, the plugin takes off all the characters on the code. That’s what we call minifying. This simply means that all the unnecessary plugins are erased. Ultimately, we’re left with shorter files that will load quicker.
The benefit of combining files is that the server has less requests to process. This you do for JavaScripts, CSS and HTML.
Keep in mind that, for example, not all JavaScripts can be combined. So, go slow and have a backup ready for when something breaks in your optimization progress.
GZip compression is used to reduce file sizes and to improve LCP. Minifying code results in shorter files that load quicker.
Addresses to ‘serve static assets with an efficient cache policy’
Next, you want to set the right option for the static files that your browser keeps in its cache. The optimization plugin will also do this automatically. You just need to clean out your cache to make sure that the data it stored is relevant and won’t break your site.
Using a cache helps the server to retrieve information faster. The cache acts as a memory bank that stores information. When an action is performed by the site visitor, the server doesn’t have to redownload all the website content, but simply access the cache.
Addresses to ‘compress JavaScript files’ and ‘combine JavaScript files’
This will reduce the overall page size, improve loading time and LCP. When you run an analysis on your pages, it will highlight the areas that need fixing or cleaning up.
The less JavaScript that needs to be processed, the better for page performance.
Addresses to ‘compress CSS ’ and files‘combine CSS files’
Minifying CSS files will also positively contribute to LCP. As with step 3, speed and performance will be enhanced once unnecessary code is cleared out
CSS is used with HTML to create and format content structure. It is responsible for colors, fonts, images, etc. By minifying CSS files, LCP is improved, because unnecessary code is removed and more time is left to process valuable user actions.
Addresses to ‘minify HTML output’
Same as the previous two steps, minifying the HTML output will help your LCP score better. The less the server has to retrieve, the better for your Page Experience scores.
Minifying HTML output can decrease page render and improve loading times. This also assists the server, by giving it less information to retrieve. The overall page size is also reduced.
Addresses to ‘lazy loading’
This is one of the easiest and most effective ways to improve LCP. Keep in mind to not lazy load images that belong to above the fold. This is the first section you see on a website, lazy loading this section will decrease your LCP.
Lazy loading means to delay the load of resources or objects until they’re needed. This is done to improve speed performance.
Addresses to ‘defer render blocking JavaScript’
The main problem with Render Blocking JS is that it delays the browser from rendering important content the user came to see. Above-the-fold content is usually impacted.
Avoid loading nonessential scripts before your website is visible. This is a button you need to activate. Upon activation, the shutter speed is charged that you don’t need for the first render later.
Defer the loading of scripts that are not essential for the initial page render. Critical parts of the page should finish loading first.
Specify dimensions for images, ads, embeds and frames. This is an easy, yet highly effective way to improve your CLS. iFrames and allocated spaces for images to load in greatly benefit your page stability.
Always set placeholders and specific dimensions for your visual content to load in. This ensures no unexpected shifts happen on your page.
This directive adds to your site’s header to tell the browser which external domains to prefetch. Next to this, Domain Name System (DNS) prefetching can speed up the loading of external domains.
If you need to load third-party code, you add the domain and the server will start working with it earlier. This simply means that loading and processing time is less.
DNS prefetching means that a website’s IP address is resolved, before a user clicks on its link. This means that loading external domains can happen quicker.
Asset CleanUP is a plugin that allows you to disable plugin files in the areas where they aren’t needed. You can choose where code should be loaded and where not.
For example, if you have a live chat function, you can disable it on the home page and only load the code on the service pages where it’s needed the most. This way you can charge more plugins and not get penalized for the code that’s loading.
Asset CleanUp is a plugin that you can use to disable and enable plugin files as you need them. You can choose where to load code and where to deactivate it.
This might sound very technical, but if you let a user-friendly mindset guide you, your optimization efforts will already be well ontrack. By following these simple guidelines to improve your Page Experience scores, you’re likely to see good results without needing an expert’s level of knowledge.
For additional information about Core Web Vitals, we invite you to watch our webinar. We explain all the important need-to-knows about Core Web Vitals and how to optimize your website for efficiency and good SEO scores.
Bob Hardus and Marco Genaro Palma, both experts in SEO and web development, joined our webinar to share their industry knowledge and optimization tips. With the help from our experts, we talk you through a step-by-step process to optimize your website.
We know this may sound very technical to you, but hopefully this article helped you to gain some knowledge you can use when optimizing your web pages. We’ve covered the Core Web Vitals, what they are and what they do, as well as how you can improve your scores.
When designing your WordPress website, it’s greatly important to choose the right theme and builder for optimal optimization. Stay away from bloat code. You also don’t want to use excessive plugins, rather stick to the main essentials your website needs in order to deliver a value-adding experience to your visitors. Following the steps we mentioned will already greatly improve your website’s speed and performance stability. Optimize images, eliminate unnecessary code and update your PHP!
You don’t need a lot of coding knowledge to have an SEO-friendly website.
