Problem/Motivation
Working on #3346765: Add PerformanceTestBase for allowing browser performance assertions within FunctionalJavaScriptTests I noticed that Largest Contentful Paint is well over two seconds.
Checking Lighthouse shows an image in the hero content being lazy loaded, additionally, inspecting that element, the image is hidden by CSS anyway via overflow: none; and some sizing, but not actually display none. So the hero content view mode could potentially not have that image configured to display at all, saving an HTTP request. A hacky fix for this would be to set the image/field to display:none; so it doesn't render at all and then doesn't affect LCP.
However, the reason this is done is for this template logic:
themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig:{% set background_image = file_url(content.field_media_image[0]['#media'].field_media_image.entity.uri.value) %}
themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig:<div{{ attributes.addClass(classes) }} style="background-image: url({{ background_image }})">
Instead of extracting this from the rendered node, maybe we could add the background image URL for that block as a CSS variable instead?