SEO

SEO IN WEBSITES (WEB VITALS)

​

HUBSPOT LEARNING

QUESTIONS AT THE END OF THE PRESENTATION

Pay attention

SEO

They are the set of actions and techniques that are used to improve the positioning (visibility) in search engines of a website on the Internet, within the organic results in search engines such as Google, Bing or Yahoo.

Core Web Vitals #

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.

The metrics that make up Core Web Vitals will evolve over time. The current set for 2020 focuses on three aspects of the user experience—loading, interactivity, and visual stability—and includes the following metrics (and their respective thresholds):

​WEB VITALS

FACTORS TO MEASURE

Site speed.

A page that takes more than five seconds to load causes a high number of bounces.

The factors that most influence the loading speed of a website are: Hosting, which is where the server is located, the network and programming.

Multiple Select

THE TIME OF A PAGE IS MEASURED IN?

• LCP

• TBT

• CLS

LCP​

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.​

Multiple Choice

What is a good LCP score?

• 1000 MILLISECONDS

• 4 seconds

• 7 seconds

• None of the above

WHAT ELEMENTS ARE CONSIDERED?

• <img> elements

• <image> elements inside an <svg> element

• <video> elements (the poster image is used)

• An element with a background image loaded via the url() function (as opposed to a CSS gradient)

• Block-level elements containing text nodes or other inline-level text elements children.

​

In the first example, the Instagram logo is loaded relatively early and it remains the largest element even as other content is progressively shown. In the Google search results page example, the largest element is a paragraph of text that is displayed before any of the images or logo finish loading. Since all the individual images are smaller than this paragraph, it remains the largest element throughout the load process.

Draw

Select with the brush which is the LCP on this page

Multiple Choice

How to improve LCP ?

• A. Slow server response times

• B. Render-blocking JavaScript and CSS

• C. Resource load times and Client-side rendering

• A, B Y C

CLS

What is CLS?

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

A layout shift occurs any time a visible element changes its position from one rendered frame to the next. (See below for details on how individual layout shift scores are calculated.)

The largest burst is the session window with the maximum cumulative score of all layout shifts within that window

A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1-second in between each shift and a maximum of 5 seconds for the total window duration.

​

TIMES CLS

Open Ended

For a good user experience, aim for a CLS score of ____ or less. Learn more.

The other part of the layout shift score equation measures the distance that unstable elements have moved, relative to the viewport. The distance fraction is the greatest distance any unstable element has moved in the frame (either horizontally or vertically) divided by the viewport's largest dimension (width or height, whichever is greater).

DISTANCE FRANCTION

​

In the example above, the largest viewport dimension is the height, and the unstable element has moved by 25% of the viewport height, which makes the distance fraction 0.25.

...

​

Why is this a bug?

Differentiates between expected and unexpected layout changes by excluding layout changes that occur within 0.5 seconds of user input.

Thresholds for CLS scores are, as follows:

• Good - nothing to do here = CLS of 0.1 or less.

• OK, but consider improvement = CLS between 0.1 and 0.15.

• Longer than recommended = CLS between 0.15 and 0.25.

• Much longer than recommended = CLS of 0.25 or higher .

Some text here about the topic of discussion

Total Blocking Time (TBT) is a Lighthouse Performance metric introduced in 2020 that quantifies your page's load responsiveness to user input.

In the simplest terms, TBT measures the total amount of time your webpage was blocked, preventing the user from interacting with your page.

It is one of the Web Vitals and is a replacement for the field-only First Input Delay (FID) metric, seen in PageSpeed Insights.

​

TBT

Multiple Choice

For a good user experience, aim for a TBT of ____ milliseconds or less. Learn more.

• 2000

• 150

• 200

TBT​

TTI signals when your page is fully interactive; TBT specifically tells you which JavaScript tasks took the longest to execute.

Subject | Subject

However, both scenarios would feel very different to a user as the first scenario has a TBT of only 30 ms whereas the second scenario has a TBT of 4950 ms.

Scenario A is largely interactive throughout the page load, as no long tasks take up too much of the browser's time, while Scenario B is not interactable at all while the browser is busy handling the long task.

This makes TBT, both, an insightful stand-alone metric, and a useful companion metric to TTI.

​

Multiple Select

How to improve Total Blocking Time?

• 1) Reducing JavaScript execution time

  and minimizing main-thread work

• Removing unused JavaScript

• Reducing the impact of third-party code

• Replacing large JavaScript libraries with smaller alternatives

• Scan test with lighthouse

THANKS!