Force Container Background Images Inline

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.

2 Likes

One additional note on this topic of background image performance.

FlyingPress can lazy load background images if they are detected. And there’s a helper class that can be added to any blocks where a background image is present, just to help with detection.

Screenshot:

Quote from documentation:

Unlike <img> tags images, background images are hard to detect.

FlyingPress automatically lazy load background images if they’re inlined in the HTML. For example:

<div style="background-image: url('.../some-image.jpg')"> </div>

" Unlike <img> tags images, background images are hard to detect.

FlyingPress automatically lazy load background images if they’re inlined in the HTML. For example:

<div style="background-image: url('.../some-image.jpg')"> </div>

…However, if the background images are inside some CSS class or a separate css file, we cannot detect them.
In such situations, you can use our helper CSS class " lazy-bg". Just add “lazy-bg” to the div or the parent div containing background images."

If the GB Container block could force background images inline, that could offer great performance benefits even for background images further down the page if they can be lazy-loaded like this.