[Resolved] Reduce Rendered Size of the Feature Image on Mobile (Improving LCP)

[David]

If you fonts have been selected in the Customizer, then that snippet will add the display swap attribute to the font requests.
Note: it may cause CLS issues if the font you’re requesting is significantly different to the browsers default font. So you will need to decide whether that one improvement should come at the cost of additional CLS after testing.

[Charbel]

Thank you @David!

Where can I check the fonts in the Customizer if it has been selected? I did not set this from my side.
Maybe Codeable did this during the site migration.

If this Code might cause CLS issues as you noted, then I would prefer to remove the PHP snippet.

Thank You!

[David]

They would be selected in Customizer > Typography > Body.

[Charbel]

Thank You @David,

Here is the current Typography setup:

Any comment?

I removed the PHP code that I shared here: https://generatepress.com/forums/topic/not-a-issue-about-google-fonts/#post-940012
Google PSI is not complaining anymore about: Ensure text remains visible during Webfont load.

——
One more question, please. I have implemented your recommendation about Script Delay because I still see: Avoid chaining critical requests for GP (Initial Navigation) including /themes/generatepress/assets/js/navigation-search.min.js as shown here.

I am using the same Ezoic delay script setup as Kee shared on this topic: https://generatepress.com/forums/topic/can-not-delay-navigation-search-min-js/

Here is the PHP code that I have added.

add_filter( 'script_loader_tag', 'add_screx_att_to_search_scipt', 10, 3 ); 
function add_screx_att_to_search_scipt( $tag, $handle, $src ) {
    if ( 'generate-navigation-search' === $handle ) {
        $tag = '<script type="text/javascript" src="' . esc_url( $src ) . '" id="generate-navigation-search-js" ez-screx="true"></script>';
    } 
    return $tag;
}

All other plugins/scripts are getting delayed but why GP .JS is not getting delayed?

I have only excluded the Menu in Ezoic for GP from getting delayed because it will get broken.

Thank You @David!

[David]

Typography – thats the correct place, but you’re using Georgia which is a system font anyway, so the display swap really doesn’t matter.
You can check the other Customizer > Typography > settings ( eg. Headings ) to see if Google font is selected. If there are then you know the theme is requesting them and then that snippet will be working.

Regarding the delayed CSS/Scripts – you need to ask Ezoic, as GP doesn’t know what ezoic is doing ( or even that it exists ) so its not the Theme thats deciding that.

[Charbel]

Thank you @David!

Here are the settings for (Headings) Typography. I can see that H2, H3, etc. are all set to Segoe UI as a font family, and others are set to inherit.

I believe it’s also a System Font, right? so the display swap PHP code below doesn’t matter here, and it’s safe to remove it?

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

Regarding the delayed CSS/Scripts – I’ll check with Ezoic about it.

Thank You!

[David]

Yep thats another system font. So if thats the case for all fonts you can remove the snippet.

[Charbel]

Many Thanks, @David for the confirmation!

[David]

You’re welcome

[Charbel]

Hello @David!

Hope all is well.

Coming back to the Featured Image sizing.
Last time, you shared with me the following code after we moved from page-hero to featured-image.

I have added a height: 550px to the .featured-image.grid-container img to match the previous settings of page-hero. It’s working fine on Desktops and resizing nice, but on Mobiles it’s ugly.

Can we exclude the height for Mobile users, please?

.featured-image.grid-container {
    max-width: 1168px;
}
.featured-image.grid-container img {
    width: 100%;
    height: 550px;	
}

Thank You!

[David]

Change your CSS to include a media query to set a different height for mobile, and user min-height instead of height:

.featured-image.grid-container {
    max-width: 1168px;
}
.featured-image.grid-container img {
    width: 100%;
    min-height: 550px;	
}
@media(max-width: 768px) {
    .featured-image.grid-container img {
        width: 100%;
        min-height: 550px;	/* adjust for mobile */
    }  
}

[Charbel]

Thank you @David, much appreciated!

It works beautifully for both Mobile and Desktop.

I have noticed that if I set the min-height: 200px; for .featured-image.grid-container img, the normal image will always show for desktop, however, if I bump it to > 600px then it will enlarge. So I kept both to 200px.

This is the last CSS code that I applied.

.featured-image.grid-container {
    max-width: 1168px;
}
.featured-image.grid-container img {
    width: 100%;
    min-height: 200px;	
}
@media(max-width: 768px) {
    .featured-image.grid-container img {
        width: 100%;
        min-height: 200px;	/* adjust for mobile */
    }  
}

You can check it from your side and give me your feedback.

Many Thanks!

[David]

Looks good to me!
As there both the same values, you should not require this:

@media(max-width: 768px) {
    .featured-image.grid-container img {
        width: 100%;
        min-height: 200px;	/* adjust for mobile */
    }  
}

Unless you have some other CSS that is changing it for mobile

[Charbel]

Thank you @David,

I looked for my existing CSS codes, and I found many with @media (max-width: 768px), but none of them is setting the image (width/height) size.

So I have kept only the Code below and it’s working for both:

.featured-image.grid-container {
    max-width: 1168px;
}
.featured-image.grid-container img {
    width: 100%;
    min-height: 200px;	
}

Reducing the CSS code is always a plus.

Thank You!

[David]

You’re welcome

[Author]

Posts