Removing decoding="async" from WordPress Images and Why I Do It

What is Async Decoding?

The decoding property tells the browser how to decode an image. In simple terms, this can either be to wait for an image to be decoded before moving on ("sync") or to decode the image in parallel with other elements ("async").

Why I Disable It?

The perfect page load would have a mixture of decoding types depending on layout, visibility and intended user interaction – However, by default, WordPress has now introduced decoding="async", along with other parameters, to every image across the website.

Elementor also has functionality for this in Elementor -> Settings -> Performance -> Optimized Image Loading.

This isn’t ideal, as delayed image decoding can negatively impact the website’s First Contentful Paint (FCP) and Largest Contentful Paint (LCP) when deployed on contributing images, which can then have negative impacts on your SEO and ranking.

Given the complexity in removing these parameters from specific images, a simple solution would be to disable it on all images, as in my opinion, the potential negatives to your website’s LCP outweigh the performance positives on other images on the site.

How to Disable Async Decoding in WordPress?

The easiest way to disable decoding="async" across your website is by adding this code to your child theme’s functions.php file, or using a popular code snippets plugin that allows the addition of PHP. My managed hosting takes care of this at the server level.

// Removes decoding from images within the post.
add_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );

// Removes decoding from featured images and the Post Image block.
add_filter( 'wp_get_attachment_image_attributes', function( $attributes ) {
    unset( $attributes['decoding'] );
    return $attributes;
} );