[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:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  6.9
Component:  Script Loader  |    Version:
 Severity:  normal         |   Keywords:
  Focuses:  performance    |
---------------------------+--------------------
 This is intended to be a fast-follow after the introduction of the
 template enhancement output buffer in #43258.

 In classic themes, a lot more CSS is added to a page than is needed
 because `wp_head()` is called the rest of the page is rendered, so it is
 not yet known in the `HEAD` what blocks will be used. This is in contrast
 with block themes, which render the content first and ''then'' `wp_head()`
 is called due to the way that `template-canvas.php` is constructed. This
 can be fixed with output buffering, which essentially makes the same block
 theme approach available to classic themes.

 Instead of printing the styles at `wp_head`, a placeholder comment can be
 printed instead. Then at `wp_footer`, the output of `print_late_styles()`
 can be captured. The output of `print_late_styles()` can then replace the
 previously-output placeholder comment.

 See [https://gist.github.com/westonruter/99af37489334927aaf04a46eaf2a11eb
 demonstration plugin].

 See performance impacts in these PR comments:

 * [https://github.com/WordPress/wordpress-
 develop/pull/8412#issuecomment-3393617482 Improved CSS coverage]
 * [https://github.com/WordPress/wordpress-
 develop/pull/8412#issuecomment-3393744044 Web vitals benchmarks for Twenty
 Twenty on broadband, Fast 4G, and Slow 3G connects]
 * [https://github.com/WordPress/wordpress-
 develop/pull/8412#issuecomment-3393769410 Web vitals benchmarks for all
 classic themes on a broadband connection] (average LCP improvement:
 '''-14.94%''')
 * [https://github.com/WordPress/wordpress-
 develop/pull/8412#issuecomment-3393956117 Impact on Lighthouse performance
 core for all classic themes] (average improvement to score: '''+7.74%''')

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