Tackling performance in the WordPress ecosystem at scale

in the WordPress ecosystem at scale
Tackling performance
Felix Arntz / WordCamp US 2022
Felix Arntz
Software Engineer at Google.
WordPress Core Committer.
I’m also a musician, movie geek, and
regular taco eater (love San Diego for
that already).
I’m @flixos90 on wordpress.org and @felixarntz elsewhere.
WordPress sites are slow!
Breaking down Core Web Vitals (CWV)
(How fast the page loads)
LCP
Largest Contentful Paint
GOOD
NEEDS
IMPROVEMENT
POOR
4.0 sec
2.5 sec
(How quickly interactions work)
FID
First Input Delay
GOOD
NEEDS
IMPROVEMENT
POOR
100 ms 300 ms
(How stable page elements are)
CLS
Cumulative Layout Shift
GOOD
NEEDS
IMPROVEMENT
POOR
0.1 0.25
A page only passes the CWV assessment
if it is in the GOOD range for all three metrics.
Learn more: web.dev/vitals/
CWV passing rate of WordPress (mobile)
(How quickly interactions work)
FID
First Input Delay
(How stable page elements are)
CLS
Cumulative Layout Shift
(How fast the page loads)
LCP
Largest Contentful Paint
35.4% 96.4% 73.1%
Source: cwvtech.report
Data from July 2022
😫 😎 🙃
35.4%
CWV passing rate of WordPress (mobile)
The WordPress CWV passing rate on mobile is only 28.4%.
Source: cwvtech.report
Data from July 2022
CWV passing rate of WordPress (desktop)
On desktop it is not much better with only 32.3%.
Source: cwvtech.report
Data from July 2022
The WordPress Performance Team
The WordPress Performance Team is a dedicated
working group to tackle monitoring, enhancing,
and promoting performance in WordPress core
and its surrounding ecosystem.
Learn more: make.wordpress.org/performance/
Proposed and kickstarted in late 2021
Learn more: make.wordpress.org/performance/
Formalized as an official WordPress team in July 2022
Learn more: make.wordpress.org/performance/
Goals of the WordPress Performance Team
Improve performance at scale through WordPress core
Facilitate decision making based on performance metrics
Raise performance awareness in the ecosystem
Improve performance at scale through WordPress core
● A single plugin which allows beta
testing performance-related
WordPress core feature projects,
developed in a GitHub repository
● Simplifies testing performance
features for end users
● Reduces maintenance overhead
for developers
Facilitate decision making based on performance metrics
Raise performance awareness in the ecosystem
Current WordPress Performance Team projects
Project Performance Lab plugin release WordPress core release
WebP Uploads * 1.0.0-beta.1 Committed to launch in 6.1
Persistent Object Cache Health Check 1.0.0-beta.1 Committed to launch in 6.1
Full Page Cache Health Check 1.2.0 Committed to launch in 6.1
Dominant Color 1.2.0 6.1 / 6.2 (anticipated)
Regenerate Existing Images In progress; targeting 1.7.0 6.2 / 6.3 (anticipated)
SVG Uploads In progress; TBD 6.2 (anticipated)
Enqueued Assets Health Check 1.0.0-beta.1 TBD
Autoloaded Options Health Check 1.0.0-beta.2 TBD
* Not using modern image formats (such as WebP) is one of the most
common performance problems affecting LCP.
79% of origins in the CrUX report fail this audit.
Challenges of our ecosystem
Why is performance in WordPress so hard?
Uncontrolled
environment
Lack of quality
assurance
Competition by
# of features
Massive amount
of extensions
×
PHP 5.6
Filesystem
cache
MySQL
CDN
Improving our ecosystem
How can we address the performance challenges?
Enforcing quality
guidelines
Educating
developers
Making performance
an incentive
Automating
performance fixes
Automating
performance fixes
Automating core performance fixes
● Don’t just build an API with a single default
● Define heuristics and logic to determine
context-based defaults
● Use lab analysis tools (e.g. WebPageTest,
Lighthouse) to compare alternative heuristics
How can we fix core performance issues automatically?
Build APIs with smart defaults
default: true (if likely outside of the
viewport) or false (otherwise)
default: true
How can we fix core performance issues automatically?
Fine tuning options for developers
● Always apply filters and leave room for
customization in any heuristics-based logic
● Keep in mind that an automated fix is not always
as accurate as developer intervention can be
● Define plugin integration points for more
advanced solutions outside of WordPress core
scope (e.g. CDNs)
How can we fix core performance issues automatically?
Validation through metrics
● Refine heuristics until it improves performance
for the majority
● Verify that for the rest there are no performance
regressions
● Use field metrics (e.g. Chrome UX report,
web-vitals.js) to validate the real-world impact
follows the lab expectations
How can we fix core performance issues automatically?
Implementation based on usage
● Develop routines that inspect frontend behavior
● “Learn” the best behavior from user interaction
● Use server-side content filters (particularly with
Full Site Editing) and client-side logic to get results
as accurate as possible
Database REST API
User agent
sends viewport
related data
processes and
stores data
Optimizes response
based on data
Let’s dream for a moment…
• Build APIs with smart defaults
• Fine tuning options for developers
• Validation through metrics
• Implementation based on usage
Summary
Think big!
Photo by Alexander Andrews on Unsplash
big!
big!
Contribute to the Performance Team
Learn more about what we’re doing
We’re working on our Handbook to be the most comprehensive resource.
make.wordpress.org/performance/
Join the weekly Slack chat
The best way to get started, every Tuesday at 15:00 UTC.
wordpress.slack.com/archives/performance
Contribute to the Performance Lab plugin
Discuss ongoing ideas, contribute to performance feature projects.
github.com/WordPress/performance
Test the Performance Lab plugin
Just using it and sharing your feedback goes a long way.
wordpress.org/plugins/performance-lab/
Thank You
Felix Arntz
@felixarntz
1 of 32

More Related Content

Similar to Tackling performance in the WordPress ecosystem at scale

Similar to Tackling performance in the WordPress ecosystem at scale(20)

Tackling performance in the WordPress ecosystem at scale

  • 1. in the WordPress ecosystem at scale Tackling performance Felix Arntz / WordCamp US 2022
  • 2. Felix Arntz Software Engineer at Google. WordPress Core Committer. I’m also a musician, movie geek, and regular taco eater (love San Diego for that already). I’m @flixos90 on wordpress.org and @felixarntz elsewhere.
  • 4. Breaking down Core Web Vitals (CWV) (How fast the page loads) LCP Largest Contentful Paint GOOD NEEDS IMPROVEMENT POOR 4.0 sec 2.5 sec (How quickly interactions work) FID First Input Delay GOOD NEEDS IMPROVEMENT POOR 100 ms 300 ms (How stable page elements are) CLS Cumulative Layout Shift GOOD NEEDS IMPROVEMENT POOR 0.1 0.25 A page only passes the CWV assessment if it is in the GOOD range for all three metrics. Learn more: web.dev/vitals/
  • 5. CWV passing rate of WordPress (mobile) (How quickly interactions work) FID First Input Delay (How stable page elements are) CLS Cumulative Layout Shift (How fast the page loads) LCP Largest Contentful Paint 35.4% 96.4% 73.1% Source: cwvtech.report Data from July 2022 😫 😎 🙃 35.4%
  • 6. CWV passing rate of WordPress (mobile) The WordPress CWV passing rate on mobile is only 28.4%. Source: cwvtech.report Data from July 2022
  • 7. CWV passing rate of WordPress (desktop) On desktop it is not much better with only 32.3%. Source: cwvtech.report Data from July 2022
  • 9. The WordPress Performance Team is a dedicated working group to tackle monitoring, enhancing, and promoting performance in WordPress core and its surrounding ecosystem. Learn more: make.wordpress.org/performance/
  • 10. Proposed and kickstarted in late 2021 Learn more: make.wordpress.org/performance/
  • 11. Formalized as an official WordPress team in July 2022 Learn more: make.wordpress.org/performance/
  • 12. Goals of the WordPress Performance Team Improve performance at scale through WordPress core Facilitate decision making based on performance metrics Raise performance awareness in the ecosystem
  • 13. Improve performance at scale through WordPress core ● A single plugin which allows beta testing performance-related WordPress core feature projects, developed in a GitHub repository ● Simplifies testing performance features for end users ● Reduces maintenance overhead for developers
  • 14. Facilitate decision making based on performance metrics
  • 15. Raise performance awareness in the ecosystem
  • 16. Current WordPress Performance Team projects Project Performance Lab plugin release WordPress core release WebP Uploads * 1.0.0-beta.1 Committed to launch in 6.1 Persistent Object Cache Health Check 1.0.0-beta.1 Committed to launch in 6.1 Full Page Cache Health Check 1.2.0 Committed to launch in 6.1 Dominant Color 1.2.0 6.1 / 6.2 (anticipated) Regenerate Existing Images In progress; targeting 1.7.0 6.2 / 6.3 (anticipated) SVG Uploads In progress; TBD 6.2 (anticipated) Enqueued Assets Health Check 1.0.0-beta.1 TBD Autoloaded Options Health Check 1.0.0-beta.2 TBD * Not using modern image formats (such as WebP) is one of the most common performance problems affecting LCP. 79% of origins in the CrUX report fail this audit.
  • 17. Challenges of our ecosystem
  • 18. Why is performance in WordPress so hard? Uncontrolled environment Lack of quality assurance Competition by # of features Massive amount of extensions × PHP 5.6 Filesystem cache MySQL CDN
  • 20. How can we address the performance challenges? Enforcing quality guidelines Educating developers Making performance an incentive Automating performance fixes Automating performance fixes
  • 22. ● Don’t just build an API with a single default ● Define heuristics and logic to determine context-based defaults ● Use lab analysis tools (e.g. WebPageTest, Lighthouse) to compare alternative heuristics How can we fix core performance issues automatically? Build APIs with smart defaults default: true (if likely outside of the viewport) or false (otherwise) default: true
  • 23. How can we fix core performance issues automatically? Fine tuning options for developers ● Always apply filters and leave room for customization in any heuristics-based logic ● Keep in mind that an automated fix is not always as accurate as developer intervention can be ● Define plugin integration points for more advanced solutions outside of WordPress core scope (e.g. CDNs)
  • 24. How can we fix core performance issues automatically? Validation through metrics ● Refine heuristics until it improves performance for the majority ● Verify that for the rest there are no performance regressions ● Use field metrics (e.g. Chrome UX report, web-vitals.js) to validate the real-world impact follows the lab expectations
  • 25. How can we fix core performance issues automatically? Implementation based on usage ● Develop routines that inspect frontend behavior ● “Learn” the best behavior from user interaction ● Use server-side content filters (particularly with Full Site Editing) and client-side logic to get results as accurate as possible Database REST API User agent sends viewport related data processes and stores data Optimizes response based on data Let’s dream for a moment…
  • 26. • Build APIs with smart defaults • Fine tuning options for developers • Validation through metrics • Implementation based on usage Summary Think big! Photo by Alexander Andrews on Unsplash big! big!
  • 27. Contribute to the Performance Team
  • 28. Learn more about what we’re doing We’re working on our Handbook to be the most comprehensive resource. make.wordpress.org/performance/
  • 29. Join the weekly Slack chat The best way to get started, every Tuesday at 15:00 UTC. wordpress.slack.com/archives/performance
  • 30. Contribute to the Performance Lab plugin Discuss ongoing ideas, contribute to performance feature projects. github.com/WordPress/performance
  • 31. Test the Performance Lab plugin Just using it and sharing your feedback goes a long way. wordpress.org/plugins/performance-lab/