Make WordPress Core

Opened 12 months ago

Closed 12 months ago

Last modified 12 months ago

#58480 closed defect (bug) (fixed)

Inline render blocking CSS `classic-themes.css'

Reported by: adamsilverstein's profile adamsilverstein Owned by: spacedmonkey's profile spacedmonkey
Milestone: 6.3 Priority: normal
Severity: normal Version: 6.1
Component: Themes Keywords: has-patch commit
Focuses: css, performance Cc:


Related to #56990.

Since WordPress 6.1, a new CSS file classic-themes.css is now enqueued on all pages on the front end of non-block themes.

Since this is a blocking http request, the impact on performance will be affected by network conditions. Inlining the styles will fix this issue.

Opening this new ticket to inline the styles and leaving #56990 open because we still need to address the underlying issue raised there: the button CSS should only be included on pages that actually use a button block.

There is a fix available already for this in

Attachments (1)

58480.diff (894 bytes) - added by adamsilverstein 12 months ago.

Download all attachments as: .zip

Change History (12)

#1 @adamsilverstein
12 months ago

  • Owner set to adamsilverstein
  • Status changed from new to assigned

#3 @adamsilverstein
12 months ago

  • Component changed from General to Themes
  • Focuses css added

#4 @adamsilverstein
12 months ago

I re-ran the WebPageTest experiments to validate the performance improvement here. These tests din't surface any notable improvement, however I still think the inline approach is better because the testing is in isolation without other factors. I still intuit field results would show an improvement.

#5 @spacedmonkey
12 months ago

I think we should commit this.

This ticket was mentioned in Slack in #core by mukeshpanchal27. View the logs.

12 months ago

#7 @spacedmonkey
12 months ago

  • Keywords commit added

#8 @sabernhardt
12 months ago

If you want to commit this for the front end now, that should be fine. However, I'm working on moving these styles out of the $editor_settings array. Fallback styles should not have the extra .editor-styles-wrapper class and, more importantly, they do not belong printed inside the body after the theme-specific styles. I'm also dequeuing it from all the bundled themes (with the few necessary adjustments to theme styles). It may be better to add the script-loader and default-filters changes in one ticket (here?) and only address the theme changes in a new ticket.

#9 @spacedmonkey
12 months ago

  • Owner changed from adamsilverstein to spacedmonkey

#10 @spacedmonkey
12 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 55930:

Themes: Inline render blocking CSS `classic-themes.css'

Since [54358], a new CSS file classic-themes.css is enqueued on all pages on the front end of themes without theme.json. This is a blocking http request, the impact on performance will be affected by network conditions. Inlining this style, stops this blocking request. By adding style data of path to the registered style, the function wp_maybe_inline_styles will automatically inline the style for us.

Props spacedmonkey, adamsilverstein.
Fixes #58480.

@spacedmonkey commented on PR #4511:

12 months ago


Note: See TracTickets for help on using tickets.