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

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

@@ -33,7 +33,7 @@ function perflab_aea_enqueued_js_assets_test(): array {
 	}
 
 	$result = array(
-		'label'       => __( 'Enqueued scripts', 'performance-lab' ),
+		'label'       => __( 'Blocking scripts', 'performance-lab' ),
 		'status'      => 'good',
 		'badge'       => array(
 			'label' => __( 'Performance', 'performance-lab' ),
@@ -45,8 +45,8 @@ function perflab_aea_enqueued_js_assets_test(): array {
 				sprintf(
 					/* translators: 1: Number of enqueued styles. 2.Styles size. */
 					_n(
-						'The amount of %1$s enqueued script (size: %2$s) is acceptable.',
-						'The amount of %1$s enqueued scripts (size: %2$s) is acceptable.',
+						'The amount of %1$s blocking script (size: %2$s) is acceptable.',
+						'The amount of %1$s blocking scripts (size: %2$s) is acceptable.',
 						$enqueued_scripts,
 						'performance-lab'
 					),
@@ -86,8 +86,8 @@ function perflab_aea_enqueued_js_assets_test(): array {
 				sprintf(
 					/* translators: 1: Number of enqueued styles. 2.Styles size. */
 					_n(
-						'Your website enqueues %1$s script (size: %2$s). Try to reduce the number or to concatenate them.',
-						'Your website enqueues %1$s scripts (size: %2$s). Try to reduce the number or to concatenate them.',
+						'Your website has %1$s blocking script (size: %2$s). Try to reduce the number or to concatenate them.',
+						'Your website has %1$s blocking scripts (size: %2$s). Try to reduce the number or to concatenate them.',
 						$enqueued_scripts,
 						'performance-lab'
 					),
@@ -128,7 +128,7 @@ function perflab_aea_enqueued_css_assets_test(): array {
 		return array( 'omitted' => true );
 	}
 	$result = array(
-		'label'       => __( 'Enqueued styles', 'performance-lab' ),
+		'label'       => __( 'Blocking styles', 'performance-lab' ),
 		'status'      => 'good',
 		'badge'       => array(
 			'label' => __( 'Performance', 'performance-lab' ),
@@ -140,8 +140,8 @@ function perflab_aea_enqueued_css_assets_test(): array {
 				sprintf(
 					/* translators: 1: Number of enqueued styles. 2.Styles size. */
 					_n(
-						'The amount of %1$s enqueued style (size: %2$s) is acceptable.',
-						'The amount of %1$s enqueued styles (size: %2$s) is acceptable.',
+						'The amount of %1$s blocking style (size: %2$s) is acceptable.',
+						'The amount of %1$s blocking styles (size: %2$s) is acceptable.',
 						$enqueued_styles,
 						'performance-lab'
 					),
@@ -180,8 +180,8 @@ function perflab_aea_enqueued_css_assets_test(): array {
 				sprintf(
 					/* translators: 1: Number of enqueued styles. 2.Styles size. */
 					_n(
-						'Your website enqueues %1$s style (size: %2$s). Try to reduce the number or to concatenate them.',
-						'Your website enqueues %1$s styles (size: %2$s). Try to reduce the number or to concatenate them.',
+						'Your website has %1$s blocking style (size: %2$s). Try to reduce the number or to concatenate them.',
+						'Your website has %1$s blocking styles (size: %2$s). Try to reduce the number or to concatenate them.',
 						$enqueued_styles,
 						'performance-lab'
 					),
@@ -293,6 +293,11 @@ function perflab_aea_get_path_from_resource_url( string $resource_url ): string
 		return '';
 	}
 
+	// Remove query string if present.
+	if ( false !== strpos( $resource_url, '?' ) ) {
+		$resource_url = substr( $resource_url, 0, strpos( $resource_url, '?' ) );
+	}
+
 	// Different content folder ex. /content/.
 	if ( 0 === strpos( $resource_url, content_url() ) ) {
 		return WP_CONTENT_DIR . substr( $resource_url, strlen( content_url() ) );
@@ -307,3 +312,28 @@ function perflab_aea_get_path_from_resource_url( string $resource_url ): string
 	// Standard wp-content configuration.
 	return untrailingslashit( ABSPATH ) . wp_make_link_relative( $resource_url );
 }
+
+/**
+ * Gets the content length of an asset.
+ *
+ * @since n.e.x.t
+ *
+ * @param string $resource_url URL of the resource.
+ * @return int|false Returns the content length in bytes or false if it cannot be determined.
+ */
+function perflab_aea_get_asset_content_length( string $resource_url ) {
+	$head_response = wp_remote_head( $resource_url, array( 'timeout' => 10 ) );
+	if ( is_wp_error( $head_response ) || 200 !== wp_remote_retrieve_response_code( $head_response ) ) {
+		return false;
+	}
+
+	$content_length = wp_remote_retrieve_header( $head_response, 'content-length' );
+	if ( is_array( $content_length ) && 0 < count( $content_length ) ) {
+		$content_length = $content_length[0];
+	}
+	if ( ! is_string( $content_length ) || '' === $content_length || ! ctype_digit( $content_length ) || 0 === (int) $content_length ) {
+		return false;
+	}
+
+	return (int) $content_length;
+}

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

@@ -13,107 +13,109 @@
 // @codeCoverageIgnoreEnd
 
 /**
- * Audit enqueued and printed scripts in is_front_page(). Ignore /wp-includes scripts.
+ * Audit blocking assets on the front page.
  *
- * It will save information in a transient for 12 hours.
- *
- * @since 1.0.0
- *
- * @global WP_Scripts $wp_scripts
+ * @since n.e.x.t
  */
-function perflab_aea_audit_enqueued_scripts(): void {
-	if ( ! is_admin() && is_front_page() && current_user_can( 'view_site_health_checks' ) && false === get_transient( 'aea_enqueued_front_page_scripts' ) ) {
-		global $wp_scripts;
-		$enqueued_scripts = array();
+function perflab_aea_audit_blocking_assets(): void {
+	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' ) )
+	) {
+		return;
+	}
 
-		foreach ( $wp_scripts->done as $handle ) {
-			$script = $wp_scripts->registered[ $handle ];
+	$response = wp_remote_get(
+		home_url( '/' ),
+		array(
+			'timeout' => 10,
+			'headers' => array(
+				'Accept'        => 'text/html',
+				'Cache-Control' => 'no-cache',
+			),
+		)
+	);
+
+	if ( is_wp_error( $response ) || 200 !== wp_remote_retrieve_response_code( $response ) ) {
+		return;
+	}
+
+	$html = wp_remote_retrieve_body( $response );
+	if ( '' === $html ) {
+		return;
+	}
 
-			if ( ! $script->src || false !== strpos( $script->src, 'wp-includes' ) ) {
+	$assets = array(
+		'scripts' => array(),
+		'styles'  => array(),
+	);
+
+	$processor = new WP_HTML_Tag_Processor( $html );
+
+	while ( $processor->next_tag() ) {
+		$tag = $processor->get_tag();
+
+		if ( 'SCRIPT' === $tag ) {
+			$src = $processor->get_attribute( 'src' );
+			if ( ! is_string( $src ) ) {
 				continue;
 			}
 
-			// Add any extra data (inlined) that was passed with the script.
-			$inline_size = 0;
-			if (
-				isset( $script->extra['after'] ) &&
-				is_array( $script->extra['after'] )
-			) {
-				foreach ( $script->extra['after'] as $extra ) {
-					$inline_size += ( is_string( $extra ) ) ? mb_strlen( $extra, '8bit' ) : 0;
-				}
-			}
+			// Note that when the "type" attribute is absent or empty, the element is treated as a classic JavaScript script.
+			$type = $processor->get_attribute( 'type' );
 
-			$path = perflab_aea_get_path_from_resource_url( $script->src );
-			if ( '' === $path ) {
+			// Skip external script with "async" or "defer" attributes.
+			if ( null !== $processor->get_attribute( 'async' ) || null !== $processor->get_attribute( 'defer' ) ) {
 				continue;
 			}
 
-			$enqueued_scripts[] = array(
-				'src'  => $script->src,
-				'size' => wp_filesize( $path ) + $inline_size,
-			);
-
-		}
-		set_transient( 'aea_enqueued_front_page_scripts', $enqueued_scripts, 12 * HOUR_IN_SECONDS );
-	}
-}
-add_action( 'wp_footer', 'perflab_aea_audit_enqueued_scripts', PHP_INT_MAX );
+			// Skip external script with a "type" attribute set to "module" as they are deferred by default.
+			if ( is_string( $type ) && '' !== $type && 'module' === strtolower( $type ) ) {
+				continue;
+			}
 
-/**
- * Audit enqueued and printed styles in the frontend. Ignore /wp-includes styles.
- *
- * It will save information in a transient for 12 hours.
- *
- * @since 1.0.0
- *
- * @global WP_Styles $wp_styles The WP_Styles current instance.
- */
-function perflab_aea_audit_enqueued_styles(): void {
-	if ( ! is_admin() && is_front_page() && current_user_can( 'view_site_health_checks' ) && false === get_transient( 'aea_enqueued_front_page_styles' ) ) {
-		global $wp_styles;
-		$enqueued_styles = array();
-		foreach ( $wp_styles->done as $handle ) {
-			$style = $wp_styles->registered[ $handle ];
-
-			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 ) ) {
 				continue;
 			}
 
-			// Check if we already have the style's path ( part of a refactor for block styles from 5.9 ).
-			if (
-				isset( $style->extra['path'] ) &&
-				is_string( $style->extra['path'] ) &&
-				'' !== $style->extra['path']
-			) {
-				$path = $style->extra['path'];
-			} else { // Fallback to getting the path from the style's src.
-				$path = perflab_aea_get_path_from_resource_url( $style->src );
-				if ( '' === $path ) {
-					continue;
-				}
+			$size = perflab_aea_get_asset_content_length( $src );
+			if ( false !== $size ) {
+				$assets['scripts'][] = array(
+					'src'  => $src,
+					'size' => $size,
+				);
+			}
+		} elseif ( 'LINK' === $tag ) {
+			$rel = $processor->get_attribute( 'rel' );
+			if ( ! is_string( $rel ) || 'stylesheet' !== strtolower( $rel ) ) {
+				continue;
 			}
 
-			// Add any extra data (inlined) that was passed with the style.
-			$inline_size = 0;
-			if (
-				isset( $style->extra['after'] ) &&
-				is_array( $style->extra['after'] )
-			) {
-				foreach ( $style->extra['after'] as $extra ) {
-					$inline_size += ( is_string( $extra ) ) ? mb_strlen( $extra, '8bit' ) : 0;
-				}
+			$href = $processor->get_attribute( 'href' );
+			if ( ! is_string( $href ) ) {
+				continue;
 			}
 
-			$enqueued_styles[] = array(
-				'src'  => $style->src,
-				'size' => wp_filesize( $path ) + $inline_size,
-			);
+			$size = perflab_aea_get_asset_content_length( $href );
+			if ( false !== $size ) {
+				$assets['styles'][] = array(
+					'src'  => $href,
+					'size' => $size,
+				);
+			}
 		}
-		set_transient( 'aea_enqueued_front_page_styles', $enqueued_styles, 12 * HOUR_IN_SECONDS );
+	}
+
+	if ( 0 !== count( $assets['scripts'] ) ) {
+		set_transient( 'aea_enqueued_front_page_scripts', $assets['scripts'], 12 * HOUR_IN_SECONDS );
+	}
+	if ( 0 !== count( $assets['styles'] ) ) {
+		set_transient( 'aea_enqueued_front_page_styles', $assets['styles'], 12 * HOUR_IN_SECONDS );
 	}
 }
-add_action( 'wp_footer', 'perflab_aea_audit_enqueued_styles', PHP_INT_MAX );
+add_action( 'admin_init', 'perflab_aea_audit_blocking_assets' );
 
 /**
  * Adds tests to site health.

plugins/performance-lab/tests/data/class-site-health-mock-responses.php

@@ -37,7 +37,7 @@ public static function return_added_test_info_site_health(): array {
 	 */
 	public static function return_aea_enqueued_js_assets_test_callback_less_than_threshold( int $enqueued_scripts = 1 ): array {
 		$result = array(
-			'label'       => esc_html__( 'Enqueued scripts', 'performance-lab' ),
+			'label'       => esc_html__( 'Blocking scripts', 'performance-lab' ),
 			'status'      => 'good',
 			'badge'       => array(
 				'label' => esc_html__( 'Performance', 'performance-lab' ),
@@ -49,8 +49,8 @@ public static function return_aea_enqueued_js_assets_test_callback_less_than_thr
 					sprintf(
 						/* translators: 1: Number of enqueued styles. 2.Styles size. */
 						_n(
-							'The amount of %1$s enqueued script (size: %2$s) is acceptable.',
-							'The amount of %1$s enqueued scripts (size: %2$s) is acceptable.',
+							'The amount of %1$s blocking script (size: %2$s) is acceptable.',
+							'The amount of %1$s blocking scripts (size: %2$s) is acceptable.',
 							$enqueued_scripts,
 							'performance-lab'
 						),
@@ -80,8 +80,8 @@ public static function return_aea_enqueued_js_assets_test_callback_more_than_thr
 				sprintf(
 					/* translators: 1: Number of enqueued styles. 2.Styles size. */
 					_n(
-						'Your website enqueues %1$s script (size: %2$s). Try to reduce the number or to concatenate them.',
-						'Your website enqueues %1$s scripts (size: %2$s). Try to reduce the number or to concatenate them.',
+						'Your website has %1$s blocking script (size: %2$s). Try to reduce the number or to concatenate them.',
+						'Your website has %1$s blocking scripts (size: %2$s). Try to reduce the number or to concatenate them.',
 						$enqueued_scripts,
 						'performance-lab'
 					),
@@ -109,7 +109,7 @@ public static function return_aea_enqueued_js_assets_test_callback_more_than_thr
 	 */
 	public static function return_aea_enqueued_css_assets_test_callback_less_than_threshold( int $enqueued_styles = 1 ): array {
 		$result = array(
-			'label'       => esc_html__( 'Enqueued styles', 'performance-lab' ),
+			'label'       => esc_html__( 'Blocking styles', 'performance-lab' ),
 			'status'      => 'good',
 			'badge'       => array(
 				'label' => esc_html__( 'Performance', 'performance-lab' ),
@@ -121,8 +121,8 @@ public static function return_aea_enqueued_css_assets_test_callback_less_than_th
 					sprintf(
 						/* translators: 1: Number of enqueued styles. 2.Styles size. */
 						_n(
-							'The amount of %1$s enqueued style (size: %2$s) is acceptable.',
-							'The amount of %1$s enqueued styles (size: %2$s) is acceptable.',
+							'The amount of %1$s blocking style (size: %2$s) is acceptable.',
+							'The amount of %1$s blocking styles (size: %2$s) is acceptable.',
 							$enqueued_styles,
 							'performance-lab'
 						),
@@ -152,8 +152,8 @@ public static function return_aea_enqueued_css_assets_test_callback_more_than_th
 				sprintf(
 					/* translators: 1: Number of enqueued styles. 2.Styles size. */
 					_n(
-						'Your website enqueues %1$s style (size: %2$s). Try to reduce the number or to concatenate them.',
-						'Your website enqueues %1$s styles (size: %2$s). Try to reduce the number or to concatenate them.',
+						'Your website has %1$s blocking style (size: %2$s). Try to reduce the number or to concatenate them.',
+						'Your website has %1$s blocking styles (size: %2$s). Try to reduce the number or to concatenate them.',
 						$enqueued_styles,
 						'performance-lab'
 					),