Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Performance improvements for WordPress 6.5 #57935

Closed
ellatrix opened this issue Jan 17, 2024 · 6 comments
Closed

Performance improvements for WordPress 6.5 #57935

ellatrix opened this issue Jan 17, 2024 · 6 comments
Labels
[Type] Iteration Scoped iteration of an effort from a tracking issue or overview issue ideally for a major release. [Type] Performance Related to performance efforts

Comments

@ellatrix
Copy link
Member

ellatrix commented Jan 17, 2024

How low can we go?

(*) WP 6.4 WP 6.5 x faster
Typing (post editor) 60ms 11.4ms 5.25x
Typing (site editor) 57.4ms 11.4ms 5x
First block load (post editor) 7.7s 3.4s 2.25x
First block load (site editor) 8.5s 3.4s 2.4x
Patterns load 3.7s 2.3s 62%

(*) Note that the absolute times are pegged to a relatively random value.

Related PRs

@ellatrix ellatrix added [Type] Performance Related to performance efforts [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. labels Jan 17, 2024
@joemcgill
Copy link
Member

This is great work, @ellatrix. Just for clarity, is this ticket focused primarily on editor performance, or is the intent to expand this to include front end user performance enhancements as well?

@ellatrix
Copy link
Member Author

This is just for editor performance

@ellatrix
Copy link
Member Author

ellatrix commented Mar 18, 2024

Ok, I'm going to run the final comparison between 6.4 and 6.5. We'll do a few runs and then average.

https://github.com/WordPress/gutenberg/actions/runs/8332770843/job/22802686838

run 1
▶ front-end-block-theme
┌────────────────────────┬───────────┬────────────┐
│ (index)                │ wp/6.5    │ wp/6.4     │
├────────────────────────┼───────────┼────────────┤
│ timeToFirstByte        │ '51.5 ms' │ '51.25 ms' │
│ largestContentfulPaint │ '101 ms'  │ '99.95 ms' │
│ lcpMinusTtfb           │ '51.2 ms' │ '48.7 ms'  │
└────────────────────────┴───────────┴────────────┘

▶ front-end-classic-theme
┌────────────────────────┬─────────────┬─────────────┐
│ (index)                │ wp/6.5      │ wp/6.4      │
├────────────────────────┼─────────────┼─────────────┤
│ timeToFirstByte        │ '36.25 ms'  │ '36.95 ms'  │
│ largestContentfulPaint │ '102.05 ms' │ '102.35 ms' │
│ lcpMinusTtfb           │ '63.6 ms'   │ '65.25 ms'  │
└────────────────────────┴─────────────┴─────────────┘

▶ post-editor
┌──────────────────────┬──────────────┬──────────────┐
│ (index)              │ wp/6.5       │ wp/6.4       │
├──────────────────────┼──────────────┼──────────────┤
│ serverResponse       │ '198.25 ms'  │ '206.6 ms'   │
│ firstPaint           │ '316.7 ms'   │ '304.3 ms'   │
│ domContentLoaded     │ '720.65 ms'  │ '721.85 ms'  │
│ loaded               │ '721.55 ms'  │ '722.65 ms'  │
│ firstContentfulPaint │ '1138.65 ms' │ '1290.45 ms' │
│ firstBlock           │ '3399 ms'    │ '7790.95 ms' │
│ type                 │ '12.87 ms'   │ '62.76 ms'   │
│ minType              │ '10.82 ms'   │ '52.76 ms'   │
│ maxType              │ '17.72 ms'   │ '125.44 ms'  │
│ typeWithoutInspector │ '11.25 ms'   │ '53.25 ms'   │
│ typeWithTopToolbar   │ '17.07 ms'   │ '55.2 ms'    │
│ typeContainer        │ '6.48 ms'    │ '13.98 ms'   │
│ minTypeContainer     │ '5.45 ms'    │ '11.13 ms'   │
│ maxTypeContainer     │ '7.9 ms'     │ '17.64 ms'   │
│ focus                │ '46.33 ms'   │ '58.63 ms'   │
│ minFocus             │ '40.51 ms'   │ '52.72 ms'   │
│ maxFocus             │ '62.61 ms'   │ '68.44 ms'   │
│ inserterOpen         │ '32.13 ms'   │ '27.11 ms'   │
│ minInserterOpen      │ '29.32 ms'   │ '24.85 ms'   │
│ maxInserterOpen      │ '39.21 ms'   │ '30.18 ms'   │
│ inserterSearch       │ '6.27 ms'    │ '5.43 ms'    │
│ minInserterSearch    │ '5.94 ms'    │ '4.96 ms'    │
│ maxInserterSearch    │ '6.83 ms'    │ '6.46 ms'    │
│ inserterHover        │ '2.52 ms'    │ '46.25 ms'   │
│ minInserterHover     │ '2.04 ms'    │ '42.72 ms'   │
│ maxInserterHover     │ '3.27 ms'    │ '68.27 ms'   │
│ loadPatterns         │ '1320.46 ms' │ '1793.91 ms' │
│ listViewOpen         │ '139.97 ms'  │ '122.79 ms'  │
│ minListViewOpen      │ '126.32 ms'  │ '114.45 ms'  │
│ maxListViewOpen      │ '165.19 ms'  │ '137.52 ms'  │
└──────────────────────┴──────────────┴──────────────┘

▶ site-editor
┌──────────────────────┬──────────────┬──────────────┐
│ (index)              │ wp/6.5       │ wp/6.4       │
├──────────────────────┼──────────────┼──────────────┤
│ serverResponse       │ '112.05 ms'  │ '111 ms'     │
│ firstPaint           │ '336.05 ms'  │ '333.4 ms'   │
│ domContentLoaded     │ '756.6 ms'   │ '748.3 ms'   │
│ loaded               │ '757.2 ms'   │ '748.65 ms'  │
│ firstContentfulPaint │ '892.95 ms'  │ '899.05 ms'  │
│ firstBlock           │ '3369.1 ms'  │ '8324.15 ms' │
│ type                 │ '10.87 ms'   │ '58.85 ms'   │
│ minType              │ '9.54 ms'    │ '55.79 ms'   │
│ maxType              │ '13.36 ms'   │ '74.8 ms'    │
│ loadPatterns         │ '2272.86 ms' │ '3760.65 ms' │
│ navigate             │ '28.27 ms'   │ '157.4 ms'   │
└──────────────────────┴──────────────┴──────────────┘
run 2
▶ front-end-block-theme
┌────────────────────────┬─────────────┬────────────┐
│ (index)                │ wp/6.5      │ wp/6.4     │
├────────────────────────┼─────────────┼────────────┤
│ timeToFirstByte        │ '50.55 ms'  │ '48.4 ms'  │
│ largestContentfulPaint │ '100.05 ms' │ '95.7 ms'  │
│ lcpMinusTtfb           │ '48.55 ms'  │ '47.05 ms' │
└────────────────────────┴─────────────┴────────────┘

▶ front-end-classic-theme
┌────────────────────────┬────────────┬────────────┐
│ (index)                │ wp/6.5     │ wp/6.4     │
├────────────────────────┼────────────┼────────────┤
│ timeToFirstByte        │ '36.5 ms'  │ '34.7 ms'  │
│ largestContentfulPaint │ '100.3 ms' │ '99.25 ms' │
│ lcpMinusTtfb           │ '63 ms'    │ '63.45 ms' │
└────────────────────────┴────────────┴────────────┘

▶ post-editor
┌──────────────────────┬──────────────┬──────────────┐
│ (index)              │ wp/6.5       │ wp/6.4       │
├──────────────────────┼──────────────┼──────────────┤
│ serverResponse       │ '198.15 ms'  │ '217.75 ms'  │
│ firstPaint           │ '307.95 ms'  │ '309.1 ms'   │
│ domContentLoaded     │ '706.9 ms'   │ '713.55 ms'  │
│ loaded               │ '707.55 ms'  │ '714.3 ms'   │
│ firstContentfulPaint │ '1110.75 ms' │ '1272.95 ms' │
│ firstBlock           │ '3275.4 ms'  │ '7637.05 ms' │
│ type                 │ '10.37 ms'   │ '58.3 ms'    │
│ minType              │ '9.16 ms'    │ '49.38 ms'   │
│ maxType              │ '12.96 ms'   │ '116.32 ms'  │
│ typeWithoutInspector │ '11.18 ms'   │ '50.18 ms'   │
│ typeWithTopToolbar   │ '15.38 ms'   │ '53.24 ms'   │
│ typeContainer        │ '6.18 ms'    │ '12.42 ms'   │
│ minTypeContainer     │ '5.27 ms'    │ '10.81 ms'   │
│ maxTypeContainer     │ '7.02 ms'    │ '15.37 ms'   │
│ focus                │ '41.31 ms'   │ '56 ms'      │
│ minFocus             │ '36.88 ms'   │ '52.84 ms'   │
│ maxFocus             │ '51.77 ms'   │ '59.74 ms'   │
│ inserterOpen         │ '30.85 ms'   │ '25.86 ms'   │
│ minInserterOpen      │ '27.78 ms'   │ '24.09 ms'   │
│ maxInserterOpen      │ '38.02 ms'   │ '29.41 ms'   │
│ inserterSearch       │ '6.06 ms'    │ '5.07 ms'    │
│ minInserterSearch    │ '5.6 ms'     │ '4.85 ms'    │
│ maxInserterSearch    │ '6.68 ms'    │ '5.62 ms'    │
│ inserterHover        │ '2.37 ms'    │ '44.06 ms'   │
│ minInserterHover     │ '1.96 ms'    │ '41.76 ms'   │
│ maxInserterHover     │ '3.02 ms'    │ '48.17 ms'   │
│ loadPatterns         │ '1281.21 ms' │ '1723.65 ms' │
│ listViewOpen         │ '135.06 ms'  │ '122.14 ms'  │
│ minListViewOpen      │ '121.31 ms'  │ '113.08 ms'  │
│ maxListViewOpen      │ '147.77 ms'  │ '137.76 ms'  │
└──────────────────────┴──────────────┴──────────────┘

▶ site-editor
┌──────────────────────┬──────────────┬──────────────┐
│ (index)              │ wp/6.5       │ wp/6.4       │
├──────────────────────┼──────────────┼──────────────┤
│ serverResponse       │ '111.85 ms'  │ '109.95 ms'  │
│ firstPaint           │ '335.3 ms'   │ '326.25 ms'  │
│ domContentLoaded     │ '741.95 ms'  │ '737.05 ms'  │
│ loaded               │ '742.4 ms'   │ '737.55 ms'  │
│ firstContentfulPaint │ '884.25 ms'  │ '878.45 ms'  │
│ firstBlock           │ '3296.4 ms'  │ '8133.3 ms'  │
│ type                 │ '10.58 ms'   │ '56.1 ms'    │
│ minType              │ '9.06 ms'    │ '53.06 ms'   │
│ maxType              │ '12.97 ms'   │ '64.54 ms'   │
│ loadPatterns         │ '2201.86 ms' │ '3672.38 ms' │
│ navigate             │ '22.96 ms'   │ '141.65 ms'  │
└──────────────────────┴──────────────┴──────────────┘
run 3
▶ front-end-block-theme
┌────────────────────────┬─────────────┬────────────┐
│ (index)                │ wp/6.5      │ wp/6.4     │
├────────────────────────┼─────────────┼────────────┤
│ timeToFirstByte        │ '52.15 ms'  │ '51.2 ms'  │
│ largestContentfulPaint │ '101.95 ms' │ '101.2 ms' │
│ lcpMinusTtfb           │ '51.65 ms'  │ '50.1 ms'  │
└────────────────────────┴─────────────┴────────────┘

▶ front-end-classic-theme
┌────────────────────────┬─────────────┬────────────┐
│ (index)                │ wp/6.5      │ wp/6.4     │
├────────────────────────┼─────────────┼────────────┤
│ timeToFirstByte        │ '38.4 ms'   │ '36.75 ms' │
│ largestContentfulPaint │ '103.65 ms' │ '106.2 ms' │
│ lcpMinusTtfb           │ '64.25 ms'  │ '66.45 ms' │
└────────────────────────┴─────────────┴────────────┘

▶ post-editor
┌──────────────────────┬──────────────┬──────────────┐
│ (index)              │ wp/6.5       │ wp/6.4       │
├──────────────────────┼──────────────┼──────────────┤
│ serverResponse       │ '203.75 ms'  │ '223.4 ms'   │
│ firstPaint           │ '323.35 ms'  │ '308.7 ms'   │
│ domContentLoaded     │ '725.35 ms'  │ '719.2 ms'   │
│ loaded               │ '726.25 ms'  │ '720 ms'     │
│ firstContentfulPaint │ '1154.9 ms'  │ '1281.85 ms' │
│ firstBlock           │ '3396.2 ms'  │ '7775.1 ms'  │
│ type                 │ '11.78 ms'   │ '55.97 ms'   │
│ minType              │ '10.52 ms'   │ '51.66 ms'   │
│ maxType              │ '14.97 ms'   │ '61.7 ms'    │
│ typeWithoutInspector │ '11.76 ms'   │ '54.31 ms'   │
│ typeWithTopToolbar   │ '17.2 ms'    │ '55.77 ms'   │
│ typeContainer        │ '6.91 ms'    │ '13.28 ms'   │
│ minTypeContainer     │ '5.68 ms'    │ '11.6 ms'    │
│ maxTypeContainer     │ '8.33 ms'    │ '16.36 ms'   │
│ focus                │ '45.1 ms'    │ '61.88 ms'   │
│ minFocus             │ '40.89 ms'   │ '53.04 ms'   │
│ maxFocus             │ '49.28 ms'   │ '72.1 ms'    │
│ inserterOpen         │ '34.1 ms'    │ '26.72 ms'   │
│ minInserterOpen      │ '29.95 ms'   │ '24.84 ms'   │
│ maxInserterOpen      │ '42.47 ms'   │ '28.59 ms'   │
│ inserterSearch       │ '6.53 ms'    │ '6.55 ms'    │
│ minInserterSearch    │ '5.85 ms'    │ '4.8 ms'     │
│ maxInserterSearch    │ '7.24 ms'    │ '15.72 ms'   │
│ inserterHover        │ '2.63 ms'    │ '48.4 ms'    │
│ minInserterHover     │ '2.16 ms'    │ '42.79 ms'   │
│ maxInserterHover     │ '3.79 ms'    │ '70.63 ms'   │
│ loadPatterns         │ '1323.25 ms' │ '1870.89 ms' │
│ listViewOpen         │ '148.2 ms'   │ '126.22 ms'  │
│ minListViewOpen      │ '127.59 ms'  │ '121.74 ms'  │
│ maxListViewOpen      │ '177.06 ms'  │ '139.61 ms'  │
└──────────────────────┴──────────────┴──────────────┘

▶ site-editor
┌──────────────────────┬──────────────┬──────────────┐
│ (index)              │ wp/6.5       │ wp/6.4       │
├──────────────────────┼──────────────┼──────────────┤
│ serverResponse       │ '84.3 ms'    │ '114.95 ms'  │
│ firstPaint           │ '343.15 ms'  │ '332 ms'     │
│ domContentLoaded     │ '772.15 ms'  │ '759.95 ms'  │
│ loaded               │ '772.85 ms'  │ '760.55 ms'  │
│ firstContentfulPaint │ '920.05 ms'  │ '903.15 ms'  │
│ firstBlock           │ '3475.75 ms' │ '8494.75 ms' │
│ type                 │ '12.37 ms'   │ '59.5 ms'    │
│ minType              │ '10.44 ms'   │ '55.63 ms'   │
│ maxType              │ '15.29 ms'   │ '72.9 ms'    │
│ loadPatterns         │ '2455.17 ms' │ '3833.62 ms' │
│ navigate             │ '28.1 ms'    │ '157.71 ms'  │
└──────────────────────┴──────────────┴──────────────┘
run 4
▶ front-end-block-theme
┌────────────────────────┬────────────┬────────────┐
│ (index)                │ wp/6.5     │ wp/6.4     │
├────────────────────────┼────────────┼────────────┤
│ timeToFirstByte        │ '48.95 ms' │ '48.35 ms' │
│ largestContentfulPaint │ '97.75 ms' │ '96.35 ms' │
│ lcpMinusTtfb           │ '48.8 ms'  │ '48.25 ms' │
└────────────────────────┴────────────┴────────────┘

▶ front-end-classic-theme
┌────────────────────────┬────────────┬────────────┐
│ (index)                │ wp/6.5     │ wp/6.4     │
├────────────────────────┼────────────┼────────────┤
│ timeToFirstByte        │ '36.5 ms'  │ '34.4 ms'  │
│ largestContentfulPaint │ '99.95 ms' │ '99.9 ms'  │
│ lcpMinusTtfb           │ '64.8 ms'  │ '62.55 ms' │
└────────────────────────┴────────────┴────────────┘

▶ post-editor
┌──────────────────────┬──────────────┬──────────────┐
│ (index)              │ wp/6.5       │ wp/6.4       │
├──────────────────────┼──────────────┼──────────────┤
│ serverResponse       │ '195.65 ms'  │ '214.85 ms'  │
│ firstPaint           │ '303.45 ms'  │ '305.85 ms'  │
│ domContentLoaded     │ '708.05 ms'  │ '713.75 ms'  │
│ loaded               │ '708.75 ms'  │ '714.45 ms'  │
│ firstContentfulPaint │ '1112.2 ms'  │ '1261.55 ms' │
│ firstBlock           │ '3442.95 ms' │ '7572.7 ms'  │
│ type                 │ '10.47 ms'   │ '61.76 ms'   │
│ minType              │ '9.3 ms'     │ '48.63 ms'   │
│ maxType              │ '12.96 ms'   │ '144.66 ms'  │
│ typeWithoutInspector │ '10.33 ms'   │ '49.9 ms'    │
│ typeWithTopToolbar   │ '15.23 ms'   │ '57.96 ms'   │
│ typeContainer        │ '6.33 ms'    │ '12.64 ms'   │
│ minTypeContainer     │ '5.11 ms'    │ '10.61 ms'   │
│ maxTypeContainer     │ '7.45 ms'    │ '16.18 ms'   │
│ focus                │ '43.45 ms'   │ '54.19 ms'   │
│ minFocus             │ '36.05 ms'   │ '50.93 ms'   │
│ maxFocus             │ '57.37 ms'   │ '59.38 ms'   │
│ inserterOpen         │ '31.5 ms'    │ '25.46 ms'   │
│ minInserterOpen      │ '27.67 ms'   │ '23.78 ms'   │
│ maxInserterOpen      │ '47.8 ms'    │ '31.72 ms'   │
│ inserterSearch       │ '6.14 ms'    │ '5.19 ms'    │
│ minInserterSearch    │ '5.73 ms'    │ '4.7 ms'     │
│ maxInserterSearch    │ '6.71 ms'    │ '5.7 ms'     │
│ inserterHover        │ '2.44 ms'    │ '43.86 ms'   │
│ minInserterHover     │ '1.93 ms'    │ '41.06 ms'   │
│ maxInserterHover     │ '3.03 ms'    │ '62.15 ms'   │
│ loadPatterns         │ '1250.67 ms' │ '1749.79 ms' │
│ listViewOpen         │ '136.59 ms'  │ '122.82 ms'  │
│ minListViewOpen      │ '124.4 ms'   │ '112.7 ms'   │
│ maxListViewOpen      │ '151.88 ms'  │ '136.72 ms'  │
└──────────────────────┴──────────────┴──────────────┘

▶ site-editor
┌──────────────────────┬──────────────┬──────────────┐
│ (index)              │ wp/6.5       │ wp/6.4       │
├──────────────────────┼──────────────┼──────────────┤
│ serverResponse       │ '97.35 ms'   │ '110.95 ms'  │
│ firstPaint           │ '353.45 ms'  │ '327.65 ms'  │
│ domContentLoaded     │ '768.25 ms'  │ '730.5 ms'   │
│ loaded               │ '768.8 ms'   │ '730.85 ms'  │
│ firstContentfulPaint │ '912.7 ms'   │ '866.15 ms'  │
│ firstBlock           │ '3430.05 ms' │ '8086.5 ms'  │
│ type                 │ '11.93 ms'   │ '55.29 ms'   │
│ minType              │ '10.19 ms'   │ '53.19 ms'   │
│ maxType              │ '13.66 ms'   │ '65.06 ms'   │
│ loadPatterns         │ '2205.7 ms'  │ '3549.63 ms' │
│ navigate             │ '24.87 ms'   │ '145.35 ms'  │
└──────────────────────┴──────────────┴──────────────┘

@ellatrix
Copy link
Member Author

ellatrix commented Mar 19, 2024

Ok so the averages from 4 runs:

Type post editor: (12.87+10.37+11.78+10.47) / (62.76+58.3+55.97+61.76) = 0.19050211482 = 5.25x (525%)
Type site editor: (10.87+10.58+12.37+11.93) / (58.85+56.1+59.5+55.29) = 0.19913815617 = 5x (500%)
Load post editor: (3399+3275.4+3396.2+3442.95) / (7790.95+7637.05+7775.1+7572.7) = 0.43909662787 = 2.28x (228%)
Load site editor: (3369.1+ 3296.4+3475.75+3430.05) / (8324.15+ 8133.3+8494.75+8086.5) = 0.41076979421 = 2.43x (243%)
Load patterns: (2272.86+ 2201.86+ 2455.17+ 2205.7) / (3760.65+ 3672.38+ 3833.62+ 3549.63) = 0.61659134411 = 62%

@ellatrix
Copy link
Member Author

ellatrix commented Mar 19, 2024

Oh also navigating the site editor (thanks to @youknowriad):

(28.27+ 22.96+ 28.1+ 24.87) / (157.4+ 141.65+ 157.71+ 145.35) = 0.17305807908 = 5.77x (577%)

Apparently there's an issue with the measurement of site editor navigation and the work done moved to a different event handler.

@annezazu annezazu mentioned this issue Mar 19, 2024
3 tasks
@annezazu annezazu added [Type] Iteration Scoped iteration of an effort from a tracking issue or overview issue ideally for a major release. and removed [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. labels Mar 21, 2024
@annezazu annezazu changed the title Performance Tracking issue (WP 6.5) Performance improvements planned for WordPress 6.5 Mar 21, 2024
@annezazu
Copy link
Contributor

With this recent update and the 6.5 nearly out the door, I'm going to close this issue as complete! Amazing work, Ella. Thank you for the continued updates here.

@ellatrix ellatrix changed the title Performance improvements planned for WordPress 6.5 Performance improvements for WordPress 6.5 Mar 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Iteration Scoped iteration of an effort from a tracking issue or overview issue ideally for a major release. [Type] Performance Related to performance efforts
Projects
None yet
Development

No branches or pull requests

3 participants