Add module to alert about excessive JS and CSS assets #54

manuelRod · 2021-12-17T09:18:55Z

Addresses #25

…blob/master/site-health-audit-enqueued-assets.php imported as a module and some little refactoring.

…tivated_plugin, deactivated_plugin

ThierryA

Thanks for working on this 😄 I see this is a draft but I left a few early comments without doing a detailed review yet. The approach to trigger an asset warning is quite weak at the moment and need some more work.

modules/audit-enqueued-assets/load.php

felixarntz

Great work so far @manuelRod! I agree the most important decision we need to make here is find good thresholds for the amount of assets and their filesize when we should start warning users.

Other than that, I left a few specific code comments below for things I think can be improved. My most important point would be that we also need to add appropriate capability checks and collect the enqueued assets data in a single consistent scenario instead of "anywhere in the frontend".

modules/audit-enqueued-assets/load.php

felixarntz

@manuelRod Two higher-level points of feedback:

Now that Module Slugs Naming Proposal #46 / Update module directories to be within their focus directory #58 is merged, please refresh this against latest trunk and update all the module- and test-related files here to be in a site-health subdirectory, according to the updated module specification.
It may help to split the module itself into a few smaller files, right now there is just a single load.php which makes it hard to overview the code. A good starting point could be to have only the main hooks and their functions in the load.php file and the other lower-level functions could be in separate files that are require_onced in load.php.

…s and unit test reordering.

- renaming transients - view_site_health_checks capability check to avoid non logged and non view_site_health_checks users to trigger checks - is_front_page check to avoid creating warnings in any random page.

manuelRod · 2022-01-10T13:36:48Z

@felixarntz I've implemented all your requests and updated the module to the new structure, let's continue the conversation in the issue for thresholds and messaging.

manuelRod · 2022-01-24T09:53:30Z

@JustinyAhin Would you mind explaining what would be the issue?
If query monitor plugin enqueues that CSS in the frontend, then the plugin includes it. That would be the right behavior.
Or I am missing your point?

JustinyAhin · 2022-01-24T10:44:08Z

@JustinyAhin Would you mind explaining what would be the issue? If query monitor plugin enqueues that CSS in the frontend, then the plugin includes it. That would be the right behavior. Or I am missing your point?

@manuelRod the query monitor CSS is only enqueued when logged in as an admin. I was wondering if we should include these kinds of assets in the checks.

aristath · 2022-01-24T10:52:22Z

Maybe we could have a filter to allow changing the list of scripts/styles that the implementation detects?
Or - ideally - only update the transient for anonymous visits? 🤔

manuelRod · 2022-01-24T16:07:32Z

@JustinyAhin @aristath I added the check of capabilities to save transients per @felixarntz request here.

More importantly though, this code can set a transient when no user is logged in, which is problematic from both a security and frontend caching perspective. I think we will need to change this so that it only runs when a user is logged in, potentially even only when a user with a certain capability is logged in.

aristath · 2022-01-25T09:19:25Z

Hmmm I don't see how setting a transient could be considered a security risk... 🤔
I do see the point about it being an issue from a frontend caching perspective though.

What if we added a button in the module, something like "refresh stats/caches/whatever"? On click, we could load the frontend in an invisible iframe using a nonce & a special param in the URL to trigger the transient update. In the request, we can also "fake" the user-ID to be an anonymous user so it doesn't load all the extra scripts/styles normally associated with an admin user.

manuelRod · 2022-01-25T09:33:23Z

@aristath there is already a "reset" button to clean the transient (but that's about it).
Maybe we can discuss different approaches at this afternoon's meeting.

felixarntz

@manuelRod First of all, apologies for the long delay in review - I'll make sure to follow up more quickly next time.

This is mostly looking good now, I left a few more comments, but after those are addressed, LGTM from my end.

modules/site-health/audit-enqueued-assets/helper.php

felixarntz · 2022-01-25T13:15:58Z

modules/site-health/audit-enqueued-assets/helper.php

+ * @return string Returns absolute path to the resource.
+ */
+function perflab_aea_get_path_from_resource_url( $resource_url ) {
+	return ABSPATH . wp_make_link_relative( $resource_url );


This is okay for a start, but it's a bit oversimplified:

It is possible for URLs to be in a location that is not within ABSPATH, for example several sites have their wp-content directory separate, which is supported by WordPress.

WordPress may be in a subdirectory of the domain.

For most sites what you have here will work, but we should make sure to also accomodate those other sites.

I suggest we expand this as follows to at least cover for these two cases a bit better:

Suggested change

return ABSPATH . wp_make_link_relative( $resource_url );

if ( 0 === strpos( $resource_url, WP_CONTENT_URL ) ) {

return WP_CONTENT_DIR . substr( $resource_url, strlen( WP_CONTENT_URL ) );

}

$site_url = untrailingslashit( site_url() );

if ( 0 === strpos( $resource_url, $site_url ) ) {

return ABSPATH . substr( $resource_url, strlen( $site_url ) );

}

return ABSPATH . wp_make_link_relative( $resource_url );

@felixarntz can you give me an example of the first case? I cannot see it clearly.

Regarding WordPress may be in a subdirectory of the domain.
Do you mean something like this?
https://example.com/blog/wp-content/themes/test-theme/style.css ?
If that's the case, doesn't ABSPATH . wp_make_link_relative( $resource_url ) covers it too?

@manuelRod Some popular environments like https://github.com/roots/bedrock have their wp-content directory outside of the (rest of the) WordPress directory, so that URLs would be e.g. https://example.com/content/themes/... and https://example.com/wp/wp-includes/.... Both conditions I'm suggesting here cover that use-case, the first is for assets that come from the wp-content directory in a custom location, the second one for when the WordPress directory is in a subdirectory.

If that's the case, doesn't ABSPATH . wp_make_link_relative( $resource_url ) covers it too?

I don't think it does, since wp_make_link_relative simply removes the protocol and domain. Looking at my example above, that means you get /wp/wp-includes/..., and when you append that to ABSPATH, the wp directory would basically be in there twice. That's why for these cases we have to use the site_url() function, which is the "URL equivalent" of ABSPATH (the same way that WP_CONTENT_URL is the "URL equivalent" to WP_CONTENT_DIR).

modules/site-health/audit-enqueued-assets/load.php

felixarntz · 2022-01-25T13:36:10Z

@manuelRod @aristath @JustinyAhin How do you feel about merging this PR once it's good to go with what there is for now? This is a fair amount of code, and once the last quirks are resolved, I think this is a good first proof of concept. While in WP core we only commit things we really think are ready, this makes code review very complicated and unfocused, and I don't think we need to operate like that for this plugin (it's not the case in Gutenberg either).

I agree that we definitely have to find a solution for excluding the admin-exclusive assets for the numbers here, but I think we can explore that in a follow-up issue that is only focused on that and not with everything else in this module. Same goes for the thresholds which we may still iterate on.

How does that sound to you?

aristath · 2022-01-25T13:39:14Z

I agree, as a POC this is fine. I'm good with merging this one as-is, and then iterate and improve things as we go 👍

manuelRod · 2022-01-25T15:40:10Z

Agree, I think this version is a good starting point and we can iterate it later. Also good to have it shipped with beta v1.0.0 so this plugin gets more stuff and exposure.

@felixarntz thanks for the new feedback, I'll check

JustinyAhin · 2022-01-26T12:24:27Z

@felixarntz I also agree on merging this as it is now, and iterate after that.

manuelRod · 2022-01-26T15:10:43Z

@felixarntz there is only one outstanding point, see after this we can merge!

felixarntz

@manuelRod Thanks for all the updates! This is pretty much good to go from my perspective, I just left some super minor nit-pick comments on things that would be great to address, but not critical. The only other thing I think needs to be addressed still is #54 (comment).

Would love for someone else to review this as well - any volunteers? :)

modules/site-health/audit-enqueued-assets/load.php

tests/testdata/modules/site-health/audit-enqueued-assets/class-site-health-mock-responses.php

aristath · 2022-01-27T11:06:48Z

modules/site-health/audit-enqueued-assets/load.php

+function perflab_aea_audit_enqueued_styles() {
+	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->queue as $handle ) {
+			$src = $wp_styles->registered[ $handle ]->src;
+			if ( $src && ! strpos( $src, 'wp-includes' ) ) {
+				$enqueued_styles[] = array(
+					'src'  => $src,
+					'size' => perflab_aea_get_resource_file_size( perflab_aea_get_path_from_resource_url( $src ) ),
+				);
+			}
+		}
+		set_transient( 'aea_enqueued_front_page_styles', $enqueued_styles, 12 * HOUR_IN_SECONDS );
+	}
+}
+add_action( 'wp_print_styles', 'perflab_aea_audit_enqueued_styles' );


A few notes for this one:

Styles can be printed in the header or the footer. I'm not sure wp_print_styles would cover all scenarios

Stylesheets can have additional styles added inline - which should also be accounted for when getting the size

For some styles we already know their path (it was part of a refactor for block styles which was merged in 5.9)

$wp_styles->queue contains styles that are to be enqueued. However, a stylesheet can be enqueued after this has run, and if I'm not mistaken any styles that have already been printed will not be included here. To avoid a priorities battle and over-complicaing the implementation, it would be better if we ran this as the last action in wp_footer, and check which stylesheets were done.

The below code fixes the above issues:

add_action( 'wp_footer', function() { global $wp_styles; $enqueued_styles = array(); // Loop through the styles that were printed, and get their details. foreach ( $wp_styles->done as $style_handle ) { $style = $wp_styles->registered[ $style_handle ]; if ( ! empty( $style->extra ) && ! empty( $style->extra['path'] ) ) { // Check if we already have the style's 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 ); } // Add any extra data that was passed with the style. $extras_size = 0; if ( ! empty( $style->extra ) && ! empty( $style->extra['after'] ) ) { foreach ( $style->extra['after'] as $extra ) { $extras_size += strlen( $extra ); } } $enqueued_styles[] = array( 'src' => $style->src, 'size' => perflab_aea_get_resource_file_size( $src ) + $extras_size, ); } set_transient( 'aea_enqueued_front_page_styles', $enqueued_styles, 12 * HOUR_IN_SECONDS ); }, PHP_INT_MAX );

thanks, @aristath for this valuable feedback, would this apply also to scripts? or just to styles?

would this apply also to scripts? or just to styles?

Some (but not all) parts also apply to scripts, yes. Scripts can get added in the head or the footer, and they can get added while the page renders. For example, a block can enqueue its own script on-render. This will make the script get added only when the block gets rendered, but it won't be visible to $wp_scripts before we get to the footer.
However, scripts don't (yet) have a path defined, this is something we plan on doing in WP 6.0 - so that part can be skipped 👍

Good catch @aristath! Since considering this is also adding an extra "dimension" of code to this though, based on my earlier comment, would it be okay to enhance/fix this in a follow-up issue and PR?

Of course! We can merge this one as-is, and improve in follow-up PRs 👍

felixarntz

Approved from my end - awesome work so far @manuelRod!

Per some of the comments, there are definitely a number of things to follow up on - the most important one from my personal perspective is collecting the asset information in a way that doesn't include admin-specific assets.

aristath

Approving this one as it's a good starting point and we can iterate as we go in followup PRs 👍

manuelRod · 2022-01-28T12:01:11Z

💯

manuelRod added 10 commits December 8, 2021 15:21

Plugin https://github.com/audrasjb/site-health-audit-enqueued-assets/…

a7883dc

…blob/master/site-health-audit-enqueued-assets.php imported as a module and some little refactoring.

partial unit testing added.

83fd785

Adding more unit testing.

69d1208

adding missing tests.

bda604d

removing duplicated get_transient

663fe3a

Adding filter for transient, and invalidate cache on switch_theme, ac…

3a5cc54

…tivated_plugin, deactivated_plugin

Adding user action to null transient cache.

2e555a1

redirects after cleaning cache to site-health.php without query args

c668003

All prefix needs to be updated to perflab_

2baf8fe

adding functionality to get resources sizes

327bed3

This was referenced Dec 17, 2021

Create Site Health Audit Enqueued Assets module #25

Closed

Add/sitehealth enqueued assets xwp/performance#1

Merged

manuelRod marked this pull request as draft December 17, 2021 09:23

Adding filesize to the transient cache, and functionality related to it.

f7c2a60

ThierryA requested changes Dec 17, 2021

View reviewed changes

modules/audit-enqueued-assets/load.php Outdated Show resolved Hide resolved

modules/audit-enqueued-assets/load.php Outdated Show resolved Hide resolved

ThierryA reviewed Dec 21, 2021

View reviewed changes

modules/audit-enqueued-assets/load.php Outdated Show resolved Hide resolved

felixarntz reviewed Dec 29, 2021

View reviewed changes

felixarntz reviewed Dec 30, 2021

View reviewed changes

felixarntz changed the title ~~Add/sitehealth enqueued assets~~ Add module to alert about excessive JS and CSS assets Dec 30, 2021

felixarntz added [Focus] Site Health [Type] Feature A new feature within an existing module labels Dec 30, 2021

felixarntz added this to the 1.0.0-beta.1 milestone Dec 30, 2021

felixarntz requested a review from audrasjb January 4, 2022 17:48

manuelRod added 6 commits January 10, 2022 10:55

Merge branch 'trunk' into add/sitehealth-enqueued-assets

5333d7d

migrating module to new module structure

b0ccda4

migration to new module structure

2757e8c

split code refactor, creation of a new helper file with helper method…

07a6a70

…s and unit test reordering.

prefix fix

47f4f9f

refactor adding suggestions:

84af518

- renaming transients - view_site_health_checks capability check to avoid non logged and non view_site_health_checks users to trigger checks - is_front_page check to avoid creating warnings in any random page.

felixarntz reviewed Jan 25, 2022

View reviewed changes

Adding filters for limits. Fixing _n translatable strings.

90c17f8

felixarntz marked this pull request as ready for review January 27, 2022 09:45

felixarntz reviewed Jan 27, 2022

View reviewed changes

felixarntz requested review from ThierryA, JustinyAhin and aristath January 27, 2022 09:53

aristath reviewed Jan 27, 2022

View reviewed changes

nit-pick fixes

35edbca

manuelRod closed this Jan 28, 2022

manuelRod reopened this Jan 28, 2022

felixarntz approved these changes Jan 28, 2022

View reviewed changes

aristath approved these changes Jan 28, 2022

View reviewed changes

felixarntz mentioned this pull request Jan 28, 2022

Prepare initial release #133

Closed

5 tasks

felixarntz merged commit 90315fa into WordPress:trunk Jan 28, 2022

felixarntz mentioned this pull request Jan 28, 2022

Enhance reliability of how Site Health enqueued assets module detects assets #135

Closed

manuelRod mentioned this pull request Jan 28, 2022

Enhance detection of enqueued frontend assets #136

Merged

3 tasks

gerardv mentioned this pull request Feb 18, 2023

SQLite extension not working on clean Azure Web App w/ WordPress 6.1.1 installation #657

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add module to alert about excessive JS and CSS assets #54

Add module to alert about excessive JS and CSS assets #54

manuelRod commented Dec 17, 2021 •

edited by felixarntz

Loading

ThierryA left a comment

felixarntz left a comment

felixarntz left a comment •

edited

Loading

manuelRod commented Jan 10, 2022

manuelRod commented Jan 24, 2022

JustinyAhin commented Jan 24, 2022 •

edited

Loading

aristath commented Jan 24, 2022

manuelRod commented Jan 24, 2022

aristath commented Jan 25, 2022

manuelRod commented Jan 25, 2022

felixarntz left a comment

felixarntz Jan 25, 2022

manuelRod Jan 26, 2022 •

edited

Loading

felixarntz Jan 26, 2022

felixarntz commented Jan 25, 2022

aristath commented Jan 25, 2022

manuelRod commented Jan 25, 2022

JustinyAhin commented Jan 26, 2022

manuelRod commented Jan 26, 2022

felixarntz left a comment

aristath Jan 27, 2022

manuelRod Jan 27, 2022

aristath Jan 28, 2022

felixarntz Jan 28, 2022

aristath Jan 28, 2022

felixarntz left a comment

aristath left a comment

manuelRod commented Jan 28, 2022

-	return ABSPATH . wp_make_link_relative( $resource_url );
+	if ( 0 === strpos( $resource_url, WP_CONTENT_URL ) ) {
+		return WP_CONTENT_DIR . substr( $resource_url, strlen( WP_CONTENT_URL ) );
+	}
+	$site_url = untrailingslashit( site_url() );
+	if ( 0 === strpos( $resource_url, $site_url ) ) {
+		return ABSPATH . substr( $resource_url, strlen( $site_url ) );
+	}
+	return ABSPATH . wp_make_link_relative( $resource_url );

Add module to alert about excessive JS and CSS assets #54

Add module to alert about excessive JS and CSS assets #54

Conversation

manuelRod commented Dec 17, 2021 • edited by felixarntz Loading

ThierryA left a comment

Choose a reason for hiding this comment

felixarntz left a comment

Choose a reason for hiding this comment

felixarntz left a comment • edited Loading

Choose a reason for hiding this comment

manuelRod commented Jan 10, 2022

manuelRod commented Jan 24, 2022

JustinyAhin commented Jan 24, 2022 • edited Loading

aristath commented Jan 24, 2022

manuelRod commented Jan 24, 2022

aristath commented Jan 25, 2022

manuelRod commented Jan 25, 2022

felixarntz left a comment

Choose a reason for hiding this comment

felixarntz Jan 25, 2022

Choose a reason for hiding this comment

manuelRod Jan 26, 2022 • edited Loading

Choose a reason for hiding this comment

felixarntz Jan 26, 2022

Choose a reason for hiding this comment

felixarntz commented Jan 25, 2022

aristath commented Jan 25, 2022

manuelRod commented Jan 25, 2022

JustinyAhin commented Jan 26, 2022

manuelRod commented Jan 26, 2022

felixarntz left a comment

Choose a reason for hiding this comment

aristath Jan 27, 2022

Choose a reason for hiding this comment

manuelRod Jan 27, 2022

Choose a reason for hiding this comment

aristath Jan 28, 2022

Choose a reason for hiding this comment

felixarntz Jan 28, 2022

Choose a reason for hiding this comment

aristath Jan 28, 2022

Choose a reason for hiding this comment

felixarntz left a comment

Choose a reason for hiding this comment

aristath left a comment

Choose a reason for hiding this comment

manuelRod commented Jan 28, 2022

manuelRod commented Dec 17, 2021 •

edited by felixarntz

Loading

felixarntz left a comment •

edited

Loading

JustinyAhin commented Jan 24, 2022 •

edited

Loading

manuelRod Jan 26, 2022 •

edited

Loading