Make WordPress Core

Opened 23 months ago

Last modified 4 weeks ago

#58519 reopened enhancement

Inline styles block styles in bundled themes

Reported by: spacedmonkey's profile spacedmonkey Owned by:
Milestone: 6.9 Priority: normal
Severity: normal Version: 5.8
Component: Bundled Theme Keywords: has-patch 2nd-opinion
Focuses: performance Cc:

Description

In [50836] function was added, to inline block styles, so for better performance. There are a number of small stylesheets in bundled themes that could do with that could use this functionality. To opt-in a stylesheet, simply add the path add an extra piece of data of the stylesheet. Like this.

wp_enqueue_style( 'twentyfifteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentyfifteen-style' ), '20230122' );
wp_style_add_data( 'twentyfifteen-block-style', 'path', get_template_directory() . '/css/blocks.css' );

This could improve FE performance, as it remove a blocking request.

Change History (9)

This ticket was mentioned in PR #4601 on WordPress/wordpress-develop by @spacedmonkey.


23 months ago
#1

  • Keywords has-patch added

#2 @sabernhardt
22 months ago

  • Keywords 2nd-opinion added

We would need metrics for loading the first page plus an identical page—after the browser saves the external stylesheet(s)—to compare against the same pages with inlined stylesheets.

These styles are not minified, so the proposed inlining would print hundreds of lines on every page of the site. I thought the 162 lines for Twenty Seventeen's SVG icons was a lot, but inlining both the blocks and colors-dark would add more than 1,000 lines in that theme. I also do not like the extra page weight when browsers currently cache that for the next page view, though I can be convinced this would improve it overall.

Sizes, as of r55932:

Stylesheet Lines Bytes
Twenty Ten blocks 255 4,701
Twenty Eleven blocks 415 7,732
Twenty Eleven dark 623 13,254
Twenty Twelve blocks 447 10,594
Twenty Thirteen blocks 683 16,096
Twenty Fourteen blocks 423 8,022
Twenty Fifteen blocks 715 13,711
Twenty Sixteen blocks 464 9,023
Twenty Seventeen blocks 479 10,745
Twenty Seventeen colors-dark 566 18,233

This ticket was mentioned in Slack in #core-themes by karmatosed. View the logs.


12 months ago

#4 @karmatosed
12 months ago

  • Keywords close added

@spacedmonkey this was discussed in the scrub today for default themes and the consensus is that more information would be needed or else this is recommended for now to be closed with a 'maybe later'. The focus right now is on bugs for default themes and this unless we are mistaken doesn't fall into that.

This said, if you can provide us with reasons we shouldn't follow through with that, we can reverse that decision happily.

#5 @karmatosed
11 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from new to closed

I am going to progress through closing this for now. Thank you everyone for the collaboration.

This ticket was mentioned in Slack in #core-performance by flixos90. View the logs.


8 weeks ago

#7 @westonruter
8 weeks ago

  • Keywords close removed
  • Milestone set to 6.9
  • Resolution maybelater deleted
  • Status changed from closed to reopened

Re-opening to explore alongside #63007 and #63012 in 6.9.

#8 @westonruter
8 weeks ago

Also as I commented on #63007:

I think a better approach for inlining classic themes' blocks.css would be to split up the stylesheet into multiple stylesheets, one for each block. Then if we can enable should_load_separate_core_block_assets for classic themes, then we can only enqueue the specific theme block styles which are actually used via wp_enqueue_block_style(). This would require the use of output buffering from #43258 (which I've just milestoned for 6.8), however, since we'd need to inject the CSS from the head after the rest of the template has been rendered. Maybe the themes' blocks stylesheets can't be split up so easily, however.

This ticket was mentioned in Slack in #core-performance by adamsilverstein. View the logs.


4 weeks ago

Note: See TracTickets for help on using tickets.