Voiceover: Nobody likes slow websites.
We all know that, right?
Besides that, page speed can have a real impact
on your user's engagement,
because nobody wants to wait for some website to load.
So, do you still remember our seven steps plan?
We have been working on step four all this time,
designing and developing our website.
But now, let's start with step five,
and make our users love our website even more
by using some techniques for speeding upload times.
And there are two very basic things we can do,
optimize heavy images and minify CSS and jQuery Code.
So let's go do that.
So the first thing we have to optimize are images,
and that's because images are usually, by far,
the more heavy content of our webpage.
We'll just show you that.
So I come here to my resources folder,
then we have here the meals.
So you'll see 200 kilobytes, 200, all of these images.
And, for instance, the cities.
200 kilobyte, you see here.
Also 195.
So all of these images together combined,
when we download the website this takes a long time
to load all of these images.
So image someone with a slow internet connection,
on a smartphone or so, would try to download this site
that would actually take them forever, right?
So let's reduce that file sizes,
and as a first step we can reduce
the actual dimension of the images.
And so far we've never really looked
at the image dimensions until now.
We just included all our images
and didn't really worry about anything.
So let's do that now,
and I will use the Chrome Developer Tools,
and we will look at these four city images.
So, again, you see how useful this is.
Okay, here we have it.
So inspect this image and now here we have it.
And when we hover that image we can see
the actual size of the file, which is 900 by 600 pixels,
and then the size that is displayed on the website,
which is only 249 by 166 pixels.
So the original image is way bigger
than what we actually see on the screen.
Now we have to think about one thing,
which is responsive web design
where images will actually get a little bigger.
So it, for instance, optimizes for this image size.
You see the images are now larger than they were before.
And let me actually hide this part a little bit.
So inspect element again,
and you see its 361 by 240 pixels,
which we see here on the screen.
So let's make that 375, for instance.
So that's the size that we need.
Now, I want the image size to be always twice
as much as the actual size.
And there's a simple reason for that,
and it is high resolution displays.
And those high resolution displays,
like the retina displays we have on MacBooks, and iPhones,
and also on your smartphones,
need the image files to be larger
than they appear on the screen
in order to make them look super sharp.
So in our case, that would be 375 times two.
So 375.
So we want the image to be 750 pixels and not 900.
So we can reduce the image dimensions,
which is a cool thing.
So remember this number, 750.
All right, so we come to our folder and to the cities,
which are San Francisco, London, Lisbon, and Berlin.
Now, if you're a Mac user, there's quite a handy way
to reduce the dimensions of the images all at the same time.
So I will just open them,
then here I say, "Command A" to select all of them,
and then just come here and reduce it to 750.
Okay, and on a Windows machine you could
use some other program to do the same thing.
So we see here we reduced from 1.1 megabyte to 490 kilobyte,
and that's very good.
That's a huge file reduction
and that's exactly what we wanted to do.
End.
Let's save those images.
So you see this is a very great way of doing this,
of reducing some files size,
and now we reload this
and everything looks exactly the same, right?
So this the first step to increase
the page speed of our website.
And you could now go ahead and do the same thing
for this image here, for instance,
or for these ones.
And, yeah, I think you should do that.
So this was the first step of reducing heavy images.
And now, another thing we can do, maybe even powerful,
is to use this tool called Optimizilla,
which basically compresses images online.
And we will use this tool
to compress our two biggest images.
And it's these ones.
You see this is 1.2 megabytes and this 2.5 megabytes,
so these are huge images.
So we will now compress these images.
And try to save a huge amount of precious space here.
So now we just upload these files,
and this takes a little bit of our time, of course.
Now the tool starts to actually compress this file,
and now we can see it down here
while the other one keeps uploading.
And, okay, so here we have the quality.
We can change that if we want.
And here are the original and the compressed side-by-side
and you see with a quality of 88 percent, which is a lot,
so these images look quite alike.
We can reduce 43 percent of the file size.
So this is very good, right?
And in this case,
this image here disappears behind that black layer,
so this is very dark.
So we almost can see the image
and so I will even reduce the quality even more.
And this will hopefully helps saving even more space.
And all right.
So this will now be less than 400 K
and before it was 1.2 megabytes.
So this is very good.
And now I'll just say, "Apply."
And then I can download this image.
And now the same thing with this one,
and you see that with a quality of 90 percent,
so this image is almost as good as this one,
we reduce from 2.4 mega to 780 kilobyte.
So in this case, this image is very important,
this is our header image.
I don't want to reduce the quality more than this,
so I'll just say, "Okay, that's all right for me,"
and then hit download here as well.
And now I have both files in my download folder,
and I will just put them here together
with the other images.
So one.
And two.
So you see these have a different file names.
So, it's hero min and customers min.
Now, of course, I need to go to our CSS file
and change that image as well, all right?
So where is that first one?
Okay.
Here we are.
So hero and now it is actually hero min.
And yeah, here it is.
And the other, hero min as well.
So we have these two lines here
because of the prefix I showed you before.
So this is the web kit version and this is original version.
And of course, I need to change the image in both.
And the same thing down here.
So here I say, "Min," and here the same thing.
All right, so let's open our page,
and you see this looks exactly the same as it did before,
and we reduced a whole amount of space,
and saved our users precious bandwidth
so they need to download way less data.
So you see, it's really easy to optimize images,
and it makes a really huge difference.
Now, another thing that we can do is to minify CSS
and jQuery code.
And this basically reduces the size of the CSS
and jQuery files by removing unneeded wide space
and by optimizing that code.
But, however, minifying code makes it quite difficult
for humans to read,
so we should only minify code when we're ready
to launch a website.
So, in the case of CSS, we can use this tool here,
and I will actually not do that right now.
I will just grab some CSS code here,
for instance let me say, I don't know, this code here,
and we can paste it here.
So I will not do this for all our code,
I will just show you what I mean by minifying the code.
So here we can say, "The highest compression of all."
And then process it.
And here is the result.
So, as I said, this is quite difficult,
or even impossible, to read.
This is all our code completely compressed,
so no comments, no wide space, nothing.
And we had a compression of 50 percent, actually.
So this is another thing we can do,
and you can find the link to this tool
and the JavaScript tool in the course eBook, as always.
And this technique is actually more important
when we have large amounts of code to compress,
because otherwise we will not save so much space.
And in our case, we don't have that much code,
so it's maybe not necessary to do this.
All right, that's it for optimizing page speed
and now let's move on to some very basic
search engine optimizing in the next lecture.