Asynchronous enqueue of the Google Maps API

Question

I am loading the Google Maps API on a lot of Wordpress sites and I have always added it with an enqueue. Lately, we have been getting the following warning on the console:

"Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance."

So we have been researching ways to get this script loaded in an asynchronous way. We've found on the following blog post the discussion about async/defer being added to Wp 6.3 enqueues:

https://make.wordpress.org/core/2023/07/14/registering-scripts-with-async-and-defer-attributes-in-wordpress-6-3/

I am adding the Google Maps API like this then:

wp_register_script(
    'google-api-key',
    'https://maps.googleapis.com/maps/api/js?key=' . MAPS_API_KEY . '&callback=Function.prototype',
    array(),
    null,
    array(
        'in_footer' => true,
        'strategy'  => 'async',
    )
);
wp_enqueue_script('google-api-key');

This seems to work as it does add the following to the script tag:

async="async" data-wp-strategy="async"

But the warning persists. Is it a false positive now that the script tag actually has the async attribute?

Answer 1

Add this to your URL when calling the google API: &loading=async