search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 799 forks source link

[Boost] HTML Block with JavaScript Loads After Footer when Defer JS Enabled #30012

Open ericdye opened 1 year ago

ericdye commented 1 year ago

Impacted plugin

Boost

Quick summary

When Defer JS is enabled, adding JavaScript via the HTML Block will result in it loading after the footer instead of within the page/post content.

Steps to reproduce

  1. Enable Defer JS
  2. Edit or create a post or page.
  3. Use the HTML Block to add a JavaScript script.
  4. Preview, publish, or update the post or page.
  5. See it loading after the footer instead of within the page/post content.

A clear and concise description of what you expected to happen.

I expect the JavaScript content to load in the same place as the HTML Block.

What actually happened

It loads after the footer. Markup 2023-04-10 at 11 18 41

Impact

All

Available workarounds?

No and the platform is unusable

Platform (Simple and/or Atomic)

No response

Logs or notes

thingalon commented 10 months ago

Thanks for sending this to the Heart of Gold queue, @jeherve!

@ericdye, I have some good news: there is a workaround. Just add data-jetpack-boost="ignore" to the attributes of any script in your HTML block which you would like to prevent from being deferred. e.g.:

<script data-jetpack-boost="ignore">
   // ... your javascript code here ...
</script>

Any script so tagged will not be deferred to the bottom. I will discuss with the Boost team whether we should add a general exception for scripts introduced via a post body, but in the meantime just using the above attribute will let you exclude any custom scripts from being deferred.