With the deployment of the Core Web Vitals Update on June 15, 2021, Google initiated the expected algorithm change announced for more than a year, but … Do you know how Core Web Vitals affect your digital environment?
Before entering the matter, it is necessary to clarify that Core Web Vitals do not affect digital newspapers at the content level. In the technical aspect, changes in indexing will begin to be seen in the medium-long term.
Google Search Central explains that it is not strictly necessary to have the perfect Core Web Vitals metrics. Still, everything possible must be done to gradually improve them on each website, since in the future, Core Web Vitals will have an increasing influence on how Google ranks web pages.
Table of Contents
WHAT IS THE PAGE EXPERIENCE ACCORDING TO GOOGLE
According to Google, before delving into the definition of Page Experience, it is necessary to remember that Google values this page experience based on different indicators, not only on loading speed.
This is important to consider since later, we will explain the different indicators taken into account to assess the page experience in search results.
DEFINITION OF THE PAGE EXPERIENCE ACCORDING TO GOOGLE
The Page Experience is called how users perceive their interaction with a Web page.
To measure this experience, a set of indicators are used that evaluate technical aspects beyond the content offered.
This is how John Muller explained the improvements in the Page Experience on his Twitter account :
As Google explains in its blog developers.google.com, “the experience on the pages is important; however, Google will continue to place in higher positions the pages that generally offer the most appropriate information for the query in question, although your experience can be improved. “
No matter how good the experience of a page is, Google explains that its content must be of quality to have good positioning.
Of course, when there are many websites with a similar level of relevance, the page experience they offer does become necessary when ranking them in the SERPs.
PAGE EXPERIENCE INDICATORS
Subtopic
Google had already had a series of user experience metrics for a long time, which were within the evolution that Google was making when positioning websites.
In addition, since last year, Google has warned about new measurement points, which will be the Core Web Vitals metrics (LCP, FID, CLS).
We will explain the Page Experience indicators one by one to achieve a complete view of the page experience.
CORE WEB VITALS (LCP, FID, AND CLS)
The Core Web Vitals are 3 indicators that Google uses to measure the user experience on a website.
To do this, each one represents a key KPI:
- Largest Contentful Paint (LCP) – measures loading time. It is recommended that the time be less than 2.5 seconds -> SPEED.
- First Input Delay (FID): measures the time it takes for the page to be interactive. It must be the time of 100 milliseconds or less -> INTERACTION.
- Cumulative Layout Shift (CLS): measures when the Web has visual stability. It must be less than 0.1 seconds -> VISUAL STABILITY.
MOBILE FRIENDLY
A website has to be adapted to any mobile device (smartphone or tablet) to be viewed and navigated without problems.
This Mobile-Friendly requirement dates back to years when in 2015, Google already began to value Responsive websites above the rest.
How can we make our website mobile-friendly?
- Responsive: The Web maintains URL and HTML but adapts according to the device.
- Dynamic Serving: Keeps URL but changes HTML according to the device.
- Independent URLs: It does not maintain URL or HTML.
To check if your website is Mobile Friendly, through this Google link, you can do it in an instant: https://search.google.com/test/mobile-friendly
SECURE BROWSING
Google has a website dedicated to explaining its philosophy on a safer Internet, through a blocklist of malicious sites -> https://safebrowsing.google.com/
If any website appears on this list, logically, the Page Experience score will not be good.
What aspects could lead a website to appear on that Safe Browsing blocklist?
- Malware: having or installing some virus.
- Unwanted Software: install or modify undesirable aspects on any user device.
- Social Engineering or Phishing: social engineering to extract user data based on deception.
HTTPS PROTOCOL
The secure HTTPS protocol solves any encryption problem in communications between user and server, being intercepted and read at all times thanks to data encryption.
How can Google define us in this sense?
- Safe site
- Site not secure
- Dangerous site
To have our secure website under HTTPS encrypted browsing, we will need a security certificate.
INTRUSIVE CONTENT
The Intrusive content has a lot to do with metrics Core Web Vitals we will see further below.
Intrusive content is known as all those banners that worsen the user experience by hindering navigation.
- Content that occupies all or part of the user’s screen
- Content that loads a separate tab
Although this type of content is highly penalized by Google in its Page Experience, there are some exceptions that we will see below:
- If the content is about Cookies.
- For Pop-Ups of age confirmation.
- If the advertising is not too intrusive.
3. HOW TO IMPROVE THE CORE WEB VITALS IN MY DIGITAL NEWSPAPER
Suppose you want to improve Core Web Vitals metrics in your digital environment but don’t know how to deal with the necessary technological implementations. In that case, we show you the keys to upload to Page Speed Insights.
WHAT TO CHECK IN THE LCP – LARGEST CONTENTFUL PAINT
As we have already explained, the Largest Contentful Paint (LCP) measures the time it takes to render the most significant element on the Web, be it image or text.
To review the LCP elements, several parameters need to be optimized:
- Instant loading of Preload, Render, Pre-cache, Lazy load -> More info at https://web.dev/lazy-loading-best-practices/
- Optimize critical rendering path -> More info at https://web.dev/tags/rendering/
- Optimize CSS and JavaScript -> More info at https://web.dev/optimize-css-background-images-with-media-queries/
- Eliminate the unnecessary
- Compress
- A synchronize
- Optimize images -> More info at https://web.dev/compress-images/
- Optimize fonts -> More info at https://web.dev/font-best-practices/
Learn more about how to optimize the LCP on Web.Dev
HOW TO IMPROVE THE FID – FIRST INPUT DELAY
Time passing since a user clicks an item, and the browser responds to such interaction is known as FID.
To improve the FID, we must review the following indications:
- Reduce the impact of third-party cookies -> More info at https://web.dev/cookie-notice-best-practices/
- Reduce JavaScript execution time -> More information at https://web.dev/bootup-time/
- Minimize the main job thread -> More information at https://web.dev/mainthread-work-breakdown/
- Keep the number of requests low and files of little weight -> More information at https://web.dev/resource-summary/
Learn more about how to optimize the FID on Web.Dev
BEWARE OF THE CLS – CUMULATIVE LAYOUT SHIFT
The CLS occurs when an element of the page loads in place that should not, and during charging, it changes from home to the right place.
To avoid these charges that negatively ‘surprise’ the user’s browsing on the Web, there are several keys to take into account:
- Define in advance the sizes of images, ads, embeds, iframes … -> More info at https://web.dev/serve-images-with-correct-dimensions/
- Apply embeds, iframes, and ads in the non-visible part of the page that loads -> More info at https://web.dev/codelab-same-origin-iframe/
- Use preload, font-display: optional or font-display: swap when loading fonts -> More info at https://web.dev/codelab-preload-web-fonts/
More information on how to optimize the CLS on Web.Dev
4. CORE WEB VITALS IMPLEMENTATIONS
We specialize in implementing all the technical news regarding Core Web Vitals, achieving optimization of the metrics that allow our media to be at the forefront of Google Updates.
Among all the work done to date regarding Core Web Vitals implementations in CMS, these are the most important:
PRELOAD-PRE-CONNECT-DNS-PREFETCH
When a page is loaded, one or more calls will be made to external elements, to other hostnames, both ours and third parties.
These calls to other hostnames will need requests to the DNS at the moment the element is found.
For this, we will use the pre-connect system, which will make a call to pre-calculate the DNS before the actual request is made.
This call made previously and parallel to other elements will reduce the time when loading the other element.
Any hostname other than the domain itself should be in this preconnect system.
WIDTH-HEIGHT FOR IMAGES
The images without width and height (image size) significantly affect the CLS, hence the importance of specifying the size of all images in the code to avoid losing points by the CLS.
LAZYLOAD FOR IMAGES AND SCRIPTS
When a web page is opened, the browser loads all the resources necessary to display the page correctly.
During this process, objects in the visible area are recovered and those outside of it.
Among other things, this forces unnecessary loading time. To avoid this, we have implemented lazy loading or lazy loading.
With the help of a script like LazyLoad, the browser loads images and other data only when they appear in the user’s viewport, for example, when scrolling or maximizing the browser window.
SRCSET
This option allows us to load images of one size or another depending on the device accessing our website.
In other words, the browser will be able to choose a set of images and their size, always separated by a comma.
USE OF THUMBNAILS (IMAGES WITH CORRECT SIZE)
A thumbnail is defined as a preview image reduced from the original, used as a placeholder.
Depending on the platform, the thumbnail must be a specific size.
MINIFY AND COMPRESS FROM CSS AND JS
According to Google’s Web.dev, minify is the process by which unnecessary data is removed from a resource without affecting the way browsers process it.
For example, removing comments and unnecessary formatting, removing unused code, using shorter variables and function names, and so on.
USING CDN
The main purpose of the CDN is to reduce the distance between the server that sends the content and the visitor who downloads the content.
Its primary function is to cache that information that is not required to update constantly (images, videos, JavaScript, CSS, pdf …), i.e., static content, and deliver it to the user immediately.
CACHE HEADERS: CACHE-CONTROL
These headers are prepared for asset optimization. The optimization proposed by Google and applied for these headers is one year, which improves the data related to the cache-control in the Page Speed Insights.
What is an asset?
An element that is cached and does not change (Images, JavaScripts, JS, CSS, fonts …).
IMPROVE THE CORE WEB VITALS OF YOUR DIGITAL MEDIUM TODAY
If you have a digital medium and are concerned about the Core Web Vitals Update, we have personalized technical advice on all the parameters related to CWVs and their updates.
Our OpenHost programming team is already working on implementing and improving the metrics imposed by Google throughout the ecosystem.
