The recent years saw search expand its ranking criteria beyond keywords to accommodate more elements of user experience, including page load speed and mobile-friendliness. This May, Google built upon this and announced its new ranking factor based on page experience that will be unifying guidance for the quality signals that are essential to delivering great online user experience.
The new signal will simplify the scope of performance and will be focused on the metrics that are tied to the delivery of user experience. These metrics are known as Core Web Vitals and are designed to measure speed, responsiveness, and visual stability. The Core Web Vitals will be used by search engines to evaluate page experience and rank pages alongside current page experience measures such as mobile-friendliness, safety, HTTPS security, and the use of intrusive pop-ups.
The Core Web Vitals comprises a new combination of three user experience metrics to measure how users first experience a page. These metrics are: Largest Contentful Paint (LCP), First Input Display (FID), and Cumulative Layout Shift (CLS).
The new signal will simplify the scope of performance and will be focused on the metrics that are tied to the delivery of user experience. These metrics are known as Core Web Vitals and are designed to measure speed, responsiveness, and visual stability. The Core Web Vitals will be used by search engines to evaluate page experience and rank pages alongside current page experience measures such as mobile-friendliness, safety, HTTPS security, and the use of intrusive pop-ups.
The Core Web Vitals comprises a new combination of three user experience metrics to measure how users first experience a page. These metrics are: Largest Contentful Paint (LCP), First Input Display (FID), and Cumulative Layout Shift (CLS).
Largest Contentful Paint: This metric looks at how fast the largest element loads in the viewport. This is crucial as it is the first impression people get from your page as it is the first thing a page visitor sees and it determines how fast they can view content that matters to them. A fast LCP helps convince visitors that a page is useful and that the content is relevant to what they are looking for. Common causes of poor LCP are:
First Input Delay: This is the speed at which a page reacts to the first user input like a click on a button. Think about the times where you’ve tried to click on something on a just loaded web page but it doesn’t respond. The FID measures this delay in interaction. FIDs are caused by heavy JavaScript bundles with long-running initialization tasks.
Cumulative Layout Shift: This looks at the visual stability of your site. This is when elements on-screen move while the page loads. Have you ever experienced trying to click on a visible button as a website loads only to have the button shift to accommodate newly loaded elements? This is what CLS tracks and pages with high CLS can cause a negative user experience. CLS occurs because of:
- Slow server response times
- Render-blocking JavaScript and CSS
- Slow load times of other resources
- Client-side rendering using large Javascript bundles
First Input Delay: This is the speed at which a page reacts to the first user input like a click on a button. Think about the times where you’ve tried to click on something on a just loaded web page but it doesn’t respond. The FID measures this delay in interaction. FIDs are caused by heavy JavaScript bundles with long-running initialization tasks.
Cumulative Layout Shift: This looks at the visual stability of your site. This is when elements on-screen move while the page loads. Have you ever experienced trying to click on a visible button as a website loads only to have the button shift to accommodate newly loaded elements? This is what CLS tracks and pages with high CLS can cause a negative user experience. CLS occurs because of:
- Images used without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically-injected content
- Fonts causing a flash of invisible text (FOIT) or flash of unstyled text (FOUT)
- Actions waiting for a network response before updating DOM*
These new changes will not be implemented until 2021, but it’s always good practice to prepare your site for them in advance. Luckily, Monsido’s Performance module was built to track and optimize these metrics effectively. Even before page experience was confirmed as a ranking signal, the module was introduced to help customers ensure the smoothest web user experience possible from every angle.
The module automatically scans sites for performance best practices and provides diagnostics that flag particular problems that currently exist on your site that need to be addressed (e.g. file sizes that are too large that are potentially slowing downloading times). It also presents opportunities for improvement that can boost the page load speed of your site and improve its performance. The diagnostics identify opportunities to help pages load faster, such as:
* Document object model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. A DOM element is something like a DIV, HTML, BODY element on a page.
- Removing unused CSS
- Properly sizing images
- Reducing server response times
- Uses HTTPs
- Avoids requesting the geolocation permission on page load
- Avoids deprecated APIs
- Detected JavaScript libraries
- Allows users to past into password fields
- Display images with the correct aspect ratio
* Document object model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. A DOM element is something like a DIV, HTML, BODY element on a page.
