[wp-trac] [WordPress Trac] #64099: Load block styles on demand in classic themes via template enhancement output buffer

[WordPress Trac]

#64099: Load block styles on demand in classic themes via template enhancement
output buffer
--------------------------------------+--------------------------
 Reporter:  westonruter               |       Owner:  westonruter
     Type:  enhancement               |      Status:  reopened
 Priority:  normal                    |   Milestone:  6.9
Component:  Script Loader             |     Version:
 Severity:  normal                    |  Resolution:
 Keywords:  has-patch has-unit-tests  |     Focuses:  performance
--------------------------------------+--------------------------
Changes (by westonruter):

 * status:  closed => reopened
 * resolution:  fixed =>


Comment:

 I'm re-opening this to track the follow-up work being done in
 [https://github.com/WordPress/wordpress-develop/pull/10436 PR 10436] to
 improve hoisted stylesheet ordering.

 Also, the change in [61076] to make the `wp-block-styles` theme support a
 precondition for loading separate block styles on demand was a mistake. I
 [https://core.trac.wordpress.org/ticket/64150#comment:10 suggested] it
 erroneously in #64150. It prevented styles from being loaded on demand for
 Twenty Twenty and Astra, and any other theme that doesn't add `wp-block-
 styles` theme support.

 @Soean For the the immediate term, for you to continue excluding block
 styles in your theme, in addition to doing:

 {{{#!php
 <?php
 add_action(
         'enqueue_block_assets',
         function (): void {
                 wp_deregister_style( 'wp-block-library' );
                 wp_register_style( 'wp-block-library', '' );
         }
 );
 }}}

 You'll also need to do:

 {{{#!php
 <?php
 add_action(
         'after_setup_theme',
         function (): void {
                 add_filter( 'should_load_separate_core_block_assets',
 '__return_false' );
         }
 );
 }}}

 Given how overwhelmingly the `wp-block-library` styles are not being
 blocked from being printed (as indeed core doesn't even have an official
 way to do this), it seems the benefits of ensuring better performance for
 when `wp-block-library` outweigh the the benefits of maintaining
 backwards-compatibility for the minority of sites which try to exclude the
 block styles from being loaded (as
 [https://core.trac.wordpress.org/ticket/64099#comment:24 commented]
 above). This said, I'm re-opening this ticket in part because I want to if
 there may still be an alternative solution to prevent the separate block
 styles from being enqueued if `wp-block-library` is nullified.

 Here are the performance benefits of loading the block styles on demand:

 = Twenty Twenty =

 Total CSS is reduced from 291 kB down to 184 kB. Coverage report:
 [attachment:coverage-twentytwenty-before.png before] vs [attachment
 :coverage-twentytwenty-after.png after].


 Web vitals benchmarks over broadband:

 ||= Metric ||= Before ||= After ||= Diff (ms) ||= Diff (%) ||
 || **FCP (median)** || 357.4|| 337|| -20.40|| -5.7%||
 || **LCP (median)** || 365.7|| 345.3|| -20.40|| -5.6%||
 || **TTFB (median)** || 63.9|| 94.9|| +31.00|| +48.5%||
 || **TTLB (median)** || 99.4|| 141.1|| +41.70|| +42.0%||
 || **LCP-TTFB (median)** || 300.5|| 250.4|| -50.10|| -16.7%||

 Web vitals benchmarks over Fast 4G:

 ||= Metric ||= Before ||= After ||= Diff (ms) ||= Diff (%) ||
 || **FCP (median)** || 668.6|| 581.7|| -86.90|| -13.0%||
 || **LCP (median)** || 677|| 590|| -87.00|| -12.9%||
 || **TTFB (median)** || 64.8|| 97.3|| +32.50|| +50.2%||
 || **TTLB (median)** || 215|| 229|| +14.00|| +6.5%||
 || **LCP-TTFB (median)** || 611.8|| 487.1|| -124.70|| -20.4%||


 = Astra =

 Total CSS is reduced from 271 kB down to 156 kB. Coverage report:
 [attachment:coverage-astra-before.png before] vs [attachment:coverage-
 astra-after.png after].

 Web vitals benchmarks over broadband:

 ||= Metric ||= Before ||= After ||= Diff (ms) ||= Diff (%) ||
 || **FCP (median)** || 355.4|| 259.9|| -95.50|| -26.9%||
 || **LCP (median)** || 355.4|| 259.9|| -95.50|| -26.9%||
 || **TTFB (median)** || 72.6|| 100.9|| +28.30|| +39.0%||
 || **TTLB (median)** || 186.7|| 225.3|| +38.60|| +20.7%||
 || **LCP-TTFB (median)** || 282.7|| 158.5|| -124.20|| -43.9%||

 Web vitals benchmarks over Fast 4G:

 ||= Metric ||= Before ||= After ||= Diff (ms) ||= Diff (%) ||
 || **Success Rate** || 100%|| 100%|| --|| --||
 || **FCP (median)** || 620.7|| 444.7|| -176.00|| -28.4%||
 || **LCP (median)** || 620.7|| 444.7|| -176.00|| -28.4%||
 || **TTFB (median)** || 72.5|| 101.9|| +29.40|| +40.6%||
 || **TTLB (median)** || 277.3|| 282.9|| +5.60|| +2.0%||
 || **LCP-TTFB (median)** || 548.2|| 345.6|| -202.60|| -37.0%||

 ----

 Benchmarking commands using [https://github.com/GoogleChromeLabs/wpp-
 research/tree/main/cli#benchmark-web-vitals GoogleChromeLabs/wpp-
 research]:

 {{{
 npm run research -- benchmark-web-vitals --url="http://localhost:8000
 /sample-page/?enable_plugins=disable-template-enhancement-output-
 buffer.php&script_debug=0&wp_debug_display=0" --url="http://localhost:8000
 /sample-page/?enable_plugins=none&script_debug=0&wp_debug_display=0"
 --network-conditions=broadband --number="$number" --diff --output=md | tee
 "broadband.md"
 npm run research -- benchmark-web-vitals --url="http://localhost:8000
 /sample-page/?enable_plugins=disable-template-enhancement-output-
 buffer.php&script_debug=0&wp_debug_display=0" --url="http://localhost:8000
 /sample-page/?enable_plugins=none&script_debug=0&wp_debug_display=0"
 --network-conditions="Fast 4G" --number="$number" --diff --output=md | tee
 "fast-4g.md"
 }}}

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