What is your website's 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, takes a lot longer to load. This page therefore has a much slower visual speed. On other pages it might be the time it takes for a title to appear or a button. In most eCommerce aspects it's quite often product imagery as shown here.

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

Why does Visual Speed matter?

In short — it causes customers to become frustrated, lose focus and less likely to convert on your website.

An unnecessarily slow visual speed, slows down the browsing experience. This is especially true when customers are wanting to browse different products and are viewing subsequent pages. We have a separate post on this which looks at a customer scenario that describes this in greater detail.

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. If possible 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 in 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.
• Use image optimisation tools such as Imgix to optimise images on the fly or use CMS or eCommerce platforms that have this built in.

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 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 files of code that have to be downloaded before your customers can see anything. That 2 litres of milk you have? Well you don't need it for dinner. That can wait until the weekly shop. It's the same for the code needed for that interactive product gallery section towards the bottom of your website to work. It's not needed right now so load it later.