Make WordPress Core

Opened 18 months ago

Closed 18 months ago

Last modified 18 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:

Description

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 https://github.com/WordPress/wordpress-develop/pull/4511/files

Attachments (1)

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

Download all attachments as: .zip

Change History (12)

#1 @adamsilverstein
18 months ago

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

#3 @adamsilverstein
18 months ago

  • Component changed from General to Themes
  • Focuses css added

#4 @adamsilverstein
18 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
18 months ago

I think we should commit this.

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


18 months ago

#7 @spacedmonkey
18 months ago

  • Keywords commit added

#8 @sabernhardt
18 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
18 months ago

  • Owner changed from adamsilverstein to spacedmonkey

#10 @spacedmonkey
18 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:


18 months ago
#11

Committed.

Note: See TracTickets for help on using tickets.