[wp-trac] [WordPress Trac] #63007: Bundled themes: Stylesheets for block themes are missing path data for inlining

[WordPress Trac]

#63007: Bundled themes: Stylesheets for block themes are missing path data for
inlining
---------------------------+-------------------------------
 Reporter:  westonruter    |       Owner:  westonruter
     Type:  enhancement    |      Status:  accepted
 Priority:  normal         |   Milestone:  6.9
Component:  Bundled Theme  |     Version:
 Severity:  normal         |  Resolution:
 Keywords:  has-patch      |     Focuses:  css, performance
---------------------------+-------------------------------
Description changed by westonruter:

Old description:

> I'm investigating slow LCP caused by render delay due to external
> stylesheets. The Twenty Twenty-Five (T25) and Twenty Twenty-Two (T22)
> themes enqueue their own small theme stylesheets (e.g. 7 style rules in
> TT5 and 13 in T22). However, it does so without adding the `path` style
> data which means this small stylesheet cannot be inlined. This negatively
> impacts LCP.
>

> Consider the following plugin code to test the performance impact of
> inlining the theme stylesheet as well as the stylesheet for the
> Navigation block which by default is not inlined since it is larger than
> the default inline style size limit of 20,000 bytes:
>
> {{{#!php
> <?php
> if ( isset( $_GET['styles_inline_size_limit'] ) ) {
>         add_filter( 'styles_inline_size_limit', function () {
>                 return intval( $_GET['styles_inline_size_limit'] );
>         } );
> }
>
> if ( isset( $_GET['inline_theme_stylesheet'] ) && rest_sanitize_boolean(
> $_GET['inline_theme_stylesheet'] ) ) {
>         add_action(
>                 'wp_enqueue_scripts',
>                 function () {
>                         wp_style_add_data(
>                                 'twentytwentyfive-style',
>                                 'path',
>                                 get_parent_theme_file_path( 'style.css' )
>                         );
>                 },
>                 20
>         );
> }
> }}}
>
> With this plugin in place and a vanilla site with TT5 active with the LCP
> element being text (`P`), I tested the following scenarios:
>
> 1. **Neither inlined:** The control behavior where the theme's stylesheet
> and the Navigation block's style sheet are not inlined.
> 2. **Theme inlined:** The theme's stylesheet is inlined but the
> Navigation block's stylesheet remains external.
> 3. **Navigation inlined:** The Navigation block's stylesheet is inlined
> but the theme's stylesheet remains external.
> 4. **Both inlined:** Both the theme's stylesheet and the Navigation
> block's stylesheet are inlined.
>
> These scenarios are accessed via the following URLs (`tt5-style-inlining-
> urls.txt`):
>
> {{{
> http://localhost:10063/?inline_theme_stylesheet=false
> http://localhost:10063/?inline_theme_stylesheet=true
> http://localhost:10063/?inline_theme_stylesheet=false&styles_inline_size_limit=40000
> http://localhost:10063/?inline_theme_stylesheet=true&styles_inline_size_limit=40000
> }}}
>

> I benchmarked via [https://github.com/GoogleChromeLabs/wpp-
> research/tree/main/cli#benchmark-web-vitals benchmark-web-vitals] with
> network emulating Slow 3G:
>
> {{{
> npm run research -- benchmark-web-vitals --file=tt5-style-inlining-
> urls.txt --number=25 --network-conditions="Slow 3G" --output=csv
> }}}
>
> Results:
>
> ||= Scenario =||= LCP-TTFB (median) =||
> || Neither inlined || 4196.1 ms||
> || Theme inlined || 4111.8 ms||
> || Navigation inlined || 4223.6 ms||
> || Both inlined ||  2230.8 ms||
>
> Inlining the theme styles reduces the LCP by 84.3 ms, which isn't a whole
> lot relatively at just ~2%. Inlining just the theme styles or the
> Navigation block styles alone doesn't significantly impact LCP, but if
> ''both'' are inlined then the LCP is cut in half, from a poor value to a
> good one.
>
> So I think that T25 and T22 should add the `path` data for its stylesheet
> so it is eligible for inlining so that there could be the possibility for
> all render-blocking stylesheets to be avoided.
>
> Aside: When inlining a theme's `style.css` I think it would make sense to
> strip out the theme metadata comment automatically.

New description:

 I'm investigating slow LCP caused by render delay due to external
 stylesheets. The Twenty Twenty-Five (T25) and Twenty Twenty-Two (T22)
 themes enqueue their own small theme stylesheets (e.g. 7 style rules in
 TT5 and 13 in T22). However, it does so without adding the `path` style
 data which means this small stylesheet cannot be inlined. This negatively
 impacts LCP.


 Consider the following plugin code to test the performance impact of
 inlining the theme stylesheet as well as the stylesheet for the Navigation
 block which by default is not inlined since it is larger than the default
 inline style size limit of 20,000 bytes:

 {{{#!php
 <?php
 if ( isset( $_GET['styles_inline_size_limit'] ) ) {
         add_filter( 'styles_inline_size_limit', function () {
                 return intval( $_GET['styles_inline_size_limit'] );
         } );
 }

 if ( isset( $_GET['inline_theme_stylesheet'] ) && rest_sanitize_boolean(
 $_GET['inline_theme_stylesheet'] ) ) {
         add_action(
                 'wp_enqueue_scripts',
                 function () {
                         wp_style_add_data(
                                 'twentytwentyfive-style',
                                 'path',
                                 get_parent_theme_file_path( 'style.css' )
                         );
                 },
                 20
         );
 }
 }}}

 With this plugin in place and a vanilla site with TT5 active with the LCP
 element being text (`P`), I tested the following scenarios:

 1. **Neither inlined:** The control behavior where the theme's stylesheet
 and the Navigation block's style sheet are not inlined.
 2. **Theme inlined:** The theme's stylesheet is inlined but the Navigation
 block's stylesheet remains external.
 3. **Navigation inlined:** The Navigation block's stylesheet is inlined
 but the theme's stylesheet remains external.
 4. **Both inlined:** Both the theme's stylesheet and the Navigation
 block's stylesheet are inlined.

 These scenarios are accessed via the following URLs (`tt5-style-inlining-
 urls.txt`):

 {{{
 http://localhost:10063/?inline_theme_stylesheet=false
 http://localhost:10063/?inline_theme_stylesheet=true
 http://localhost:10063/?inline_theme_stylesheet=false&styles_inline_size_limit=40000
 http://localhost:10063/?inline_theme_stylesheet=true&styles_inline_size_limit=40000
 }}}


 I benchmarked via [https://github.com/GoogleChromeLabs/wpp-
 research/tree/main/cli#benchmark-web-vitals benchmark-web-vitals] with
 network emulating Slow 3G:

 {{{
 npm run research -- benchmark-web-vitals --file=tt5-style-inlining-
 urls.txt --number=25 --network-conditions="Slow 3G" --output=csv
 }}}

 Results:

 ||= Scenario =||= LCP-TTFB (median) =||
 || Neither inlined || 4196.1 ms||
 || Theme inlined || 4111.8 ms||
 || Navigation inlined || 4223.6 ms||
 || Both inlined ||  2230.8 ms||

 Inlining the theme styles reduces the LCP by 84.3 ms, which isn't a whole
 lot relatively at just ~2%. Inlining just the theme styles or the
 Navigation block styles alone doesn't significantly impact LCP, but if
 ''both'' are inlined then the LCP is cut in half, from a poor value to a
 good one.

 So I think that T25 and T22 should add the `path` data for its stylesheet
 so it is eligible for inlining so that there could be the possibility for
 all render-blocking stylesheets to be avoided.

 Aside: When inlining a theme's `style.css` I think it would make sense to
 strip out the theme metadata comment automatically.

 Blocked by: #63012

--

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