Great the Header isn’t wrapping now. The CSS we added was an attempt to fix the header wrapping which was also causing CLS: https://share.getcloudapp.com/RBumYwoN
Now, with regards to the image, it seems that it is being lazily loaded by Jetpack. Above the fold images shouldn’t be lazily loaded: https://share.getcloudapp.com/Jruo4Nd1
So what you can do is try to add this PHP snippet:
function skip_lazy_class_first_featured_image($attr) {
global $wp_query;
if ( 0 == $wp_query->current_post ) {
$attr['class'] .= ' skip-lazy';
}
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );
Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets
This will add skip-lazy
class to the single post featured images and the very first post in your blog/archives as this will generally be towards the top of the page on mobile devices.
As per Jetpack, adding skip-lazy
class should stop the image from lazily loading: https://jetpack.com/support/lazy-images/#:~:text=Exclude%20specific%20images
Hope this helps!