Performance and user experience are the key elements of web development today. If a website is slow or has a poor user experience, it will struggle to get organic traffic and experience a low conversion rate.
One of the most critical changes to the Google search algorithm was introduced in May 2020 through Core Web Vitals—a set of metrics that measure the performance and user experience of websites. Core Web Vitals were not considered for Google search results ranking at first. But by mid-2021, Google started considering them as ranking factors as part of the page experience update.
And one of the major challenges web admins face today is ensuring good Core Web Vitals scores without sacrificing features and functionalities. In this article, we will explore Core Web Vitals in detail, with step-by-step guides on fixing Core Web Vitals issues to speed up WordPress sites.
A. What are Core Web Vitals?
Core Web Vitals are page experience signals that evaluate the user experience and performance of a web page. These signals measure how fast your website loads, how fast users can interact with your website, how fast your website responds, and how easy it is for users to navigate through your website.
In simple words, Core Web Vitals are metrics that tell you how well your website meets the current website performance and user experience standards. If you improve your website’s overall appearance, performance, and user experience, your Core Web Vitals scores will also improve.
B. Why are Core Web Vitals Important?
Core Web Vitals are important for two reasons: first, they indicate how good your website is. A poor Core Web Vitals score means users are not having a good experience when visiting your website, leading to a higher bounce rate and missed opportunities.
Second, Core Web Vitals are now Google ranking factors. If your score is low, your website won’t rank high on Google. Your SEO efforts might not yield the best results, and you’ll lose potential organic traffic.
C. How do Google Core Web Vitals affect SEO?
If your website and your competitor’s website perform equally well on all ranking factors, but one has better Core Web Vitals, then that website will rank higher on search engines. Google considers Core Web Vitals as ranking factors since they indicate how good or bad the user experience is. When a page has a poor user experience, users are likely to go back to Google and visit another web page from the search results.
D. How to check your Core Web Vitals score?
You can run Core Web Vitals tests in three ways.
● Chrome Developer Tools
Chrome browser comes with a built-in Core Web Vitals checker that you can access through Chrome Developer Tools.
If you’re using the Chrome browser, simply right-click on the page you want to check and select ‘Inspect’ from the menu. It will open Chrome Developer Tools on the right side of your screen. Alternatively, click on the three dots at the top right corner and select ‘Developer Tools’ from ‘More Tools’ to open Chrome Developer Tools.
To run a Google Core Web Vitals test of the page, select ‘Lighthouse’ from the tabs at the top of the Developer Tools and click on ‘Generate Report.’
The tool will audit the web page and return your scores with detailed diagnostics and suggestions to fix Core Web Vitals issues.
● Google Lighthouse Chrome Extension
If you want even easier access to the Core Web Vitals report, you can install the Core Web Vitals chrome extension, Lighthouse, from the chrome web store. Once you have installed the extension, generating a Core Web Vitals report is very easy—just click on the Lighthouse icon at the top right corner of your browser and click on ‘Generate Report.’ You’ll get your detailed report in a few seconds.
● Google Page Speed Insights
Google also has a separate website to run Core Web Vitals checks, just in case you are not using the Chrome browser. You can go to the Page Speed Insights website and enter your website URL to check your Core Web Vitals score.
E. Core Web Vitals Metrics in detail
Core Web Vitals has several equally important performance and user experience metrics. Understanding each metric will help you evaluate the issues better and increase your WordPress site speed in the best way possible.
First Contentful Paint
The First Contentful Paint or FCP in Core Web Vitals is the time taken to process and render any part of the web page content on the screen. When some content is painted on the screen, it reassures users that something is happening and the page will load soon.
Ideally, the FCP of your website should be 1.8 seconds or less. If it takes longer than 1.8 seconds, users will have a bad experience, and you should optimize your FCP to improve WordPress site speed.
The Largest Contentful Paint
Largest Contentful Paint or LCP in Core Web Vitals is the time taken to load and render the largest content element on the screen, ready for interaction, from the moment the page starts loading. The largest content element on the web page is usually the main content and what users are visiting the web page for. So LCP tells you if users are getting the information they are looking for without delay.
Google recommends an LCP of 2.5 seconds or less. Note that ‘content’ here refers to images and text blocks that are visible within the viewport.
First Input Delay
The First Input Delay or FID score in Core Web Vitals measures how responsive your website is—it tells you the time between the user’s first interaction on the web page and when the browser starts processing event handlers in response to that interaction.
If your First Input Delay is more than 100 milliseconds, users are experiencing a delay when they interact with your website.
Time To Interactive
Time To Interactive in Core Web Vitals measures the time your website takes to be fully interactive—a website is considered fully interactive when the largest contentful paint has loaded, event handlers are registered, and the page responds to user interactions within 50 milliseconds.
For optimal experience, the TTI should be 3.8 seconds or less. If you have a low FCP and FID but your Time To Interactive is high, it indicates that your speed improvements are coming at the cost of interactivity.
Total Blocking Time
Browsers block user interactions when a task on the main thread is loading. Total Blocking Time in Core Web Vitals measures the amount of time for which the browser blocks the main thread to prevent input responsiveness. Users notice the delay when the task takes more than 50 milliseconds to load, so only the blocking time above 50 milliseconds is considered in Total Blocking Time.
In other words, Total Blocking Time is the amount of time between First Contentful Paint and Time To Interactive that’s above 50 milliseconds.
Cumulative Layout Shift
Cumulative Layout Shift or CLS in Core Web Vitals is a metric that quantifies the visual stability of your website. If visible elements of your website have different positions in rendered frames, it is considered a layout shift. If the layout shifts too much, your CLS score will be high.
CLS scores under 0.1 are good, but your goal should be to make it zero. When elements of your website shift their position, users may lose track of what they are reading or watching, resulting in a poor user experience.
F. How to fix WordPress Core Web Vitals Issues?
How to reduce server response time in WordPress?
If your Google Core Web Vitals diagnostics tell you that you have a long server response time, it means that your server is slowing down your website. The causes can range from unoptimized server requests to an overloaded server. You can remove server-heavy plugins, minify scripts, and enable caching to reduce server response time in WordPress.
Uninstall unnecessary WordPress plugins.
WordPress is highly flexible, thanks to thousands of ready-to-use plugins and themes. But if you use a heavy theme or many plugins to make your website rich in features and functionalities, it can impact your server response time and make your WordPress slow.
You can uninstall unnecessary plugins from your dashboard and use a fast WordPress theme like Neve or Astra to improve your server response time. Keeping it light will enhance the website loading speed.
Configure caching and minify scripts.
Caching is an efficient method to improve your server response time. When you enable caching on your WordPress website, static resources like images are stored and served from the cache folder for quicker access. It reduces the load on the server and improves the website load speed significantly.
You can also compress and minify CSS and JS scripts to reduce initial server response time in WordPress. Minification reduces the size of the code by removing long and redundant variables, comments, and unwanted characters.
To enable caching and minify your scripts on your WordPress website, you can install plugins like Litespeed Cache, W3 Total Cache, and WP Fastest Cache. Most WordPress browser caching plugins can minify and compress JavaScript and CSS files.
Use a CDN.
A Content Delivery Network (CDN) is a framework of geographically spread out proxy servers and their data centers. CDNs help users access content from the closest proxy server, improving the website loading time.
If you have a global audience or your server is far away from your target market, you can use a CDN to speed up your website. Minimizing the distance between your website visitors and your servers will help you avoid latency issues and improve WordPress server response time.
Choose a better web hosting provider.
Migrating your website to a new hosting service is a tedious task, but if the solutions mentioned above don’t fix the issue, the problem could be with your server itself.
If you are using a shared server, one of the websites hosted on the same server could be exhausting the server resources, so you can choose a dedicated server instead. Going for a fast and reliable hosting service will help you improve your server response time and offer a better experience to your users.
How to eliminate render-blocking resources in WordPress?
Render-blocking resources are static resources like CSS and JavaScript files that are critical in rendering a web page. When a browser encounters a CSS or JavaScript file, it pauses reading the rest of the code until the CSS or JavaScript file is processed. This pause leads to a delay in content visibility.
Many of the render-blocking resources may not be necessary for users to see the top of the web page, so you can either async or defer such resources to improve the user experience.
Here’s how you can eliminate render-blocking resources in WordPress using WordPress optimization plugins Autoptimize and Async JavaScript:
Once you have installed and activated these plugins, go to Settings→Async JavaScript and check the ‘Enable Async JavaScript’ box in the’ Settings’ tab.
In the ‘Quick Settings’ section of the same tab, select either ‘Apply Async’ or ‘Apply Defer’ as per your preference. Scroll down to the bottom and click on ‘Save Settings.’
Now, check your website and see if everything is working properly. If anything has gone wrong, you can try deferring JavaScript or excluding jQuery.
Once you’ve completed the above steps, go to Settings→Autoptimize and check the ‘Optimize JavaScript Code’ and ‘Optimize CSS code’ boxes.
How to avoid long main thread tasks in WordPress?
Long main thread tasks have a high correlation with your website’s CSS and JavaScript files. If any task on the main thread takes longer than 50 ms, it is identified as a long task as it can delay the first paint and interactivity.
To minimize main thread work in WordPress, you can defer the long CSS and JavaScript tasks and optimize them, as explained in the previous section[1] . You can also remove unnecessary or unused third-party codes, as explained below.
How to remove unused CSS and JavaScript in WordPress?
In Core Web Vitals diagnostics, you can see the list of all the unused CSS and JS files. To remove unused JavaScript in WordPress, you can install the Asset Cleanup plugin from the WordPress plugin library. The plugin can also remove unused CSS in WordPress.
Once you’ve installed it, go to Pages/Posts on your WordPress dashboard and edit the page or post you want to remove unused CSS and JavaScript from. When you scroll down to the bottom, you can see all the CSS and JS files that are being loaded on that page, listed by the Asset Cleanup plugin. You can now simply disable all the unused resources there.
Here’s an example of disabling unused CSS and JS files associated with the Sassy Social Share plugin:
You can use the given additional options to disable specific scripts from all pages or posts. Once you’ve removed unused scripts, click on ‘Update’ at the top right corner to save the settings.
If you don’t want to remove any CSS from your website, you can defer unused CSS in WordPress using the Async JavaScript plugin.
How to make fewer HTTP requests in WordPress?
If you use a heavy WordPress theme or use many plugins, the browser will have to make several server requests to load all the resources, slowing down your website in the process. If this problem exists in most of your website pages, your WordPress theme or plugins could be the culprits. You can start fixing this by removing unnecessary plugins and choosing a fast WordPress theme. Unused CSS and JavaScript files can also cause this issue, but you can install the Asset Cleanup plugin and follow the steps mentioned above to fix this.
But if only a few pages of your website have this problem, you may be using too many images and other resources on those pages. If possible, you can remove some of the unnecessary images and scripts or lazy load them using a plugin.
How to avoid chaining critical requests in WordPress?
The ‘avoid chaining critical requests’ in Core Web Vitals simply means that your critical WordPress resources like CSS, JS, and images are not well-optimized for performance. Here are a few things you can do to fix this issue on WordPress:
Reduce the number of critical resources.
If you go through the Core Web Vitals report, you can see the list of chained critical requests. Chances are, some of those resources are not critical for above-the-fold content, so you can defer them using the Async JavaScript plugin, as explained earlier.
Combine CSS and JavaScript files.
Combining CSS and JavaScript files not only reduces the length of the chain but also reduces the number of server requests made. Here’s how you can combine CSS and JS using Autoptimize plugin:
Go to Settings→Autoptimize, and check the boxes corresponding to ‘Aggregate JS files’ and ‘Aggregate CSS files.’
How to remove duplicate modules in JavaScript bundles in WordPress?
Generally, JavaScript bundles are built by importing codes from different libraries and packages. When two plugins on your website use the same library or package, it results in duplicate JavaScript bundles. The browser will download, parse, and execute them again, which can be avoided if there is no duplication.
Unfortunately, there is no direct solution to this issue. You can check the duplicate JavaScript bundles in the Core Web Vitals report and remove one of the plugins/resources causing the issue. But using a single module for different JS bundles needs customizations to the backend code.
How to reduce JavaScript execution time in WordPress?
A long JavaScript execution time is usually the result of unoptimized JavaScript files. When you optimize your JS code and remove unused JS files, it reduces your JavaScript execution time. It’ll also resolve some other JavaScript-related issues you’ll see on Core Web Vitals diagnostics. Here’s how you can reduce the JavaScript execution time:
Remove unused JavaScript
WordPress plugin-related JavaScript files can load and parse even on the pages that do not need those files, so removing such JS files can make a noticeable difference in JavaScript execution time. You can jump to this section[1] to see how to remove unused JavaScript in WordPress.
Minify and compress JavaScript
Minifying and compressing JavaScript files are usually done through cache plugins. You can check your cache plugin settings to see if it offers JS minification and compression.
If you use the Autoptimize plugin, you can go to Settings→Autoptimize and check the ‘Optimize JavaScript Code’ box under ‘JavaScript Options’ to minify and compress your JS files. You can see a detailed guide below.
How to minify CSS and JavaScript in WordPress?
CSS or JS minification refers to the process of removing unnecessary lines of code, comments, and redundant data from CSS and JS resources without affecting how they are processed by the browser.
CSS is generally considered render-blocking, which means that browsers don’t render content until CSS is downloaded, parsed, and executed. This makes reducing the size of CSS files critical in improving the Core Web Vitals in WordPress.
Here’s how you can minify CSS and JavaScript with the Autoptimize WordPress plugin:
Once you have installed the Autoptimize plugin, go to Settings→Autoptimize. Check the ‘Optimize JavaScript Code’ box under the ‘JavaScript Options’ section. This will optimize and minify your JS files. You can check the ‘Aggregate JS files’ box to combine your JS files into one.
To minify CSS files, check the ‘Optimize CSS code’ box under the ‘CSS Options’ section. If you check the ‘Aggregate CSS files’ box, it will combine all your CSS files, making them load faster.
Almost all WordPress performance plugins come with CSS and JS minification features. If you already have a cache or performance plugin installed, you don’t need to install the Autoptimize plugin. Just go to your plugin settings and enable CSS and JS optimization and minification.
How to serve assets with an efficient cache policy in WordPress?
Caching is one of the most critical website performance improvement technologies. When you enable caching, static resources of your website are served from the cache folder so that they can be accessed more quickly. An efficient cache policy will help you significantly improve your WordPress performance.
You can use a caching plugin like WP Fastest Cache, W3 Total Cache, or WP Rocket to enable caching on your website. Here’s how you can enable caching with the WP Fastest Cache plugin:
Once you’ve installed the plugin, go to WP Fastest Cache in the left bar. In the ‘Settings’ tab, check the ‘Cache System,’ ‘Preload,’ and ‘Browser Caching’ boxes.
The ‘Cache System’ option enables server-level caching that increases website speed for all users, while the ‘Browser Caching’ option enables browser-level caching that makes WordPress faster for repeat visitors. Checking the ‘Preload’ box will preload key requests in WordPress, increasing website load speed.
The plugin also has other WordPress optimization features. For example, you can minify and combine CSS and JS files and enable Gzip compression using this plugin.
How to avoid large layout shifts in WordPress?
Layout shifts occur when the content on the page shifts its position after becoming visible. When your WordPress layout shifts, users will lose track of what they were reading or watching, resulting in a poor user experience.
One of the most common reasons behind large layout shifts is the WordPress theme itself. If the theme is poorly coded or does not have explicit width and height parameters for images, videos, and embeds, it can cause large layout shifts. When you add width and height parameters to such elements, the browser reserves that space for those elements, eliminating layout shifts.
To fix this issue, you can try adding width and height parameters to the visible elements of your web page. Also, try preloading fonts and specifying space and size for ad slots, embeds, and iframes. If that doesn’t work, your theme or page builder can be the reason behind the layout shift.
How to serve scaled and optimized images in WordPress?
A scaled image is an image that has been sized to fit the exact dimensions your website uses it for. When you upload a large, unscaled image, the browser processes it and scales it down to proper dimensions, slowing down the website in the process. At the same time, the browser will be downloading the original image that’s large in size.
To fix this issue, check which images need to be resized in your Core Web Vitals report. Once you have the list, open your website pages that contain those images. Right-click on the image and select ‘Inspect.’ Now, when you hover over the image, it’ll show you the container size. The image should be scaled to that dimension. You can use your image editing tool or online tools like ResizeImage.net to scale your images and reupload them to WordPress. To optimize images, you can use the Autoptimize plugin. Go to settings→Autoptimize and open the ‘Images’ tab. Check the boxes corresponding to ‘Optimize Images,’ ‘Load AVIF in supported browsers,’ and ‘Lazy load images.’
When lazy loading is enabled, images are loaded only when they are in the viewport. This significantly reduces the number of initial server requests and speeds up website load time.
How to use explicit width and height for image elements in WordPress?
When you don’t specify the width and height of images, the browser allocates space for the image only after downloading the image, resulting in a layout shift. When you specify the image width and height, the browser can reserve that space for the image.
To fix this issue, you can simply add the image’s native width and height to its HTML code. For example, for an image that’s 800 pixels wide by 550 pixels tall, the HTML code will look like this:
<img width=”800″ height=”550″ src=”your-image.jpg”>
To edit the HTML code, simply select the image block in the Gutenberg editor, and select ‘Edit as HTML’ from the options.
How to avoid non-composited animations in WordPress?
Non-composited animations are animations that can be affected or triggered by JS or CSS code. It causes the browser to go through the rendering process again, resulting in an increase in main thread work, layout shifts, and visual instability while loading.
However, there is no one-click solution or plugin that can solve this issue. You can see the list of non-composited animations in your Core Web Vitals diagnostics; you can replace them with compositor-only properties to fix the problem. Also, make sure that CSS elements do not trigger page repainting.
How to use video formats for animated content in WordPress?
GIFs are no longer a collection of simple images; they’re often clips ripped from movies and videos. Since GIFs don’t use video encoding or compression techniques, their size can grow quickly with an increase in frame rate and quality, leading to long page load times. Optimizing GIFs is not an option, as compression causes huge quality loss.
Using video formats like MPEG4 or WebM for animated content can significantly reduce its size while maintaining quality. To resolve this, you can convert your existing GIF content to MPEG4 using tools like ezgif.com or FFmpeg.com and reupload them to your website. Make sure you always use video formats when uploading animated content.
How to ensure text remains visible during web font load in WordPress?
Browsers may finish downloading the text on the page before web fonts, but they cannot render the text until the web font is downloaded and ready to render. This results in the text being hidden until the web font is downloaded, usually called Flash Of Invisible Text (FOIT).
Here’s how you can fix this issue:
Asset Cleanup plugin
Install the Asset Cleanup plugin from the WordPress plugin library and activate it. Once it is activated, click on ‘Asset Cleanup’ in the left menu bar and select ‘Settings.’
In the ‘Settings’ tab, go to ‘Local Fonts’ and select ‘swap’ from the drop-down menu corresponding to ‘Apply font-display: CSS value.’
If you use Google fonts, you can do the same for ‘Google Fonts’ under the ‘Settings’ tab. This will tell the browser to display the text immediately using a system font and replace it with the web font once it is ready.
Litespeed Cache plugin
The Litespeed Cache plugin offers an easy solution to hidden text during web font load. If you use the Litespeed Cache plugin on your website, you can go to Litespeed Cache→Page Optimization and toggle the ‘Font display optimization’ settings to ‘Swap.’ This will make your website text visible during web font load.
How to enable text compression in WordPress?
Text compression reduces the file size and speeds up the website, so it directly impacts your website’s performance. Most hosting providers offer GZip compression features, so you can check your cPanel or server configuration to see if you can fix it that way.
You can solve this issue even if your host doesn’t allow you to enable compression. You can edit your .htaccess file and add the following code to enable GZip compression.
# BEGIN GZIP Compression
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# END GZIP Compression
You can edit your .htaccess using plugins like Htaccess File Editor or Rank Math SEO plugin, or log in to your cPanel and edit it there. The .htaccess file is usually located in the “/public_html” directory.
