Performance Chat Summary: 18 July 2023

Meeting agenda here and the full chat log is available beginning here on Slack.

Announcements

  • Welcome to our new members of #core-performance
  • WP 6.3 Release Candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 1 is today
  • Reminder: Working on a WordPress 6.3 performance highlights post – please add suggestions to the document by July 21

Priority Projects

Server Response Time

Link to roadmap projects

Contributors: @joemcgill @spacedmonkey @aristath

Database Optimization

Link to roadmap projects

Contributors: @aristath @spacedmonkey @olliejones

JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. & CSSCSS Cascading Style Sheets.

Link to roadmap project

Contributors: @mukesh27 @10upsimon @adamsilverstein @westonruter

  • @10upsimon Not much of an update here at this point, other than to say that we made it to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. for 6.3 regarding enhancing the scripts APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. with a loading strategy
  • @westonruter Now that we have Script Loading Strategies committed, I’ve started exploring how we can take advantage of them to improve frontend performance in core/themes/plugins. As a first step, I wanted to try one set of enhancements to see what is involved and what the impact is to see whether the effort is worth it. As an initial exploration, I focused on the scripts that GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ adds to the frontend, that is the block view scripts. These are unfortunately all added to the head and are all blocking. So opened a PR to leverage async and defer, and my findings a 19.3% reduction in LCP-TTFB! https://github.com/WordPress/gutenberg/pull/52536#:~:text=Performance%20Analysis
  • @flixos90 In addition to the above PR by @westonruter it would be great if we could define what we want to accomplish with the script loading strategy for WP 6.4. There are probably a couple places where we can adopt it, in core, in the default themes etc., so it would be good to capture that somewhere
  • @westonruter Next step is I want to try a performance analysis using an old low-powered Android phone to see the impact there as well
  • @flixos90 Maybe in a WordPress/performance GH issue for overview, and then we can open and link to TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets, Gutenberg issues, etc. from there

Images

Link to roadmap projects

Contributors: @flixos90 @thekt12 @adamsilverstein @joemcgill

  • @spacedmonkey I got this committed in gutenberg / core – https://github.com/WordPress/gutenberg/pull/52708. TDLR, basically some block templates had images set to lazy load.
  • @joemcgill I noticed that @adamsilverstein has been looking int AVIF and JPEG XL support. I’m wondering if this is something we want to consider adding via the Performance Lab pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party soonish?
    • @flixos90 For AVIF, we could literally almost duplicate the WebP Uploads module. Or we could somehow add it into it and allow users to choose which format to generate. Unsure about JPEG XL, since its situation is unclear and support rather poor
    • @joemcgill I thought that changed recently
    • @spacedmonkey Safari added support lately didn’t they?
    • @adamsilverstein safari did adopt support, no word yet from the other browsers on JPEG XL. For AVIF support, Edge has added in Canary – once it lands in Stable, we can consider merging support into core 
    • @spacedmonkey https://webkit.org/blog/14205/news-from-wwdc23-webkit-features-in-safari-17-beta/
    • @flixos90 Chrome deprecated support for JPEG XL as far as I know, so that’s a reverse signal
    • @spacedmonkey I think allow users to upload these format is fine.
    • @adamsilverstein it never quite made it to chrome stable, it was always behind a feature flag
    • @flixos90 Yeah but now it’s not even available there anymore
    • @spacedmonkey We have other formats at are not web safe that we allow to upload. For example HEIC
    • @flixos90 Sure, in terms of experimentation we can always allow those things. But I wonder what’s the value is. Especially JPEG XL’s future is unclear, so for that format I’d be in favor of not supporting in core just yet. It’s less about safety than about the web ecosystem and standards
    • @adamsilverstein i’m not certain the hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. are in place to add support seamlessly in the plugin, suopport for the format needs to be added in numerous places
    • @joemcgill It would definitely be best to explore support via the PL plugin in advance of any core consideration so we can work out the details.
      • @adamsilversteinwe can try, but i suspect we won’t be able to add full support for AVIF via the plugin
    • @joemcgill I’d like to see us add an option in the PL plugin that would allow WP to serve AVIF versions of images that are uploaded as JPEG. But happy to have that conversation elsewhere
    • Discussion paused here and @clarkeemily suggested to move discussions over to https://github.com/WordPress/performance/issues/11

Measurement

Link to roadmap projects

Contributors: @adamsilverstein @olliejones @joemcgill @mukesh27 @swissspidy

  • @flixos90 I worked on some exploration for UIUI User interface to add metrics to the Server-Timing headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. yesterday, see https://wordpress.slack.com/archives/C02KGN5K076/p1689639916131339 Would love to get some feedback on this
    • It would simplify local benchmarking a lot, since you could e.g. add a specific action to capture its performance, then use benchmark-server-timing to get its data. Without such a UI, that always involved writing some custom code, which was cumbersome and slow

Ecosystem Tools

Link to roadmap projects

Contributors: @joegrainger @mukesh27 @swissspidy @westonruter

  • @mukesh27 We have started the QA testing phase this week, and it’s going well so far. You can keep track of our progress on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ using this link: https://github.com/10up/plugin-check/ We welcome everyone to take a look at the testing process and the code changes. If you have any thoughts, ideas, or feedback, please feel free to share them on the repository. Your input is highly valuable to us!

Creating Standalone Plugins

Link to GitHub overview issue

Contributors: @flixos90 @mukesh27 @10upsimon

  • @10upsimon From my end, work is ongoing. No relevant updates from me at this point.

Open Floor

  • @clarkeemily Worth noting, yesterday saw the release of version 2.5.0 of the Performance Lab plugin
  • @spacedmonkey I have been working on automating compare server response time between WP versions. I made some pretty graphs [link] I will share the bash script I used to generate this and the raw data.
    • I think our benchmarking tools need the ability to compare two results or more. ATM, the benchmark tools just output one result and you have manually format it to a google doc / excel. I would love for do multiple runs and it saves it into a CSV file or something.
    • @westonruter And add a column that shows the difference. I did this manually myself yesterday as well
    • @spacedmonkey Should I create a ticketticket Created for both bug reports and feature development on the bug tracker., someone could work on it with some spare time. Feels like we are doing some of manual work, that could be automated.
    • @westonruter Being able to pass multiple URLs into the tool would work when you’re dealing with multiple environments, but it wouldn’t work so well when you’re reusing the same environment and just changing a branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch"., for example.
    • @spacedmonkey I thought about that, what if you say, run 3 times, after the first time, it stops and needs you press enter to continue. That way you could just run it, change your branch and press enter
    • @westonruter yeah. Or it could accept an arg that points to a script that performs env setup.
    • @joemcgill@swissspidy automated much of the process earlier today using GitHub actions for the steps, which you can see here: https://github.com/swissspidy/compare-wp-performance/. Maybe that could be a good starting point?
  • @clarkeemily Before we close out, I’d just like to flag this post https://make.wordpress.org/core/2023/07/18/wordpress-6-4-whats-on-your-wishlist/ and encourage folks here to think about our wish list for 6.4

Our next chat will be held on Tuesday, July 25, 2023 at 15:00 UTC in the #core-performance channel in Slack.

#core-performance, #performance, #performance-chat, #summary