Use HTML Tag Processor to audit blocking scripts & styles in Site Health’s enqueued-assets test #2059

b1ink0 · 2025-06-18T19:27:02Z

Summary

Fixes #2030

Relevant technical choices

This PR overhauls the Site Health "Enqueued Scripts" and "Enqueued Styles" tests to accurately detect and report only truly render-blocking scripts and styles, whether loaded from external files or defined inline. It achieves this by performing an unauthenticated loopback request and analyzing the resulting front-end HTML with the WP_HTML_Tag_Processor.

…d styles

…ed-assets

… inline script sizes in the asset audit

b1ink0 · 2025-06-18T19:44:17Z

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php

+			$path = perflab_aea_get_path_from_resource_url( $href );
+			if ( '' === $path ) {
+				continue;
+			}


Currently, our audit only scans assets located in the WordPress content directory. This raises an question,
how should the audit treat scripts and styles served from a CDN? Should these third-party resources be included in the render-blocking report, excluded entirely, or perhaps flagged separately so we can distinguish external blocking assets from local ones?

I think we’ll also need to consider how to measure their sizes efficiently. One approach could be, sending an HTTP HEAD request to the CDN-hosted URL to check for a Content‑Length header.

cc: @westonruter

From a performance perspective, CDN-served assets could be even worse for performance since they require a new TCP connection, now that browsers don't reuse cached resources across origins. So we definitely should be including them in the render-blocking report.

Sending an HTTP HEAD request for all resources regardless of whether they are on the same origin or not makes sense to me. If the request returns in a 404 then this would be important to report as well.

Once we have the report, then a future enhancement would be digging in to find the theme/plugin responsible for the resource being added in the first place. The AMP plugin implements a lot of this, and it was getting extracted a separate package via https://github.com/GoogleChromeLabs/wp-origination but that effort got stalled and was abandoned. See also #1095.

Should we consider a case where a HEAD request does not return a content length due to server configuration? If so, should we then make a GET request?

Perhaps, but that might be overkill.

b1ink0 · 2025-06-18T19:47:31Z

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php

+			if ( ! is_string( $href ) || false !== strpos( $href, 'wp-includes' ) ) {
+				continue;
+			}


We currently skip any URL containing wp-includes (i.e. core assets). Since the goal is to surface all render-blocking resources, should we remove that exclusion and include core scripts and styles in the audit as well?

I think this exclusion should be removed, yes.

b1ink0 · 2025-06-18T19:51:07Z

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php

+			// Process blocking inline scripts.
+			if ( ! is_string( $src ) ) {
+				$script_size = mb_strlen( $processor->get_modifiable_text(), '8bit' );
+				if ( false !== $script_size ) {
+					$assets['scripts'][] = array(
+						'src'  => 'inline',
+						'size' => $script_size,


Currently each inline SCRIPT is reported as its own entry, do we want to continue treating every inline script separately, or would it make sense to aggregate inline scripts into a single summary?

I don't think inline scripts need to be counted since the render blocking is not significant compared to blocking external scripts.

codecov · 2025-06-20T08:11:49Z

Codecov Report

Attention: Patch coverage is 90.32258% with 9 lines in your changes missing coverage. Please review.

Project coverage is 67.75%. Comparing base (ff5cc68) to head (e58e451).
Report is 29 commits behind head on trunk.

Files with missing lines	Patch %	Lines
...cludes/site-health/audit-enqueued-assets/hooks.php	91.07%	5 Missing ⚠️
...ludes/site-health/audit-enqueued-assets/helper.php	89.18%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##            trunk    #2059      +/-   ##
==========================================
- Coverage   68.03%   67.75%   -0.29%     
==========================================
  Files          92       93       +1     
  Lines        7631     7688      +57     
==========================================
+ Hits         5192     5209      +17     
- Misses       2439     2479      +40

Flag	Coverage Δ
multisite	`67.75% <90.32%> (-0.29%)`	⬇️
single	`36.96% <90.32%> (-0.06%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

plugins/performance-lab/includes/site-health/audit-enqueued-assets/helper.php

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php

westonruter · 2025-06-25T18:55:36Z

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php

+	if (
+		! is_admin() ||
+		! current_user_can( 'view_site_health_checks' ) ||
+		( false !== get_transient( 'aea_enqueued_front_page_scripts' ) && false !== get_transient( 'aea_enqueued_front_page_styles' ) )


I think it would make sense to combine these two transients into one aea_blocking_assets, or something like that

…rt HEAD request

Co-authored-by: Weston Ruter <[email protected]>

…page loads Co-authored-by: Weston Ruter <[email protected]>

…assets` transient Co-authored-by: Weston Ruter <[email protected]>

westonruter · 2025-06-26T18:59:31Z

plugins/performance-lab/includes/site-health/audit-enqueued-assets/helper.php

+	if ( false !== strpos( $resource_url, '?' ) ) {
+		$resource_url = substr( $resource_url, 0, strpos( $resource_url, '?' ) );
+	}


Suggested change

if ( false !== strpos( $resource_url, '?' ) ) {

$resource_url = substr( $resource_url, 0, strpos( $resource_url, '?' ) );

}

$resource_url = preg_replace( '/\?.*/', '', $resource_url );

Nevertheless, the perflab_aea_get_path_from_resource_url() function isn't being used now anymore, right?

Yes its not being used anymore I just put comment about it here #2059 (comment).

plugins/performance-lab/includes/site-health/audit-enqueued-assets/helper.php

b1ink0 · 2025-06-26T19:02:42Z

plugins/performance-lab/includes/site-health/audit-enqueued-assets/helper.php

+	// Remove query string if present.
+	if ( false !== strpos( $resource_url, '?' ) ) {
+		$resource_url = substr( $resource_url, 0, strpos( $resource_url, '?' ) );


Does it make sense to remove the function perflab_aea_get_path_from_resource_url entirely, as a HEAD request is now made for local assets as well?

performance/plugins/performance-lab/includes/site-health/audit-enqueued-assets/helper.php

Lines 281 to 291 in 8856a14

/**

* Convert full URL paths to absolute paths.

* Covers Standard WP configuration, wp-content outside WP directories and subdirectories.

* Ex: https://example.com/content/themes/, https://example.com/wp/wp-includes/

*

* @since 1.0.0

*

* @param string $resource_url URl resource link.

* @return string Returns absolute path to the resource.

*/

function perflab_aea_get_path_from_resource_url( string $resource_url ): string {

Yes, I think the function can be removed.

westonruter · 2025-06-26T19:03:29Z

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php

+			'headers' => array(
+				'Accept'        => 'text/html',
+				'Cache-Control' => 'no-cache',
+			),


If the site has HTTP Basic auth, then these can be copied in the request headers. This is done in core in the plugin/theme file editors.

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php

westonruter · 2025-06-26T19:05:34Z

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php

-
-			if ( ! $style->src || false !== strpos( $style->src, 'wp-includes' ) ) {
+			// Skip external script with a "type" attribute that is not JavaScript.
+			if ( is_string( $type ) && '' !== $type && 'text/javascript' !== strtolower( $type ) ) {


Suggested change

if ( is_string( $type ) && '' !== $type && 'text/javascript' !== strtolower( $type ) ) {

if ( 'text/javascript' !== strtolower( (string) $type ) ) {

Here, it is necessary to keep '' !== $type since an empty string value for type is considered valid in JavaScript.

Then it can be done like this:

Suggested change

if ( is_string( $type ) && '' !== $type && 'text/javascript' !== strtolower( $type ) ) {

if ( '' !== $type && 'text/javascript' !== strtolower( (string) $type ) ) {

Okay, this change breaks things because the get_attribute method returns null when the attribute is not present. Therefore, a null !== $type check or the previous is_string( $type ) check needs to be added explicitly.

which check would be better?

Here, it is necessary to keep '' !== $type since an empty string value for type is considered valid in JavaScript.

Right, this is executed:

<script type>document.write('hello');</script>

There's also this code in core which is relevant here:

https://github.com/WordPress/wordpress-develop/blob/27233a0a3b00cc5d683080722711bca15970fe8c/src/wp-includes/script-loader.php#L2948-L2958

With the HTML API, the tag would be JavaScript if:

The type attribute is absent ($type === null)

The type attribute is boolean and has no value ($type === true)

The type attribute is an empty string ($type === ''), but not if the value has whitespace in which case it is not executed.

The type attribute contains javascript, ecmascript, jscript, or livescript.

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php

westonruter · 2025-06-26T19:11:15Z

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php

+			}
+		} elseif ( 'LINK' === $tag ) {
+			$rel = $processor->get_attribute( 'rel' );
+			if ( ! is_string( $rel ) || 'stylesheet' !== strtolower( $rel ) ) {


There is another special case to consider here, and that is a classic hack for non-blocking stylesheets.

This is commonly implemented by adding media="print" and onload="this.media = 'screen'":

https://www.filamentgroup.com/lab/load-css-simpler/
https://scottjehl.com/posts/async-css-already/

So this case can be accounted for as well. Namely, this can just skip considering any stylesheets which have a media attribute that begins with anything other than all or screen.

Co-authored-by: Weston Ruter <[email protected]>

b1ink0 added 6 commits June 6, 2025 00:07

Refactor to use HTML Tag Processor for processing enqueued scripts an…

1e60c9a

…d styles

Merge branch 'trunk' into fix/inaccurate-site-health-tests-for-enqueu…

8baf9af

…ed-assets

Refactor to use single loop to extract enqueued assets

0f4b4ba

Add support to skip async/defer/module/non-JS scripts and include all…

4a37fff

… inline script sizes in the asset audit

Add support for processing inline styles in enqueued assets audit

8e5b9dc

Rename enqueued assets site health tests to blocking assets

d53ad9b

b1ink0 added this to the performance-lab n.e.x.t milestone Jun 18, 2025

b1ink0 requested a review from westonruter June 18, 2025 19:27

b1ink0 added [Type] Bug An existing feature is broken [Plugin] Performance Lab Issue relates to work in the Performance Lab Plugin only labels Jun 18, 2025

b1ink0 commented Jun 18, 2025

View reviewed changes

b1ink0 added 2 commits June 19, 2025 23:39

Add method to mock loopback request for tests

3bdae33

Fix failing tests caused by using loopback requests for asset auditing

2846222

b1ink0 added 3 commits June 24, 2025 10:58

Remove exclusion of core assets

668808a

Exclude inline assets from audit

40377b8

Add remote HEAD–based asset sizing for blocking assets site health test

092ef31

westonruter reviewed Jun 25, 2025

View reviewed changes

plugins/performance-lab/includes/site-health/audit-enqueued-assets/helper.php Outdated Show resolved Hide resolved

westonruter reviewed Jun 25, 2025

View reviewed changes

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php Outdated Show resolved Hide resolved

westonruter reviewed Jun 25, 2025

View reviewed changes

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php Outdated Show resolved Hide resolved

westonruter reviewed Jun 25, 2025

View reviewed changes

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php Outdated Show resolved Hide resolved

westonruter reviewed Jun 25, 2025

View reviewed changes

b1ink0 and others added 4 commits June 26, 2025 15:26

Fix failing tests by refactoring HTTP request mocking method to suppo…

84692cf

…rt HEAD request

Improve type safety by using nullable return type

f341208

Co-authored-by: Weston Ruter <[email protected]>

Ensure transients are always set to avoid repeated auditing on admin …

12d1cc7

…page loads Co-authored-by: Weston Ruter <[email protected]>

Consolidated script and style transients into a single `aea_blocking_…

e58e451

…assets` transient Co-authored-by: Weston Ruter <[email protected]>

westonruter reviewed Jun 26, 2025

View reviewed changes

plugins/performance-lab/includes/site-health/audit-enqueued-assets/helper.php Outdated Show resolved Hide resolved

westonruter reviewed Jun 26, 2025

View reviewed changes

plugins/performance-lab/includes/site-health/audit-enqueued-assets/helper.php Outdated Show resolved Hide resolved

b1ink0 commented Jun 26, 2025

View reviewed changes

westonruter reviewed Jun 26, 2025

View reviewed changes

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php Outdated Show resolved Hide resolved

westonruter reviewed Jun 26, 2025

View reviewed changes

plugins/performance-lab/includes/site-health/audit-enqueued-assets/hooks.php Outdated Show resolved Hide resolved

westonruter reviewed Jun 26, 2025

View reviewed changes

Simplify conditional checks

f83151b

Co-authored-by: Weston Ruter <[email protected]>

	/**
	* Convert full URL paths to absolute paths.
	* Covers Standard WP configuration, wp-content outside WP directories and subdirectories.
	* Ex: https://example.com/content/themes/, https://example.com/wp/wp-includes/
	*
	* @since 1.0.0
	*
	* @param string $resource_url URl resource link.
	* @return string Returns absolute path to the resource.
	*/
	function perflab_aea_get_path_from_resource_url( string $resource_url ): string {

	if ( is_string( $type ) && '' !== $type && 'text/javascript' !== strtolower( $type ) ) {
	if ( 'text/javascript' !== strtolower( (string) $type ) ) {

	if ( is_string( $type ) && '' !== $type && 'text/javascript' !== strtolower( $type ) ) {
	if ( '' !== $type && 'text/javascript' !== strtolower( (string) $type ) ) {

Use HTML Tag Processor to audit blocking scripts & styles in Site Health’s enqueued-assets test #2059

Are you sure you want to change the base?

Use HTML Tag Processor to audit blocking scripts & styles in Site Health’s enqueued-assets test #2059

Conversation

b1ink0 commented Jun 18, 2025

Summary

Relevant technical choices

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

westonruter Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov bot commented Jun 20, 2025 •

edited

Loading

westonruter Jun 26, 2025 •

edited

Loading