Load the First Cover Block Image With High Priority
Marks the background image of the first Cover block on a page with fetchpriority="high" and turns off lazy loading for it, which speeds up hero sections (better LCP).
Opens WPIDE on
Code
add_filter( 'render_block_core/cover', function ( $content ) {
static $done = false;
if ( $done || is_admin() || ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
return $content;
}
$tags = new WP_HTML_Tag_Processor( $content );
if ( $tags->next_tag( array( 'tag_name' => 'img', 'class_name' => 'wp-block-cover__image-background' ) ) ) {
$tags->set_attribute( 'fetchpriority', 'high' );
$tags->remove_attribute( 'loading' );
$tags->set_attribute( 'decoding', 'async' );
$done = true;
return $tags->get_updated_html();
}
return $content;
} );Notes
Only the first Cover block with an image element is changed; later ones keep lazy loading.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.