All language subtitles for 144 Testing Performance With Lighthouse.en_US

Let's now tackle another item

that was on the list for the test and optimize step.

And that is to test the website performance

using the Lighthouse tool.

And the Lighthouse tool is basically an automated tool

that we can use to improve the quality of our pages.

And it was developed by Google and therefore it is available

here in our dev tools.

So let's click inspect here

and then all the way here at the end

you should have this tab which says Lighthouse.

So let's give ourselves some more space.

And then here, we will want to turn on all the categories,

maybe except Progressive Web App.

And here we can then choose if we want to test

on desktop or on mobile.

So let's start with desktop and then generating the report.

And this going to take a little bit of time,

so you see it does different things here,

but that was actually pretty quick.

So we got these four scores for these different categories.

So our performance seems to be excellent.

The accessibility has some things to improve

and also on the SEO, so search engine optimization.

Now this performance here is not really indicative

of the real truth,

because for that we would actually

need to test this once the website is deployed.

And so we will run this test again,

once we do that in the last lecture here of the section.

But for now let's take a look at the results

and if everything is green,

then that is perfect and you don't have much to fix.

But anyway, let's take a, a quick look here at our results.

And again, the results in performance,

they are kind of skewed because we would have to test this

once the website is actually deployed,

because right now, of course,

everything is very fast to load because the web page

is still loading from our own computer.

So we are still here on our local server basically,

and so therefore everything is really, really fast.

Okay.

So here, what we need to do

is basically to fix the image sizes.

And so here we can see, we can potentially save 1.4 seconds.

And so that is what I mentioned also before,

so way back in the design section,

which is that it is very, very important to optimize images.

So both in terms of the image dimensions,

and also of the actual size in kilobytes, or even megabytes.

So here we're talking about those sizes,

so big problem there,

and here, we're talking about the payloads.

So basically that's the file size in terms of kilobytes

and in fact, our images are huge.

And so that is something that we will need to fix soon,

so not in this lecture, but in one of the next ones.

Also, it tells us here that we should

explicitly define the width,

and the height attributes on images,

which is something that we did not do.

And so all of this here is impacting our performance.

Now again, we will not fix that for now, but a bit later.

Then in terms of accessibility we passed a lot of things,

so here we can see what we passed.

So for example, let's see.

So we have, of course, a title element here,

the HTML has the link attribute,

and so remember that was important,

so we set it here to English.

And so that seems to be important for accessibility.

Also here, image elements have alt attributes.

So, as I kept telling you throughout the course,

we should never forget the alt attribute on images.

And so that's why we passed the audit here.

Then, a list items are contained within the U L,

so unordered list or ordered list.

So again, that's something that we have been doing always.

So yeah, so we passed most of the things there,

but let's actually take a look at what we did not pass.

So there are some issues apparently

with color contrast ratio.

So here our white text on our primary orange color,

apparently it's not perfect.

No, right.

But actually this test here does not really work that well

because remember way back,

when we designed this hero section,

we actually did change the color of this text here

to give it a good contrast ratio with the background.

So we already checked that this one here is actually okay.

So I'm not sure why the value appears here

as not being okay.

So what that means is that there are basically some errors

in this section here of the Lighthouse test.

So we can ignore this one here.

Then here, we already knew that this was an issue,

but we had simply ignored it.

Then again, this subheading,

so here we actually even chose, again.

Let's add some space back.

So here we did again, actually choose to a bit darker color

just to make sure that

the color becomes actually accessible.

So really not sure why Lighthouse here,

tells us that it is not.

Now this, of course it's not accessible,

and again, we made that on purpose.

Then the subheading again,

and also while this orange text on white

apparently is also not so accessible,

let's just check that quickly.

But while I'm also not going to go back now

and change everything.

So you could do that, and if you're building a real website,

then you should probably do that.

Yeah, and yeah, so that contrast ratio is not ideal,

even though I really cannot see

how this link here is hard to read.

So right here,

I mean visually the contrast ratio looks just fine,

but apparently with this algorithm,

so with the algorithm that measures the color contrast,

somehow it is just 2.85.

So, again if you were building a real website,

then probably you couldn't really use

this orange brand color here and,

well, you'd have to replace it,

but I'm not going to do that.

So yeah.

Let's check the next category here.

So let's see what best practices we passed.

Well, these are actually kind of independent

of what we did and let's take a quick look

at search engine optimization.

So remember how I said that

for search engine optimization, to do it properly,

you would need an entire course just for that.

So I'm not going to go into that,

but we will fix this meta-description here.

So that's something that you will do in the next lecture.

So basically adding a short description

that is then visible in Google and other search engines.

All right, but we still did pass

some things for search engine optimization,

such as this Viewport meta tag,

and some of this other stuff right here.

Okay.

So, the accessibility things, I will leave them as they are.

And then in the next lecture I will fix

that search engine optimization meta-description.

And then after that we will optimize the images

so that then we can finally launch our project

to the internet, so deploy it on a live server.