-: Let's now tackle another item that was
on the list for the test and optimized 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 is 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 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 webpage 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 a 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 list items are contained within UL,
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 is not perfect.
Not 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 the 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 is 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.
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.
While 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 gonna go into that
but we will fix this meta description here.
So that's something that we 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 view port 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.