As most of you know my new blog site is live at https://thewebdev.tech/

I recently did a lighthouse audit from google chrome console and my site failed in performance.

Lighthouse audit

Now, one of the main reason is large images. All of the images(more then 2k) inside blogs comes from, two powerful and optimized cdn — cloudinary.com and imagekit.io.

The image which you see in homepage along with the blog title , comes from gatsby-image. So, they are highly optimized, but i still see some of them here. I will soon load small size files from them.

Culprit images

But the real issue, as from above screenshot are the book image and the logo image. I am using normal tag in them, so it’s time to change them to gatsby-image.

To use the gatsby-image, we need to have the path in gatsby-config.js in gatsby-source-filesystem. But my problem was that, i already had the directory setup done for using gatsby-image in my posts.

You can find the details about how i set my production blog site, with gatsby-image in my upcoming book Gatsby Cookbook. You can find more details about it here.

gatsby-config.js

I found good details about setting multiple gatsby-source-filesystem from this blog.

Next, we will use the Img inside our Advert.js, which is been called from both index.js and RightMenu.js file.

As usual we have to use graphql query to get the image and use it with useStaticQuery.

Advert.js

We also need to add a new style in advert.module.css file, because gatsby-image creates a div to wrap image and we need some top margin.

advert.module.css

Now, our image looks perfect in desktop.

Desktop

And also in mobile.

Now, let’s remove the unwanted import from index.js file.

index.js

Also, remove the not passed props from Advert.

index.js

We will also remove both of them from RightMenu.js file.

RightMenu.js

Now, we will also change the <img /> in Navbar.js. We will use the same type of code as in Advert.js file. We will make use of useStaticQuery, to get the response back.

Navbar.js

Next, we will show the image using the new Img tag.

Navbar.js

And we will have the logo image been served by gatsby-image.

Logo image

As you might have remembered from the start of the post, i had some more images in lighthouse audit which were of larger size.

Problem images

So, i did reduced their quality and hence size by an online reducer and replaced them.

Reduced images

I had pushed the code to github and so, my site got deployed in netlify. I ran the lighthouse audit again after the deployment and it had increased my performance. Also, there is no performance issue due to images.

Lighthouse audit

This completes the image optimization for my site but there are still a lot of small fixes to be done.

You can find the code for the site in my github repo here.