[wp-trac] [WordPress Trac] #59465: Twenty Twenty-Four performance assessment and opportunities
WordPress Trac
noreply at wordpress.org
Mon Oct 9 19:43:45 UTC 2023
#59465: Twenty Twenty-Four performance assessment and opportunities
----------------------------+--------------------------
Reporter: flixos90 | Owner: flixos90
Type: task (blessed) | Status: closed
Priority: normal | Milestone: 6.4
Component: Bundled Theme | Version: trunk
Severity: normal | Resolution: fixed
Keywords: | Focuses: performance
----------------------------+--------------------------
Changes (by flixos90):
* status: assigned => closed
* resolution: => fixed
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.
>
> 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
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
* #59577
--
Comment:
I am very excited to report that most (if not all) of the server-side
performance concerns have been addressed, via additional general
performance fixes that landed in core since, most importantly [56765],
[56805], and [56807]! 🎉
Here are new Server-Timing benchmarks comparing TT4 and TT3 with latest
core `trunk`:
* TT4 home page loads in 85.91ms, compared to 78.08ms in TT3.
* → **10.0% slower, but before was 71.8% slower** 🎉
* TT4 "Hello world!" post loads in 96.44ms, compared to 86.35ms in TT3.
* → **11.7% slower, but before was 42.3% slower** 🎉
Given how much richer the content and layout of TT4 is compared to TT3,
this is a major accomplishment, and there is no need to worry about the
remaining performance difference due to that.
I think it is safe to say that this completes the crucial server-side
performance enhancements related to TT4. For the client-side performance
enhancements, **the related #59464 and #59577 are still outstanding**, but
they require more thought and time investment and therefore have been
milestoned for the 6.5 release. As such, I am going to close this ticket
as completed. Please follow along on the two tickets mentioned for
remaining related work.
--
Ticket URL: <https://core.trac.wordpress.org/ticket/59465#comment:27>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list