[Support request] How to reduce LCP and excessive DOM size

[Robert]

I am at a loss at how to reduce the mobile LCP for many pages on our site. I do see a suggestion to reduce excessive DOM size, which could be due to plugins or themes. Is there anything obvious here we are missing?

[David]

Hi there,

Fonts seem to be the main issue.
1. google fonts, and loading those form the google api can slow a site down.
Consider adding locally:

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

2. Font awesome – 3 x fonts are being loaded by the WP Discuz plugin.
Check with those plugin developrers if its possible to replace those with SVG icons. Its absurd that they load 3 entire libraries for a few icons 🙂

Also look at Page Caching on your server to reduce the Initial Server Response time.

DOM Size is reflective of every HTML element you add to your page. Thats ever Heading, Paragraph, Image, etc.
To reduce the DOM you need to remove content. I wouldn’t be over concerned unless the DOM count is running into the 1000s and you have a lot of CSS / JS running on the page.

[Robert]

Okay I followed the instructions for adding local fonts, but they are not showing up. You can see the staging site where I changed the fonts and also the production site that using google fonts. What am I missing here?

[Fernando]

Hi Robert,

So we can take a closer look at your setup, can you provide admin credentials to your staging site?

We’ll check why it’s not working.

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Robert]

Here you go

[David]

Can you double check the URL for the fonts in the @font-face CSS.
Currently its returning double URIs – see here for example ( domain name i replaced ):

https://domain.wpengine.com/domain.wpengine.com/wp-content/themes/generatepress_child/assets/fonts/open-sans-v34-latin/open-sans-v34-latin-regular.woff2

It should be:

https://domain.wpengine.com/wp-content/themes/generatepress_child/assets/fonts/open-sans-v34-latin/open-sans-v34-latin-regular.woff2

So make sure the CSS URL has the https:// at the front.

[Robert]

That was it! I entered the domain in the font app your help article uses. This could be clarified that you only need the relative path and not the absolute path.

Thank you!

[David]

Yeah. We are reviewing the docs. But depending on site setup, there will be these kinds off issues 🙂
Glad to hear it is working.

[Robert]

So it looks like our overall performance score went up from 90 to 94 after loading fonts locally. But, our LCP went up from 2.5 to 3 seconds.

Is there anything else we can do here? Maybe removing the header background image on mobile? If so, how would we do that?

[David]

Do you use GenerateBlocks Pro ? or just the Free version ?

[Robert]

GenerateBlocks Pro

[David]

If that Background Image is not dynamic, then:

1. select the Container Block, and remove the Background image.
2. Enable the Advanced > Backgrounds:

https://docs.generateblocks.com/article/advanced-backgrounds/

There you can add the image and set it to display just on Desktop ( and Tablet ) .

[Robert]

Okay, this worked. The advanced background feature is great.

But now it says the LCP issue is on the first paragraph element. I’m at a loss here at what else to do. Am I missing anything?

[David]

Google Pagespeed will ALWAYs list an LCP element, its a metric, not an error.
It simply allows you to tell which element it is treating as the largest contentful paint.

Did the LCP time improve without the image ?

If it did not, then it means you need to look “upstream” in the loading process, as the text block is just HTML, it requires no 3rd party resources that would cause IT to incur a delay.

Let me know.

[Robert]

The LCP time improved after optimizing the image but it is still in the needs improvement category. I’m wondering if using system fonts on mobile devices would improve the text element time. If I do this with CSS, then do I have to change anything in the typography manager? Should I be using anything in the typography manager at all if I am using local fonts with CSS?

I am assuming I can use something like this:

@media (min-width: 768px) {
  @font-face {
    font-family: 'CustomFont', sans-serif; /* Fallback font for CustomFont */
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), /* Local fallback for 400 */
         url('/wp-content/themes/generatepress_child/assets/fonts/open-sans-v34-latin/open-sans-v34-latin-regular.woff2') format('woff2'),
         url('/wp-content/themes/generatepress_child/assets/fonts/open-sans-v34-latin/open-sans-v34-latin-regular.woff') format('woff');
    font-display: swap;
  }
  body {
    font-family: 'CustomFont', sans-serif;
  }
}

/* Define system fonts for mobile devices */
@media (max-width: 767px) {
  body {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
  }
}

[Author]

Posts