SEO and Core Web Vitals in HTML | Sigma Web Development Course - Tutorial #6

Summary

This video tutorial delves into the significance of Core Web Vitals for a seamless user experience across devices and their impact on SEO. It introduces Lighthouse, a Chrome tool that assesses and enhances website performance. The script covers key metrics like CLS, LCP, and FID, explaining their importance in loading speed and user interaction. Additionally, it highlights the role of meta tags and descriptions in SEO, emphasizing the need for responsive design and content relevance to rank higher in search engines. The video also guides viewers on using Lighthouse reports to identify areas for improvement and achieve better online visibility.

Takeaways

• 🌐 Core Web Vitals are essential for providing a good user experience across all devices, including iPad, iPhone, Android, and Surface Pro 4.
• 🛠️ The Lighthouse tool in Chrome helps to enhance website performance by generating reports that indicate areas for improvement.
• 🔍 SEO (Search Engine Optimization) is crucial for a website's visibility in search engines like Google, which prioritizes fast, informative, and user-friendly pages.
• 📈 Core Web Vitals include CLS (Cumulative Layout Shift), LCP (Largest Contentful Paint), and FID (First Input Delay), which Google uses to rank pages.
• 📏 CLS measures visual stability and should be minimized to prevent layout shifts that negatively impact user experience.
• 🖼️ LCP refers to the loading time of the largest content element on a page, with a good score being within 2.5 seconds.
• ⏱️ FID measures the time it takes for a page to respond to user input, ideally processed in less than 100 milliseconds.
• 🔑 Meta tags, including title and meta description, play a significant role in SEO, as they help search engines understand and index page content.
• 📝 The title tag should reflect the content of the page and be consistent with the page's main topic for better search engine ranking.
• 📱 Responsive design ensures that websites look good on all devices, which can be tested using browser developer tools.
• 📝 Meta descriptions provide a summary of the page content and may be used by search engines in search results, influencing click-through rates.

Q & A

What are Core Web Vitals and why are they important for a website?

Core Web Vitals are a set of metrics developed by Google to measure the quality of user experience on a website. They are important because they help ensure that a website provides a fast, responsive, and stable experience across all devices, which is critical for user satisfaction and search engine ranking.

What is the role of the Chrome Lighthouse tool in website optimization?

The Chrome Lighthouse tool is a hidden feature that generates a report on a website's performance, accessibility, best practices, SEO, and more. It provides suggestions on how to improve the website, making it faster and more user-friendly, which can enhance the overall user experience and SEO ranking.

What does SEO stand for and what is its significance in the context of website visibility?

SEO stands for Search Engine Optimization. It is significant because it involves optimizing a website to rank higher in search engine results, making the website more visible to users. This includes factors like page speed, content quality, and user experience.

How does Google determine which pages to show to users in search results?

Google determines which pages to show in search results based on various factors, including page speed, the quality of information presented, user experience, and Core Web Vitals. Pages that load faster and provide a better user experience are more likely to be ranked higher.

What is Cumulative Layout Shift (CLS) and why should it be minimized?

Cumulative Layout Shift (CLS) measures the visual stability of a page by quantifying the unexpected layout shifts that occur as the page loads. Minimizing CLS is important because layout shifts can negatively impact user experience by causing elements to move unexpectedly, which can lead to accidental clicks or a confusing interface.

What is the Largest Contentful Paint (LCP) and what is considered a good LCP score?

Largest Contentful Paint (LCP) measures the time it takes for the largest content element, such as an image or text block, to become visible on the page. A good LCP score is considered to be within 2.5 seconds, indicating that the most important content loads quickly, enhancing the user's perception of page speed.

What is First Input Delay (FID) and what is the recommended threshold for a good FID score?

First Input Delay (FID) measures the time from when a user first interacts with a page (e.g., clicks a button) to when the browser is actually able to process the input. The recommended threshold for a good FID score is less than 100 milliseconds, ensuring that the page responds quickly to user interactions.

How can setting explicit width and height attributes on images improve a website's layout stability?

Setting explicit width and height attributes on images helps improve layout stability by reserving the necessary space in the browser for each image as the page loads. Without these attributes, images may load later and cause the page layout to shift unexpectedly, leading to a poor user experience.

What is the purpose of meta tags and meta descriptions in SEO?

Meta tags and meta descriptions serve to provide additional information about a webpage to search engines and users. A well-crafted meta description can help increase click-through rates from search results by giving users a clear and concise summary of the page content, which can also indirectly influence SEO.

Why have meta keywords become less relevant in modern SEO practices?

Meta keywords have become less relevant in modern SEO practices because they were often abused by webmasters to manipulate search rankings. Search engines like Google have moved towards more sophisticated methods of understanding page content, such as natural language processing, reducing the reliance on meta keywords.

How can the responsiveness of a website be tested across different devices?

The responsiveness of a website can be tested using the developer tools in a browser, such as Chrome's DevTools. By selecting the 'Responsive' mode, developers can simulate how the website looks on various devices, from smartphones to tablets and desktops, ensuring a consistent user experience.

Outlines

00:00

🌐 Core Web Vitals and SEO Essentials

This paragraph introduces Core Web Vitals, emphasizing their importance for website performance across various devices. It explains the significance of SEO, using Amazon.in as an example to illustrate how fast-loading, informative, and user-friendly pages are favored by search engines like Google. The script delves into the three key metrics of Core Web Vitals: Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP), and First Input Delay (FID), detailing their impact on user experience and search rankings. The Lighthouse tool in Chrome is introduced as a means to assess and enhance website performance.

05:01

📐 Optimizing Web Layouts and Meta Tags

The second paragraph focuses on optimizing web layouts to minimize layout shifts, which can disrupt user experience. It advises setting explicit width and height attributes for images to prevent such shifts. The paragraph also covers generating Lighthouse reports for both mobile and desktop views to identify areas for improvement. Furthermore, it discusses the role of meta tags, particularly the title tag and meta description, in SEO. It stresses the importance of reflective and accurate titles and descriptions to enhance search engine visibility and user engagement.

10:08

🛠️ Advanced SEO Techniques and Web Development Resources

The final paragraph discusses the role of meta descriptions in SEO and clarifies that while they may not always be used by search engines, they are still an essential part of on-page SEO. It mentions the deprecation of meta keywords due to abuse and the shift towards content-based ranking influenced by AI. The paragraph also highlights the importance of understanding Core Web Vitals for better website performance and directs viewers to web.dev for comprehensive information on these metrics, PWA, and other web development topics. It concludes with an encouragement to follow the Sigma Web Development series for further learning.

Keywords

💡Core Web Vitals

Core Web Vitals are a set of metrics introduced by Google to measure the quality of user experience on the web. They are crucial for understanding how well a website performs across various devices and are a significant factor in search engine rankings. In the video, Core Web Vitals are discussed as essential elements for SEO, with the script emphasizing their importance in providing a good user experience and their role in how Google ranks web pages.

💡SEO (Search Engine Optimization)

SEO refers to the process of improving a website's visibility in search engine results. Defined in the script, SEO involves techniques that make a site more attractive to search engines, thereby increasing its chances of appearing higher in search results. The video uses Amazon.in as an example to illustrate how SEO impacts a website's ability to have its products appear quickly in searches.

💡Lighthouse

Lighthouse is a tool integrated into Google Chrome that analyzes web pages and provides insights on performance, accessibility, SEO, and more. The script introduces Lighthouse as a hidden tool that can be used to enhance a website by generating reports on areas that need improvement, such as loading times and user experience.

💡Cumulative Layout Shift (CLS)

Cumulative Layout Shift is a metric that measures the visual stability of a page. It quantifies the unexpected movement of content as the page loads. The video script explains CLS as a critical aspect of user experience, where a low CLS score indicates minimal layout shifting, leading to a better user experience. The example of a user accidentally completing an order due to layout shift is used to illustrate the negative impact of high CLS.

💡Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is a metric that measures the time it takes for the largest content element to become visible on the screen. The script mentions LCP as one of the Core Web Vitals, emphasizing that a fast LCP contributes to a good user experience by ensuring that important content loads quickly, with a target of under 2.5 seconds.

💡First Input Delay (FID)

First Input Delay (FID) measures the time from when a user first interacts with a page to when the browser is able to respond to that interaction. The video script explains FID as an essential metric for interactivity, stating that a low FID score, ideally under 100 milliseconds, indicates a responsive site that can handle user inputs promptly.

💡Meta Tags

Meta tags are snippets of text in the HTML code that describe a webpage's content and are used by search engines to understand what the page is about. The script discusses meta tags, particularly the meta description, as a way to provide search engines with information about the page, potentially influencing how the page is presented in search results.

💡Responsive Design

Responsive design refers to the practice of crafting web pages that adjust to the size and capabilities of the device on which they are being viewed. The video script touches on the importance of testing a website's responsive design to ensure it looks good on all devices, including mobiles and tablets, by using the developer tools in a web browser.

💡Web.dev

Web.dev is a website that provides resources and tools for web developers to learn about best practices, performance optimization, and modern web capabilities. The script recommends web.dev as a valuable resource for understanding Core Web Vitals and other web performance topics, suggesting it as a place to learn more about web development.

💡Back Forward Cache

Back Forward Cache (BFCache) is a feature in some browsers that allows web pages to be stored in a cache when the user navigates away, enabling faster back-navigation. The script mentions a Lighthouse report noting that pages with WebSocket connections cannot utilize BFCache, indicating a limitation of WebSocket for certain web performance optimizations.

💡Progressive Web Apps (PWA)

Progressive Web Apps (PWA) are web applications that are designed to provide a mobile-app-like experience, including the ability to work offline and send push notifications. While the script does not delve deeply into PWA, it acknowledges them as a topic within the realm of web development, suggesting that they are part of the broader conversation around creating high-quality web experiences.

Highlights

Core Web Vitals are essential for providing a good user experience across all devices.

Lighthouse is a hidden tool in Chrome that can be used to enhance website performance.

SEO (Search Engine Optimization) is crucial for improving a website's visibility in search results.

Google prioritizes fast-loading websites with good content and user experience in its search rankings.

Core Web Vitals include Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP), and First Input Delay (FID).

Cumulative Layout Shift measures the visual stability of a page during loading.

Largest Contentful Paint (LCP) assesses how quickly the largest content element loads on a page.

A good LCP score should be achieved within 2.5 seconds according to Google's standards.

First Input Delay (FID) measures the time it takes for a browser to process user input.

Lighthouse generates reports to identify areas for improvement in web page performance.

Properly sizing images with explicit width and height attributes can prevent layout shifts.

Meta tags and meta descriptions play a role in SEO by reflecting the content of the page.

The title tag is an important SEO element that should accurately reflect the page content.

Using responsive design ensures that a website looks good on all devices and screen sizes.

The Lighthouse report provides insights into performance, accessibility, best practices, SEO, and PWA.

Meta keywords are considered deprecated and are no longer effective for SEO purposes.

The content of a page is now parsed by search engines using AI, impacting its ranking.

Web.dev is a valuable resource for learning about Core Web Vitals and other web performance topics.

Transcripts

In today's video, we will learn about Core Web Vitals and why they are important.

Like this video and keep your energy high.

The thing is that your website should run on all devices in iPad, iPhone, Android, Surface Pro 4.

Because we have to give a good experience to all users through our website.

In this video, we will also learn that there is a hidden tool in Chrome called Lighthouse.

And how you can use it to enhance your website.

So write in the comment section below

Sigma batch OP

Let's go to the computer screen

Let's roll the intro

Intro

So guys I have come here to my computer screen

and now I will make a new folder whose name is video 6

video 6 and here in video 6 I will open the VS code as always and the thing I am going to tell you today is very important from the aspect of SEO

First of all, I want to tell you what is SEO, SEO stands for search engine optimization If you see any website, it has SEO

Let's take the example of Amazon.in

I opened Amazon.in

So Amazon.in wants to load this website as soon as possible

So that their products can come in search

Google is a search engine

Google's responsibility is to show the best pages to the users

So Google will only want to show those pages that will be fast

Present very good information, and have good user experience.

For example, let's say there are two pages, one page has told about dog food, the other page has also told about dog food.

But the page 2 of these two is loaded very fast, so Google will give it more preference.

Along with that, there are core web vitals

which google considers to rank two pages

first of all content is important

if your content is good then maybe your website can rank without core web vitals

but if you are competing with a page which has similar quality content

then your core web vitals will be seen

and if your core web vitals are good then you will be given preference

so in core web vitals first comes your cls

you see this video here which I have run from web.dev website

you will see that someone comes to your website and he is trying to cancel the order here and by mistake the time he canceled

this thing above became visible and he shifted the layout and the order was completed but the user wanted the order to be completed

and he wanted to click on no

in this case the user experience is very bad

and as you have seen in this video, it should not be like this

that's why our CLS should be minimum

now what is the definition of CLS?

Cumulative Layout Shift means

how much is shifting while the page is loading

suppose you have loaded the page and first of all

you get to see this

it was above and after that when this key term part was loaded

then everything was shifted down

the layout should not be shifted

if you put width and height in images then the layout will not be shifted

the next metric we are going to talk about is LCP

and LCP stands for Largest Contextual Paint

this means that if the user is viewing a page

then the biggest element on it

for example, the biggest part in this is this image

how long is it loading means the whole page will be loaded but the biggest element is loaded in how much time.

The whole page will be loaded but the biggest element

which is the most important is loaded in how much time.

According to web.dev and google, a good LCP score should be 2.5 seconds.

That is, the biggest element of the page should be loaded in 2.5 seconds.

After this comes the third metric which is FID

which stands for first input delay.

First input delay means that if any user clicks on any input element

Like a button or any type of input on a page

So how long does that input process

For example, if you click on a button, how long does that button click browser process

And according to google and web.dev, your input should start processing in less than 100 milliseconds

So these were the three core web vitals which are very important

For your information, these core web vitals are updated but these 3 are very important

Now I will show you what is a lighthouse report and why it is generated and how to get the value of these 3 core web vitals

So I will tell you here, if you will inspect by right clicking and inspect it and you may have it on the right side so you can click here and bring it down

by clicking here you can bring it here again

and by clicking here you can bring it down

I prefer it below because I am used to

looking at it from the starting

now you can see the option of lighthouse

Lighthouse basically generates a report for you

and tells you what can be improved

in your html page

for example if I want to see

in mobile how mobile users see my if I want to see in mobile

how mobile users are seeing my website

so I will click on mobile

or I will click on desktop

I will close this tab

I will click on mobile

and here I will click on analyze page load

so it will generate a report for me

Lighthouse

you can see here that a report has been generated

in this performance, accessibility, best practices, SE and PWA

all these things are being shown

now here you can see some things are shown in red

that is, the scope of improvement is in the page

now here you are telling that size your images properly

your website can be loaded 2.7 seconds fast

so all these suggestions are given to you by Lighthouse

and if you incorporate these suggestions

then your website will be loaded very well

and will give a good user experience.

Now you can see here that image elements do not have explicit width and height.

So you should give width and height, the width and height attribute of the image that we read in the last video,

should be used so that your browser has space.

When we set width and height in HTML, then space is reserved in the browser.

Otherwise, if we do not set height and and width then what will happen is that the browser

will not know how much space to reserve

and as long as the CSS will load

the whole page will shift from the bottom

so we don't want our page to shift

in the loading time, if our page starts

shifting then if we are going to click here

then by mistake when it shifts

it may be possible that we click here

suppose an image was going to come here

I am going to click here

and while I clicked

this image loaded and all the content shifted down

and instead of clicking here by mistake

I will click on the image

this is called cumulative layout shift

this kind of shift is not preferred

google does not prefer it at all

and it should be minimum

you can see that the space is very less

so we have to keep the cumulative layout shift minimum so that our user can get a very good experience.

Here we get a lot of suggestions and this is for our mobile.

Now we can generate a desktop report.

So as you can see that it has generated a report.

92 marks in performance, 100 out of 82 in accessibility, 75 in best practices, 75 in SEO.

Now you see here that the good things that have been told here

And the scope of improvement that Lighthouse tells you

So this is a hidden tool that we should all use

Now I want to tell you about meta tags and meta description

So what I will do here is that I will make a new file

I will name it index.html

And after making an html file

The first SEO element I want to tell you is title

If your title is reflecting the content of your page, then it is a good SEO practice.

Whenever your page is changing, make the title so that it reflects the content of your page.

Because if you want your website on Google, then it will come according to the title.

The index of Google, like you guys write here, Code with Harry.

And you write like this, so this thing is the title of the page.

And this is the title of the page, which is put by the YouTube people. This is the title of the page and this is the title of the page which is put by youtube

this is the title of the page which is put by instagram

this is the title of the page which is put by github

so if the title is put on the page

and the title actually reflects the content of the page

then your website will rank very well

now here let's say I put content

and I put h1 and write here harry

and after this let's and I write here Harry and then I write a paragraph here and I write lorem 45 here.

Now why did I write lorem 45, I will do view word wrap, why did I write 45, this is a very good question.

I wrote 45 because I am lazy and 4 and 5 are around, so I doubled 4 and 5. I also write 23 because they are also around, okay?

So there is no other reason. Now I will quickly preview it here, I will open in browser, so see it looks like this.

Now this document is written, if I leave it like this, then it will not be a good SEO practice.

I will write here about Harry and here I will write code with Harry, which is also my website.

And what will happen by doing this, my title will be reflected here, as you can see.

So what will happen by doing this kind of work, that my website will have more chances of my website appearing in google will increase.

I will inspect and take out its lighthouse report and see what are the scope of improvements.

Right now, its lighthouse report will be very good because there is nothing in it that I should improve.

But when I put images, I will get suggestions like put width, put height.

Along with that, I will tell you one more trick so that that you can see your website in any mobile.

You can click on the computer and if you choose responsive, then you can see your website in any device.

You can see if your website is responsive or not.

If you go to a specific device, like iPhone 12 Pro, Your website will look like this in the iPhone 12 Pro resolution.

Now don't say why there is no 15 or 16 in it.

12 Pro means a big iPhone device.

Understand, okay.

In such a big device,

How will your website look?

This is simply being told to you.

So now you can see here

How will it look in Surface Pro 7?

By clicking here

You can also see how it will look in Google phones

And if you want to take a general view

How will my website look in a responsive device

Like in iPad

Now if you don't have a device, then choose responsive and take out the approximate bit of your device

In total, your website should look good in all the bit devices

I will also tell you how this happens in this course In short, your website should look good in all the devices of width.

I will tell you how this happens in this course.

Now if you click here again, it will close.

The responsive view is closed.

And as soon as it closes, your website looks like this.

I will close it.

I will come back here and tell you about the meta text.

Here I will write like meta, so look here meta desc is coming.

I will click on meta desc and here I can give the description of my page here.

Suppose I give this is the page, this is a page about, this is a page which contains description about Harry.

And here you can write whatever page content you want, like I show you, then you write what is SEO and here you can see the meta description

SEO stands for this in simple terms

now it is not necessary that a search engine will parse your meta DESC

if it likes it, then it will keep your meta DESC here

if you have not put meta DESC, then it can be generated from your content

so this is the responsibility of the search engine

we don't know what Bing will do, what Google will do but from our side, our this is the responsibility of the search engine, what will Bing do, what will Google do, we don't know

But from our side, our page should be absolutely to the point, especially if we are writing a blog and we want our page to rank organically

So here you can see that I have put MetaDESC, now a meta keyword used to work a lot before, but now the meta keyword

It has been deprecated, meta keyword is not used at all the code of meta keywords looks like this

but it is believed that meta keywords do not rank in SEO

because people abuse it more

suppose you have written a page about pets

and you have written what is SEO in meta keyword

so it is not that your page will be ranked

I will correct these double quotes here

so if I put meta keyword here

then it is not necessary that the search engine will consider it

some search engines do not believe in meta keywords they say that we do not want to see put meta keywords, it is not necessary that the search engine will consider it. Some search engines do not believe in meta keywords.

They say that we do not want to see your meta keywords.

Meta keywords used to work a lot before, but not now.

Now the content of your page is being parsed.

And now the time of AI is coming, so your content will be understood.

According to the value of your content, it will be ranked.

Now if you want to know exactly about these core web vitals,

for example, if I right-click and inspect

and go to Lighthouse and take out the Lighthouse report for the desktop, then some Core Web Vitals come

like LCP comes, then FCP comes, First Contextual Paint, now you can see here everything is 100, 100, 100, 100

Look here, there was not much in this content, but here you can see that it is saying that

what are you doing, pages with Websocket cannot enter back forward cache.

It has websocket because we are using this extension.

Live preview.

Otherwise, this is absolutely correct.

Accessibility is also 100.

Everything is 100.

This is a very good page.

PWA is Progressive Web Apps.

We will not make it now.

But you can see here that first contextual paint, largest contextual paint, total blocking time, cumulative layout shift, speed index.

If you want to know about all this,

like what is first contextual paint? That what the user is going to see, how long has it been painted on the browser. Total blocking time, cumulative layout shift, speed index If you want to know about all these things

Like what is first contextual paint?

How long will the user see the paint on the browser?

So if you want to see this thing

You will have to go to web.dev

Web.dev is a very good website

Which talks about all these things

And you can see here

They keep talking about it

You can learn about all these things here

If you want to learn PWA, you can learn PWA.

About all these things

There is a lot of good content here.

But we are in this course

HTML, CSS, JavaScript and websites

Will focus on making.

This thing should have come to you according to me.

Because of which I told you about it.

If you have not yet accessed the Sigma Web Development series

Then definitely access it.

Access the playlist and bookmark it.

Or click on the star and click here to save.

That's it for now, guys.

Thank you so much for watching this video.

And I will see you next time. Thanks for watching!