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

[David]

Hi Trish,

TTF are not a requirement, there for really old legacy browsers ( pre Internet Explorer 9 ). You just need the .woff and .woff2 files.

[Trish]

So… why am I still seeing issues with the fonts not loading fast enough?

Have now deleted the TTF files from the site.

[David]

Hmmm… first the good news, the local fonts are loading. But Google Fonts are still being requested.
In the Customizer > Typography Settings, can you check there are no options that are selecting the Google Font > Oxygen.
Your local Oxygen font will appear under the System fonts ( before the google fonts ).

[Trish]

Under Customizer > Typography > Body it simply shows “Oxygen” and all 3 sizes but NOT the source.

Under Customizer > Additional CSS is where I placed the following:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Oxygen';

    return $fonts;
} );

Did I do this correctly?

[David]

That is correct.
As an option to make sure you have the right font selected.

In the @font-face CSS change the Font Family to:

font-family: 'Oxygen local';

And the PHP Snippet change its name to match ie.

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Oxygen local';

    return $fonts;
} );

Then check the Customizer to make sure the Oxygen Local is listed. It will come before the Google fonts list.

[Trish]

Have now added “local” as you suggested, so now my Additional CSS looks like this:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Oxygen local';

    return $fonts;
} );

And I clicked on Published. Then when I go back to Under Customizer > Typography > Body it STILL only shows “Oxygen” from the drop down list along with all 3 sizes below that but NOT the source.

[David]

This code:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Oxygen local';

    return $fonts;
} );

is PHP – this Doc explains how to add it:

https://docs.generatepress.com/article/adding-php/

[Trish]

Now you’ve lost me David.

The code you supplied looks no different then what I shared. Please explain?

UPDATE: The fonts are already uploaded in my media library, and I have Deactivated the PHP for uploading it. Is that what you are wondering about?

[Elvin]

Hi Trish,

I believe what David meant was you need to add the code to the appropriate code area.

You’ve mentioned:

Have now added “local” as you suggested, so now my Additional CSS looks like this:

– which implies it was added on Additional CSS code area.

PHP snippets won’t run there. Additional CSS code area are for CSS only. PHP snippets have to be run on the backend so you’ll need to run it on a Code Snippets plugin or a child theme’s functions.php as mentioned in the link David provided. 😀

[Trish]

In order to verify what you both have stated here, please let me know if I now understand you correctly… the code:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Oxygen local';

    return $fonts;
} );

needs to be REMOVED from the Additional CSS field and create a NEW Snippet in the Code Snippet plugin to use this code.

I sure hope so as that is what I have now completed.

AND… now my speed is worse at 2,360 ms for mobile Total Blocking Time. 🙁

Went directly TO PageSpeed and ran the test again… and the webfont is STILL not loading from the site. HUH?

[David]

Thats correct to cover:

1. This code is PHP and goes in the code snippets:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Oxygen local';

    return $fonts;
} );

1.1 You should now see the Oxygen local font in the Customizer > Typography list.

2. Your @font-face CSS font-family names should be updated to reference the Oxygen local font.

3. In Customizer > Typography, all font family selections must be changed to the Oxygen local font.

[Trish]

Hey David,

The CSS code with changes made as to where the site LOOKS to find the fonts was EASY instructions to follow, so that part was NOT an issue. It was that piece of code that I had understood needed to go in the Additional CSS section under Customize, yet turned out to be PHP and not CSS.

Sorry for my missing the boat on that; I’m not a newbie, and yet I obviously frustrated you which was never my intention.

Please remove the CSS code in the comment above this, the code with the site’s URL displayed in it, as privacy is of the utmost importance.

Have NOW been able to find Oxygen Local under Customize > Typography and ONLY changed it under Body… is THAT correct, or are there more places where I need to change that?

Checking speed now for mobile… Total Blocking Time 110 ms GOOD… YIPEE! …but Largest Contentful Paint still at 3.8s NEEDS IMPROVEMENT and Cumulative Layout Shift at 0.305 POOR for mobile.

I noticed that the speed for mobile WAS 72 prior to my getting the font correct… yet now… it’s 71… worse. Huh?

Can we work on those other two issues to improve this site’s loading time even more… pretty please?

Thank YOU in advance,
Trish

[David]

Hi Trish,

sorry if i came across a bit brash in my last reply, it wasn’t my intention just wanted to cover off the angles, as that Local Fonts documentation could do with a rewrite… although hopefully it will become a thing of the past.

I still am not sure the @font-face CSS is correct, if you can check the CSS in Simple CSS and make sure the font-family is changed to Oxygen local

CLS and LCP both look related to the lazy loading of the first image.
When you run a Google PSI test, you can see in the first painted frame the image is not there, on some tests it shows the loading spinner, and its taking up more space then the image.

Not sure what lazy loader you’re using, but they generally provide a CSS Class you can add to the Image to stop if from being lazy loaded, which you certainly want to add to the above the fold image.

[Trish]

No problem David; Text is sometimes hard to show our true emotions with making writing difficult to get our point across at times.

The CLS and LCP is definitely fingering the first image. However, it is sooooo small in size as it is a webp file (which Google recommends using) so I am baffled with the complaint from their software saying it took too long to “paint”.

Am using the a3 Lazy Load by a3rev Software. In the settings this plugin offers a field titled Skip Images Classes and in that textbox is the following: “.featured-image.page-header-image > img” …which that first image on the loading page IS a featured image, sooooo, shouldn’t that mean it is NOT supposed to be lazy loaded?

I followed the CSS script instructions to the letter. Whom ever wrote those knew EXACTLY how to write instructions, and I changed the URL of the fonts to be that of the proper address shown in the Media Library. Else… the Oxygen Local wouldn’t display in the drop down list of fonts in Appearance > Customize > Typography > Body …correct?

Thanks HEAPS for your attention to these issues. Your help is sincerely appreciated!

[David]

Most Lazy Loaders require the Class to be on the <img> element, they won’t work with a CSS selector that points to an img. So we need to add a class to the <img>

1. Add this PHP to your Code Snippets:

// Add first-featured-image ( or any class ) to featured image of latest post
function skip_lazy_class_first_featured_image($attr) {
  global $wp_query;
  if ( 0 == $wp_query->current_post ) {
      $attr['class'] .= ' first-featured-image';  
  }
  return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );

2. Then in the A3 Lazy Loader Skip Images Classes field, remove what you have and add: first-featured-image

That will stop featured images on single posts, and featured image of the first post in the Blog from lazy loading.

This should improve the LCP as currently the image is being deferred until the rest of the page has loaded. It should also eliminate the CLS which the lazy loader is creating.

RE: Fonts.

Correct the PHP Snippet is what adds the Font Name to the Customizer Typography list. When selecting that font in the list it simply outputs the CSS eg.

body {
    font-familiy: 'Oxygen local';
    .... other styles
}

But you need to make sure the Simple CSS @font-face > font-family names are identical ie. Oxygen Local otherwise the Font files won’t be loaded.

[Author]

Posts