Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,597
Website GitHub Twitter

Re: Core Web Vitals to affect Google rankings May 2021

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.


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,129
Website

Re: Core Web Vitals to affect Google rankings May 2021

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.

TXP Builders – finely-crafted code, design and txp

Offline

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,597
Website GitHub Twitter

Re: Core Web Vitals to affect Google rankings May 2021

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!


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

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

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,505
Website GitHub Twitter

Re: Core Web Vitals to affect Google rankings May 2021

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.

Offline

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

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,505
Website GitHub Twitter

Re: Core Web Vitals to affect Google rankings May 2021

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.

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,129
Website

Re: Core Web Vitals to affect Google rankings May 2021

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…


TXP Builders – finely-crafted code, design and txp

Offline

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,597
Website GitHub Twitter

Re: Core Web Vitals to affect Google rankings May 2021

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?


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

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

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 1,819
Website

Re: Core Web Vitals to affect Google rankings May 2021

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 .


…. texted postive

Offline

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,597
Website GitHub Twitter

Re: Core Web Vitals to affect Google rankings May 2021

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.


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,246
Website GitHub

Re: Core Web Vitals to affect Google rankings May 2021

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,597
Website GitHub Twitter

Re: Core Web Vitals to affect Google rankings May 2021

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.


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

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

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,340
Website

Re: Core Web Vitals to affect Google rankings May 2021

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.)


Where is that emoji for a solar powered submarine when you need it ?

Offline

Board footer

Powered by FluxBB