Skip to content

Conversation

westonruter
Copy link
Member

@westonruter westonruter commented Feb 12, 2024

Summary

This is a sub-PR of #982. Review/merge it first.

This implements the following #979 (comment):

What if instead of converting script[src] to script[data-lazy-embed-src], it instead set the type attribute of text/x.lazy-loaded-javascript? Clearly out of scope for this PR, but just thought of this alternative. It probably doesn't make any difference, oh except actually wouldn't it be better in that it would prevent the browser from treating this script as an inline script? While the browser hopefully is smart enough to skip parsing an inline script that has no contents, in the worst case it could. That would be bad because inline scripts are blocking. If the src is left-as is and the type is used to mark such lazy-loaded scripts instead, this would be avoided. This is also what Partytown does to mark its scripts via text/partytown.

Another important reason so do this change is that plugins that concatenate scripts may erroneously attempt to concatenate the empty script[data-lazy-embed-src] scripts. By using a custom type, this will be avoided.

I also just checked with WP Rocket, and they also use a custom type. The logic also looks like it would by default try to delay script[data-lazy-embed-src] scripts which would break Embed Optimizer. Also, the WP Rocket Combine logic specifically skips over any script that has a type that isn't JavaScript. So it seems we'd be safer in both cases to use a custom type.

Checklist

  • PR has either [Focus] or Infrastructure label.
  • PR has a [Type] label.
  • PR has a milestone or the no milestone label.

@westonruter westonruter added [Type] Bug An existing feature is broken [Focus] JS & CSS no milestone PRs that do not have a defined milestone for release [Plugin] Embed Optimizer Issues for the Embed Optimizer plugin (formerly Auto Sizes) labels Feb 12, 2024
Base automatically changed from add/embed-optimizer-failure-checks to feature/lazy-embeds February 15, 2024 23:18
@adamsilverstein
Copy link
Member

Nice catch on the WP-Rocket usage, that makes a stronger argument for this approach. Good idea to ensure this is compatible with existing optimizers.

Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

if ( $p->get_attribute( 'type' ) ) {
$p->set_attribute( 'data-original-type', $p->get_attribute( 'type' ) );
}
$p->set_attribute( 'type', 'text/x.lazy-loaded-javascript' );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this match the plugin name? maybe something like text/embed-optimizer?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried to follow the rules outlined in https://en.wikipedia.org/wiki/Media_type

That said, what about application/vnd.embed-optimizer.javascript?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Committed this in 39d4488

Copy link
Member

@adamsilverstein adamsilverstein left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, left one suggestion for the type name

Copy link
Member

@adamsilverstein adamsilverstein left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fine!

@westonruter westonruter merged commit 851ea51 into feature/lazy-embeds Feb 16, 2024
@westonruter westonruter deleted the add/embed-optimizer-custom-script-type branch February 16, 2024 17:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
no milestone PRs that do not have a defined milestone for release [Plugin] Embed Optimizer Issues for the Embed Optimizer plugin (formerly Auto Sizes) [Type] Bug An existing feature is broken
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants