[wp-trac] [WordPress Trac] #63007: Twenty Twenty-Five: Theme stylesheet is missing path data for inlining styles

[WordPress Trac]

#63007: Twenty Twenty-Five: Theme stylesheet is missing path data for inlining
styles
------------------------------+--------------------
 Reporter:  westonruter       |      Owner:  (none)
     Type:  defect (bug)      |     Status:  new
 Priority:  normal            |  Milestone:  6.8
Component:  Bundled Theme     |    Version:  6.7
 Severity:  normal            |   Keywords:
  Focuses:  css, performance  |
------------------------------+--------------------
 I'm investigating slow LCP caused by render delay due to external
 stylesheets. The Twenty Twenty-Five (TT5) theme enqueues its own small
 theme stylesheet with 7 style rules. 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 TT5 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.

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