Reducing bounce rate by improving page loading speed

Jacquelyn Tandang
Jacquelyn Tandang
Mar 12, 2023

In our previous post, we defined bounce rate as the percentage of people that land on a page and leave without taking an action[1]. What would cause a visitor to leave without making interactions?

The first thing that comes to mind is that maybe, the user did not even have the chance to interact. We will try to minimize the occurrence of this scenario by improving our page speed. We cannot totally eliminate this scenario because this can also be caused by factors outside of our control such as weak Internet connection during the time of visit.

Measuring page speed

To measure page speed, we will use a web browser tool called Lighthouse. For Chrome browser, click here to install.

Other browser extensions could affect our metrics. To avoid this, use an incognito window when performing tests. To open an incognito window in your Chrome browser, go to File > New Incognito Window then enter the url of the page you wish to test in the address bar.

Incognito browser

To open Lighthouse tool, go to View > Developer > Developer Tools > Lighthouse tab

Chrome Developer tools

Select mobile or desktop under devices then hit the analyze page load button. Make sure you have the performance checkbox checked under categories.

Lighthouse browser tool

In the results, there will be a speed index section under performance. It will tell you how many seconds our page loaded on the selected device.

As of February 25, 2023, our page speed is 1 second for desktop and 4.6 seconds on mobile.

Lighthouse desktop benchmark Lighthouse mobile benchmark

Ideal page load time

The ideal page load time is said to be within two seconds[2]. A page load speed of more than 3 seconds increases the likelihood of visitors bouncing off your site.

For this exercise, we will try to achieve up to 3 seconds page load for desktop and mobile.

Improving page speed

What needs to be improved in a website to obtain an ideal page load time could vary from site to site. Lighthouse can provide insights and links on how to implement these improvements.

Lighthouse suggestions

Let’s start by making small changes that could have a great impact like reducing the impact of third-party code by reducing unused JavaScripts. This could potentially save us 0.15 seconds loading time.

Removing unused third-party scripts

Under diagnostics, Lighthouse found that third party codes are blocking the main thread for 780ms. These third-party codes are scripts for Google Ads, Google Tag Manager, Google Analytics, Facebook Share widget, Booking.com and Google Maps.

Lighthouse expand for more details

Since we are not yet Google AdSense approved, we can remove the script for the ads for now. Also, we have not received conversions from Booking.com and Facebook Share widget yet therefore we can also remove them for now.

We will leave Google Maps, Google Tag Manager and Google Analytics because we need it. In most cases, we cannot implement all of the suggestions in Lighthouse but we should implement where we can.

Serving images in next generation format

Lighthouse use webp for images

Another small change that can give us a big impact is serving images in webp rather than png and jpg. WebP is an image format that provides better compression for images on the web. With webp, images can be stored in smaller file sizes[3]. However, not all browsers support this image format yet.

Using the html code below, browsers that do not support webp can fallback to using png or jpg making your image work for all browsers.

<picture>
  <source type="image/webp" src="/img/webp/little-boracay-ctto_555.webp">
  <source type="image/png" src="/img/batangas/calatagan-floating-houses/little-boracay-ctto_555.png">
  <img src="/img/batangas/calatagan-floating-houses/little-boracay-ctto_555.png" 
    alt="little boracay"
  >
</picture>

To create webp images from your existing images, run the following command in your terminal to convert all images in your folder to webp.

`for file in *; do cwebp -q 100 "$file" -o "${file%.*}.webp"; done`

Loading videos on demand

Another small improvement we implemented that is not listed in lighthouse recommendation is loading videos on demand.

Instead of embedding YouTube videos like this:

Youtube embed preview

We instead used a preview image with a play button in the center suggesting that clicking on the image will play the video. We will open the video on a separate tab when the image is clicked. This way, loading the video will not contribute to slower page loading time.

Using image as preview

Results

After the changes we have made, our page still loads within one second for desktop but with an improved performance score from 91 to 98.

New lighthouse desktop score New lighthouse mobile score

But on mobile, our page is now loading within 1.5 seconds from 4.6

This is not an exhaustive list of what you can do to achieve optimal page loading times. These are the steps we did for today’s case. We may discuss more tips on how to improve your page loading speed in the future. You may also install Lighthouse, run tests on your page and follow the suggestions.

Now that our page is loading within two seconds, we can now safely assume that visitors are able to see the page within normal conditions and that slow page load is no longer a contributing factor to our bounce rate.

In our next blog post, we will take a look at our Google Analytics results if improving our page speed helped improve our bounce rate.

Follow me on LinkedIn and see you on our next adventure! :)

Source:
[1] https://www.jacqofalltrades.dev/determining-which-pages-to-improve-to-ensure-a-good-website-first-impression-or-bounce-rate
[2] https://sematext.com/glossary/page-load-time/
[3] https://developers.google.com/speed/webp