Core Web Vitals to affect Google rankings May 2021

colak · 2021-02-12 17:03:39

philwareham wrote #328825:

I’ve done massive work on Textpattern.com’s family of official sites this week to get their performance as good as I can. Getting Lighthouse scores of 97/100 on mobile and 100/100 on desktop in Chrome. Pretty happy with that.

I’m not a huge fan of above the fold inline CSS though, so I doubt I’ll ever achieve a 100/100 on mobile.

Big thanks to Pete as well for tweaking the server multiple times at my request.

The site returns excellent results. I do not believe in the 100% except for the consciously minimal

Bloke wrote #328826:

It’s already in Txp 4.8.3 :) But it’s off by default so you need to add loading="lazy" to your <txp:image> tags.

One thing we might do is allow <txp:images> to take the attribute and then ‘pass it on’ to all its container tags, but that involves global variables which we’re trying to cut down so it might wait until (if) we refactor the tag registry.

Holy tagamole. I did not know that. It would have saved me 20 minites of work today. I remember it discussed in the forum but I had no idea it was already implemented. Having said that. I should have checked the docs.

Is there a reason you do not have loading="lazy" on by default? I can understand about backward compatibility but I can not think of a situation that it can break anything.

jakob · 2021-02-12 17:13:09

philwareham wrote #328825:

I’ve done massive work on Textpattern.com’s family of official sites this week to get their performance as good as I can. Getting Lighthouse scores of 97/100 on mobile and 100/100 on desktop in Chrome. Pretty happy with that.

Excellent!

I’m not a huge fan of above the fold inline CSS though, so I doubt I’ll ever achieve a 100/100 on mobile.

Echo that!

The other two common recommendations I’m not keen on are:

Providing even more interim srcset sizes to get a few bytes benefit at certain viewport widths.
Using a CDN for sites that have a predominantly local audience. Surely recommending duplication of content across servers across the world results in huge increases of energy consumption. A German-language site specific to German users does not really need optimal loading speed in Australia.

colak · 2021-02-12 17:14:15

So… I’ve changed the “above:https://forum.textpattern.com/viewtopic.php?pid=328823#p328823” to:

<txp:if_yield name="id">
	<txp:images id='<txp:yield name="id" />'>
		<txp:if_yield name="caption">
			<figure itemscope itemtype="http://schema.org/ImageObject" <txp:if_yield name="class"> class="<txp:yield name="class" />"</txp:if_yield>>
				<txp:if_yield name="url"><a href="<txp:yield name="url" />"></txp:if_yield><image loading="lazy" /><txp:if_yield name="url"></a></txp:if_yield>
				<figcaption><txp:if_yield name="url"><a href="<txp:yield name="url" />"></txp:if_yield><txp:yield name="caption" escape="tidy,textile" /><txp:if_yield name="url"></a></txp:if_yield></figcaption>
			</figure>
		<txp:else />
			<txp:if_yield name="url"><a href="<txp:yield name="url" />"></txp:if_yield><image loading="lazy" /><txp:if_yield name="url"></a></txp:if_yield>
		</txp:if_yield>
	</txp:images>
</txp:if_yield>

The beauty of short tags!

philwareham · 2021-02-12 17:19:13

colak wrote #328828:

Is there a reason you do not have loading="lazy" on by default? I can understand about backward compatibility but I can not think of a situation that it can break anything.

Because we can’t assume that people want lazy loading on by default – that’s too opinionated. For example, if you use a JavaScript carousel on your site then there can be issues because the script needs to know the intrinsic dimensions of the images to do its maths. If the image is lazy loaded (and you haven’t specified a width and height attribute) then this can be problematic as the script won’t know about the image dimensions. Better to let users define how their images load – we just provide the tools to do it.

philwareham · 2021-02-12 17:36:07

jakob wrote #328829:

Excellent!

Echo that!

The other two common recommendations I’m not keen on are:

Providing even more interim srcset sizes to get a few bytes benefit at certain viewport widths.

Using a CDN for sites that have a predominantly local audience. Surely recommending duplication of content across servers across the world results in huge increases of energy consumption. A German-language site specific to German users does not really need optimal loading speed in Australia.

Totally agree.

More than two (or three at a push) images then the work outweighs the gain.

If you have a German-centric site and the nearest server farm for your chosen CDN is in London, you could have worse performance by choosing the CDN over server the files locally.

jakob · 2021-02-12 17:42:54

jakob wrote #328829:

Using a CDN for sites that have a predominantly local audience. Surely recommending duplication of content across servers across the world results in huge increases of energy consumption.

An aside: on that front, I’m intrigued to read what the new AbookApart volume on Sustainable Web Design might have to say about that. Only when I ask to read a sample chapter, the site says okay but I never get the link…

colak · 2021-02-12 17:49:17

philwareham wrote #328831:

Because we can’t assume that people want lazy loading on by default – that’s too opinionated. For example, if you use a JavaScript carousel on your site then there can be issues because the script needs to know the intrinsic dimensions of the images to do its maths. If the image is lazy loaded (and you haven’t specified a width and height attribute) then this can be problematic as the script won’t know about the image dimensions. Better to let users define how their images load – we just provide the tools to do it.

This is a question for me to learn. The <txp:image /> tag parse the dims by default, doesn’t this mean that the js carousel will be able to know?

bici · 2021-02-12 17:52:00

Content Delivery Network (CDN) is a network of servers distributed across many places around the globe. Their job is to serve content to visitors. But, the website’s server does that too – “Serving Content“. So what is the difference?

CDN. Lazy Loading. Core Web.
This is all giving me a headache. Perhaps it’s time i get my self off the internyet .

colak · 2021-02-12 17:57:41

bici wrote #328836:

Content Delivery Network (CDN) is a network of servers distributed across many places around the globe. Their job is to serve content to visitors. But, the website’s server does that too – “Serving Content“. So what is the difference?...

CDN. Lazy Loading. Core Web.
This is all giving me a headache. Perhaps it’s time i get my self off the internyet .

I also ignore CDNs. It’s basically another word for cloud computing to me. If my site is down, I do not care if the images are down too.

The reason they want that, is to lighten the load from the site’s main server. I think that optimising images is still a must for those who wish to save energy.

Bloke · 2021-02-12 17:59:04

colak wrote #328835:

The <txp:image /> tag parse the dims by default

Annoyingly yes, but I expect that’ll change at some point so the dimensions are opt-in.

doesn’t this mean that the js carousel will be able to know?

Yes, if you choose to use the defaults. But if you’re making a responsive carousel or gallery, then width="0" height="0" is the only way to override things now. Which is rubbish.

colak · 2021-02-13 06:05:44

Bloke wrote #328838:

But if you’re making a responsive carousel or gallery, then width="0" height="0" is the only way to override things now. Which is rubbish.

Admittedly I have no such experience. I am as from yesterday using the image tag for the carousel at the NeMe site without any responsive issues, as those are handled by the css.

phiw13 · 2021-02-28 10:03:14

While going through the backlog in the feed reader, I noticed this small article from CSS-tricks (referencing an other article).
Two “performance improvement” tricks mentioned: Use content-visibility: auto; and decoding="async". I seem not alone in (seriously) doubting the value of both (Chris, the main author at CSS-tricks doubts equally).

Any other opinion on this ?

(the content-visbility property I find of quite dubious value in general, and it seems a potential accessibility nightmare in the making.)

Textpattern CMS

Textpattern CMS support forum

#37 2021-02-12 17:03:39

Re: Core Web Vitals to affect Google rankings May 2021

philwareham wrote #328825:

Bloke wrote #328826:

#38 2021-02-12 17:13:09

Re: Core Web Vitals to affect Google rankings May 2021

philwareham wrote #328825:

#39 2021-02-12 17:14:15

Re: Core Web Vitals to affect Google rankings May 2021

#40 2021-02-12 17:19:13

Re: Core Web Vitals to affect Google rankings May 2021

colak wrote #328828:

#41 2021-02-12 17:36:07

Re: Core Web Vitals to affect Google rankings May 2021

jakob wrote #328829:

#42 2021-02-12 17:42:54

Re: Core Web Vitals to affect Google rankings May 2021

jakob wrote #328829:

#43 2021-02-12 17:49:17

Re: Core Web Vitals to affect Google rankings May 2021

philwareham wrote #328831:

#44 2021-02-12 17:52:00

Re: Core Web Vitals to affect Google rankings May 2021

#45 2021-02-12 17:57:41

Re: Core Web Vitals to affect Google rankings May 2021

bici wrote #328836:

#46 2021-02-12 17:59:04

Re: Core Web Vitals to affect Google rankings May 2021

colak wrote #328835:

#47 2021-02-13 06:05:44

Re: Core Web Vitals to affect Google rankings May 2021

Bloke wrote #328838:

#48 2021-02-28 10:03:14

Re: Core Web Vitals to affect Google rankings May 2021

Board footer