[Resolved] How can I switch from using CSS background image for post featured (hero) images

[Alan]

Hi,

I’m using the following versions of GeneratePress.

Version of theme is 3.2.1
GP Premium version is 2.2.0

I’m having an LCP issue where I have ZERO “good” pages in GSC due to LCP being too slow. I finally realized this is because the post featured image on all my posts are background images loaded via CSS and thus aren’t being served the WEBP version by Shortpixel Image Optimizer. I’ve read that Shortpixel Adaptive Images can do CSS images, but I don’t want to go down that path, use their CDN etc. I also run WP Rocket, but have CSS/JS minification and most other options turned off, just the basic stuff.

Is there some way I can change the function for all posts to use a regular image instead of a background image for the hero/featured image, while still maintaining a similar look to the site?

Not only is there the LCP impact, but also an SEO disadvantage to using this method for the featured image as there are no ALT or Title attributes I don’t believe (I’m an SEO but not an expert on background images and CSS).

I found this support topic that talks about using Elements and is mainly talking about for 1 post or image. I’d like to do this for all my posts (note: there are some posts built in Elementor from a merged site, but I’m not worried about this at the moment as the vast majority of the site’s 1200 posts are the standard GeneratePress theme, etc) — https://generatepress.com/forums/topic/use-image-element-like-a-image-background/

I’m not a dev, but fairly technical and can follow instructions. What’s the best solution, if any, here?

Thanks in advance!
Alan

[David]

Hi there,

one option would be to remove the background image on Mobile.
And then display the feature image below the title / meta on mobile.

Which is what we do on the Volume site:

https://gpsites.co/volume/sample-post/

Is that an option ?

[Alan]

Hi David,

Thanks for the quick reply!

I checked the Volume site, I don’t follow what you mean about removing the background image on Desktop as I see the Desktop version of Volume has the same CSS background image. Were you just suggesting that we remove the image entirely from the Desktop version of our site? Or is there a way to make it look the same as it does now without using CSS?

As for the mobile version, I looked at it on Volume I see what you mean. “Normal” image below, this could possibly work for us, though we don’t use the Excerpt field so it may look a little weird with nothing just title and author/byline. But I think it’s worth trying (especially since Google crawls with mobile so that’s what they’re going to see anyway for the most part). I’m just not sure how to make a change like that?

Is this all done in Elements? Or some custom code? I didn’t build this site from scratch, we purchased it and has been my first experience with GP (which I’m a huge fan of now btw). So, I don’t know why the site “looks the way it does” say, relative to the Volume site example you sent.. if that makes sense.

Thank you!
Alan

[David]

ooops… Sorry i should have said:

one option would be to remove the background image on Mobile.

Ok, so we do have options.
Before we look at rebuilding anything, lets try adding this PHP Snippet to your site:

add_action( 'wp_head', function() {
    if( is_single() ) {
        $featured_img_url_small = get_the_post_thumbnail_url(get_the_ID(),'medium');
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
        $featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');
        echo '<link rel="preload" media="(max-width: 400px)" as="image" href="'.$featured_img_url_small.'"/>';
        echo '<link rel="preload" media="(max-width: 768px) and (min-width: 401px)" as="image" href="'.$featured_img_url.'"/>';
        echo '<link rel="preload" media="(min-width: 769px)" as="image" href="'.$featured_img_url_full.'"/>';
        echo '<style>
        @media(max-width: 400px) {
            .page-hero.overlay { background-image: linear-gradient(0deg, rgba(34,34,34,0.5),rgba(34,34,34,0.5)), url('.$featured_img_url_small.');}
        }
        @media(max-width: 768px) and (min-width: 401px) {
            .page-hero.overlay { background-image: linear-gradient(0deg, rgba(34,34,34,0.5),rgba(34,34,34,0.5)), url('.$featured_img_url.');}
        }
        @media(min-width: 769px) {
            .page-hero.overlay { background-image: linear-gradient(0deg, rgba(34,34,34,0.5),rgba(34,34,34,0.5)), url('.$featured_img_url_full.');}
        }
        </style>';
    }		
},1000);

This doc explains adding PHP:
https://docs.generatepress.com/article/adding-php/

What that will do is:
Preload a featured image attachment based on the screen size, ranging from medium -> medium_large-> full, and apply it as the hero background.

This ‘should’ make a big improvement to the loading time.

I that worth trying ?

[Alan]

Hey David,

Thanks for this PHP and guidance. I think it’s worth trying!

I need to spin up a new dev site to test, so let me do that and I’ll add the PHP and see what happens! I’ll share the dev site in the private information once I have the PHP running (I’m familiar with how to add the PHP, so no worries there).

Will be back in touch shortly. Thank you so much!

Best,
Alan

[David]

You’re welcome

[Sam]

Sorry to hijack your post – David, how do you achieve the feature below Post meta on mobile?

Is there a tutorial for the volume site?

[David]

Hi Sam,

if you can raise a new topic, i can provide some guidance and maybe the HTML template for the block element its built with.

[Alan]

Hey David,

Thanks for your patience and also for not letting Sam hijack the thread 🙂

I finally got a dev site spun up (long story) and tested your code and the preloading of the featured image does seem like a helpful thing to do (I’ll be pushing this onto my live site regardless).

But what I’ve noticed since I’m chasing this LCP issue (I have zero “good” URL’s for mobile in GSC for this site), and I actually started to zero in on this after creating this post, is that the LCP issue isn’t the featured image as I’d assumed. It’s the H1 and meta itself within the page-hero section itself. After installing your code, Pagespeed Insights now shows <div class="inside-header"> as the LCP element, whereas before, it only showed the parent element (page-hero).

I realize this might change the direction of this conversation a bit, but any ideas given this new information? Any way to speed up the loading/displaying of the post h1/title/category/byline etc? Like a preload of sorts for it?

I’ve included the dev site URL in the private information that is running the PHP you provided above. I’m at a loss, hoping you have some ideas still.

Thanks so much,
Alan

[Alan]

Also, I’ll add that it would still be more ideal to not have the featured image load via CSS for a variety of optimization reasons. But if I can solve this LCP issue, then I can live with the CSS background image…

[David]

If i test that URL then i see the FCP and LCP is identical.
Thats a good sign for LCP as it means there is no additional delay between the first element being displayed and the largest element showing.

So now you have to look up stream as to what is causing the FCP delay.

Using webpagetest provides a lot more detail:

https://www.webpagetest.org/result/221104_BiDcF2_79T/1/details/#waterfall_view_step1

1. Optimize and cache the render blocking CSS resources.

2. Google fonts …. load them locally to save the wasted time caused by google API requests:

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

3. Use page caching to improve that initial request time.

4. GP related albeit minor improvements in Customizer > General:

3.1 Set the Icon Type to SVG
3.2 Set the Structure to Flexbox … note this option is irreversible it loads less CSS but it fundamentally changes GP grids and the box-sizing, so check the site before publishing the change in case something looks out of place.

[Alan]

Hi David,

Thanks for the very valuable insight! I used webpagetest.org previously, but admit I’m not super experienced in parsing it all, but that is what made me deduce that the LCP is the div I mentioned before. But obviously, that was only part of the story as you said to “look up stream”… I follow you.

1. Will google how to do this, I may be able to do it in WP Rocket. There are definitely some optimizations not being used (modification being one of them) in that plugin that I need to test in dev and try out. Hopefully I can target specific CSS with it (or some other way).

2. Got it, will read that document and make them load locally.

3. I think I’m already using that via Cloudflare or one of the layers of caching within Cloudways, but perhaps not. Will research this as clearly the initial request time seems like it’s a bit long.

4. Will do this in dev and see what happens.

Will report back! Thanks again, Alan

[David]

You’re welcome!

[Alan]

Hey David,

Okay, so I’ve made some progress, albeit only baby steps.

I tried your option 4 first as I thought it would be the easiest, but it caused some layout issues (nothing major too major) that I’m just not skilled enough to fix or have the time to learn what the cause is and how to fix. So I skipped that.

I turned on WP Rocket’s CSS modification and combine CSS files options as well as minifying JS and loading JS deferred as those had never been turned on for some reason (were off when we bought this site so I just left off this whole time). I ended up having to exclude this CSS file (/wp-content/plugins/gp-premium/menu-plus/functions/css/navigation-branding.min.css) as it was loading after some other CSS (I presume) and thus causing the ‘class-“main-title” itemprop”headline”‘ element (the site’s title next to the logo in upper left corner of screen) to load with an inherited much smaller font pixel size. There may be a more elegant solution, I’m all ears if there is.

That seemed to help a bit on scores and didn’t break anything else that I’ve noticed thus far. Now there are far less render blocking resources versus the test you sent originally.

Next, I did all the instructions for localizing the fonts and added the corresponding CSS into the Customizer –> Additional CSS area (at the top of that as there is a bunch of custom CSS in there in case that mattered), however I was never able figure this part out on that help guide as it doesn’t exist and I am running latest versions of GP and GP Premium — https://docs.generatepress.com/article/adding-local-fonts/#adding-our-font

Perhaps that is the reason I’m still getting this call to ‘https://fonts.googleapis.com/css?family=Muli%3A200%2C200italic%2C300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CChanga%20One%3Aregular%2Citalic%7CUbuntu%3A300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic&display=swap’ that I think is happening before the LCP. That said, it does appear that the fonts are loading locally successfully.

Here is the latest webpagetest run (I mimicked your settings from the initial one you sent over) — https://www.webpagetest.org/result/221108_BiDcYA_HWT/1/details/#waterfall_view_step1

Any thoughts on how I can get rid of that fonts.googleapis call since I don’t need it anymore? Or other thoughts in general on things that are “upstream” of LCP that I can optimize?

Thanks so much! You’ve been super helpful so far.

Best,
Alan

[Alan]

David,

Update, Ying helped me figure out how to get the option to toggle off Google Font over in another thread –https://generatepress.com/forums/topic/local-fonts-not-visible-in-customizer/page/2/ … it was the Use dynamic typography system option that I had to check. So I did that now and and beginning to sort through all of that as it changed up the Typography settings screen quite a bit. But I think I will be able to figure out this part and maybe it will get rid of that extra call I was referring to above. Hopefully, though it is confusing since it is loading my local fonts I think already (unless it’s doing both, but I didn’t see the individual fonts being pulled from gstatic in this latest run that I sent the link above for).. and that was before enabling this option.

Alan

[Author]

Posts