[wp-trac] [WordPress Trac] #12009: Add support for HTML 5 "async" and "defer" attributes

[WordPress Trac]

#12009: Add support for HTML 5 "async" and "defer" attributes
--------------------------------------+--------------------------
 Reporter:  Otto42                    |       Owner:  10upsimon
     Type:  enhancement               |      Status:  assigned
 Priority:  high                      |   Milestone:  6.3
Component:  Script Loader             |     Version:  4.6
 Severity:  normal                    |  Resolution:
 Keywords:  has-patch has-unit-tests  |     Focuses:  performance
--------------------------------------+--------------------------

Comment (by westonruter):

 Replying to [comment:112 azaozz]:
 > Thanks for the examples. May be missing something but don't actually see
 any `async` scripts with "after" scripts there.

 You’re right, these examples were focused on cases where the
 `script_loader_tag` filter was used to inject the `async` attribute. There
 are other cases where async scripts occur in plugins which also involve
 after scripts, but they are manually printed. For example (links are to
 source code):

 * [https://plugins.trac.wordpress.org/browser/jetpack/trunk/modules
 /google-analytics/classes/wp-google-analytics-legacy.php#L182 Jetpack]:
 Prints an async script followed by an inline script defining the
 `dataLayer` configuration variable.
 * [https://plugins.trac.wordpress.org/browser/wp-maintenance-
 mode/trunk/views/google-analytics.php LightStart]: Similarly, manually
 prints an async script for gtag. Includes an after script that defines the
 dataLayer global to configure gtag.
 * [https://plugins.trac.wordpress.org/browser/google-listings-and-
 ads/trunk/src/Google/GlobalSiteTag.php#L245 Google Listings & Ads]: Also
 manually prints gtag script. The dataLayer is defined in an after inline
 script.
 * [https://plugins.trac.wordpress.org/browser/themeisle-
 companion/trunk/obfx_modules/google-analytics/init.php#L336 Orbit Fox by
 ThemeIsle]: Yet again, manually prints googletagmanager script with after
 inline script continuing configuration
 * [https://plugins.trac.wordpress.org/browser/ad-
 inserter/trunk/class.php#L10000 Ad Inserter – Ad Manager & AdSense Ads]:
 Manually prints adsense async script tag, with after scripts inline
 scripts containing: `(adsbygoogle = window.adsbygoogle || []).push({});`
 * [https://plugins.trac.wordpress.org/browser/squirrly-
 seo/trunk/models/services/Analytics.php#L67 SEO Plugin by Squirrly SEO]:
 Manually prints async scripts with after inline scripts for Google
 Analytics and Google Tag Manager.
 * [https://plugins.trac.wordpress.org/browser/gdpr-cookie-
 compliance/trunk/views/moove/admin/settings/help.php#L516 GDPR Cookie
 Compliance]: Manually prints gtag script with after inline script.

 Note again that they are manually printed as opposed to using the script
 loader since the API doesn’t support async/defer (see prior
 [https://plugins.trac.wordpress.org/browser/call-now-
 button/trunk/src/renderers/cloud/class-cloudrenderer.php#L72 plugin code
 comment]). Some benefits:

 1. As we discussed above, by updating the script loader API to support
 async/defer, other plugins can easily dequeue these scripts without having
 to dig into the source code to figure out how the script was printed
 manually via an action (which sometimes is impossible or extremely
 difficult).
 2. Plugins can also easily attach additional inline after scripts.
 3. Additionally, by ensuring after inline scripts only evaluate once the
 async/defer script has loaded, some boilerplate async code can be
 eliminated (e.g. `window.dataLayer = window.dataLayer || []`)
 4. Lastly, there’s no longer a need to suppress
 `WordPress.WP.EnqueuedResources.NonEnqueuedScript` sniff.

 I put together a [https://github.com/westonruter/jetpack/pull/1 proof of
 concept Jetpack PR] which shows some of these advantages.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/12009#comment:114>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform