[Support request] Lighthouse errors

[Sam]

I Was asked to open up a new ticket to go over my lighthouse errors. I wanted to tackle these new errors from switching my theme over to GP. I have linked my site and a popular Blog post. I’d really appreciate any support to get the web core vitals in check. Thank you!

[Elvin]

Hi there,

Sorry for not getting back to you quickly.

Let’s go 1 by 1 on the flagged issues on your site.

For “Remove unused JavaScript”

You may have to go check the current scripts and/or plugins added or installed on your site and replace some of them which may be loading scripts even when they’re not running on a specific page.

For ” Eliminate render-blocking resources”

The issue flagged is mainly your Google fonts. Try preloading it. Optimization plugins usually have an option to do this. If not, you can do it manually.

For “Defer offscreen images”

This is addressed by implementing lazyload on the images on your site. But be careful with this. Lazy load can cause CLS when the lazy-loaded image is above the fold(meaning it’s within viewport when the page loads). You’ll need a plugin to manage lazy loading.

For “Image elements do not have explicit width and height”

Some plugins on your site serve images that have no image width and height attribute. It contributes to CLS. I can’t pinpoint the plugin because your site hid the origin with caching plugins but “essb-pin-gallery” is a clue. It may be some sort of Pinterest social share plugin.

For “Serve images in next-gen formats”:

Please read this article.
https://web.dev/uses-webp-images/?utm_source=lighthouse&utm_medium=unknown

I believe you can use image optimization plugins to address this.

For “Properly size images”.

WordPress’ image serving isn’t the best. img srcset is supposed to do be the one addressing this. See Tom’s reply about it. https://generatepress.com/forums/topic/gutenberg-gallery-generates-properly-size-images-in-mobile-view-lighthouse/#post-1694927

For “Avoid an excessive DOM size” and “Avoid enormous network payloads”.

The page is simply way too long. Consider moving some contents to another page.

[Sam]

Hello,

Thanks for your detailed response. I have a couple of followups.

For “Remove unused JavaScript”

You may have to go check the current scripts and/or plugins added or installed on your site and replace some of them which may be loading scripts even when they’re not running on a specific page.

—–How do I go about looking into to this? Is this somewhat simple to do?

For ” Eliminate render-blocking resources”

The issue flagged is mainly your Google fonts. Try preloading it. Optimization plugins usually have an option to do this. If not, you can do it manually.
—- I believe you gave me php code for this that I had entered. I am now wondering if it worked. How would I know if the php code worked?

THANKS,
SAM

[Elvin]

—–How do I go about looking into to this? Is this somewhat simple to do?

This article explains in detail – https://onlinemediamasters.com/remove-unused-javascript-wordpress/

—- I believe you gave me php code for this that I had entered. I am now wondering if it worked. How would I know if the php code worked?

By checking GTMetrix or Lighthouse again if it still flags the same font. If it doesn’t, then it works. It if does, it most likely didn’t work.

You can actually check if the link is preloaded by inspecting the code of the web page. On Windows 10 Chrome, you can press CTRL + SHIFT + I on the browser and you’ll see something like this: https://share.getcloudapp.com/YEuRemd8

look for any <link> with preload that’s similar to the fonts previously flagged.

Note: I’ve already checked. I don’t see any google fonts being preloaded. Can you provide the PHP code provided so I could recheck?

[Sam]

Hello,

This is the php code I added from your suggestion.

add_filter( ‘generate_google_font_display’, function() {
return ‘swap’;
} );

Thanks,
Sam

[Elvin]

Ah thanks. That’s one part of it.

I missed mentioning about the other parts. The other parts need you to use caching/optimization plugins to serve the assets better.

Your site doesn’t seem to be using one. Consider using plugins like Autoptmize, WP Rocket, Litespeed cache or any optimization plugins you prefer.

Here’s an example setup (using autoptimize).
https://docs.generatepress.com/article/configuring-autoptimize/

[Sam]

Hello,

I actually do have autoptize setup. I will look into the guide you sent.

Thanks,
Sam

[Elvin]

No problem. Let us know how it goes.

[Author]

Posts