Google Core Web Vitals [SEO]

We all know that optimizing the loading speed of a website is important for both user experience and conversions. Nobody wants to spend tens of seconds on a website that doesn’t load. Loading speed is the time in which the content on a web page is loaded by the browser.

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 3Rd party apps, to inform the Browser

  • If there are requests to sources 3rd 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 3rd 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

Leave a Reply

Your email address will not be published.