[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:  trunk
 Severity:  normal          |  Resolution:
 Keywords:  needs-patch     |     Focuses:  performance
----------------------------+--------------------------

Old description:

> 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.

New description:

 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.

 This ticket serves simply for an overview and for higher level discussion
 on the performance of TT4. More specific tickets for individual issues
 are:
 * #59464
 * #59466
 * #59490

--

Comment (by flixos90):

 Thank you for the additional input @dmsnell!

 A mentioned earlier, I think the root problem with the server-side
 performance lies in core itself, and is now being further explored via
 #59490. Regarding TT4 itself, there may be room for a bit of optimization,
 but IMO it wouldn't tackle the problem at its root. That said, there are a
 few instances where I would question the use of patterns to be excessive,
 for example:
 *
 https://github.com/WordPress/twentytwentyfour/blob/trunk/templates/home.html
 simply points to...
 * https://github.com/WordPress/twentytwentyfour/blob/trunk/patterns
 /template-home-business.php, which points to...
 *
 https://github.com/WordPress/twentytwentyfour/blob/trunk/patterns/page-01
 -business-home.php, which points to 6 other patterns

 Couldn't all those 6 patterns simply be referenced in the root
 `templates/home.html` file? Why the 2 additional "patterns" in between,
 which don't really add anything AFAIK? Curious if you can share come
 context on that @onemaggie @luminuu.

 I've added links to the 3 more specific tickets related to the performance
 issues to the description.

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