What is Visual Speed?

Visual Speed on Perforgo describes the amount of time it takes for the most prominent visual element on the page to load and become fully visible. For most sites this is often a product image at the top of the page.

You may also have seen this written as LCP or Largest Contentful Paint.

Below is a short demo of a website with slow visual speed.

You can see from the above example that once the page is displayed the largest element on the page in this case is the image itself. As this takes longer to load this page has a much slower visual speed.

Your visual speed goal should be to have these page elements fully loaded within maximum 2.5 seconds. Anything over that and your website can start to feel slow.

Why does Visual Speed matter?

Subsequent Small Amounts of "Slowness" Add Up

If it's taking, say 5 seconds to see your product images on your pages that maybe feels ok for the first product someone is browsing but chances are that the first page someone lands on is not going to be the only one they visit.

Imagine a situation where someone is looking for a new pair of shoes. They've found a link to your site, likely through a sponsored ad (that you've paid good money for) and they've landed on the first pair of shoes your site sells. In this case it took 5 seconds to load the main product image, this is your Visual Speed here. At this stage they're not overly bothered and it probably didn't negatively impact their opinion of how your site felt. For some really impatient people in a bit of a rush, it did, and they've already left your site. You just lost money on that ad click. In this case let's assume this is a relatively small amount of people but if your target market is in a big city always on the move this could be a lot more.

The customer has decided these shoes aren't for them but they're keen to explore further. The customer navigates to the "Summer Shoes" Product Listing Page. There's a grid of products here with images. The first few products in the grid load their images in around 5 seconds, similar to the first page they landed on. However the impatient nerve has just had it's first twitch. It's not the end game yet though.

The customer likes the look of a few products they see so they click on the first product in the grid to find out more. They've now landed on the product page for this pair of shoes. Again the product image takes around 5 seconds to become visible to them. It's become quite noticeable now to the customer that things are a little slow to load as in each of the 3 page visits this customer has made it's taken 5 seconds to load the product imagery, that 15 seconds for those of you without a calculator.

The customer has decided this pair of shoes isn't for them either but the customers thumb is starting to get a little bit of trigger finger to hit that close button, as they've established the slow waiting pattern and aren't sure they're committed to a slower that expected browsing. However you're in luck, this customer has the patience of a saint and decides to go back to the product grid and continue on to their third product.

During the visit to the third product, the main product image still hasn't loaded after 5 seconds. The waiting time before was already pretty tedious but this is taking the biscuit. That trigger finger/thumb on the close button has now pulled and they've left your site and remember you just spent money to get them there through the sponsored ad.

In this case the product image for the third product hadn't actually been optimised and the file size for it was a whopping 5MB.

Perforgo can help you monitor and diagnose large image file size issues and measure your websites Visual Speed.

What should I be aiming for?

You'll want your website's pages Visual Speed to be under 2.5 seconds. This is typically deemed fast enough for people not to notice. However always aim for the lowest possible without totally sacrificing on quality of course.

Good = 2.5 seconds
Ok = Between 2.5 seconds and 4 seconds
Poor = Anything over 4 seconds

These marry up to the official Core Web Vital thresholds for Largest Contentful Paint.

How do I improve Visual Speed?

Improve Backend Speed

The first thing to note is that if your Backend Speed is slow then this has a knock on effect on the Visual Speed. This is because the timer for Visual Speed starts as soon as someone clicks a link to visit your website. If your Backend Speed is 3 seconds then your Visual Speed can never be any less than that.

Optimise Images

Once you've got you Backend Speed in order the next thing in a large amount of cases is to check the file size of the images you are loading on your website. If your website is loading a 5MB product image then it's going to take much longer to download and show. Your visitors will be seeing something similar to the original demo shown above where the image slowly loads in bit by bit.

There are numerous things you can do to help fix this:

First of all, use Perforgo to automatically measure and show you image sizes on every page, helping to speed up the discovery of large images
Use the .avif image format for photography and .webp for graphic content
Don't be afraid to reduce the quality of images in photo editing software when you are exporting. In almost all cases going from 100 quality down to 60 in export settings renders very little tangible difference that your customers are likely to notice. Image file sizes can be significantly reduced by doing this.
Try not to include photographic content is vector graphics as it creates large SVG files. Keep the two separate and overlay them in code if you can.
Aim for file sizes in the region of 50KB-70KB for mobile and 100KB-150KB for desktop however this can really depend on the amount of space your image will be occupying on the page.
Make sure the exported image file size dimensions are in a sensible range. If your image is occupying a 500x500 pixel space on site and you have it exported at 10,000x10,000 that's a whole lot of pixels going to waste, even on high resolution devices.

Check Website Code Blocking Downloads

Your website is comprised up of a lot of files to make it work and look good. You'll want to check that you're only loading the things you need for the current page to work and look good. Anything that isn't visible or critical for things to work on the current page should be loaded on the page later on.

The best way to think about this is to imagine you've just been to the shop and you've to walk home with a rucksack or a carrier bag filled with some essentials for dinner that night.

If you were walking home with no shopping you'd make it back a lot faster than with shopping as you don't have that extra weight bearing down on every stride. The less shopping you have the quicker you'll make it home and the more, the slower. It's effectively the same for your website loading, only instead of the essentials for dinner on your websites back, it's lots of files of code that have to be downloaded before your users can see anything.

To help it load quicker you'll want to only make sure you've got the essentials loading and not a bunch of extra things.