How To Optimise For First Contentful Paint (FCP)

What is First Contentful Paint?

First Contentful Paint (FCP) is a web performance metric that measures the time it takes for the first element of a webpage to appear on the user’s screen. This element could be an image, video, or block of text. FCP is an important metric because it is the first thing a user sees when they visit a website, and it can affect their experience and perception of the website’s speed.

Why does it matter?

It is crucial to optimise the First Contentful Paint of your website because it is the first impression that a visitor has of your website’s loading speed. A slow FCP can lead to higher bounce rates and lower user engagement, which can ultimately harm your website’s ranking on search engine results pages. Optimising the FCP can improve the user experience, increase engagement, and ultimately improve your website’s performance. In this blog post, we will guide you through how to optimise your First Contentful Paint for images, videos, and blocks of text.

How do I find the First Contentful Paint?

To identify the FCP element on your website, you can use tools like Google PageSpeed Insights. This will show you the FCP time and the element that appeared first on the screen. You can also inspect the page source code to see which element is loaded first in the HTML code.

Scan your webpage with PageSpeeds Insights here.

How to optimise for FCP if it is an image

Images are one of the most common FCP elements on websites. To optimise FCP for images, you can use the following techniques:

1. Compress images

Use image compression tools to reduce the file size without affecting the quality of the image. This will help the image load faster on the user’s screen. Many WordPress speed optimisation plugins automatically compress images when they are uploaded to the media gallery, or you can use online tools to manually compress an image like iloveimg.com.

2. Lazy loading

Use lazy loading techniques to load images only when they are visible on the user’s screen. This will reduce the initial load time of the webpage. WordPress will automatically add the “loading=lazy” tag to images (since version 5.5), or you can take advantage of the Nitropack plugin for more advanced lazy loading settings and features to further improve your website speed.

3. Use responsive images

Use responsive images that are optimised for different screen sizes. This will ensure that the image is not too large for smaller screens and will load faster on all devices.

We aren’t talking about responsive web design with this one, we mean using properly sized images on a per-device/screen-size basis. For example, a 1920×1080 hero image makes absolute sense for desktop devices. However, you may want to opt for a 500×500 hero image for mobile devices. It’s important that these different-sized images are actually different files, otherwise, you are simply forcing people to download a much bigger file size only to downscale it. Many WordPress themes and builders offer the option to display specific content depending on the device, you can take advantage of these features to display the most relevant sized image depending on the user’s device.

How to optimise for FCP if it is a video

Many websites decide to have an above-the-fold video to quickly engage visitors, which is a common cause for having a very high FCP. In order to optimise FCP for a video element, you can try these tips:

1. Choose the Right Video Format

Choosing the right video format is key to optimising FCP. You should choose a video format that is compatible with most devices and browsers. MP4 is the preferred format for videos as it is supported by most browsers and devices. You can use an online converter tool to convert your videos to MP4 format, such as veed.io.

2. Compress Your Video

Compressing your video is another way to optimise FCP. Large video files take longer to load, which can increase your FCP time. You can use a video compression tool to reduce the size of your video files without compromising the quality of the video. You can also reduce the length of the video to make it more lightweight. Again, we recommend the advanced but simple-to-use veed.io online video editor to do this.

3. Use Lazy Loading

Lazy loading is a technique that delays the loading of images and videos until the user scrolls down to that section of the page. This can significantly improve the FCP time as the video will only load when the user is ready to watch it. You can assign a thumbnail image to maintain a visual impact and entice the user to play the video. This is done through the <video> poster attribute.

How to optimise for FCP if it is text

Text is a crucial element of a webpage, and it is also an FCP element. To optimise FCP for text, you can use the following techniques:

1. Minimise HTTP requests

Minimise the number of HTTP requests needed to load the text. This can be done by combining multiple files into a single file or using HTTP/2, which allows multiple files to be loaded simultaneously.

2. Use web fonts

Use web fonts instead of system fonts. Web fonts load faster and will improve the FCP time of your webpage. We also recommend specifically using the WOFF2 format for fonts, it is the most modern and highly compressed web font format available today.

3. Minimise Javascript and CSS

Minimise the use of Javascript and CSS files as they can slow down the FCP time. You can do this by removing unnecessary code or by compressing the JS/CSS files. You can also minify the code which can slightly reduce the file size, or combine JS/CSS files which will also help to reduce the number of HTTP requests.

Conclusion

In conclusion, optimising for First Contentful Paint (FCP) is crucial to improving the user experience of your website. By following the techniques outlined above, you can significantly reduce the FCP time of your webpage, making it faster and more responsive. If you have a WordPress website, we highly recommend checking out the Nitropack plugin which can easily and automatically apply these optimisation techniques for you. As a web design company in Leeds, Blue Whale Media understands the importance of FCP optimisation and can help you improve your website’s performance. Contact us today to find out how we can help you with your web design needs.