[wp-trac] [WordPress Trac] #59465: Twenty Twenty-Four performance assessment and opportunities

[WordPress Trac]

#59465: Twenty Twenty-Four performance assessment and opportunities
----------------------------+----------------------
 Reporter:  flixos90        |      Owner:  flixos90
     Type:  task (blessed)  |     Status:  assigned
 Priority:  normal          |  Milestone:  6.4
Component:  Bundled Theme   |    Version:
 Severity:  normal          |   Keywords:
  Focuses:  performance     |
----------------------------+----------------------
 With Twenty Twenty-Four being the new default theme starting with
 WordPress 6.4, this ticket is focused on assessing the performance of the
 theme and to identify potential performance improvements that can be made.

 As a starting point, I conducted several benchmarks comparing performance
 of TT4 with TT3, which makes sense as a reference point since it is the
 current/previous default theme and is also a block theme.

 Two URLs were tested in these benchmarks:
 * The home page with default content: Note that TT4 provides a lot more,
 and richer content than TT3, so it is expected that TT4 will load slightly
 slower - simply because more content / more features mean higher cost.
 * The singular view of the default "Hello world!" post, with a featured
 image added as the only change: This should be a more "fair" comparison
 given the content of those URLs is less different between TT4 and TT3.

 Two sets of benchmarks were conducted:
 * One focused on overall Web Vitals (via
 [https://github.com/GoogleChromeLabs/wpp-research/tree/main/cli#benchmark-
 web-vitals `benchmark-web-vitals`]): This provides a holistic performance
 overview considering both server-side (TTFB) and client-side (LCP-TTFB).
 * One focused on only Server-Timing (via
 [https://github.com/GoogleChromeLabs/wpp-research/tree/main/cli#benchmark-
 server-timing `benchmark-server-timing`], also see
 [https://make.wordpress.org/performance/handbook/measuring-performance
 /benchmarking-php-performance-with-server-timing/ this docs article]):
 This provides an overview on server-side load time performance only,
 however those metrics are more stable and trustworthy than the TTFB from
 above, due to less variance.

 Here's a summary of the data:
 * For the home page:
     * Overall load time (LCP) is 58.8% slower. 🔴
     * Client-side performance (LCP-TTFB) is 93.5% slower. 🔴
     * Server-Timing (`wp-total`) is 71.8% slower. 🔴
 * For the singular post:
     * Overall load time (LCP) is 3.9% slower. 🔴
     * Client-side performance (LCP-TTFB) is 40.1% faster. 🟢
     * Server-Timing (`wp-total`) is 42.3% slower. 🔴

 [https://docs.google.com/spreadsheets/d/1EcCJ4-2qxpbSZjxEELD9GUkESVxmT_CxRMxruLZ2kd8/edit
 Here is the spreadsheet with the full benchmark data.]

 Again, let's not over interpret the home page metrics. They are only
 ''that much'' slower because TT4 provides a lot more feature rich content
 out of the box than TT3. However, given the huge difference, and given
 that for the singular post it is also slightly slower, we should take a
 closer look at opportunities for improving the performance of TT4.

 Lighthouse reports for the TT4 home page and the TT4 singular post flagged
 primarily the following issues:
 * Images aren't properly sized and are missing `width` and `height`
 attributes (which effectively is a result of the same problem, see the
 already opened ticket #59464)
 * 4 render-blocking stylesheets are being flagged:
     * 1 from the `core/navigation` block
     * 1 from the `core/image` block
     * 1 from the TT4 theme itself (`button-outline.css`)
     * 1 from the block library (`common.min.css`)

 Interestingly, the server-side performance difference between TT4 and TT3
 seems to come almost exclusively from the number of block editor features
 used by the theme, but not by any problems from the theme itself. In fact,
 the theme only includes a single function of PHP logic. It does however
 include more complex content than TT3 and comes with a large number of
 patterns, so potentially that plays a role there. We should profile
 further which concrete parts of TT4's usage of core features lead to the
 server-side slowdown.

 I am hopeful that between the TT4 team and the Core Performance Team we
 can collaborate on identifying any further opportunities and implementing
 fixes to improve performance by the time TT4 fully launches with 6.4
 stable.

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