The First Contentful Paint (FCP) is a metric tracked by Google that is used to evaluate a given site’s speed ranking. As an important performance measurement, website administrators should be knowledgeable about it, how to evaluate and optimize it. This article gives a complete overview of everything you need to know about this value.
Table of Contents [hide]
- What is First Contentful Paint (FCP)?
- How To Evaluate The FCP Ranking
- Start Optimization By Building a Strategy
- Web Hosting-Specific FCP Optimizations
- FCP Optimization Technique #1 â Ttfb Value Adjustment
- FCP Optimization Technique #2 â Eliminate Render-Blocking
- FCP Optimization Technique #3 â Rely on Content Compression
What is First Contentful Paint (FCP)?
FCP, or its longer name First Contentful Paint is the name of a performance metric that evaluates the speed performance of actual visible content delivered to the browsers. This is opposed to the loading of resources by the web browsers that are required to construct the basic page structure. In layman’s terms this means that this value represents how fast pages load from a visitors perspective. To understand as to what this metric includes here are the types of content that are viewed as deliverable in this regard:
- Multimedia Content
- Images and Videos
- Rendered Text With Fonts
- Background Images
- SVG and Raster Images
- Non-White Canvas Elements
- Interactive Fields and Forms
Any type of content that is rendered by the browsers when the page is requested will be labeled as FCP. This marks the important distinction point between it and other performance metrics, by definition this is regarded as users-centrist. This value allows for differential speed performance ranking depending on the loading of such elements. At this moment there are three speed categories based on the made measurement: Fast (FCP <1s), Moderate (FCP <3s), and Slow (FCP >=3s)>.
How To Evaluate The FCP Ranking
The easiest way to measure a given site (or page) is by relying on Google’s own PageSpeed Insights. As well as the output results, the online service also measures other useful performance metrics and values, including First Input Delay, Largest Contentful Paint, and Cumulative Layout Shift. This Google tool also provides two important sections: Opportunities that give advice on how pages can be loaded faster, and Diagnostics that reveal detailed information about the resources. It is important to note that they don’t affect the overall performance score.
One of the easiest ways is to use the Google Chrome web browser. A quick and easy step-by-step approach is to follow this guide:
- Open the Google Chrome Web Browser and navigate to the designated site or page.
- Right Click and Press the Navigate button. This will open the DevTools panel.
- The top panel will show certain tabs, open the Performance. Click on the Record option, then Refresh the page, and then stop recording.
- You will see the value metric in the timing section which will be shown.
As part of the Lab Tools that web administrators can use to measure the FCP value, the most commonly used ones are Lighthouse, the Chrome DevTools, and PageSpeed Insights (which is regarded as both a field and lab tool).
Lighthouse is a Google-developed open-source tool that is used to improve web pages quality. It works by creating audits and it can be run both from the Chrome DevTools (it is integrated into it), the command-line or as a Node module (package). The Google Chrome web browser approach which we demonstrated in this article makes use of this technology.
Start Optimization By Building a Strategy
The best advice on FCP speed optimization is to follow the suggestions that are shown by the PageSpeed Insights tool. Reasons for doing so is the fact that this is a Google-developed product and it shows the logic of web developers, the way the web browsers execute the content, and how this is perceived by the search engine.
A simple Google Search will reveal many Page Speed optimizations and techniques that can be used to improve the overall score. While many of them may be implemented, the optimal approach is to first analyze and categorize the type of site and target goals, as well as the majority of visitors. This gives webmasters a clear strategy on what to focus on first.
This is regarded as very important as it allows webmasters to, later on, compare and contrast results. The initial starting point is the website before optimizations have begun. Later on, when all implemented procedures have completed the metrics of the final optimization site can be analyzed.
Web Hosting-Specific FCP Optimizations
Most of the widely-used optimization techniques rely on the use of common techniques to speed-up the loading of the target sites. However, before jumping on to follow all of the guides available on Google and YouTube make sure that you understand and follow the prescriptions that every performed action should be analyzed and metered to calculate the overall efficiency. In many cases, small “fixes” can have a much larger impact on a given site’s performance than large overhauls that can take days to perform.
Also make sure that you understand that some optimizations may not depend on your actions, but rather on the web hosting provider and the installed services and applications. Generally, there are certain hosting plans that are better-suited for certain applications. Other criteria that may give an impact on the overall loading speed on their side can be the following:
- Datacenter Location
- Hosting Resources Allocation
- Web Hosting Applications-specific Optimizations
- Implemented Caching Functionality
- Content Delivery Network Availability
- Web Resources Optimization
FCP Optimization Technique #1 – Ttfb Value Adjustment
Most of the optimizations are commonly done by doing technical revisions of the way the sites and pages operate. This can be either easy or complex, depending on the current state and the expertise of the webmasters. The intended goals that are set by the webmasters can be measured before and after the optimizations have been implemented. By doing so the results can be tracked and analyzed.
One of the most important procedures is the adjustment of the ttfb value. This is actually short for Time to first byte, an indicator of the network latency perceived by the visitors (and searches engines like Google). It gives a pretty good estimate as to how the webserver operates when visitors want to access the content and interact with it. There are many ways to improve the target site speed by reducing ttfb value. Effective strategies that are popular among most website administrators are the following:
- Content Delivery Network Deployment — By hosting static files and commonly-loaded resources on cloud servers, it will be aster to load them from different geographical locations.
- Web Hosting Server Optimization — If slowdowns are experienced, it is good advice to talk with the web hosting provider and enable any proposed optimizations on the hardware servers. Migration to cloud hosting servers like the ones advertised by Google and Amazon is also a popular choice for traffic-heavy sites.
- Web Caching – Server-side caching is often offered as part of the web hosting service. Enabling it will speed-up the loading of the servers much faster, while at the same time sparing resources.
It is important to note that further Ttfb value lowering suggestions are also available. Optimization of this value will have a significant impact on the overall Page speed overall score.
FCP Optimization Technique #2 – Eliminate Render-Blocking
There are two main approaches that can be done to reduce the possibility of such resources from showing up, or to fix outstanding issues:
- Rewrite The Code — By updating and rewriting older code the chances of having such a problem will decrease.
- Minify The Code — This refers to the actual optimization of the code, so that unused code will be deferred. When it comes to CSS code only relevant design should be applied to a given page. It is unnecessary to call CSS code in large files.
We remind you that the code can also be compressed and minified accordingly. There are certain WordPress plugins that can be used for users of this content management system.
FCP Optimization Technique #3 – Rely on Content Compression
Images constitute the most widely used resources on almost every web page. For this reason, their optimization is vital during the overall page speed enhancement. In most cases the general advice is to apply lossy compression, this is the type of image optimization that lowers the file size of the images with a noticeable quality degree. This leads to substantially smaller file size, most modern compression algorithms and techniques will actually produce an almost identical-looking image. If the correct settings are applied the visitors will not be able to see a larger difference between the original and optimized variants.
It is advisable that the images are prepared in graphical software with the Export/Save For Web option (when available) as this usually chooses the most appropriate algorithms for such usage. Compression for videos and other visual content can also be done, by taking into account the majority of users that visit the site. This will give webmasters an idea of which compression method to apply.
Given the fact that every site is different in its content, goals, and visitors, there is no single guide that works for everyone. FCP is regarded as one of the most important values that determine the speed of the site. Furthermore, when search engines (and particularly Google) index a given page and its score, this is also one of the most important values that determine the ranking. This gives an additional incentive to improve it.
An important piece of advice on this topic is to always improve the website and proactively analyze the performance. As content and traffic build-up, so will the need to perform speed adjustments arise. Web technologies also improve over time, so an additional tip we can give is to be aware of how to streamline and optimize dynamic content and the installed applications.
This Howtohosting.guide article sources information from Google’s Web.dev guide under the CC Attribution 4.0 license.