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

[Alan]

Update–

I did the switch under Customizer –> Typography and toggled off the Google Fonts and it removed that file that I mentioned earlier. This is the best result yet! LCP is 2.295s which is great. Wondering what other opportunities jump out at you?

Here is the test result I just ran after getting the Google Fonts toggled off — https://www.webpagetest.org/result/221108_AiDc06_JTE/3/details/

[David]

The only other things i can suggest is to look at Server Page caching to reduce that initial request time. As it now accounts for more than 70% of the FCP time.

The other things responsible for blocking the page loading is the Analytics scripts.
You can look to host them locally, i believe Perfmatters can host Google Analytics locally, which can make an improvement.
Other than that, theres not

[Alan]

Hey David,

Okay just wanted to follow up and let you know (and anyone else following this thread and finding it helpful) what I did and the outcome based on your suggestions.

First regarding your last reply, I looked at Perfmatters regarding hosting GA locally. I just don’t want to spend any more money on a plugin (it isn’t a cheap plugin) to have that functionality. What I did do, based on what I read on their site’s blog (I think it was their site), is switched to loading GA and GTM in the footer instead of header and it made a big difference with no negative effects that I can tell so far. Never done that before, but so far so good and it helped some of the metrics (I forget which).

Regarding Server Page caching, I talked to Cloudways support and all the caching layers are running at full effect plus running through CloudFlare Enterprise (via their integration), so seems nothing else can be done there. Increased PHP execution time to 1600 and PHP memory to something like 2048 (running on dedicated GCE “over-sized” server for this site, so resources to spare here).

I downloaded all the used Google Fonts and hosted them locally as you suggested and that made a huge difference. Really appreciate that tip, I didn’t know that could be done.

For optimizing and caching render blocking CSS and resources, I’ve been using WP-Rocket this whole time but without any of the features turned on under File Optimization (assuming previous owner did that to avoid breaking things), I enabled a lot of features (and troubleshoot and excluded various things to fix all the issues that cropped up)– Minified CSS file, Optimized CSS delivery AND used the Remove Unused CSS option (a first for me on a site) instead of Load CSS Async (made a huge difference), Minified JS files and loaded JS deferred (while excluding Mediavine scripts and CSS as well as WPP plugin CSS file). That’s it for WP-Rocket and it made a huge difference and addressed the render blocking resources we were seeing at first.

For your use page caching suggestion, I’m using WP-Rocket for that (Preloading turned on, which it was always before). I had Cache lifespan set to 10 hours, but I increased to 12 hours. MY FINAL QUESTION– I’d like to increase this number, barring any conflicts with other plugins (I don’t think there will be)… my concern is WP nonces and my question is, is there anything in the GeneratePress theme that uses nonces to display post grids, or anything at all that could prevent me from increasing the preloaded page cache lifespan? I realize there could be issues with other plugins, forms, etc but this site is just a basic content site and updated pages are already automatically cleared and re-preloaded when updated. I’d like to increase the cache lifespan to days rather than hours…

Please let me know your thoughts on that final question and I think we can call this a wrap. See the link in the private section (not that I haven’t already exposed the site throughout this thread I’m sure)… I now have LCP on this particular and most pages down to 1.2 seconds on the live site with all these changes implemented including with MV ads script wrapper loading.

Thanks again for all your help. It’s been a lifesaver.
Alan

[David]

Awesome – glad to see that improvement!

my concern is WP nonces and my question is, is there anything in the GeneratePress theme that uses nonces to display post grids, or anything at all that could prevent me from increasing the preloaded page cache lifespan?

Theres nothing in the Theme or GB that requires nonces.
However you may need to be mindful of any static pages that use Query Loops, i am not sure if they will be an issue.

[Alan]

David,

Good to know about the theme not using nonces. Thanks for pointing out static pages that use Query Loops. I know what “the loop” is in WP, but wasn’t familiar with Query Loops. I don’t think we have any static pages on the site; we use Elementor for all the category pages and home, about, etc pages. I wasn’t familiar with Query Loop blocks before, must be sort of new… seems we could do the same thing without having to have the weight of Elementor directly within WP now. Interesting.

I think I’ll leave the page cache TTL at 10 hours just to be safe, but in my dev env I’m setting to 5 days to see what happens 🙂

Thanks again, David. You rock. I think we can call this ticket/thread completed, even if we deviated from the original idea and title (sorry to future people browsing this thread), the goal was always to improve CWV (specifically LCP) and we did that. And your code for preloading of the CSS background images helped too, in addition to the other suggestions in this thread.

Have a great rest of your week,
Alan

[Alan]

David, I’m sorry one last question and I cannot believe I just noticed this– a side effect of loading the fonts locally seems to be that they aren’t loaded on the back end (ie the Post Edit screen shows what looks to be Times New Roman). Everything displays fine (and fast) on the front end, so it’s only a minor annoyance.

I added the CSS for the fonts in the Appearance –> Customize –> Additional CSS (at the beginning of all the other custom CSS in there) and followed the exact process from the link you shared earlier in this thread.

Any ideas off top of your head on why that changed the loading of them on backend and what I could possibly do to fix it?

Thanks as always,
Alan

[Ying]

Hi Alan,

WP editor doesn’t load @font-face CSS, so the local fonts won’t show in the editor.

Check David’s answer here, in your case, try the number 1 snippet:
https://generatepress.com/forums/topic/local-fonts-not-showing-in-editor-2/#post-2243509

[Alan]

Hi Ying! Thank you so much, that fixed it! And I’m so sorry, I know that’s annoying.. I should have done a search for the issue before asking. I’m sure you all encounter that all the time but I’m sorry to be part of that problem.

Thanks again. You rock as well! 🙂

Alan

[Ying]

And I’m so sorry, I know that’s annoying..

Don’t be, it’s our job to help you guys 🙂 And we are happy to be helpful!

[Alan]

Thank you! GP support really is the best! 😀

[David]

Happy to hear that 🙂

[Author]

Posts