Tip for Google Page Experience Signals

Kjeld · 2021-03-19 04:45:26

As you all know, this May, Google will include your site’s page experience signals in Google Search ranking.

The most important measures are:

Loading : Largest Contentful Paint (LCP)
Interactivity: First Input Delay (FID)
Visual Stability: Cumulative Layout Shift (CLS)

You can quickly measure your site’s signals at Google’s PageSpeed Insights site.

The front page I am currently developing ranked in the mid 70s (out of 100).
But two very simple adjustments made it jump to 98, almost perfect!

This might be helpful to a site that you are developing as well.

These are the two small changes that resulted in this huge result:

1. Moving images below the fold

This actually happened accidentally because I added a fairly long description with large margins.

Note that I haven’t yet optimized my images! So, it appears that in Google’s eyes, moving images below the fold appears to be far more important than optimizing your images.

Largest Contentful Paint (LCP) is now 2.3 s. Previously it was 6.0 s and gave a red warning. That is a huge difference for a small change.

Incidentally, it is important to mention that I don’t use a wrapper or container for the whole page. The navigation and the description are individual elements. The articles following them are however in a wrapper. But that is mostly below the fold now.

If you wrap everything in a container, the whole container must be rendered first. Now, the first individual elements can render before any wrapper or container containing multiple elements. This apparently helps with Google rating your page higher.

Moving images below the fold in combination with not using a wrapper had the biggest effect. The effect of the next measure on the Google rating was negligible, but it does make the site look a lot better:

2. Prevent a Cumulative Layout Shift (CLS)

Responsive images are now a must. But they have no height set, so you end up with your page jumping as the images are loading. Google calls this a Cumulative Layout Shift (CLS).

There is an old hack to prevent this from happening, as you probably already know. If not, this article explains it well.

In my current design all the images in the lists have exactly the same image aspect ratio, so I was quickly able to implement the first solution in the article.

As a result, Google now finds no CLS anymore. Notice that it is rated 0. Before it was 0.066.

Incidentally, there is a new aspect-ratio CSS property, but it is not yet supported by all browsers…

Naturally, Textpattern deserves all the credit for being fast in the first place!

Last edited by Kjeld (2021-03-19 05:25:38)

colak · 2021-03-19 05:38:28

I found that even when the images are above the fold, adding loading="lazy" returns the desired results in the speed tools.

Kjeld · 2021-03-19 06:10:32

colak wrote #329345:

I found that even when the images are above the fold, adding loading="lazy" returns the desired results in the speed tools.

Oh, I have to try that again. It previously made not much of a difference for my design…

Kjeld · 2021-03-19 06:17:53

colak wrote #329345:

I found that even when the images are above the fold, adding loading="lazy" returns the desired results in the speed tools.

Just tried it again.

For my design it makes almost no difference for a list of articles; maybe one point up.

It does make a small difference for an article with a single image. But the best result is 81…

colak · 2021-03-19 07:36:11

Kjeld wrote #329348:

Just tried it again.

For my design it makes almost no difference for a list of articles; maybe one point up.

It does make a small difference for an article with a single image. But the best result is 81…

That is indeed strange. I have up to 8 images above the fold and my results are 99% for mobile and 100% for desktop. Admittedly, I optimise my jpgs and also use widths heights which I then override in the css. img{max-width:100%;height:auto}

Kjeld · 2021-03-19 07:53:27

colak wrote #329349:

That is indeed strange. I have up to 8 images above the fold and my results are 99% for mobile and 100% for desktop. Admittedly, I optimise my jpgs and also use widths heights which I then override in the css. img{max-width:100%;height:auto}

I haven’t yet optimized my images as I am still building the site, so perhaps that is the reason.

Any idea how much lower the number is if you don’t use loading="lazy"?

colak · 2021-03-19 08:54:13

A quick test, after temporarily deleting loading="lazy", received the same results 99% for mobile and 100% for desktop. This is however new to me as a few weeks/moths ago the site was scoring a low 80s number on mobile without the loading attribute.

Bloke · 2021-03-19 09:01:52

Is there any way do you think we could leverage the fact we know the original image size? And thus know the aspect? If so, we could allow <txp:image_info> to output the aspect ratio – as a percentage maybe? – so you can drop it in your HTML like this directly. That way, at the expense of having a drop of inline CSS, you could do this dynamically for every image without them having to all be the same aspect ratio.

<txp:images> already allows filtering by aspect ratio or dimensions(s) (via the size attribute) but I couldn’t think of a neat way to allow that ratio to be output, nor an application for it. This might just be that application.

Edit: You can of course calculate it manually already if you wanted by extracting width and height via <txp:image_info> but if we could output the ratio already in a suitable format it would save people the hassle.

Last edited by Bloke (2021-03-19 09:05:54)

phiw13 · 2021-03-19 09:22:15

I am not there is much benefit to be obtained from using that apect-ratio CSS property for image loading / display / layout, and even less at single-image level. I can eventually see the point when building a grid of images or thumbnails and you want each cell to have a specific aspect-ratio, then tell the images “you need to go into this or that aspect-ratio” – you can use the object-fit property to further fine tune display or handle series of images with various intrinsic aspect-ratios.

For (single-)level display info in your HTML you are already fine with specifying the width and height attributes and get that value through <txp:image_info>. MO.

singaz · 2021-03-21 20:11:50

I use this method:

<div class="gallery-img aspect-ratio" style="--width: <txp:image_info type="w" />; --height: <txp:image_info type="h" />;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">

<img itemprop="contentUrl" src="<txp:image_url link='0' />" alt="<txp:image_info type='alt' />">
<meta itemprop="width" content="<txp:image_info type="w" />">
<meta itemprop="height" content="<txp:image_info type="h" />">

<p class="desc-text" itemprop="caption"><txp:image_info /></p>

</div>

or

<div class="gallery-img aspect-ratio" style="--width: <txp:image_info type="w" />; --height: <txp:image_info type="h" />;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">

<a href="<txp:image_url link='0' />" alt="<txp:image_info type='alt' />">
<img itemprop="contentUrl" src="<txp:image_url link='0' />" alt="<txp:image_info type='alt' />">
<meta itemprop="width" content="<txp:image_info type="w" />">
<meta itemprop="height" content="<txp:image_info type="h" />"></a>

<p class="desc-text"><txp:image_info /></p>

</div>

and CSS style:

img {max-width: 100%; height: auto;}
.aspect-ratio {--width: 3; --height: 2; position: relative;}
.aspect-ratio::before {content: " "; display: block; padding-top: calc(var(--height) / var(--width) * 100%);}
.aspect-ratio > img, .aspect-ratio > a > img {position: absolute; top: 0; width: 100%;}

Textpattern CMS

Textpattern CMS support forum

#1 2021-03-19 04:45:26