Blog Header Image Causing FCP Issues

And for your ease here is a link to one random blog post:

https://industrialscripts.com/internal-conflict-examples/

Hi there,

the FCP time is from initial request to the First Contentful element to be displayed, generally ( as in this case ) it will be the site header that is measured.

The featured image is the LCP element - image requests don't render block so they won't impact the FCP time. The only time an Image would affect FCP is if it were the only element that was displayed above the fold and then FCP and LCP elements would be one in the same.

Running a PSI report > Lab Data. I see FCP: 2.3s and LCP: 2.5s - both in the green which is good. And considering the LCP loads 0.2s after FCP then the image itself is well optimized and being loaded quickly. Which is great.

On to the Opportunities.
The first and only red flag is: Improve Initial Server Response time. Which is something that should be addressed with your host. Note: recently i have noticed that some users don't see this issue depending on their testing location, whilst others do.. so it could Googles lantern algorithms doing some weird calculations.

Eliminate Render blocking issues - again this is very subjective as they are small files and are subject to how fast the server responds.

Thanks for the response David. We are hosted with Kinsta (at considerable expense), so one would hope the server response time is not the issue.

Fundamentally we are stuck here, however, because the speed guy is saying he can't get Google to remove the search console errors.

I mean, that's the game here: removing those search console errors.

How can we do that?

(note I am not a developer)

It might be worth giving Kinsta a nudgee - i am not sure where your servers based but we run Kinsta off a New York server and the initial network requests timings are probably 30% faster.

So what else can we do - some of these will make a minor ( or even no noticeable ) difference to performance but we can eliminate some network requests and every little helps as they say:

1. Customizer > General:
Set the Dynamic CSS type to External.
Change Icon Type to SVG
Change Structure Flexbox
Check Cache Dynamic CSS

2. YouTube Videos - i think they are being lazyloaded and their not getting flagged on Google but this plugin will stop and scripts being loaded until the user actually clicks the video:

https://wordpress.org/plugins/wp-youtube-lyte/

3. Optimization
You can use the Autoptimize plugin:
https://wordpress.org/plugins/autoptimize/

And you can see our recommended configuration here:

https://docs.generatepress.com/article/configuring-autoptimize/

Ultimately according to the Lab Data on the PSI report the FCP and LCP timings are both in the Green. It may take some time for Google to reflect these results in the Origin Summary or Field Data.

Hi David sorry for the delay.

We use an LA Kinsta server.

We have made the edits you suggest in the Customiser.

Is Autoptmize a must in your view, then?

We are stuck in a bit of a pincer here ultimately: Kinsta say it's not their fault, GP say it's not their fault, the speed optimiser we hired said it's not his fault....and yet the errors remain in Google Search Console.

I need to remove them, bottom line.

See this screenshot > https://prnt.sc/12j7ypw

The speed optimiser claims he can "fix" it by tinkering with the header image of blog posts somehow, but I'm not clear what he intends to do and I would rather solve the issue conventionally if possible...

What should I do?

OK so i had another look as you have so many posts flagging an issue i checked out another random post:

https://industrialscripts.com/nora-ephron-quotes/

and wow google hates it:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Findustrialscripts.com%2Fnora-ephron-quotes%2F

And yet the WebPageTest gives us MUCH better results:

nora-ephron-quotes: https://www.webpagetest.org/result/210505_AiDcN5_ca2ec77e7ebab13f112aa868a7590139/1/details/#waterfall_view_step1

whereas the original test URL provided above has shockingly bad results ( considering it passes the Google PSI ):

internal-conflict-examples:
https://www.webpagetest.org/result/210505_AiDcZD_9623f9c1c9d10eb537445aeea672878d/1/details/#waterfall_view_step1

In both PSI reports we see the flag for Improve Initial Server Response time.
And in the two webpagetest reports ( both of which are tested against an LA server ) we see a HUGE difference in the initial request times - the first line in the Waterfall report.

So something is definitely odd with the Servers response to those pages.

Back to nora-ephron post if we check the PSI report again we see quite a few opportunities for improvement, aside from the initial server response issue - the main ones are the JS that YouTube loads - in my notes above #2 You Tube Videos - that plugin should eliminate the scripts being loaded until they are necessary.

I had a nose at that post in my browser dev tools and there were several failed requests to the Youtube servers - which may just be a hickup but could be adding more pain to the problem.

So things to take away:

1. I would raise the issue with Kinsta as those Initial Server Request times are spikey as hell
2. Add the Youtube Lyte Plugin to eliminate the YT scripts render blocking.
3. Regarding Autoptimize - we use it on our own Site, its not always a requirement but it 'can' help improve load times.

Ok David some progress has been made here - Kinsta rebooted the database and installing YouTube Lyte seemed to make a big difference, so many thanks for that suggestion.

The errors in GSC aren't gone however, and I want to be sure they will be before I press that validate button again.

This speed optimiser I've hired still seems to think there is an issue relating to the header image in blog posts in GP.

This post in particular seems to score worse than the others > https://industrialscripts.com/internal-conflict-examples/

Is there a perfect dimension in terms of pixels for all blog header images with the way our site is set up? If so can you let me know what dimensions those are?

Also, now, after the changes, what is your opinion? Should we resubmit for validation? One of the problems here is that this speed optimiser guy is a little obtuse in terms of explaining what it is he would do (in terms of theme edits) to make the errors go away.

I keep saying to him...if this was truly a GP issue, a) they wouldn't have the rep they have and b) somebody else would have the problem!

ps. haven't installed Autoptimise yet but made pretty much every other edit you suggested.

Thats great - i tested the Nora post and that now passes the Lab Data test - hurrah!.
One thing i did notice is that there is an AMP version of the site running:

https://industrialscripts.com/nora-ephron-quotes/amp/

Which when tested doesn't perform so well - it ranks badly on the LCP - which is the featured image. The LCP is over 4 seconds - which is what was being flagged in your google console. But GP has nothing to do with that - as its all coming from the AMP Project.... what i don't know is whether the web dev metrics for mobile are being tested against the GP site or the AMP site - is there any indication of this in the Console ?

Regarding the GP Featured image - as the Lab Data test is passing for those posts and google isn't complaining about the image sizes i don't see it being as an issue.

Sorry to open the AMP can of worms but i would recommend checking that with the AMP developer to get that resolved before recrawling just in case its whats being flagged in the Google Console.

Hi David, looping back on this. We failed mobile validation again yesterday, to my immense chagrin.

https://snipboard.io/8aP7ji.jpg

As you can, it's all the blog posts still.

They're scoring super well on Google Pagespeed etc...but this issue persists.

As a final salvo from GP's side, can you contribute any final thoughts?

This speed guy I've hired claims he can solve it but like I said, I'm nervous about him making adjustments to the site that I don't understand. And, also, don't know how to get someone to follow... (ie follow his work)

This is super annoying so any final thoughts are much appreciated.

Oh, and to clarify Google Search Console is NOT assessing the AMP pages in their analysis, they're assessing the normal blog posts...

Might be worth asking the Speed guy what his plans are - happy to review what he's planning to do - as i am very much out of ideas....