[wp-trac] [WordPress Trac] #64178: Increased styles_inline_size_limit pushes down oEmbed discovery tags

[WordPress Trac]

#64178: Increased styles_inline_size_limit pushes down oEmbed discovery tags
--------------------------+--------------------------
 Reporter:  swissspidy    |       Owner:  westonruter
     Type:  defect (bug)  |      Status:  accepted
 Priority:  normal        |   Milestone:  6.9
Component:  Embeds        |     Version:  trunk
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:  performance
--------------------------+--------------------------

Comment (by westonruter):

 There's quite a bit more inline CSS on that page than expected, namely
 98,691 bytes:

 ||ID||Length (bytes)||External Source||Source URL||
 ||wp-img-auto-sizes-contain-inline-css|| 135||No||wp-img-auto-sizes-
 contain-inline-css||
 ||admin-bar-inline-css|| 703||No||admin-bar-inline-css||
 ||wp-emoji-styles-inline-css|| 340||No||wp-emoji-styles-inline-css||
 ||wp-block-library-inline-css|| 47||No||wp-block-library-inline-css||
 ||jetpack-block-subscriptions-inline-css||
 8667||Yes||https://make.wordpress.org/core/wp-
 content/plugins/jetpack/_inc/blocks/subscriptions/view.css?minify=false||
 ||core-block-supports-inline-css|| 808||No||core-block-supports-inline-
 css||
 ||wporg-chapter-list-style-inline-css||
 5620||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/chapter-list/build/style-index.css||
 ||wporg-favorite-button-style-inline-css||
 2105||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/favorite-button/build/style-index.css||
 ||wporg-google-map-style-inline-css||
 2685||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/google-map/build/style.css||
 ||wporg-language-suggest-style-inline-css||
 1015||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/language-suggest/build/style.css||
 ||wporg-latest-news-style-inline-css||
 3733||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/latest-news/build/style.css||
 ||wporg-link-wrapper-style-inline-css||
 873||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/link-wrapper/build/style.css||
 ||wporg-modal-style-inline-css||
 2226||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/modal/build/style-index.css||
 ||wporg-query-filter-style-inline-css||
 14351||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/query-filter/build/style-index.css||
 ||wporg-ratings-bars-style-inline-css||
 1334||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/ratings-bars/build/style-index.css||
 ||wporg-ratings-stars-style-inline-css||
 653||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/ratings-stars/build/style-index.css||
 ||wporg-sidebar-container-style-inline-css||
 2785||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/sidebar-container/build/style.css||
 ||wporg-screenshot-preview-style-inline-css||
 2487||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/screenshot-preview-block/build/style-index.css||
 ||wporg-site-breadcrumbs-style-inline-css||
 1234||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/site-breadcrumbs/build/style.css||
 ||wporg-table-of-contents-style-inline-css||
 4134||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/table-of-contents/build/style.css||
 ||jetpack-sharing-buttons-style-inline-css||
 793||Yes||https://make.wordpress.org/core/wp-
 content/plugins/jetpack/_inc/blocks/sharing-buttons/view.css||
 ||wporg-notice-style-inline-css||
 2615||Yes||https://make.wordpress.org/core/wp-content/mu-plugins/pub-
 sync/blocks/notice/build/style.css||
 ||global-styles-inline-css|| 39348||No||global-styles-inline-css||

 Table derived via:

 {{{#!js
 console.table( Array.from(document.querySelectorAll('head > style[id
 *="-inline-css"]')).map(( style ) => { const matches =
 style.textContent.match( /\/\*#\s*sourceURL=(.+?)\s*\*\// ); return { id:
 style.id, length: style.textContent.length, hasExternal:
 matches[1].includes('.css'), sourceURL: matches[1] }})  )
 }}}

 Of these styles, ~57KB appear to have been automatically inlined via
 `wp_maybe_inline_styles()`. This is larger than the 50,000
 `styles_inline_size_limit`, however.

 There is a very large global styles inline style at almost 40KB.

 I'm also noticing that there are stylesheets being enqueued for blocks
 which don't actually occur on the page (e.g. `wporg-google-map`). This
 would seem to indicate on-demand enqueues aren't working as expected per
 #64099. This may be due to how the P2 theme works, however, in that it has
 some client-side rendering logic which may necessitate adding more CSS up
 front than is actually needed, just in case it is needed later?

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64178#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform