[Resolved] LCP Page Speed (issue within )

[jason]

Hi
First off I have just changed theme a few days ago to generatepress and im so impressed, especially on the lightweight and speed front.
I’ve been using wp for years and since speed has been a big factor Ive been through a few themes, and this is the best so far and by far.

Okay. Over to my issue.

I’m using wp rocket with them theme and cleared up some of the issues found in pageinsights.
The only issue i have is within this container

(i had other issues here like CLS that i resolved.

I have tried reducing image size and that does not make a difference, disabling lazyload, and reducing the h1 tag size. Ive looked through other support posts and had no joy fixing this (i have seen many other users with problems in the same container).

The LCP is at 2.8 and i know it can be reduced. Just not sure what aspect of that container is causing it.

Here are some URLS-
https://jonesyinthailand.com/
https://jonesyinthailand.com/where-to-go/
https://jonesyinthailand.com/visa/

Any support on this would be appreciated.

Jason

[Fernando]

Hi Jason,

Tested all links and here are the results I got respectively:

https://share.getcloudapp.com/E0ugZzl1

https://share.getcloudapp.com/7KuQkmye

https://share.getcloudapp.com/6quZG2Bm

Upon checking, it seems that the biggest factor affecting LCP is your website’s initial server response time:

https://share.getcloudapp.com/E0ugZzA2

https://share.getcloudapp.com/DOu4rAq6

This is evident for both Mobile and Desktop.

For one, a slow initial server response time may be a sign of a slow server, in which case, you’ll need to reach out to your hosting provider for assistance.

Here is a helpful article with regards to this issue: https://web.dev/optimize-lcp/#slow-servers

Hope this clarifies. 🙂

[jason]

Thanks for your response Fernando.

On the reduce initial server response, it seems that is quite low and its only an opportunity.

I think if the servers were slow then there would be other web vital failures. The reports states – Initial server response time was short Root document took 570 ms

Within the diagnostics section it points at –

Thailand Travel Guide – Insiders Travel Tips Tips and advice about Travel in T…

I’m going to ask the guys over at wp-rocket as well but im sure the issues lie within the container of generatepress.

I could be wrong and your advice about a slow server could be correct but there seems to be so much involved in just reading that google web dev document without even starting to follow changes that i should follow this up with wp-rocket first and see what they say.

This is not resolved so i will keep it open and report back.

Many thanks

[David]

Hi there,

The problem stems from the background image, as Google is measuring how long it takes for the LCP element to be fully painted. So that means the background image has to load.

I ran a webpagetest to give you better insight on the loading of the page:

https://www.webpagetest.org/result/220412_BiDcV6_88G/1/details/#waterfall_view_step1

1. The initial server response time could be improved. Serverside page caching can help with that.

2. Google Fonts (line 13) – the DNS lookup and request to the API is adding a delay and the image ( line 16 ) does not begin loading until that is completed. I would recommend loading those fonts locally:

https://docs.generatepress.com/article/adding-local-fonts/

3. The image itself could be better optimised – its 196kb and background images do not have responsive sizes so its that’s size or nothing. How is the image added ? Is it manually added or is it dynamic. ?

[jason]

Hi David.

Thanks for your speedy response.

I will read through the guides you linked and follow the instructions.

How is the image added ? Is it manually added or is it dynamic. ?

I added the image manually within the container from the dashboard. From the dashboard is does specify a size.

Thanks

[David]

You could select a smaller image size for the background, or see if you can optimise the original image. Reducing the file size will help with its loading.

[jason]

I forgot to mention and you can see yourself if you pick this up quickly is that even if i remove the image it still has the same LCP.

https://jonesyinthailand.com/

[jason]

I cleared the cache etc. and within the pagespeed page it is visible that the image is no longer there.
I also aggressivly optimized the image which of course made no difference as it doesn’t seem to be the image.

Possibly something to do with the font but i resized that too and had no change.

From the pagespeed diagnostics-

Element

Thailand Travel Guide – Insiders Travel Tips
<h1>

[jason]

I just removed the h1 heading and it got worse the layout shift increased and LCP stayed the same.

It’s that container or element, i think.

[David]

If removing stuff makes no improvement to the times, then it means ‘stuff’ happening before the LCP is delaying the loading eg. Google Fonts, or there are other Scripts running on the site that is slowing the browsers ability to a) render the page and b) provide the LCP measurements.

I would begin with looking at points 1 and 2 I made here

With those resolved we can look at other issues

NOTE: If you’re using google page speed to test a site, you need to leave some time between changes and testing as it can cache the page.

[jason]

Hi David.

I would begin with looking at points 1 and 2 I made here

I spent some time uploading the font code and then found i was not suing google fonts.
It’s possible they was already within the template from generatepress.

On the server front side of things i don’t have much of a clue. I use hostgator cloud package with cloudflare and just let them run without any knowledge above the basics.

I would just remove this header section i have created but it misses the point of having a theme that can do something a little more attractive when someone hits a page. Without that and a couple of functions i can use the basic free themes bare and there is no need for paying for these themes that wizz in speed without any elements (until something gets added above a very basic template).

Just a i thought genratepress was going to be the one that nails the web vitals (damn).

I am awaiting contact from wp-rocket and if it’s the theme, server or whatever else they might see.

[David]

You’re site is using the Source Serif Pro Google font – for Example your H1 Post titles is using that.

[jason]

Yes. It was the font and i dint notice that was a google font. I switched off the google font and now i will re upload the fonts in the guide mentioned again.

Thanks very much, that’s resolved.

[David]

Ok so with that change you should see no requests too Google Fonts.
NOTE: If you have WP Rocket enabled and you use its CSS optiomiztions it may preload the Google Font, so you will want to clear the WP Rocket cache if the font is still being loaded.

For the Page Caching. Check with your Host, its quite a common service they provide. If not then you can leave it to WP Rocket, although I personally prefer server side caches:

https://docs.wp-rocket.me/article/1528-page-caching

[jason]

Thanks David. Much appreciated.

[Author]

Posts