Google Core Web Vitals [SEO]

Page speed is different from site speed, which is actually page speed on a set of pages on a website. Page speed can also be referred to as page load time, i.e. the time it takes for a web page to display all its content on mobile or desktop.

Key findings:

• A website should load as fast as possible
• Ideal loading speed for mobile should be under 3s
• 53% of mobile sites are abandoned if they load in more than 3s
• A 2 second delay in load time can lead to abandonment rates of up to 87%
• Google phone is under 0.5s at load time
• A site that loads slowly is a negative ranking factor

Sites that do well have a few things in common:

• high percentage of returning users
• low bounce rate
• more conversions
• more time spent on site
• better positions in Google
• good user experience
• lower costs at Google Ads

Some statistics about loading speed:

• 47% of consumers expect a web page to load in two seconds or less.
• 40% of consumers will wait no more than three seconds for a web page to load before abandoning the site.
• 52% of online shoppers said that fast page loading is important to their website loyalty.
• 67% of UK consumers cite slow load times as the main reason they would abandon an online purchase.
• Conversion rates drop by 7% for every second of delay.
• For an online shop with sales of 100.000 lei per day, a delay of 1s costs 2.5M lei / year.
• 79% of online shoppers will avoid an online retailer where they have encountered performance problems.
• 44% of online shoppers will share their negative experience with other users.
• User satisfaction drops 16% with a one-second delay in page load time.
• The annual revenue loss due to abandoned shopping carts from online shopping is $18 billion.

Google uses load speed as a ranking factor for landing pages in both SEO and Google Ads.

1. https://developers.google.com/web/updates/2018/07/search-ads-speed
2. https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
3. https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html – this factor has been taken into account since 2010, but only for Desktop

Core Web Vitals:

Core Web Vitals can also be found in Google Search Console. Below is a print screen from a site that loads very quickly.

These metrics apply to all web pages and can be measured. All of them are related to UX (user experience).

1. https://web.dev/vitals/
2. http://prntscr.com/v3v2j3 – a report is also in Google Search Console

Metrics:

LCP (Largest Contentful Paint)

• Measures performance in terms of Load, from when the page starts loading until the largest portion of text/image(s) is displayed on the screen.
• Google recommends that the LCP be <2.5s

FID (First Input Delay)

• Measures interactivity with the page. Measures the time from when a user takes an action (click, tap, scroll, etc.) until the browser can respond to that interaction.
• Google recommends that the FID be <100ms

CLS (Cumulative Layout Shift)

• Measures and calculates a score for visual stability, i.e. that score by which users experience unexpected changes in (buttons not working, text, web elements changing position, etc.).
• Google recommends that CLS be below 0.1

Other Web Vitals:

TTFB (Time to First Byte)

• Directly related to load time. Helps LCP.

FCP (First Contentful Paint)

• Measures the time from when a page starts to load until any portion of the content is displayed on the screen.
• Directly related to load time. Helps LCP.

TBT (Total Blocking Time)

• Has a weight of 25% (the highest) in the calculation of the score.
• Measures the times between FCP and TTI.
• Relates to page interaction. Helps FID.

TTI (Time to Interactive)

• Measures the time from when a page loads until it is visually rendered.
• Relates to page interaction. Helps FID.

Page Speed Overview:

Backend Time:

• DNS Time
• TCP Connect Time
• TLS Connect Time
• Time to First Byte (TTFB) of HTML doc response

Frontend Time:

• Base Page Time
• Start Render / First Paint (When rendering starts)
• Speed Index (how fast a user sees the page load)
• Time to Visually Ready (Users start to see content)
  • Load Time (Onload) (when all resources, JS, CSS, images) are downloaded
• Time to Interactive
• Fully Loaded Time (when page is 100% loaded)

Core Web Vitals Optimizations:

LCP (Largest Contentful Paint) Optimizations: https://web.dev/optimize-lcp/

• In scoring it has a weight of 25% (the highest weight)
• LCP must be below 2.5s. LCP takes into account images, video and text.
• Server Response Time Optimizations (https://web.dev/overloaded-server/Google recommends that the SRT be under 200ms. Anything over 1s is already a problem: http://prntscr.com/v424id
• HTTP Caching: use as much caching as possible, for any type of resource that should not be served from the server

CDN

• Use a CDN for resources: Images, CSS, JS

Connections to 3^Rd party apps, to inform the Browser

• If there are requests to sources 3^rd party used:
• link rel=”preconnect”
• link rel=”dns-prefetch”

Render Blocking JS and CSS

• JS and CSS files greatly affect FCP and LCP because before rendering the page they are all parsed.
• Defer any non-critical JS and CSS files that are not important to the page, to increase the load speed for the “main content” of the page.

Reduce CSS Blocking Time:

Reduce JS Blocking time:

• • Serve only the minimum necessary JS to users.
  • Optimize:

Below is an example from Moloso of CSS and JS files that are/are not important. Everything with red is not important to be loaded at first.

1. Green: Critical

2. Red: Non-Critical

Preload important resources:

• Examples:
• <link rel=”preload” as=”script” href=”script.js”>
• <link rel=”preload” as=”style” href=”style.css”>
• <link rel=”preload” as=”image” href=”img.png”>
• <link rel=”preload” as=”video” href=”vid.webm” type=”video/webm”>
• <link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>

• Compress text files with gzip
• Minimize critical JS
• Use Server-side Rendering or Pre-Rendering for JS, instead of Client Side Rendering.

FID (First Input Delay) optimizations: https://web.dev/optimize-fid/

• Measures how quickly the site responds to the interactions users make with the site.
• The main cause of FID being affected is JS execution. Optimizing JS scripts, from crawling, compilation and execution, will greatly reduce FID.
• Optimize Heavy JS Execution
• Optimize scripts 3^rd party. Please consider which are priority and which are not.
• For example Analytics, Tag Manager are priority and can be loaded at first.
• Live chat scripts, can be loaded at the end.
• Reduce JS execution.

CLS (Cumulative Layout Shift) optimizations: https://web.dev/optimize-cls/

• Common causes:
  • Dimensionless images
  • Iframes, Embeds without dimensions
  • Dynamic content
  • Fonts
• Add width and height attributes to images.
• Use rel=preload link for fonts.

Other Web Vitals Optimizations:

Optimizari FCP (First Contentful Paint): https://web.dev/fcp/

• Removed render blocking resources
• Minifiy CSS
• Remove unused CSS
• Use rel=preload link, for important resources (fonts, CSS, etc)
• Reduce server response time
• Use large cache times (1 year) on resources (images, font, media, script, CSS) Use Cache-Control: max-age=31536000 (365 days)

TTI (Time to Interactive) optimizations: https://web.dev/tti/, https://web.dev/interactive/

• TTI should be under 5s, on non-performing mobile devices. To get a good (Fast) score, it should be under 3.8s.
• The recommendations for improving TTI are very similar to FCP.

TBT (Total Blocking Time) optimizations

• In scoring has the highest weight: 25%
• Google recommends under 300ms
• Optimize third party code (JS in particular)
• Reduce JS execution times
• Minimize requests that are made in the page

Broad Optimizations:

TTFB (https://web.dev/time-to-first-byte/), is directly related to Server Response Time

• Minimize HTML
• Minimize HTML Requests
• Use a CDN to deliver resources
• Fully Loaded
• Most important in this case is the page size bytesTotal.
• Keep the page size as small as possible.

Third Party Scripts:

• This includes Chat, Email Marketing, Pop-ups etc. including Google Analytics (which is among the most optimized scripts)
• They usually have the biggest negative impact on loading speed.
• Recommendations:
• Use only those external scripts that are required for the proper functioning of the site.
• Investigate each individual script, each individual plugin to see which ones slow down the site and increase loading speed.

Image Optimization:

• Optimize and compress the images (testing is needed here, to see how much the images can be compressed, before they lose quality).
• Always add attributes width if height to images and video (if any).
• Or use other new formats like JPEG 2000, JPEG XR
• WebP compresses images between 25-35%.

Use Responsive Images

Use lazy-loading for images:

Image compression tools:

Tools resize images:

Resources for image optimization:

Tools for testing images:

1. https://web.dev/measure/
2. https://www.thinkwithgoogle.com/intl/en-cee/feature/testmysite/
3. https://developers.google.com/speed/pagespeed/insights/?hl=ro
4. https://developers.google.com/web/tools/lighthouse#devtools – perhaps the best of all
5. https://github.com/GoogleChrome/lighthouse-ci
6. https://github.com/GoogleChrome/web-vitals: The easiest way to measure all the Core Web Vitals is to use the web-vitals JavaScript library, a small, production-ready wrapper around the underlying web APIs that measures each metric in a way that accurately matches how they’re reported by all the Google tools listed above.
7. https://w3c.github.io/user-timing/
8. https://w3c.github.io/longtasks/
9. https://wicg.github.io/element-timing/
10. https://w3c.github.io/navigation-timing/
11. https://w3c.github.io/resource-timing/
12. https://w3c.github.io/server-timing/
13. https://googlechrome.github.io/lighthouse/scorecalc/ – performance score calculator

Resources:

1. https://web.dev/
2. https://developers.google.com/web/tools/lighthouse
3. https://developers.google.com/web/tools/chrome-user-experience-report/ -Chrome UX Report
4. https://web.dev/fast/ – Techniques for improving site performance.
5. https://web.dev/performance-scoring/ – how they are calculated: http://prntscr.com/v4nc0t