[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         |  Resolution:
 Keywords:                 |     Focuses:  performance
---------------------------+--------------------------
Description changed by westonruter:

Old description:

> 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%''')

New description:

 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 connections]
 * [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#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform