-
Notifications
You must be signed in to change notification settings - Fork 110
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enhance detection of enqueued frontend assets #136
Enhance detection of enqueued frontend assets #136
Conversation
…_url. Changing hooks to capture enqueued scripts/styles and inlines.
…ueued-assets-enhance
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@manuelRod This looks solid to me!
Would love to get someone else to review as well, can you maybe give this a pass @aristath?
$inline_size = 0; | ||
if ( ! empty( $script->extra ) && ! empty( $script->extra['after'] ) ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Similar to the above.
$inline_size = 0; | |
if ( ! empty( $script->extra ) && ! empty( $script->extra['after'] ) ) { | |
if ( empty( $script->extra['after'] ) || ! is_array( $script->extra['after'] ) ) { | |
continue; | |
} | |
$inline_size = 0; | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this would break functionality. If empty extra['after'] $inline_size will be 0 and that's it, we don't need to skip the iteration with continue, since the loop is not finished.
if ( ! empty( $style->extra ) && ! empty( $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 ); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
By inverting the conditional here allows the removal of the !
operator, allowing for a more natural flow.
if ( ! empty( $style->extra ) && ! empty( $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 ); | |
} | |
// default to getting the path from the style's src. | |
if ( empty( $style->extra ) || empty( $style->extra['path'] ) ) { | |
$path = perflab_aea_get_path_from_resource_url( $style->src ); | |
} else { | |
$path = $style->extra['path']; | |
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mitogh Not sure I agree in this case, the original code here explicitly looks at whether the $style->extra
value is not empty, and the other function use would be the fallback. I don't have a strong preference on the order, but with your suggestion here the comment in line 71 is no longer accurate.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, right let me update line 71.
Mostly this pattern avoids the usage of !
which translates 1 operation into 2.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd argue that's a bit of a micro optimization. IMO the code path checking ! empty( $var )
and then using $var
is more straightforward to read.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The suggestion goes more towards optimization for reading rather than performance so it becomes a personal preference I would say either way is fine, but IMO this seems easier to read:
- If empty then
- Else
Rather than
- If not empty then
- else
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also don't agree with this (since is a personal preference), to me, seems more natural and easier to read the way it is right now.
|
||
// Add any extra data (inlined) that was passed with the style. | ||
$inline_size = 0; | ||
if ( ! empty( $style->extra ) && ! empty( $style->extra['after'] ) ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Similar comment to the above.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same as above, it would break functionality.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work overall, left a few questions!
@@ -78,14 +78,29 @@ function perflab_aea_get_total_size_bytes_enqueued_styles() { | |||
|
|||
/** | |||
* 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( $resource_url ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Im noticing quite a few varying function namespaces - maybe this function should be called perflab_get_path_from_resource_url
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hello, @dainemawer all functions are prepending "perflab_aea", what are the function namespaces varying? maybe I'm missing some
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the approach of having module specific namespaces (all of them starting with perflab_
though due to the overall plugin) is a solid approach, which avoids us running into accidental conflicts between individual modules.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@manuelRod I was thinking more globally across the plugin - I've noticed other functions are all prefixed with perflab_
but not necessarily perflab_aea
- that being said it sounds like @felixarntz is good with this approach - Im not swayed either way - just wanted to call it out for consistency reasons :)
'src' => $src, | ||
'size' => perflab_aea_get_resource_file_size( perflab_aea_get_path_from_resource_url( $src ) ), | ||
'src' => $script->src, | ||
'size' => perflab_aea_get_resource_file_size( $path ) + $inline_size, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this size take into account the size on the server / disk - or the transferred / gzipped size? Probably worth noting as the 2 can be different and could skew results.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it's the disk/server size. It uses filesize() to get the file size.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@manuelRod - that makes sense - just so Im understanding correctly, would that size be more or less the same than transferred / gzipped size?
|
||
/** | ||
* Audit enqueued styles in the frontend. Ignore /wp-includes styles. | ||
* Audit enqueued and printed styles in the frontend. Ignore /wp-includes styles. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why would we ignore wp-includes
? Gutenberg for instance adds a couple of stylesheets that arent exactly optimized. My opinion is that we should give the user the full picture, even if it means flagging WP for enqueuing unnecessary stylesheets.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@dainemawer those assets are included by default by wp, and this module focus on an overall overview of external assets being enqueued (plugins, theme), I think it would make more noise to include wp-includes, since most of the consumers won't be techies and won't know how to react on it.
I agree that going forward and as we iterate over this module, we can show more useful information, at that point, we can add more info (like wp-includes) and tips on how to improve it, but for now, I would just ignore them.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thats a fair statement, thanks @manuelRod !
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Apologies it took me so long to get to this PR.
The code looks good to me and makes sense 👍
@manuelRod FYI Since we've branched off from |
applied some of the comments! not sure if anyone wants to review them again to be ready for the release @felixarntz @aristath |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@manuelRod Two more tiny changes needed here based on the change from https://github.com/WordPress/performance/pull/136/files#r819490106, I can quickly add them.
…rl()` are properly handled.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added the two tiny changes, all the rest already lgtm before. Thank you, great work @manuelRod!
Summary
Enhances for Site Health Enqueued assets module.
Fixes #135
Relevant technical choices
Follow up of the previous closed PR #54
Checklist
[Focus]
orInfrastructure
label.[Type]
label.no milestone
label.