Logo missing after installing jetppack boost & adding font-display:swap

I was actually planning to rebuild the homepage after I figure the LCP & core web vitals anyways so no trouble there luckily!

I checked a single post and the LCP looks good to me,
Aside from the home page which should show a definite improvement without the Google font requests, is there any other issues ?

I keep seeing very high LCP in page speed insights https://pasteboard.co/Th857qLMwbIU.jpg for https://veganavenue.com/vegan-makeup/
https://pasteboard.co/LnV0O6Svu5uD.jpg for https://veganavenue.com/is-meadowfoam-vegan/

However, they are just under the 2.5s treshold in webpagetest.org. And my previous LCP in page speed insights for the last 28 days is 2.7s and now over 4s

-
And I wanted to confirm is this a sound solution to remove lazy loading for first/featured image

/ * Remove lazy load from first image * /
function add_responsive_class ($ content) {
if (is_single () || is_page () || is_front_page () || is_home ()) {
$ content = mb_convert_encoding ($ content, 'HTML-ENTITIES', "UTF-8");
$ document = new DOMDocument ();
libxml_use_internal_errors (true);
$ document-> loadHTML (utf8_decode ($ content));
$ imgs = $ document-> getElementsByTagName ('img');
$ img = $ imgs [0];
if ($ imgs [0] == 1) {// We check first if it is the first image of the content
$ img-> removeAttribute ('loading');
$ html = $ document-> saveHTML ();
return $ html;
}
else {
return $ content;
}
}
else {
return $ content;
}
}
add_filter ('the_content', 'add_responsive_class');

I'm not seeing LCP issue on those links according to Google lighthouse:
https://www.screencast.com/t/WZa3e9Uo6xi
https://www.screencast.com/t/1oTolrKQXcz

I'm checking the mobile performance, I think that's where my problems are.. desktop luckily seems fine

The main reason for LCP is the Google Analytics/Google tag manager code you added to your site:
https://www.screencast.com/t/O9zQbAx5b

You can try preconnecting the Google Analytics link and preload the font files to ensure the text is visible:

1. Go appearance > elements, create a new hook element, and add this HTML:

<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preload" href="https://veganavenue.com/wp-content/uploads/2022/07/open-sans-v29-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://veganavenue.com/wp-content/uploads/2022/07/sanchez-v13-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://veganavenue.com/wp-content/uploads/2022/07/open-sans-v29-latin-italic.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://veganavenue.com/wp-content/uploads/2022/07/open-sans-v29-latin-700.woff2" as="font" type="font/woff2" crossorigin>

2. Choose wp_head as the hook name, and choose entire site as the location.

Fantastic! I removed google analytics & tagmanager, and added the font preloading and get decent scores now.

two remaining things is the lazy loaded featured image on posts and font-swap since im hosting the fonts now the previous code I put doesn't work anymore.

Will this code solve the lazy loading in posts? (such as this post:https://veganavenue.com/is-meadowfoam-vegan/)

/ * Remove lazy load from first image * /
function add_responsive_class ($ content) {
if (is_single () || is_page () || is_front_page () || is_home ()) {
$ content = mb_convert_encoding ($ content, ‘HTML-ENTITIES’, “UTF-8”);
$ document = new DOMDocument ();
libxml_use_internal_errors (true);
$ document-> loadHTML (utf8_decode ($ content));
$ imgs = $ document-> getElementsByTagName (‘img’);
$ img = $ imgs [0];
if ($ imgs [0] == 1) {// We check first if it is the first image of the content
$ img-> removeAttribute (‘loading’);
$ html = $ document-> saveHTML ();
return $ html;
}
else {
return $ content;
}
}
else {
return $ content;
}
}
add_filter (‘the_content’, ‘add_responsive_class’);

this is the code I added to swap the fonts:

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

1. Fonts - you can include the font-display: swap; property in your @font-face CSS:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

Previously that option did lead to CLS, so if that occurs after adding that, then i would suggest removing it.

2. That function strips the loading attribute from the first image in the post content, so that should work.
Although Google states here that it should not be a requirement as images above the fold are loaded normally:

https://web.dev/browser-level-image-lazy-loading/#distance-from-viewport-thresholds

Albeit their own Page Speed test flags it in the diagnostics.

Thank you so much! I really appreaciate your help. Would you recommend to do anything about that critical CSS that I aimed to achive with jetpack boost? Or are there no easy solutions like you alluded to for that. Although maybe there isn't even a need anymore since page speed insights is not complaining about it anymore

If you're happy with the results your getting, i am seeing 97/98 on mobile tests and all CWV metrics are green, then i would not worry about Critical CSS, for the time spent tweaking it and fixing issues that it may cause really isn't worth the minor performance improvement it will make :)

Thank you so much for your help! Truly amazing. One last question, I am seeing under "eliminate render blocking resources jquery/jquery.min.js?ver=3.6.0 causing 0.450ms delay.

https://pasteboard.co/DmXuMkP3lI1q.jpg

Would adding this code with code snippets resolve that? and is there any reason it would be a bad idea to do? I have no idea about jquery, but seems like a low hanging fruit if this code works as intended

function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

You can try it ... but a lot of plugins have a jQuery dependency ( GP only uses it for the Sticky Navigation ) and if its not loaded before the dependent scripts run then it can lead to errors and breakages.

You can check in the browser developers tools for any errors.

apparently that code I found itself had some syntax error before I got to that point.. Probably best just not touch it. I now assume jetpack boost left it render blocking for the same reason you mentioned

https://pasteboard.co/hVyO1zJODscy.jpg

Yeah your code has a lot of funky quote characters which would break, but i just took a closer look at that code, and ( doh ) it doesn't defer jQuery, it defers all scripts except for jQuery....

oh! I'll leave this be before I cause havoc :)

Thanks again a million for your help!