{"id":6724,"date":"2021-09-20T12:55:00","date_gmt":"2021-09-20T12:55:00","guid":{"rendered":"https:\/\/www.fastcomet.com\/blog\/?p=6724"},"modified":"2022-06-10T08:22:57","modified_gmt":"2022-06-10T08:22:57","slug":"core-web-vitals","status":"publish","type":"post","link":"https:\/\/www.fastcomet.com\/blog\/core-web-vitals","title":{"rendered":"Core Web Vitals: A Complete Guide for Improved SEO"},"content":{"rendered":"\n<p class=\"has-drop-cap\" id=\"h-when-you-search-for-core-web-vitals-on-google-trends-you-will-find-out-that-the-term-wasn-t-around-before-spring-2021-interest-suddenly-skyrocketed-and-people-are-still-looking-for-more-helpful-information-about-core-web-vitals-to-this-day-here-is-the-reason-back-in-may-google-announced-that-core-web-vitals-would-soon-have-a-significant-effect-on-how-your-website-ranks-in-online-searches\">When you search for \u201ccore web vitals\u201d on Google Trends, you will find out that the term wasn\u2019t around before Spring 2021. Interest suddenly skyrocketed, and people are still looking for more helpful information about Core Web Vitals to this day. Here is the reason \u2014 back in May, Google announced that Core Web Vitals would soon have a significant effect on how your website ranks in online searches.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>When Google first talked about the upcoming changes in their core algorithms, they stated that the effects won\u2019t be felt until next year. The search engine giant promised to provide everyone with a six-month warning, and they kept that promise by delivering that warning in November 2020.<\/p>\n\n\n\n<p>Today, we will help you figure out what Core Web Vitals are and how we can use them to our advantage.<\/p>\n\n\n\n<p><strong>Table of Contents: <\/strong><\/p>\n\n\n\n<ul class=\"nav-list wp-block-list\"><li><a href=\"#h-what-are-core-web-vitals\">What are Core Web Vitals?<\/a><\/li><li><a href=\"#h-largest-contentful-paint-lcp\">Largest Contentful Paint (LCP)<\/a><\/li><li><a href=\"#h-cumulative-layout-shift-cls\">Cumulative Layout Shift (CLS)<\/a><\/li><li><a href=\"#h-first-input-delay-fid\">First Input Delay (FID)<\/a><\/li><li><a href=\"#h-other-performance-metrics\">Other Performance Metrics<\/a><\/li><li><a href=\"#h-how-to-measure-core-web-vitals\">How to Measure Core Web Vitals<\/a><\/li><li><a href=\"#h-why-all-this-matters-for-your-website\">Why all this Matters for Your Website<\/a><\/li><li><a href=\"#h-how-to-improve-core-web-vitals-on-wordpress\">How to Improve Core Web Vitals on WordPress<\/a><\/li><li><a href=\"#h-google-s-visual-indicators-for-good-ux\">Google\u2019s Visual Indicators for Good UX<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"h3 wp-block-heading\" id=\"h-what-are-core-web-vitals\">What are Core Web Vitals?<\/h2>\n\n\n\n<p>Google\u2019s Core Web Vitals (CWV) initiative provides streamlined guidelines that promote a quality user experience on the World Wide Web. Core Web Vitals are a set of standardized metrics from Google with the purpose of helping developers to understand better how users experience a web page. Core Web Vitals may be created for developers, but these tools can also be used by all website owners mainly because they break down the user\u2019s real-world experience on a web page.<\/p>\n\n\n\n<p>Back in November 2020, Google Search Central tweeted that page experience ranking for Google Search will launch in May 2021:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">We&#39;re announcing that page experience ranking signals for Google Search will launch in May 2021. This will combine Core Web Vitals and previous UX-related signals.<br><br>Learn more: <a href=\"https:\/\/t.co\/OrrR8LDl1a\">https:\/\/t.co\/OrrR8LDl1a<\/a><\/p>&mdash; Google Search Central (@googlesearchc) <a href=\"https:\/\/twitter.com\/googlesearchc\/status\/1326192937164705797?ref_src=twsrc%5Etfw\">November 10, 2020<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>Additionally, on April 19, 2021, <a href=\"https:\/\/developers.google.com\/search\/blog\/2021\/04\/more-details-page-experience\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google announced<\/a> that the Page Experience ranking factor would roll out gradually, starting in Mid-June 2021.<\/p>\n\n\n\n<p>Core Web Vitals identify user experience (UX) through generating a metric for three main areas of UX, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Page loading performance;<\/li><li>Ease of interaction;<\/li><li>Visual stability of a page from the user\u2019s perspective.&nbsp;<\/li><\/ul>\n\n\n\n<p>All these metrics provide their specific perspective on different elements that have an impact on how users engage and interact with a website. Yes, developers need to think about the user experience from a holistic perspective. Still, the above-mentioned independent metrics help with breaking down the different variables into smaller pieces giving site owners the ability to identify and fix technical issues across their site.&nbsp;<\/p>\n\n\n\n<p>Keep in mind that those metrics do not tell the whole story regarding the user experience on a website. Each metric can be stitched together and help developers troubleshoot in an efficient, methodical way.&nbsp;<\/p>\n\n\n\n<p>Let us go ahead and take a look at the main metrics included in Core Web Vitals that will help you improve your website(s) right away.<\/p>\n\n\n\n<h2 class=\"h3 wp-block-heading\" id=\"h-largest-contentful-paint-lcp\">Largest Contentful Paint (LCP)<\/h2>\n\n\n\n<p>Largest Contentful Paint is a Core Web Vitals metric that website owners can use to assess UX and check whether a user would find a web page useful based on the render time of the largest blocks visible to the audience.<\/p>\n\n\n\n<p>As a website owner, you need pages on your site to load as fast as possible in order to create an enjoyable user experience. Load time is a critical factor for the positive user experience of your visitors. Furthermore, a page that loads quickly is more likely to rank high on Google, which is something every website owner aims for. Additionally, short load times have proven to impact engagement and conversion rates, especially when compared with slow loading pages.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-why-is-lcp-measured\">Why is LCP Measured?<\/h3>\n\n\n\n<p>Largest Contentful Paint has been chosen as a critical metric for the Core Web Vitals score primarily because it accurately measures how fast a webpage can be used.<\/p>\n\n\n\n<p>Furthermore, LCP is easy to measure and optimize for.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-what-does-lcp-measure\">What Does LCP Measure?<\/h3>\n\n\n\n<p>Largest Contentful Paint measures the time it takes for different content blocks to load within the user viewport (current screen). The LCP metric only tells the website owner how quickly content sections render on the visible screen, and nothing below the fold is considered.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Images;<\/li><li>Video poster images;<\/li><li>Background images;<\/li><li>Block-level text.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/lcp-stats.jpg\" alt=\"LCP Stats\" class=\"wp-image-6743\" width=\"1024\" height=\"200\" srcset=\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/lcp-stats.jpg 1024w, https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/lcp-stats-300x59.jpg 300w, https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/lcp-stats-768x150.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>As a website owner, your aim should be at LCP within 2.5 seconds of when a web page starts loading.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-how-lcp-handles-images-served-from-another-domain\">How LCP Handles Images Served from Another Domain<\/h3>\n\n\n\n<p>Images served from another domain, like from a CDN, are generally not counted in the Largest Contentful Paint calculation. Publishers who want to have those resources be a part of the calculation need to set what\u2019s called a Timing-Allow-Origin header.<\/p>\n\n\n\n<p>Adding this header to your website can be tricky because if you use a wildcard (*) in the configuration, it could open your site up to hacking events. So, to do it properly, you would have to add a domain that\u2019s specific to Google\u2019s crawler to whitelist it so that it can see the timing information from your CDN.<\/p>\n\n\n\n<p>So, resources (like images) loaded from another domain (like from a CDN) will not be counted as part of the LCP calculation.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-how-to-get-the-lcp-score\">How to Get the LCP Score<\/h3>\n\n\n\n<p>There are two types of scoring tools. The first type is called Field Tools, and the second one is called Lab Tools.<\/p>\n\n\n\n<p>Field tools are actual measurements of a site.<\/p>\n\n\n\n<p>Lab tools give a virtual score based on a simulated crawl using algorithms that approximate Internet conditions that a typical user on a mobile phone might encounter.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-field-tools-for-lcp-score\">Field Tools for LCP Score<\/h4>\n\n\n\n<p>Google lists three field tools:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?hl=bg\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">PageSpeed Insights<\/a>;<\/li><li><a href=\"https:\/\/search.google.com\/search-console\/about\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Search Console<\/a> (<a href=\"https:\/\/support.google.com\/webmasters\/answer\/9205520?hl=en\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Core Web Vitals report<\/a>);<\/li><li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Chrome User Experience Report<\/a>;<\/li><\/ul>\n\n\n\n<p>The last one, Chrome User Experience Report, requires a Google account and a Google Cloud Project. The first two are more straightforward.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-lab-tools-for-lcp-score\">Lab Tools for LCP Score<\/h4>\n\n\n\n<p>Lab measurements are simulated scores.<\/p>\n\n\n\n<p>Google recommends the following tools:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Chrome DevTools<\/a>;<\/li><li><a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lighthouse<\/a>;<\/li><li><a href=\"https:\/\/webpagetest.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WebPageTest<\/a>.<\/li><\/ul>\n\n\n\n<p>Google provides the first two tools. A third party provides the third one.<\/p>\n\n\n\n<p>We will cover scoring tools in more detail later in this post.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-how-to-optimize-for-largest-contentful-paint\">How to Optimize for Largest Contentful Paint<\/h3>\n\n\n\n<p>There are three main areas to optimize (plus one more for JavaScript Frameworks):<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Slow servers;<\/li><li>Render-blocking JavaScript and CSS;<\/li><li>Slow resource load times<\/li><\/ul>\n\n\n\n<p>A slow server can be an issue with DDOS levels of hacking and scraper traffic on a shared or VPS host. You may find relief by installing a WordPress plugin like <a href=\"https:\/\/www.wordfence.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WordFence<\/a> to find out if you\u2019re experiencing a massive onslaught and then block it.<\/p>\n\n\n\n<p>Other issues could be the misconfiguration of a dedicated server or VPS. A typical issue can be the amount of memory allotted to PHP. If you are having trouble with those, feel free to contact our technical support experts via a <a href=\"https:\/\/my.fastcomet.com\/submitticket.php\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">support ticket<\/a> and expect a swift response.<\/p>\n\n\n\n<p>Another issue could be outdated software like an old PHP version or CMS software that is outdated.<\/p>\n\n\n\n<p>The worst-case scenario is a shared server with multiple users that are slowing down your box. In that case, moving to a better host, such as FastComet, is the answer. Typically, applying fixes like adding caching, optimizing images, fixing render-blocking CSS and JavaScript, and pre-loading certain assets can help.<\/p>\n\n\n\n<p>Google has some tips for dealing with CSS that\u2019s not essential for rendering what the user sees:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\u201cRemove any unused CSS entirely or move it to another stylesheet if used on a separate page of your site.<\/p><p>For any CSS not needed for initial rendering, use loadCSS to load files asynchronously, which leverages <code>rel=\u201dpreload\u201d<\/code> and <code>onload<\/code>.<\/p><p><code>&lt;link rel=\u201dpreload\u201d href=\u201dstylesheet.css\u201d as=\u201dstyle\u201d onload=\u201dthis.rel=\u2019stylesheet'\u201d&gt;<\/code>\u201d<\/p><\/blockquote>\n\n\n\n<h2 class=\"h3 wp-block-heading\" id=\"h-cumulative-layout-shift-cls\">Cumulative Layout Shift (CLS)<\/h2>\n\n\n\n<p>Website owners need to make it as easy as possible for users to engage with links and buttons on a website, which in turn drives sales and conversions. Cumulative Layout Shift is a metric that identifies links or buttons that shift after a web page has loaded and reflects the level of difficulty users will experience when trying to engage with elements on your site once a page renders.<\/p>\n\n\n\n<p>UX and design are two vital components of a good UX, and the average user will become frustrated if a web page shifts elements while they are reading. CLS helps developers determine if images or links shift on the page so that website owners can improve usability, drive click-through rates, and maximize revenue.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-why-cls-happens\">Why CLS Happens<\/h3>\n\n\n\n<p>According to Google, there are five reasons why Cumulative Layout Shift happens:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Images without dimensions;<\/li><li>Ads, embeds, and iframes without dimensions;<\/li><li>Dynamically injected content;<\/li><li>Web Fonts causing FOIT\/FOUT;<\/li><li>Actions waiting for a network response before updating DOM.<\/li><\/ul>\n\n\n\n<p>Images and videos need to have the height and width dimensions declared in the HTML. When it comes to responsive images, ensure that the different image sizes for the different viewports use the same aspect ratio.<\/p>\n\n\n\n<p>Google recommends using <a href=\"https:\/\/aspectratiocalculator.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">AspectRatioCalculator<\/a> to calculate the aspect ratios.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-ads-can-cause-cls\">Ads Can Cause CLS<\/h4>\n\n\n\n<p>One way to deal with ads that cause CLS is to style the element where the ad is going to show. For example, if you style the div to have a specific height and width, then the ad will be constrained to those.<\/p>\n\n\n\n<p>There are two solutions if there\u2019s a lack of inventory and an ad does not show up. If an element containing an ad does not show an ad, you can set it so that an alternative banner ad or placeholder image is used to fill the space.<\/p>\n\n\n\n<p>Alternatively, for some layouts where an ad fills an entire row on the top of a column on the right or left gutter of a web page &#8211; if the page does not show up, there won\u2019t be a shift. It won\u2019t make a difference either on mobile or desktop. However, that depends on the theme layout. You will have to test that out if ad inventory is an issue.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-dynamically-injected-content\">Dynamically Injected Content<\/h4>\n\n\n\n<p>Dynamically Injected Content is content that is injected into the webpage. For example, in WordPress, you can link to a YouTube video or a Tweet, and WordPress will display the video or tweet as an embedded object.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-web-based-fonts\">Web-Based Fonts<\/h4>\n\n\n\n<p>Downloaded web fonts can cause what\u2019s known as Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT).<\/p>\n\n\n\n<p>One way to prevent that is to use <code>rel=\u201dpreload\u201d<\/code> in the link for downloading that web font.<\/p>\n\n\n\n<p>Lighthouse can help you diagnose what is causing CLS.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-cls-can-sneak-in-during-development\">CLS Can Sneak in During Development<\/h4>\n\n\n\n<p>Cumulative Layout Shift can slip through during the development stage. Many of the assets needed to render the page may be loaded onto a browser\u2019s cache. If that happens, the next time a developer or publisher visits the page under development, they won\u2019t notice a layout shift because the page elements are already downloaded.<\/p>\n\n\n\n<p>That\u2019s why it\u2019s useful to have a measurement in the lab or the field.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-how-cumulative-layout-shift-is-calculated\">How Cumulative Layout Shift is Calculated<\/h3>\n\n\n\n<p>The calculation involves two metrics\/events. The first is called Impact Fraction, and the second one is Distant Fraction.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-impact-fraction\">Impact Fraction<\/h4>\n\n\n\n<p>Impact fraction is a measurement of how much space an unstable element takes up in the viewport. A viewport is what you see on the mobile screen.<\/p>\n\n\n\n<p>When an element downloads and then shifts, the total space that the element occupied, from the location that it occupied in the viewport when it\u2019s first rendered to the final location when the page is rendered.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-distance-fraction\">Distance Fraction<\/h4>\n\n\n\n<p>The distance fraction is the amount of space that the page element has moved from the original position to the final position.<\/p>\n\n\n\n<p>The score is one way to measure an important user experience factor.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-what-does-cls-measure\">What Does CLS Measure?<\/h3>\n\n\n\n<p>CLS looks at core metrics to determine the visual stability of a page from a user perspective by considering several factors:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Layout shift<\/li><li>Impact fraction<\/li><li>Distance fraction<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/cls_stats.jpg\" alt=\"CLS Stats\" class=\"wp-image-6745\" width=\"1024\" height=\"200\" srcset=\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/cls_stats.jpg 1024w, https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/cls_stats-300x59.jpg 300w, https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/cls_stats-768x150.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Site owners should maintain a CLS of 0.1 or less.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-how-to-measure-cls\">How to Measure CLS<\/h3>\n\n\n\n<p>There are two ways to measure CLS. Google calls the first way in the Lab. The second way is called in the Field.<\/p>\n\n\n\n<p>In the lab means simulating an actual user downloading a webpage. Google uses a <a href=\"https:\/\/web.dev\/lighthouse-whats-new-6.0\/#emulation\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">simulated Moto G4 for generating the CLS score<\/a> within the lab environment.<\/p>\n\n\n\n<p>Lab tools are best for understanding how a layout may perform before pushing it live to users. It gives publishers the opportunity to <a href=\"https:\/\/web.dev\/vitals\/#lab-tools-to-measure-core-web-vitals\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">test a layout for issues<\/a>.<\/p>\n\n\n\n<p>As we mentioned, Lab tools consist of Chrome Dev Tools and Lighthouse.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-how-to-keep-things-still-on-your-website-pages\">How to Keep Things Still on Your Website Pages<\/h3>\n\n\n\n<p>There\u2019s nothing more annoying than your text moving about the webpage whilst you try and read it. To help you deal with images and text bouncing around, here are a few things your web developer should look at:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Adding the height and width of images to the website code. It will ensure your browser knows exactly what space is available to upload the image to and will prevent it from continuously changing as it loads.<\/li><li>Using containers, which are basically designated boxes for the ads to load on your webpage. I&#8217;ve seen this so many times, particularly on news websites, where an article gets pushed down after I\u2019ve started reading it to make room for the display ads.<\/li><\/ul>\n\n\n\n<h2 class=\"h3 wp-block-heading\" id=\"h-first-input-delay-fid\">First Input Delay (FID)<\/h2>\n\n\n\n<p>Consumers on the web want pages that are quick and easy to engage with. First Input Delay measures input latency (the time it takes a page element to respond from a user\u2019s input) to identify pages that could cause your audience frustration.<\/p>\n\n\n\n<p>Modern websites use a variety of advanced technologies and dynamic content widgets to serve content to their audience. This type of content can improve content delivery. However, these enhancements can cause delay times that require users to wait for their browser to act on their input.<\/p>\n\n\n\n<p>What developers need to do is to reduce the time any user spends waiting for a browser to respond to their input. Accomplishing this improves engagement and usability across the site.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-the-cause-of-first-input-delay\">The Cause of First Input Delay<\/h3>\n\n\n\n<p>First Input Delay is generally caused by images and scripts that download in a non-orderly manner. This disordered coding causes the web page download to excessively pause, then start, then pause again, causing unresponsive behavior for site visitors attempting to interact with the web page.<\/p>\n\n\n\n<p>All of this resembles a traffic jam caused by a free-for-all where no traffic signals are present. Fixing FID is about bringing order to the chaotic \u201ctraffic.\u201d,<\/p>\n\n\n\n<p>Google describes the cause of input latency like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\u201cIn general, input delay (a.k.a. input latency) happens because the browser\u2019s main thread is busy doing something else, so it can\u2019t (yet) respond to the user.<\/p><p>One common reason this might happen is the browser is busy parsing and executing a large JavaScript file loaded by your app.<\/p><p>While it\u2019s doing that, it can\u2019t run any event listeners because the JavaScript it\u2019s loading might tell it to do something else.\u201d<\/p><\/blockquote>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-what-does-fid-measure\">What Does FID Measure?<\/h3>\n\n\n\n<p>FID measures how responsive a page is when loading element inputs from a user. This means that FID only records events like clicks and key presses.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/fid_stats.jpg\" alt=\"FID Stats\" class=\"wp-image-6744\" width=\"1024\" height=\"200\" srcset=\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/fid_stats.jpg 1024w, https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/fid_stats-300x59.jpg 300w, https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/fid_stats-768x150.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Site owners should aim to provide a good user experience with FID below 100 milliseconds.<\/p>\n\n\n\n<p>It should be noted that FID is difficult to measure because this data can only be measured in the field. This means that your score will depend on variables outside of your control, like the device capability of users and Internet speeds as experienced by your audience.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-how-to-fix-input-latency\">How to Fix Input Latency<\/h3>\n\n\n\n<p>Since the root cause of First Input Delay is the disorganized download of scripts and images, the way to fix the problem is to thoughtfully bring order to how those scripts and images are presented to the browser for download.<\/p>\n\n\n\n<p>Solving the problem of FID generally consists of using HTML attributes to control how scripts download, optimizing images (the HTML and the images), and thoughtfully omitting unnecessary scripts.<\/p>\n\n\n\n<p>The goal is to optimize what is downloaded to eliminate the typical pause-and-start downloading of unorganized web pages.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-why-browsers-become-unresponsive\">Why Browsers Become Unresponsive<\/h3>\n\n\n\n<p>Browsers are software that complete tasks with the ultimate goal to show a specific web page. The tasks consist of downloading code, images, fonts, style information, and scripts, and then running (executing) the scripts and building the web page according to the HTML instructions. This complex process is called rendering. The word render means \u201cto make,\u201d and that\u2019s what a browser does by assembling the code and images to render a web page.<\/p>\n\n\n\n<p>The individual rendering tasks are called threads, short for \u201cthread of execution.\u201d This means an individual sequence of action. In a browser, there is one thread called the Main Thread and it is responsible for creating the web page that a website visitor sees. The main thread can be visualized as a highway where cars are symbolic of the images and scripts that are downloading and executing once a person visits a website.<\/p>\n\n\n\n<p>If some code is large and slow, it will cause the other tasks to stop and wait for the big and slow code to get off the highway (finish downloading and executing).<\/p>\n\n\n\n<p>Developers should aim to code the web page in a manner that optimizes which code is downloaded first, and then the code is executed in an orderly manner. This way, the web page downloads in the fastest possible manner.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-first-input-delay-and-third-party-code\">First Input Delay and Third-Party Code<\/h3>\n\n\n\n<p>When it comes to Core Web Vitals and especially with First Input Delay, you\u2019ll find there is some code over you just can\u2019t do much about. However, this is likely to be the case for your competitors, as well.<\/p>\n\n\n\n<p>For example, if your business depends on <a href=\"https:\/\/www.google.com\/adsense\/start\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google AdSense<\/a> (a big render-blocking script), the problem is going to be the same for your competitor. Solutions like <a href=\"https:\/\/developers.google.com\/publisher-tag\/samples\/lazy-loading\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">lazy loading using Google Ad Manager<\/a> can help.<\/p>\n\n\n\n<p>In some specific cases, it may be enough to do the best you can because your competitors may not do any better either. In those cases, it\u2019s best you take your wins where you can find them. Don\u2019t think about losses where you simply cannot make a change.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-javascript-impact-on-first-input-delay\">JavaScript Impact on First Input Delay<\/h3>\n\n\n\n<p>JavaScript is reminiscent of a little engine that makes things happen. When a name is entered on a form, JavaScript might be there to make sure both the first and last name is entered. When a button is pressed, JavaScript may be there to tell the browser to spawn a thank you message in a popup.<\/p>\n\n\n\n<p>The problem with JavaScript is that it not only has to download but also to run (execute), which are two things that contribute to input latency.<\/p>\n\n\n\n<p>If a big JavaScript file is located near the top of the page, that file is going to block the rest of the page beneath it from rendering until that large script is finished downloading and executing. This is called blocking the web page.<\/p>\n\n\n\n<p>The obvious solution is to relocate these kinds of scripts from the top of the page and put them at the bottom, so they don\u2019t interfere with all the other page elements that are waiting to render. However, this can be a problem if, for example, it\u2019s placed at the end of a very long web page.<\/p>\n\n\n\n<p>Reason: once the large page is loaded and the user is ready to interact with it, the browser will still be signaling that it is downloading because the big JavaScript file is lagging at the end. The page may download faster but then stall while waiting for the JavaScript to execute.<\/p>\n\n\n\n<p>Luckily, there\u2019s a solution for that.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-defer-and-async-attributes\">Defer and Async Attributes<\/h4>\n\n\n\n<p>The Defer and Async HTML attributes are in the roles of traffic signals that control the start and stop of how JavaScript downloads and executes.<\/p>\n\n\n\n<p>In this case, the Defer and Async attributes tell the browser not to block HTML parsing while downloading. These attributes tell the browser to keep the main thread going while the JavaScript is downloading.<\/p>\n\n\n\n<h5 class=\"h6 wp-block-heading\" id=\"h-async-attribute\">Async Attribute<\/h5>\n\n\n\n<p>JavaScript files with the Async attribute will download and then execute as soon as it is downloaded. The point at which the JavaScript file blocks the main thread is when it begins to execute.<\/p>\n\n\n\n<p>Normally, the file would block the main thread when it starts to download. But not with the async (or defer) attribute. This is called an asynchronous download, where it downloads independently of the main thread and in parallel with it. The async attribute is useful for third-party JavaScript files like advertising and social sharing \u2014 files where the order of execution doesn\u2019t matter.<\/p>\n\n\n\n<h5 class=\"h6 wp-block-heading\" id=\"h-defer-attribute\">Defer Attribute<\/h5>\n\n\n\n<p>JavaScript files with the \u201cdefer\u201d attribute will also download asynchronously. However, the deferred JavaScript file will not execute until the entire page is downloaded and rendered. Deferred scripts also execute in the order in which they are located on a web page. Scripts with the defer attribute are useful for JavaScript files that depend on page elements being loaded and when the order they are executed matter.<\/p>\n\n\n\n<p>In general, use the defer attribute for scripts that aren\u2019t essential to the rendering of the page itself.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-input-latency-different-for-all-users\">Input Latency &#8211; Different for All Users<\/h3>\n\n\n\n<p>It\u2019s crucial to be aware that First Input Delay scores are variable and inconsistent. The scores vary from visitor to visitor. This variance in scores is unavoidable because the score depends on interactions that are particular to the individual visiting a site.<\/p>\n\n\n\n<p>Some visitors might be distracted and not interact until a moment where all the assets are loaded and ready to be interacted with.<\/p>\n\n\n\n<p>This is how Google describes it:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\u201cNot all users will interact with your site every time they visit. And not all interactions are relevant to FID\u2026<\/p><p>In addition, some users\u2019 first interactions will be at bad times (when the main thread is busy for an extended period of time), and some user\u2019s first interactions will be at good times (when the main thread is completely idle).<\/p><p>This means some users will have no FID values, some users will have low FID values, and some users will probably have high FID values.\u201d<\/p><\/blockquote>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-why-most-sites-fail-fid\">Why Most Sites Fail FID<\/h3>\n\n\n\n<p>Unfortunately, many content management systems (CMS), themes, and plugins were not built to comply with this relatively new metric. That\u2019s why so many publishers are dismayed to discover that their websites don\u2019t pass the First Input Delay test.<\/p>\n\n\n\n<p>However, that\u2019s changing as the web software development community responds to demands for different coding standards from the publishing community. It\u2019s not that the software developers making content management systems are at fault for producing products that don\u2019t measure up against these metrics. For example, WordPress addressed a shortcoming in the <a href=\"https:\/\/www.fastcomet.com\/blog\/secret-gutenberg-features\" target=\"_blank\" rel=\"noreferrer noopener\">Gutenberg<\/a> website editor that was causing it to score less well than it could.<\/p>\n\n\n\n<p>In case you are not familiar, Gutenberg is a visual way to build sites using the interface or metaphor of blocks. There\u2019s a widgets block, a contact form block, and a footer block, etc. So the process of creating a web page is more visual and done through the metaphor of building blocks, literally building a page with different blocks.<\/p>\n\n\n\n<p>There are various types of blocks that look and behave in different ways. Each individual block has a corresponding style code (CSS), with much of it being specific and unique to that individual block. The standard way of coding these styles is to create one style sheet containing the styles that are unique to each block. It makes sense to do it this way because you have a central location where all the code specific to blocks exists.<\/p>\n\n\n\n<p>The result is that on a page that might consist of, for example, twenty blocks, WordPress would load the styles for those blocks plus all the other blocks that aren\u2019t being used. Before Core Web Vitals, that was considered the standard way to package up CSS. Since the introduction of Core Web Vitals, that practice has been considered code bloat.<\/p>\n\n\n\n<p>This is not meant as an attack against WordPress developers. They actually did a fantastic job.<\/p>\n\n\n\n<p>It\u2019s just a reflection of how rapidly changing standards can hit a bottleneck at the software development stage before being integrated into the coding ecosystem.<\/p>\n\n\n\n<p>If you remember, we went through the same thing with the transition to mobile-first web design.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-gutenberg-10-1-improved-performance\">Gutenberg 10.1 Improved Performance<\/h3>\n\n\n\n<p>WordPress Gutenberg 10.1 introduced an improved way to load the styles by only loading the styles that were needed and not loading the block styles that weren\u2019t going to be used. This can count as a huge win for WordPress, the publishers who rely on WordPress, and of course, the users who visit websites created with WordPress.<\/p>\n\n\n\n<p>Moving forward, we can expect that more and more software developers responsible for the CMS, themes, and plugins will transition to First Input Delay-friendly coding practices.<\/p>\n\n\n\n<p>However, until that happens, the burden is on the site owner to take steps to improve First Input Delay. The first step is understanding how it works, which we hope is now clear as day.<\/p>\n\n\n\n<h2 class=\"h3 wp-block-heading\" id=\"h-other-performance-metrics\">Other Performance Metrics<\/h2>\n\n\n\n<p>As we discussed, Core Web Vitals offer a host of information that developers can use to improve websites for the user experience. Along with the main metrics that we covered, website owners can also understand how their code impacts the way users consume content on their site.<\/p>\n\n\n\n<p>The following metrics may not be considered part of user experience metrics, but they quantify lag times or other technical factors that can negatively impact how an online audience engages with a web page. So, let\u2019s take a quick look at a few other metrics that you can use to understand the experience visitors have on your site.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-first-contentful-paint-fcp\">First Contentful Paint (FCP)<\/h3>\n\n\n\n<p>First, Contentful Paint measures how long it takes for a user\u2019s browser to render DOM elements (images, non-white &lt;canvas&gt; elements, and SVGs). This metric identifies render-blocking resources and is measured in seconds, with a range of FCP scores:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>0\u20132 seconds: Green (fast);<\/li><li>2\u20134 seconds: Orange (moderate);<\/li><li>4+ seconds: Red (slow).<\/li><\/ul>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-speed-index\">Speed Index<\/h3>\n\n\n\n<p>Quick (aka snappy) websites offer enhanced online experiences. Speed Index (SI) shows you the average time that content on your site takes to display to a user. This metric will identify excessive JavaScript on a page and is measured in milliseconds, with a range of SI scores:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>0\u20134.3 seconds: Green (fast);<\/li><li>4.4\u20135.8 seconds: Orange (moderate);<\/li><li>5.8+ seconds: Red (slow).<\/li><\/ul>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-time-to-interactive-tti\">Time to Interactive (TTI)<\/h3>\n\n\n\n<p>Time to Interactive is the amount of time it takes for the content on a page to become functional for that page to be fully interactive. TTI helps you identify web pages with unnecessary JavaScript and is measured in seconds, with a range of TTI scores:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>0\u20133.8 seconds: Green (fast);<\/li><li>3.9\u20137.3 seconds: Orange (moderate);<\/li><li>7.3+ seconds: Red (slow).<\/li><\/ul>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-total-blocking-time-tbt\">Total Blocking Time (TBT)<\/h3>\n\n\n\n<p>Total Blocking Time helps website owners assess how long a certain page responds to specific user input. This metric will identify pages with unnecessary JavaScript and is measured in milliseconds with a range of TBT scores:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>0\u2013300 ms: Green (fast);<\/li><li>300\u2013600 ms: Orange (moderate);<\/li><li>600+ ms: Red (slow).<\/li><\/ul>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-page-performance-scores\">Page Performance Scores<\/h3>\n\n\n\n<p>A Page Performance Score is a single metric that considers all of the important user experience metrics in Core Web Vitals. This score uses an aggregate scoring system across all mobile and desktop visits. It takes the weighted average to deliver a single score to understand pages that need closer examination quickly.<\/p>\n\n\n\n<p>These metrics may be simplified in the Page Performance Score metric, but developers can reference scores in each category based on the specific score of 90 (good), 50\u201390 (needs improvement), and below 50 (poor).<\/p>\n\n\n\n<h2 class=\"h3 wp-block-heading\" id=\"h-how-to-measure-core-web-vitals\">How to Measure Core Web Vitals<\/h2>\n\n\n\n<p>Google provides six completely free ways to measure your Core Web Vitals Scores; the two most accessible for beginners are PageSpeed Insights and Google Search Console.<\/p>\n\n\n\n<p>By defining these Core Web Vitals, Google aims to provide unified guidance for quality signals that they consider essential to delivering a great user experience on the web.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\u201cOptimizing for quality of user experience is key to the long-term success of any site on the web.<\/p><p>Whether you\u2019re a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve.\u201d<\/p><\/blockquote>\n\n\n\n<p>Google emphasizes the importance of Core Web Vitals over other metrics as they\u2019re critical to all web experiences. User expectations for web experiences can vary according to website and context, but some remain consistent regardless of where they are on the web.<\/p>\n\n\n\n<p>As we already mentioned at the beginning of the post, Core Web Vitals are the user experience needs that all websites should be striving to meet. Specifically, Google identifies the core user experience needs as loading, interactivity, and visual stability.<\/p>\n\n\n\n<p>Google explains why the three main metrics (Largest Contentful Paint, Cumulative Layout Shift, and First Input Delay) are so important:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\u201cAll of these metrics capture important user-centric outcomes, are field measurable, and have supporting lab diagnostic metric equivalents and tooling.<\/p><p>For example, while Largest Contentful Paint is the topline loading metric, it is also highly dependent on First Contentful Paint (FCP) and Time to First Byte (TTFB), which remain critical to monitor and improve.\u201d<\/p><\/blockquote>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-tools-to-help-you-measure-core-web-vitals\">Tools to Help you Measure Core Web Vitals<\/h3>\n\n\n\n<p>Google incorporates Core Web Vitals measurement capabilities into many of its existing tools. Core Web Vitals can now be measured using:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Search Console;<\/li><li>PageSpeed Insights;<\/li><li>Lighthouse;<\/li><li>Chrome DevTools;<\/li><li>Chrome UX Report;<\/li><li>Web Vitals Extension;<\/li><\/ul>\n\n\n\n<p>As promised, we will cover these tools in more detail below.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-search-console\">Search Console<\/h4>\n\n\n\n<p>There\u2019s a new Core Web Vitals report in Search Console to help site owners to evaluate pages across an entire site. This report identifies groups of pages that require attention based on real-world data from the Chrome UX report. With this report, be aware that URLs will be omitted if they do not have a minimum amount of reporting data.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-pagespeed-insights\">PageSpeed Insights<\/h4>\n\n\n\n<p>PageSpeed Insights has been upgraded to use Lighthouse 6.0, which makes it capable of measuring Core Web Vitals in both the lab and field sections of the report. Core Web Vitals are annotated with a blue ribbon, as shown below.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-lighthouse\">Lighthouse<\/h4>\n\n\n\n<p>Lighthouse was recently upgraded to <a href=\"https:\/\/gtmetrix.com\/blog\/lighthouse-8-3-0-update\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">version 8.3.0, which is already used by GTmetrix<\/a>. However, since <a href=\"https:\/\/web.dev\/lighthouse-whats-new-6.0\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lighthouse 6.0<\/a>, the tool includes new audits, new metrics, and a newly composed performance score. Two of these new metrics added are exactly what we need \u2014 Largest Contentful Paint and Cumulative Layout Shift.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-chrome-ux-report\">Chrome UX Report<\/h4>\n\n\n\n<p>Also referred to as CrUX, this report is a public dataset of real user experience data on millions of websites. The Chrome UX report measures field versions of all the Core Web Vitals, which means it reports real-world data rather than lab data.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-chrome-devtools\">Chrome DevTools<\/h4>\n\n\n\n<p>Chrome DevTools helps website owners find and fix visual instability issues on a page that can contribute to CLS. Select a Layout Shift to view its details in the Summary tab. To visualize where the shift itself occurred, hover over the Moved from and Moved to fields. Chrome DevTools also measures Total Blocking Time, which is useful for improving First Input Delay.<\/p>\n\n\n\n<p>TBT is now shown in the footer of the Chrome DevTools Performance panel when you measure page performance. Performance optimizations that improve TBT in the lab should also improve FID.<\/p>\n\n\n\n<h4 class=\"h5 wp-block-heading\" id=\"h-web-vitals-extension\">Web Vitals Extension<\/h4>\n\n\n\n<p>A new extension, now available to install from the Chrome Web Store, measures the three Core Web Vitals metrics in real-time.<\/p>\n\n\n\n<p>You can download and install the extension from <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma?hl=en\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"h3 wp-block-heading\" id=\"h-why-all-this-matters-for-your-website\">Why all this Matters for Your Website<\/h2>\n\n\n\n<p>The modern user does not want to wait for a website to load to get the information they\u2019re looking for, and Google has made this connection. By now, everyone knows that Google\u2019s goals are to show not only the most relevant result for a search query but also the fastest. You are no longer able to rank well if your page speed and other user experience metrics are lacking.<\/p>\n\n\n\n<p>This shift to prioritizing user experience along with existing ranking factors like content and backlinks has a great impact on the ways that website owners think about SEO. There are additional items on your checklist that you need to tick off if your goal is to rank on the first page of Google for your target queries.<\/p>\n\n\n\n<h2 class=\"h3 wp-block-heading\" id=\"h-how-to-improve-core-web-vitals-on-wordpress\">How to Improve Core Web Vitals on WordPress<\/h2>\n\n\n\n<p>Ready to pass the Core Web Vitals test for your WordPress site? Here\u2019s what you need to do:<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-how-to-improve-largest-contentful-paint-on-wordpress\">How to Improve Largest Contentful Paint on WordPress<\/h3>\n\n\n\n<p>One of the three metrics Google wants your WordPress site to excel in is Largest Contentful Paint (LCP), or the time it takes for the largest content element on a page\u2019s viewport to become visible. If benchmark testing shows you need to improve in this area, try these tips:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Optimize Images &#8211; Images attract attention, and they can be the largest element on a page. To help them render quickly (and improve your LCP rating), make sure your images are optimized. Resize and compress your page images. In addition, try serving adaptive images so that someone using a mobile device would get lower resolution images than someone using a desktop.<\/li><li>Upgrade Website Hosting &#8211; A hosting service with a fast server response time can make the difference in faster rendering and improve your LCP score. <a href=\"https:\/\/www.fastcomet.com\/wordpress-hosting\">FastComet Managed WordPress Hosting<\/a> can help you with that.<\/li><li>Set Up Page Caching<\/li><\/ul>\n\n\n\n<p>To help your server deliver content faster, enable page caching. Your site\u2019s pages will be stored as HTML files after the page is loaded the first time, displaying content faster.<\/p>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-how-to-improve-cumulative-layout-shift-on-wordpress\">How to Improve Cumulative Layout Shift on WordPress<\/h3>\n\n\n\n<p>If your WordPress site\u2019s CLS score isn\u2019t helping you achieve a good rating from Google, you can improve your score by trying these solutions:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Optimize Fonts &#8211; Custom fonts can cause your layout to shift. Default fonts won\u2019t cause CLS. Sticking to just two or three fonts native to your WordPress theme can help reduce CLS. However, if you need to use custom fonts, you can preload the font file for the content at the top of your web page. You can also host Google font files locally and preload that way.<\/li><li>Resize Images &#8211; If you use CSS to resize images, the browser will start downloading images to determine the sizing and to allocate space. This can create CLS. To avert the shifting problem, resize images using aspect ratio. This will allow the browser to calculate the spaces needed for images and reduce the risk of CLS.<\/li><li>Steady Animations &#8211; Animations are a prime reason page layout can shift while loading. When adding animations to WordPress pages, be sure to use the CSS transform property to transform the scale and move animation elements around.<\/li><\/ul>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-how-to-improve-first-input-delay-on-wordpress\">How to Improve First Input Delay on WordPress<\/h3>\n\n\n\n<p>To improve FID scores on your WordPress site, you want to make sure the browser quickly responds to a user\u2019s interaction. Try these options:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Optimize JavaScript &#8211; JavaScripts can get in the way of user interaction. To improve FID, remove any unwanted JavaScripts and keep only what is essential. For example, if you don\u2019t use page builders, disable loading their JavaScript. You can also stop render-blocking JavaScripts.<\/li><li>Clean Up Plugins and Themes &#8211; If your site has unused plugins and outdated themes, those will affect FID. Improve your site\u2019s speed and performance by cleaning up plugins and removing unwanted themes.<\/li><li>Async or Defer CSS &#8211; The main thread is where the browser processes most of the tasks required for page load. To improve FID scores, minimize main thread work by deferring the CSS files.<\/li><\/ul>\n\n\n\n<h3 class=\"h4 wp-block-heading\" id=\"h-other-ways-to-improve-core-web-vitals\">Other Ways to Improve Core Web Vitals<\/h3>\n\n\n\n<p>There are other ways to improve your WordPress website\u2019s performance and enhance Core Web Vitals:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Mobile Friendliness &#8211; Fully optimize your site for mobile. The usability of your site on a mobile device is key for UX \u2013 and improved Core Web Vitals scores.<\/li><li>Make Sure Your Website is SSL Secure &#8211; Google has always placed a high premium on sites that are safe for users to browse. Security gaps like malware or not serving content over HTTPS can impact your Core Web Vitals. Make sure your website is SSL secure.<\/li><\/ul>\n\n\n\n<h2 class=\"h3 wp-block-heading\" id=\"h-google-s-visual-indicators-for-good-ux\">Google\u2019s Visual Indicators for Good UX<\/h2>\n\n\n\n<p>Google considers the Core Web Vitals along with other indicators of your website configuration. Things like a secure HTTPS connection with an SSL certificate or the site responsiveness on different screens and devices.<\/p>\n\n\n\n<p>There are multiple elements, and they all form the Page Experience score in Google\u2019s core algorithm. Keep in mind we are talking about just 1 of 200+ factors, all carrying different weights in the eyes of the search engine giant.<\/p>\n\n\n\n<p>It\u2019s still difficult to say how major the Page Experience factor will be for a website\u2019s overall ranking, but chances are \u2013 it will be quite essential.<\/p>\n\n\n\n<p>What\u2019s more, Google\u2019s November announcement indicated the company is working on implementing visual indicators for great user experience in its results. We still don\u2019t know what these indicators will look like, but we imagine it as a&nbsp; seal of approval, something like the padlock on SSL-secured websites.<\/p>\n\n\n\n<h2 class=\"h3 wp-block-heading\" id=\"h-final-words\">Final Words<\/h2>\n\n\n\n<p>The Core Web Vitals metrics and the way they are scored may change over time. Google has been changing the metrics used for measuring speed and indexing websites throughout the years. Giving a spotlight to page experience does not mean that Google will ever stop seeking excellent page content. We are witnessing that user experience gains increased importance with each day, and you better be prepared. After all, we are all working together for a better web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you search for \u201ccore web vitals\u201d on Google Trends, you will find out that the term wasn\u2019t around before Spring 2021. Interest suddenly skyrocketed, and people are still looking for more helpful information about Core Web Vitals to this day. Here is the reason \u2014 back in May, Google announced that Core Web Vitals [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":6726,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4729],"tags":[4655,66,72,4656],"class_list":["post-6724","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-core-web-vitals","tag-optimization","tag-seo","tag-user-experience"],"featured_image_src":"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/core-web-vitals.png","author_info":{"display_name":"Joseph","author_link":"https:\/\/www.fastcomet.com\/blog\/author\/joseph"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Core Web Vitals: A Complete Guide for Improved SEO | FastComet<\/title>\n<meta name=\"description\" content=\"Core Web Vitals exist for a good reason. Google knows what&#039;s up, and so will you after going through our complete guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fastcomet.com\/blog\/core-web-vitals\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Core Web Vitals: A Complete Guide for Improved SEO | FastComet\" \/>\n<meta property=\"og:description\" content=\"Core Web Vitals exist for a good reason. Google knows what&#039;s up, and so will you after going through our complete guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fastcomet.com\/blog\/core-web-vitals\" \/>\n<meta property=\"og:site_name\" content=\"FastComet Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-20T12:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-10T08:22:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/core-web-vitals.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"620\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joseph\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joseph\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"28 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Core Web Vitals: A Complete Guide for Improved SEO | FastComet","description":"Core Web Vitals exist for a good reason. Google knows what's up, and so will you after going through our complete guide.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fastcomet.com\/blog\/core-web-vitals","og_locale":"en_US","og_type":"article","og_title":"Core Web Vitals: A Complete Guide for Improved SEO | FastComet","og_description":"Core Web Vitals exist for a good reason. Google knows what's up, and so will you after going through our complete guide.","og_url":"https:\/\/www.fastcomet.com\/blog\/core-web-vitals","og_site_name":"FastComet Blog","article_published_time":"2021-09-20T12:55:00+00:00","article_modified_time":"2022-06-10T08:22:57+00:00","og_image":[{"width":1024,"height":620,"url":"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/core-web-vitals.png","type":"image\/png"}],"author":"Joseph","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Joseph","Est. reading time":"28 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.fastcomet.com\/blog\/core-web-vitals","url":"https:\/\/www.fastcomet.com\/blog\/core-web-vitals","name":"Core Web Vitals: A Complete Guide for Improved SEO | FastComet","isPartOf":{"@id":"https:\/\/www.fastcomet.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fastcomet.com\/blog\/core-web-vitals#primaryimage"},"image":{"@id":"https:\/\/www.fastcomet.com\/blog\/core-web-vitals#primaryimage"},"thumbnailUrl":"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/core-web-vitals.png","datePublished":"2021-09-20T12:55:00+00:00","dateModified":"2022-06-10T08:22:57+00:00","author":{"@id":"https:\/\/www.fastcomet.com\/blog\/#\/schema\/person\/4f2c9600f49c872b8d56996ee3b95035"},"description":"Core Web Vitals exist for a good reason. Google knows what's up, and so will you after going through our complete guide.","breadcrumb":{"@id":"https:\/\/www.fastcomet.com\/blog\/core-web-vitals#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fastcomet.com\/blog\/core-web-vitals"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fastcomet.com\/blog\/core-web-vitals#primaryimage","url":"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/core-web-vitals.png","contentUrl":"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/09\/core-web-vitals.png","width":1024,"height":620,"caption":"Core Web Vitals"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fastcomet.com\/blog\/core-web-vitals#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fastcomet.com\/blog"},{"@type":"ListItem","position":2,"name":"Core Web Vitals: A Complete Guide for Improved SEO"}]},{"@type":"WebSite","@id":"https:\/\/www.fastcomet.com\/blog\/#website","url":"https:\/\/www.fastcomet.com\/blog\/","name":"FastComet Blog","description":"FastComet Web Hosting Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fastcomet.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.fastcomet.com\/blog\/#\/schema\/person\/4f2c9600f49c872b8d56996ee3b95035","name":"Joseph","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fastcomet.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1aa84dc2a6398ed73c957bd1de58806d12d44e2956744ed1ae9b435d57822ab7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1aa84dc2a6398ed73c957bd1de58806d12d44e2956744ed1ae9b435d57822ab7?s=96&d=mm&r=g","caption":"Joseph"},"description":"Joseph is part of the FastComet Marketing team. With years of content writing experience behind him, it's one of his favorite activities. Joseph takes part in the SEO of the FastComet website and blog. His goal is to write comprehensive posts and guides, always aiming to help our clients with essential information. Joseph also has a thirst for knowledge and improvement, which makes the hosting environment a perfect place for him.","sameAs":["https:\/\/www.fastcomet.com\/"],"url":"https:\/\/www.fastcomet.com\/blog\/author\/joseph"}]}},"_links":{"self":[{"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/posts\/6724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/comments?post=6724"}],"version-history":[{"count":9,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/posts\/6724\/revisions"}],"predecessor-version":[{"id":7542,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/posts\/6724\/revisions\/7542"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/media\/6726"}],"wp:attachment":[{"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/media?parent=6724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/categories?post=6724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fastcomet.com\/blog\/wp-json\/wp\/v2\/tags?post=6724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}