Hi all, I will explain how I improved my performance score in Lighthouse using WebP format images. I recently created a Hiking web app where users can share their past experiences and communicate.
When I'm done implementing all functionalities, I checked my web app is technically fine or not using Lighthouse. Here is the result.
It looks like there is room for improvement in the performance section. But how?🤔
It says that I can use another type of image format to download faster and for less data compression. Therefore, this time I will use WebP for background-image instead of PNG or JPEG.
I downloaded Modernizr in the first place. You can go to the download section and choose WebP. Once you finished downloading it, you can add the downloaded file in the certain directory and <script src="modernizr-custom.js"></script> in the header. You can decide the path by yourself.
Then, let's move to the CSS file. I added. the code below.
.webp .landing {
background: url("./img/showcase.webp") no-repeat center center/cover;
}
.no-webp .landing {
background: url("./img/showcase.jpg") no-repeat center center/cover;
}
Just in case the browser does not deal with webP format, I also added a JPG format image.
After that, I utilized Lighthouse again, and confirmed that the performance score slightly improved.
Top comments (0)