To quote Gijo at WP Speed Matters in his article, “How to Speed Up Background Images”
Background images can hurt Largest Contentful Paint (LCP) Core Web Vitals score if they’re in the above fold.
“If your background image inside an external CSS file, inline it in the HTML. This way browser doesn’t have to wait for downloading that CSS file and then download the image.”
I’ve noticed Kadence Blocks has an option within their Row Block to “force background image inline” (see screenshot attached).
I’m assuming that option is there to reap the benefits mentioned in the article linked above. In theory, this could come in handy when using the Kadence Row Block in the hero section above the fold.
If GenerateBlocks were to have this kind of feature enabled, I reckon it would be a performance booster for any Container Blocks with background images that appear above the fold, block Elements for global headers, etc.
Aaaannddd there’s always the chance I’m misunderstanding what I’m talking about here. So someone please correct me if I’m wrong.
One additional resource referenced in the WP Speed Matters article is this article, “Better Performing Images With Object-fit”
I’m curious if the object-fit CSS property might eventually make its way into the GenerateBlocks Container Block’s background options.