Better website speed by improving First Contentful Paint (FCP)


First Contentful Paint (FCP) is a metric that measures how quickly a user sees some content on a web page. This metric is important because it can help you determine how quickly you can start engaging users on your page. Google suggests a good result for your First Contentful Paint (FCP) should be 1.8 seconds or less, that a result between 1.8 seconds and 3 seconds suggests your page needs improvement, and a result in excess of 3 seconds as poor, which is likely to indicate a significant factor affecting your website performance.

This guide will help you to improve your First Contentful Paint results, a performance metric in Google Pagespeed Insights reporting. From your Pagespeed Insights report, you can follow the steps below, and see this result improve.

Eliminate render-blocking resources

Render-blocking resources are those that block the page from rendering until they have been loaded. This can cause a lag in page response time, as users have to wait for both the main content and the resources to load. This is often an external script drawn from an external source to provide some functionality on your website.

You

Google’s reccomendation is to ‘inline’ the script. When you use an external JavaScript file, the browser has to wait for the script to be downloaded from the internet. This can add a lot of time to the “critical rendering path”. By adding the async attribute to the script, it tells the browser to keep loading the page and not wait for the script to be retrieved. Simply add async within the <script> tag

<script src="app.js" async></script>

Alternately you can add the defer attribute to tell the browser to wait until the web page is loaded and then call the script. Simply add defer within the <script> tag.

<script src="app.js" async></script>

Read more detailed information about render blocking resources

Minify CSS

CSS minify is the process of removing all unnecessary characters from a CSS file without changing its functionality. This includes comments, whitespace, and other unnecessary bytes from the file.

/* Header styles */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}

The above lines of code can be simplified to

h1, h2 { background-color: #000000; }

You might also use a plugin to minify CSS code for you, which would likely result in even further reduction to

h1,h2{background-color:#000000;}

Read more detailed information about how to minify CSS

Remove unused CSS

CSS files that are not used by a web page can be removed from the page’s code in order to reduce the size of the page and improve page performance. Unused CSS can be detected by using a tool such as the “css-inspector” extension for the Firefox web browser.

The css-inspector extension can be used to scan a web page for all of the CSS rules defined in the page’s code, and then to report on the number of rules that are not used by the page. If a large number of unused CSS rules are detected, then it may be beneficial to remove the unused rules from the page’s code in order to improve page performance.

Read more detailed information about how to remove unused CSS

Preconnect to required origins

Preconnecting is a way to improve the user experience by reducing the number of round trips needed to load a page. By preconnecting to required origins, the user’s browser can establish the necessary connections before they even need them, which can speed up page loading times. This is especially important for mobile users, who may have a slower connection than desktop users.

Read more detailed information about how to preconnect to required origins

Reduce server response times (TTFB)

There are a number of ways to reduce server response times, but the most common are to optimize code, use caching, and use a content delivery network.

Code optimization can be done by identifying and eliminating redundant or unnecessary code. This can be done manually, or by using a tool like YSlow, which analyzes code and provides recommendations for improvement.

Caching can be used to store frequently accessed data in a local cache, so that it can be accessed more quickly. This can be done at the server level, or using a caching plugin.

A content delivery network (CDN) can be used to distribute content from a server geographically closer to the user.

Read more detailed information about how to reduce server response times

Avoid multiple page redirects

There are a few ways to avoid multiple page redirects. You might use the “robots.txt” file to tell search engines which pages to crawl and which pages to ignore.

You may also use the “rel=canonical” link attribute on the element of your pages. This tells search engines that the page is a copy of the original, and that the original should be used for indexing and ranking. Alternately, you can use the “meta noindex” and “meta nofollow” tags to tell search engines which pages to not index in search results and not follow links on.

Read more detailed information about how to avoid multiple page redirects

Preload key requests

Preloading key requests is a process that allows browsers to predict which resources a user is likely to request next, and to begin fetching those resources in advance. This can improve the user experience by reducing the amount of time required to display a web page, as well as reducing the number of network requests that need to be made.

Browsers typically preload key requests by monitoring the user’s browsing history and predicting which resources the user is likely to request next. If a browser detects that a user is likely to request a particular resource, it will begin fetching that resource in advance.

Read more detailed information about how to preload key requests

Avoid enormous network payloads

There are a few ways to avoid enormous network payloads. One way is to use a content delivery network, or CDN. A CDN caches static files, such as images, videos, and scripts, on servers around the world.

This way, the files can be delivered to the user from the closest server, rather than from the server where the website is hosted. This can reduce the size of the files that are sent over the network, and therefore reduce the amount of data that needs to be transferred.

Another way to reduce the size of your website’s payload is to use compression. Compression can reduce the size of files by up to 70%, which can greatly reduce the amount of data that needs to be transferred.

Read more detailed information about how to avoid enormous network payloads

Serve static assets with an efficient cache policy

Static assets are files that are served to a user’s browser without being processed on the server. This can include images, CSS files, and JavaScript files. Static assets can often be cached by the browser, which means that the browser will store a local copy of the file so that it doesn’t have to download it again the next time the user visits the page.

Static assets can be served in a variety of ways, but the most efficient way to serve them is to use a caching policy. A caching policy is a set of rules that tells the server how long to keep a static asset in its cache and when to reload it from the source.

Read more detailed information about how to serve static assets with an efficient cache policy

Avoid an excessive DOM size

The DOM (Document Object Model) is a tree-like structure that represents the content of your web page. The more elements and attributes the document contains, the larger the DOM size.

This can impact performance, especially on mobile devices. To avoid an excessive DOM size, keep the document as simple as possible. Remove unnecessary elements and attributes, and use shorthand properties whenever possible. One technique is to use a templating system. A templating system allows you to create a template for your HTML, which can then be used to generate the HTML for each page of your website from the same data source.

Read more detailed information about how to avoid an excessive DOM size

Minimize critical request depth

The request depth is the number of requests that need to be made in order to get the desired information. This can be a problem if there are a lot of requests, as it can slow down the page loading time and increase the load on the server.

To minimize the critical request depth, try combining multiple requests into a single request, or by using caching to store the information that is needed. This can be achieved by using a CDN to store the information that is needed.

Read more detailed information about how to minimize critical request depth

Ensure text remains visible during webfont load

Webfonts are fonts that have been designed specifically for the web, and they can be used on webpages to create beautiful and unique designs. There are a variety of different webfonts available, and each one has its own unique set of features. Some webfonts are designed for use with specific types of text, while others are designed for use in specific types of layouts. Choosing the right webfont can be a challenge, but it’s worth it to create a unique website.

There are a few things to consider in order to ensure that text remains visible during webfont load. One is to ensure that the text is not too close to the edge of the screen, as this can cause it to be hidden by the webfont. If a webfont is absolutely necessary, it is important to use a font that is as lightweight as possible, in order to minimize the amount of time that it takes to load.

Read more detailed information about how to ensure text remains visible during webfont load

Keep request counts low and transfer sizes small

There are a few techniques that can be used to keep request counts low and transfer sizes small. One is to use a content delivery network (CDN) to serve static content. This will help to distribute traffic load and reduce the number of requests that need to be made to the server.

Another technique is to use caching. This will store a copy of the requested content on the user’s computer, so that it does not need to be downloaded again the next time it is requested. Minifying and compressing files can also help to reduce their size, reducing the amount of data that needs to be transferred.

Read more detailed information about how to keep request counts low and transfer sizes small

Facebook
Twitter
LinkedIn
Pinterest
Joff Crabtree

Joff Crabtree

Joff is a digital innovation specialist guiding data-driven decision making to transform business potential.

Digital Debrief

Leave a Reply

Your email address will not be published.