[Support request] PageSpeed penalizing image 31.3 KB not lazily loading?

[Trish]

I’ve coded the featured image on my loading page to display full width, yet it is only 31.3 KB in size. “Largest Contentful Paint image was not lazily loaded” is the complaint.

Am using the a3 Lazy Load plugin, so I do not understand.

Using the Block Editor on this site, I noticed that images are no longer including the width and height tags. When I tried adding them, WordPress broke the block and I had to click the Repair button, which removed those tags. Yet… “Image elements do not have explicit width and height” followed by “Set an explicit width and height on image elements to reduce layout shifts and improve CLS.” and the site logo icon was used as an example.

Also penalized for “Ensure text remains visible during webfont load” “Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.” and am not sure what that issue is all about either.

Any light you can shine on any of these 3 issues will be GREATLY appreciated.

Thank YOU in advance,
Trish

[Elvin]

Hi there,

I’ve coded the featured image on my loading page to display full width, yet it is only 31.3 KB in size. “Largest Contentful Paint image was not lazily loaded” is the complaint.

You actually have to remove lazy load on the featured image as it’s above the fold. I’m not exactly sure if a3 lazy load plugin has exemptions but if does, you’ll have to exclude .featured-image.page-header-image > img.

Using the Block Editor on this site, I noticed that images are no longer including the width and height tags. When I tried adding them, WordPress broke the block and I had to click the Repair button, which removed those tags. Yet… “Image elements do not have explicit width and height” followed by “Set an explicit width and height on image elements to reduce layout shifts and improve CLS.” and the site logo icon was used as an example.

Image blocks, by default, should already have its own attributes automatically added.

Can you tell us how you’ve added the images initially? Did you change from classic editor to Block editor?

As for “Ensure text remains visible during webfont load”:

You can try adding this PHP –

add_filter( 'generate_google_font_display', function() {
    return 'swap';
} );

Here’s how to add PHP snippet – https://docs.generatepress.com/article/adding-php/

[Trish]

Hey Elvin,

I imported posts into the Block Editor WP website that were exported from the original Classic Editor website, hoping to clean up the site. Guess that wasn’t a good idea either, from what you are saying. BUT… the logo was installed fresh, from Appearance > Customize, do why was THAT image the example used for that penalty… right.

Where exactly do I add that tidbit of PHP code to address the penalty on the webfont load? If that goes in the function.php file, would I not have to create a child theme to retain that code?

And… a3 Lazy Load does have a textbox for exclusions, so I’ve added your suggested line of code and Saved changes. Tested again… and the error for the loading page featured image remained. Even tried deleting cash and retested, only to see another drop in rating… plus the penalty retention. Grrrrr… I really am NOT impressed with WordPress’ changes.

Have left the code in place awaiting further assistance.

Thanks,
Trish

[David]

Hi there,

lets tackle this from the top.
When i ran a Google Page Speed Insights test i see that FCP is 2.8s and their is a significant Total Blocking Time. Those need to be addressed first. As any improvements made their will flow down to LCP ( LCP cannot be quicker than FCP ).

The two Opportunites that the PSI raises are:

First off: Eliminate render-blocking resources
Drilling into that – the two largest render blocking resources are :

1. Oxygen Font loading – you can reduce its loading time by loading the font locally.
There are 2 options:
a. Manually – following this doc:
https://docs.generatepress.com/article/adding-local-fonts/
b. Using the OMGF Plugin:
https://wordpress.org/plugins/host-webfonts-local/

2. Sassy Social Share
Might be worth looking at an alternative social sharing plugin. Some options:

Free: Social Shared Counts – https://wordpress.org/plugins/shared-counts/
Premium: Novashare – https://novashare.io/

Both are lightweight – Novashare is ridiculously lightweight though.

Second is Reduce initial server response time

This can be a ‘false negative’ but its worth asking your host if theres something that can be improved.

I would recommend starting there to see if we can get that FCP and Total Blocking Time to a minimum – then we can look again.

[Trish]

Hi David,

Thank YOU for your detailed advice… I will follow your suggestions for sure.

1.) When I go to Google webfonts helper and select Oxygen, the 16 px regular is selected by default. And, there are other style options below the 16 px window displayed as: 300, regular, and 700.

If I leave the default setting, I get 5 files in the zip file:
oxygen-v10-latin-regular.eot
oxygen-v10-latin-regular.svg
oxygen-v10-latin-regular.ttf
oxygen-v10-latin-regular.woff
oxygen-v10-latin-regular.woff2

With the default setting selected. the CSS script I’m to copy is one group of code, where if I select one or more of the other options, the CSS grows.

A.) Which sizes of Oxygen do I need to GP Premium?
B.) Sounds like I need to create a child theme for GP Premium in order to install the webfonts. Is this correct?

2.) Thank YOU for suggesting replacing Sassy Social Share… DONE!

3.) Reduce initial server response time – have issued a ticket to my hosting provider… THANK YOU!

[David]

1.
a. I checked your sites source code looking for font-weight and I see 300, regular and 700. So you’re using ALL 3x of the available weights on the site.

I see 300 is being used on some of the Headings ( Customizer > Typography > Headings )
You could change them to regular – to eliminate the need for the 300 font.

b. Thats correct – it can be done without a child theme but personally i would always use one for adding fonts.

Some info here on adding a Child Theme:
https://docs.generatepress.com/article/using-child-theme/

Note the points here:
https://docs.generatepress.com/article/using-child-theme/#will-i-lose-my-changes-when-i-add-a-child-theme

[Trish]

Hey David,

Adding a child theme simply to be able to offer fonts loading from my site is a NIGHTMARE for my new website. Especially given the warnings in the GP instructions for adding a child theme: “If you’ve only used the theme options in the Customizer, you won’t lose any of your changes.”

This is EXACTLY why I do NOT like WordPress. It is getting as bad as Windows for making more and more work for the users.

I’ve done SO much using of Customize (following instructions, of course) that I will need to recreate my site as a child theme in order to comply to Google’s wishes. (Trish smacks forehead here in horror!).

Wish the theme developers would simply include fonts so users wouldn’t have to re-create simply to comply to using a fully optimized theme. 🙁

Thanks for your suggestion, but I have other demanding responsibilities to tend to. Have been tinkering with this site long enough for now. 🙁

Would it be possible to fix the other issues yet?

Thanks for your time and help with these issues. You’re the best!

Hugs,
Trish

[David]

Aside from Additional CSS, footer copyright and logos, any changes you have made in the parent theme will be kept in the child theme.
For Fonts alone – might be simplest to just install the OMGF plugin:

https://wordpress.org/plugins/host-webfonts-local/

It doesn’t get in the way of things, you can auto search for the fonts the site is using and it will do the rest 🙂

The font loading seems to be the main performance issue – addressing that first is my best advice.

[Trish]

The OMGF plugin developer claims there is much work to be done after installing the plugin if you want to use their plugin for free. If users want the automatic update option, then you have to purchase a regular payment plan in order to use their automatic updating of fonts. Converting their payment plans from the pound to US currency and then to Canadian funds makes this plugin over-priced to say the least.

Wish GP Premium would simply make a way of automatically storing the fonts on the user’s site so the theme could be called fully optimized. An increase in the theme price would be worth it!

Can the other issue… the loading featured image issue, be addressed as well as Google’s complaint about my logo not stating width a height tags?

[David]

Oh my… it used to be a free option in that plugin. Didn’t realise they had changed that… sorry about that.

We will be adding Local Font options in GPP 2.2 – we have already done the ground work in GP 3.1 and GPP 2.1 for that 🙂

In the meantime – the local font documentation does show how to NOT use a child theme by uploading the fonts to the media library

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

Is that an option ?

The missing height/width tags has been addressed in GP 3.1 ( it should be live in around 2 weeks, its currently in Alpha testing ). I can provide some code today or you can wait for the update. The missing attributes doesn’t affect performance and isn’t creating CLS issues. Let me know.

LCP ( in this case the featured image ) is not always directly related to the image itself. The image would be a problem if it were a HUGE file which it is not. And the browser lazy loading doesn’t apply to above the fold images so that shouldn’t be an issue. The main problem with LCP is what the browser has to do before it can display the image. Which is primarily Render Blocking resources or other code that has to be loaded and exectured before it can do the next thing.

Google fonts ( ironically ) with the additional DNS lookups and network requests can be a major performance hit.

I also re-ran the PSI test to see whatelse could be interferring,
One thing i notice is reCaptcha … which is another Google Lead Balloon. Is that required ? I don’t see ant recaptcha requireemnts on the front page or the contact page ?

[Trish]

Hi David,

The reCAPTCHA plugin was to prevent hackers… but I can EASILY deactivate and delete that plugin. DONE!

As for adding the fonts to the Media Library, that would be easier for sure. However, if the next version of GP Premium will be addressing the image width and height tags AND fonts used locally, would it not be better to simply WAIT… or are those options only available for fresh installations of GPP?

Thank YOU for explaining the featured image probably not being an issue, ’cause I was shocked due to that image being soooo tiny a file size. Heck, converting all my images (well, most of them) to webp format was intended to improve my sites loading time.

[David]

You can see the next updates here ( GP 3.1 and GPP 2.1 )

https://generatepress.com/category/development/

Which does include width/height nav logo attributes fix and a new typography ( and colors ) system.
But Local font loading is planned for the update after that ie. GP 2.2.
So it may be worth you doing the local media attachment fonts in the meant time.

And yes, all updated/new features will be available to existing users. Big changes like Typog/color systems will be an Opt In option in the customizer for existing installs.

The removal of the reCaptcha script has made a noticeable improvement. I would assume you only want that for the Admin login. You could check with the plugin author to ask how to only load the scripts on the login page.

I do notice when running a few tests that the Initial Server Response time is fluctuating quite signifincantly, the worse case was over 7 seconds… not sure what was going on there … maybe the host has some advice.

[Trish]

Hi David,

Thank YOU for getting back to me.

When I tried uploading the fonts to the Media Library, the following prompts were received:
oxygen-v10-latin-regular.woff
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-regular.ttf
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-regular.svg
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-regular.eot
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-700.woff2
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-700.woff
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-700.ttf
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-700.svg
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-700.eot
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-300.woff2
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-300.woff
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-300.ttf
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-300.svg
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-300.eot
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-regular.woff2
Sorry, this file type is not permitted for security reasons.

Have put in a ticket to my hosting provider regarding the issue you mentioned with Initial Server Response time is fluctuating like it did during your testing. Here’s what I was told:

I’m not sure what you want us to troubleshoot exactly. Your website loaded in under 2 seconds for me. According to Pingdom your website loaded in 1.89 seconds: https://tools.pingdom.com/#5f078b2477400000

The server response time has nothing to do with the hosting server but how your website is coded and what plugins/themes you use. Your homepage requires 48 requests just to load which is not excessive but that means the users browser has to process all 48 requests before the page loads. That is typically plugins since they execute on the homepage.

As for the hosting server, it’s practically idle.

Soooo… did I do something wrong trying to upload the fonts to the Media Library?

[David]

To upload fonts to the media library you need first to add the PHP Snippet provided here:

https://docs.generatepress.com/article/adding-local-fonts/#uploading-our-font

Regarding server response times, yes the way a site is coded can have an impact on how long it takes for a server to process the code. But i can’t see anything on the site that requires excessive database queries or complex function calls. Its certainly not related to GP / GPP, and you have minimal plugins and nothing expensive to runs such as related posts or other types of custom queries that could bog down the server.

As a reference this is Googles advise on improving initial Server Response times:

https://web.dev/time-to-first-byte/

I also ran a couple of webpagetest.org tests and still see big fluctuations in the initial Time to First Byte see here for an example:

https://www.webpagetest.org/result/210925_AiDc41_5d5826f864b5b71185611954b27d2f87/

If the TTFB was constant then we could look closer at the plugins and other resources being used, the fact they vary a lot puzzles me and i would throw it back to the host to see if they can do some tests to see if there as an issue with the database or if its a shared server maybe some other site is eating up the available memory.

[Trish]

Hi David,

Finally had time to get back to improving this website and added the PHP using the Code Snippet plugin. Miracle! All but the TFF files uploaded this time.

oxygen-v10-latin-300.ttf
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-regular.ttf
Sorry, this file type is not permitted for security reasons.
oxygen-v10-latin-700.ttf
Sorry, this file type is not permitted for security reasons.

Have added these ttf files using FTP access, but of course, they will not show in the media files. Please advise me on this issue?

Have issued another ticket to my hosting provider as you suggested. Sure hope I can improve on this site’s loading time as I would like to be able to create a campaign real soon.

[Author]

Posts