Are exchanged or reciprocal links okay with Google?
Etmagnis dis parturient montes, nascetur ridiculus mus. Donec lorem ipsum dolor sit amet, et consectetuer adipiscing elit. Aenean commodo ligula eget consyect etur dolor.

Contact Info

(+888)-123-4587

121 King St, Melbourne VIC 3000, Australia

info@example.com

Folow us on social

What is the greatest content-rich paint: An easy explanation

What is the greatest content-rich paint: An easy explanation

Largest Contentful Paint (LCP) is a Google user experience metric that became a ranking factor in 2021.

This guide explains what LCP is and how to get the best scores.

What is the biggest content paint?

LCP is a measure of how long it takes for the main content of a page to be downloaded and ready to interact with.

What is measured is the largest image or context block within the user’s viewport. Everything that extends beyond the screen does not count.

Typical measured elements are images, video poster images, background images, and block-level text elements as paragraph marks.

Why is LCP measured?

LCP was chosen as an important metric for the Core Web Vitals score because it accurately measures how fast a web page can be used.

In addition, it is easy to measure and optimize for.

Block level elements used to calculate LCP scores

Block-level elements used to calculate the largest content-based Paint score can be the elements

and

as well as heading, div, form elements.

Advertising

Continue reading below

Any block-level HTML element that contains text elements can be used as long as it is the largest.

Not all items are used. For example. The SVG and VIDEO elements are not currently used to calculate the largest content paint.

LCP is an easy metric to understand because all you have to do is look at your web page and determine what the largest text block or image is and then optimize it by making it smaller or removing anything that prevents it from downloading quickly.

Because Google includes most sites in the mobile-first index, it is best to optimize the mobile viewport first and then the desktop.

Delaying large items may not help

Sometimes a web page is rendered in parts. A large highlighted image may take longer to download than the largest item at the text block level.

What happens in this case is that a PerformanceEntry is logged for the largest item at the text block level.

However, when the highlighted image at the top of the screen is loaded, if the item occupies more of the user’s screen (their viewport), another PerformanceEntry object is reported for that image.

Advertising

Continue reading below

Images can be difficult for LCP scores

Web publishers usually upload images in their original size and then use HTML or CSS to resize the image to appear smaller.

The original size is what Google refers to as the “inherent” size of the image.

If a publisher uploads an image that is 2048 pixels wide and 1152 pixels in height, this 2048 x 1152 height and width will be considered the “inherent” size.

If the publisher now resizes the 2048 x 1152 pixel image to 640 x 360 pixels, the 640 × 360 image will be called the visible size.

To calculate the image size, Google uses the smaller size between the inherent and visible images.

Note About image sizes

It is possible to achieve a high largest content-rich paint score with a large image of your own size that resizes in HTML or CSS to be smaller.

But it is a good practice to have the inherent size of the image match the visible size.

The image downloads faster and your largest content-rich Paint score increases.

How LCP handles images served from another domain

Images served from another domain, e.g. From a CDN, is generally not counted in the calculation of the largest content paint.

Publishers who want these resources to be part of the calculation must specify what is called a Timing-Allow-Origin heading.

Adding this headline to your site can be difficult because if you use a wildcard

in the configuration, then it could open your site for hacking events.

To do this properly, you need to add a domain specific to Google’s crawler to whitelist it so that it can see time information from your CDN.

So at this point, resources (such as images) loaded from another domain (for example, from a CDN) are not counted as part of the LCP calculation.

Beware of those scores “Gotchas”

All elements on the user’s screen (viewport) are used to calculate LCP. This means that images rendered off-screen and then switched to layout once rendered may not count as part of the largest content paint score.

Advertising

Continue reading below

At the opposite end, elements that start in the user view port and are then pushed out of the screen are counted as part of the LCP calculation.

How to get LCP score

There are two types of scoring tools. The first is called Field Tools, and the second is called Lab Tools.

Field tools are actual measurements of a site.

Lab tools provide a virtual score based on a simulated crawl using algorithms that approximate Internet conditions that a typical mobile phone user may encounter.

How to optimize for the most content-rich paint

There are three main areas to optimize (plus one more for JavaScript Frameworks):

Slow servers. Render-blocking JavaScript and CSS. Slow resource loading times.

A slow server can be a problem with DDOS levels of hacking and scraping traffic on a shared or VPS host. You can find relief by installing a WordPress plugin like WordFence to find out if you are experiencing a massive attack and then block it.

Advertising

Continue reading below

Other problems can be misconfiguration of a dedicated server or VPS. A typical problem can be the amount of memory allocated to PHP.

Another problem may be outdated software such as an old PHP version or outdated CMS software.

The worst case scenario is a shared server with multiple users slowing down your box. If so, moving to a better host is the answer.

Typically, it can help to apply fixes such as adding caching, optimizing images, repairing render-blocking CSS and JavaScript, and preloading specific assets.

Google has a nice tip for handling CSS that is not essential for reproducing what the user sees:

Remove all unused CSS completely or move it to another stylesheet if used on a separate page on your site.

For any CSS that is not required for initial rendering, use loadCSS to load files asynchronously, utilizing rel = “preload” and onload.

Field tools for LCP score

Google lists three field tools:

Advertising

Continue reading below

The last one – Chrome User Experience Report – requires a Google Account and a Google Cloud project. The first two are more straightforward.

Lab tools for LCP score

Laboratory measurements are simulated scores.

Google recommends the following tools:

The first two tools are provided by Google. The third tool is provided by a third party.

Quotes

How to optimize for LCP

What is LCP?

Timing Attacks and Timing-Allow-Origin Header

Advertising

Continue reading below

Featured Image Credit: Paulo Bobita

    Leave Your Comment

    Your email address will not be published.*