Opened 6 months ago
Last modified 5 months ago
#58519 new enhancement
Inline styles block styles in bundled themes
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | 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 (2)
This ticket was mentioned in PR #4601 on WordPress/wordpress-develop by @spacedmonkey.
6 months ago
#1
- Keywords has-patch added
#2
@
5 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 |
Trac ticket: https://core.trac.wordpress.org/ticket/58519