 Thank you. And thanks for the introduction. Yeah, my name is Felix Arns and we're gonna talk about tackling performance in the WordPress ecosystem at scale We're not gonna really do that right now because it might take a while But we're gonna look into what it takes what it takes to get to that Yeah, you already heard a little bit about me. I am a WordPress co-committer. I've been a WordPress co-committer for about six years now I'm also musician movie geek And I'm passionate about web performance in general I'm also an optimist which I think you sometimes have to be when especially when you want to optimize performance in an Open source CMS like WordPress You can find me mostly under my full name on social media, but in WordPress. It's Flixos 90 But let's get started now. So why do we need to care about performance? WordPress sites are slow like sometimes that's low But I mean probably heard that before so what does what does it really mean? It's I want to really emphasize that this is just not empty complaints like we can look at some facts You may be familiar with core web vitals or short CWV already, but I'm just gonna quickly recap what they are so core web vitals are comprised of three key metrics that represent different aspects of performance And those names may seem a bit hard to parse But actually what's behind that behind them is not that complex to understand. So First LCP is basically how the how fast the page loads I think that is what a lot of us really think about what is web performance and while one may argue that It's maybe the most important of all of these but it's I want to really highlight that it's not the only thing that matters for performance So LCP is how fast the page loads The other two are FID and CLS FID first input delay is essentially how fast the web page responds to user interactions So for example when you scroll down When you scroll just when you scroll down and it lacks or when you click something and it only reacts after two seconds like That would be a bad FID And CLS is how stable the layout is Cumulative layout shift that sounds a bit complicated, but it's it's basically how it's basically about that Page elements should not move Unexpectedly without which means basically without any user interaction So this is easily outlined with an example You've probably all had this experience somewhere where you on your phone and maybe the connection is not so good Or maybe the website is just really terrible and you want to click a button But just as you click on the button it shifts down and you click on something else often an ad So that is that is what really makes for bad CLS score So Each of these metrics has some thresholds defines for which we are which which values are considered good or poor But I but there's also the overall co-op vitals assessment It really it only it has a site only passes the overall co-op vitals assessment if all three values are good So you can just have like I don't know fast loading website to have to get good core web vitals It has to be good and across all of these three to have a great performance and great user experience So how are WordPress sites doing in that regard the answer is you guess it not that good To be fair WordPress has a great FID passing rate and CLS is okay But LCP so loading performance, which is one of the most important aspects Especially when just when you're just land on a website. It's really not good looking that good Seeing the 35 percent here basically means that 65 percent of all WordPress sites out there Load their main content too slowly To provide a good user experience and we've probably heard before that that's one of the that's one of the causes that people that that leads people to leave your website before they even Start browsing your content and you lose potential clients potential customers So yeah, the 35 percent here is really is really one of the main things we need to focus on when we WordPress performance Because of these three metrics LCP is also really the main one that drags down overall co-op vitals Passing rate, which is only at twenty eight point four percent on mobile as of July this year On desktop, it's only marginally better with thirty two percent point three percent To provide a bit more context where this data comes from it is sourced from HTTP archive and the Chrome UX report both of which are public data sets that Anybody can query you can explore all of that data yourself And yeah, one of the good entry points is the CWV tech dot report URL here. That's linked That's essentially where all this exact data comes from But the whole data sets there are public and yeah, so I also another thing I also want to highlight is briefly looking at other CMS's the passing rate that there is first of all the LCP metric is Generally the one that is the worst so that's not only a WordPress problem to be fair But WordPress is even compared to other CMS is particularly They are scoring low in that in that one and For example, I want to highlight one thing to highlight is a typo three for example has an overall CWV passing rate of around sixty percent. So that's like more than double the one of WordPress So with this background, let's now look at what WordPress has been doing recently in that regard And what we need to focus on and to improve the situation You may or may have not heard about the WordPress performance team, which is a relatively new team The WordPress performance team is a dedicated working group to tackle monitoring This is essentially our mission statement to tackle monitoring enhancing and promoting performance in WordPress core and its surrounding ecosystem The team was kick-started in late 2021 and a collaborative effort It's spearheaded by different contributors from various companies including Google Which was where I work Yoast 10 up XWP where other companies involved in that and we got support from the community right away Like there were a ton of super excited comments on this first proposal post And shortly after we started having weekly slack meetings, which we've had ever since and Then earlier in 2022 we established the performance lab plugin, which is a new yeah a relative new plugin Which I'll tell you more about in just a bit Then after a few months of the successful collaboration The team was really formally established as an official part of the WordPress project in July So there is now we have now our own website make.wordpress.org performance This is going to really be the entry point for everything around its team It's currently heavily being worked on so there is not that much content yet But bookmark this already if you're interested. This is the best. This will be the best way to get started So what are the goals of the WordPress performance team? It can be broken down into three things First we want to improve performance at scale through WordPress core enhancements and fixes so While such efforts They often take really long because of all the backward compatibility of edge and edge cases that we need to consider It also means anything that we can land in WordPress core. It goes to every WordPress site in the whole world Those that update at least In addition we want to work on tools that make it easier for developers to be out to monitor performance and to make decisions Based on performance metrics, so that's both for the development of core plugins and themes But also for yeah when your code is used in the production in production sites in the wild so there's there's so-called lap metrics, which is where it be essentially when you run under the experiment and you You let's say you code your develop if and what you think is a perform an enhancement And then you have to compare how it's be working before and after that's kind of a lap test But then you also need to look once you have launched this thing or maybe made it in a beta put it in a beta testing plugin or something how it's really performing across at scale like across websites and that's where Yeah tools is like especially tools like HDP archive or Or the Chrome user experience reports can be helpful So The last point is just yeah, we want to generally raise more awareness of performance during development and Yeah, like other general security areas like security and accessibility performance needs to really be an integral part of all phases of development Let's look into each of these three in a little bit more depth So the primary project that the WordPress performance team has been working on is the performance lab plug-in, which I already mentioned before This is not your regular performance plug-in though. It's It is effectively a beta testing plug, which is for performance related feature projects so what or has for a long time had this concept of feature projects and Yeah, we have is that you've essentially established this plug-in to make it easier to work on any performance-related feature plug-ins Projects which are included in this plug-in as modules as individual modules So it's essentially a bundle of different performance features that each of which we hope to eventually get into WordPress core and Yeah, you've I learned this is similar to for example if you've used jetpack before like you have individual modules in that a single plug-in Yeah, and by having all this in a single plug-in it makes it easier to maintain from a development perspective But it also makes it easier for end users to test because they just have to Install this one plug-in and they don't have to keep up with all the other things that are happening in WordPress core And which plugins are possibly there? And it also makes it easier to monitor performance Because we've built infrastructure into this plug-in which for example Outputs a Metagenerator tag similar to WordPress so that we can use tools like datasets like HTTP archive to Compare and assess performance in the from sites that use this plug-in So that leads us to the making decision making metric-based decisions This is a key aspect where we as our ecosystem have a lot to learn The WordPress ecosystem has a tendency to decide things on like arbitrary beliefs and experiences like this 80% rule, but we really know whether 80% of the sites Like will need this feature or not And and we have sometimes we don't really have a way in WordPress to get this information because of the lack of telemetry Which is perfectly fine But we also have to be honest with ourselves like saying doing xyd xyz will improve performance Doesn't necessarily mean that it will actually improve performance. So When with performance, we are in a unique position to make metric-based decisions because we have certain these we have tools available we have datasets available and Yeah, the performance team is we really want to work on making this more Accessible I guess to the to the WordPress ecosystem and We also want to start writing documentation on how you can for example use how you can query HTTP archive to to get Specific metrics that you're interested in for a certain feature that you may be building Yeah, as mentioned before all these tools they are publicly available so You should you should have documentation for this very soon So anybody of you can also start using that and then this aspect of being making metric-based decisions is No important thing that I would love for us to embrace more as a community But there are other in my other ways where we can increase increase performance awareness for example members of the performance team recently Yeah, including myself started proposing a WordPress performance checker a plug-in checker and The plug-in like you may have heard that there is already a theme check tool. It has been out there for years so theme developers can use this tool to find violations in their code to scan their code for problems and while this is somewhat more complicated for plugins because plugins can kind of do anything they want we do think there is there is definitely value in this and we also do think that this is possible to to build and If we have a plug-in checker we can assess we can we can basically warn and inform developers as they're Developing their plugins about Potential issues relating security accessibility, but of course also performance So that's something that we want to really kickstart very soon Other than that we also there are other ideas what we could do for example There is already a security section in the plug-in developer handbook, but there is no performance section So maybe there's also a lot of documentation where we can help plug-in developers to learn more about those best practices To end this section about the WordPress performance team. I'd just like to highlight some of the Greater WordPress core projects that the team has been currently working on Using on all of these how are part of the performance lab plug-in. So that is used as a testing vehicle To highlight one of them just just this week actually we got the latest what the uploads feature committed to WordPress core And based on yeah data from the Chrome UX report. This will help Almost 80% of WordPress sites out there to improve the LCP metric by using that more progressive web P image format Okay, so much for the current progress of the WordPress performance team, but let's now focus up on a bit more long-term thinking here It's great that we now have the performance team But to be truly successful in improving performance at scale We must understand the challenges of our ecosystem and we need a shift in mindset to think about the performance in work Some of this may not be new to you But let me highlight the four challenges we have in our WordPress ecosystem when it comes to performance first WordPress and most open other or most other open source cms is for that matter They are distributed so you can host them anywhere and while there is a number of Hosts out there and it's more and more. They're more and more hosts out there that Optimized specifically for WordPress. That's always still the one-way optimization like WordPress itself still has to work on any host out there, so yeah, this way This way you basically yeah, that makes it really hard because you have to satisfy a ton of edge cases and what if Certain hosts may not support the best latest technology and this is always a big challenge to advance performance in WordPress The second challenge though, which is more specific to our ecosystem is the lack of quality assurance So the plug-in and theme repository is there essentially a free-for-all and that is great while that is great to have Especially like it's great to have no no unnecessary roadblocks in your way, especially when you're new WordPress developer But there is the fact that yeah, you have there's basically little to no control and not even Assessment on quality so that means it leads to two problems as a developer You just don't learn about anything like you don't improve you don't you don't find out that your product plug-in may have problems And then as an end user you have basically no idea how you can Yeah, what how you can assess a plug-in like if you want to find a plug-in for a certain purpose And then you have 20 different plugins to choose from you Don't really know which one of these is good and which one isn't That also then indirectly leads to the third challenge Many WordPress plugins and sometimes even themes Compete against each other simply by the number of features that they offer That results then in bloated solutions, which makes performance even worse or at least even harder to get good performance And then due to the lack of quality criteria for plugins and themes That are shown to end users. That's really the only thing that end users can look at and I Understand if you're plug-in developer today that Yeah, this this is maybe the way to get to get users to get potential customers But we also I this is also really this is how the WordPress ecosystem works today But I think we need to shift there like we should we need to focus more on Yeah, quality assessment and then last but not least there is just the sheer size of the WordPress ecosystem I don't even know anymore at this point. How many like plugins and themes there are but it's It's definitely more than 60,000 just on WordPress org alone And then even think about all those other market places that there are outside of WordPress org So this ecosystem size of WordPress simply scales all the other three problems to massive dimensions So what can we do about all that? Mentioned we need to educate developers on performance best practices and this that the performance team has already started focusing on We also need to establish quality guidelines and enforcing them would of course be a great potential goal But even encouraging them would be great start This then also relates to the first through the third point here We need to make performance and incentive that is worth focusing on for plug-in and theme developers I know that enforcing I mean while while I I personally I would be open to enforcing certain quality guidelines But that can be seen as somewhat controversial in the ecosystem So while enforcing may be a bit of a stretch I think we could still yeah, we could still Reward plug-ins and themes that do the right thing for example There could be a badging system in in the plug-in and theme repositories for plug-ins or themes that yeah Follow certain like follow certain best practices And then this way it would help site owners make a more educated decision One which plug into truth for a certain use case and at the same time it would give the plug-in and theme developers Yeah, it would allow them to also To improve that to improve their plug-ins to a essentially to eventually also get these patches But the most important point which I want to highlight in this session is the last one here automating performance fixes All of the other three points they are important But I think this one it takes just special priority especially because the massive because of the massive ecosystem that is word plus Realistically the number of word plus plugins and themes is so extremely large that no matter how much we educate Encourage quality guidelines and make performance and incentive we can only get so far because Even if we went all the way in with With the word plus plug-in and theme repositories for example think about all those infamous third-party marketplaces which may not do that and then These efforts may be completely remained ignored and but still deals some of these marketplaces have plug-ins and themes that are widely used and We have to be also be honest with ourselves like how many of the word press developers and Out of around the world. Do we think really read? WordPress org regularly or follow the best practices like I'm all of us here probably do but There are so many there are so many developers out there that will not know about any of what we're doing here. So We need to really Yeah, we need to really find ways to in wordpress to fix perform in wordpress core in A way that does not require all of these 10,000 of plugins to use a certain API or just opt into a certain behavior Basically, we need to enhance wordpress core that it Fixes the mistakes that the plug-in or theme developer make So this may sound crazy, but I'd like to think that I like us to think about that a little bit more we can indeed get quite far by Investing in all of the different ways to improve performance that I've mentioned who knows maybe we can get to like a 40 50 Maybe even 60 percent CWP passing rate eventually But having core identify and solve performance problems out of the box Is what I think Maybe the only way to get to even higher numbers than that like to the 70 80 90 I mean 100 percent is a bit of stretch, but you get what I mean So let's look into this idea a bit more a First principle we should start doing is wherever possible use smart defaults When we think about defaults today, we tend to automatically gravitate towards a single default value But it does not have to be just a single value We could instead add logic to compute a dynamic default value based on certain heuristics For example When we introduced lazy loading in wordpress 5.5 We initially went with that more naive approach where the default for lazy loading an image was simply true Like every in every content image was lazy loaded out of the box And then we advised theme developers to customize the behavior based on the theme layout because one thing that is One thing that is discouraged is to lazy load images which are in the initial viewport but then Of course, not every theme in the world will adopt this will take care of this So after some time after we launched this we noticed that there was a regression in LCP actually This feature was launched. Of course, it had up still other benefits To have lazy loading, but the LCP metric itself partially regressed because of this feature And that was because of this default being simply true And we basically left it to theme developers to fix it to to adjust it based on their theme layout so We then did several analysis with different ideas on how we could set some Dead default value dynamically and we compared them to find one that works reliable Reliable yet scale so we come we we wrote we wrote a different patches and We compared them across a hundred different themes hundred different of the most popular themes to see kind of what which one works best across all of them and then that one was shipped in wordpress 5.9 and essentially now that means It it's now doing the right thing without requiring developers or site owners to intervene When implementing those smart kinds of defaults Captain we have to keep in mind though that they still are defaults and they still have some room for improvement Even when yeah, when we tested this with like hundred themes There was an improvement for for most of them with the version that we eventually went with But there were other also a few themes which maybe have more unique layouts that were not That would not benefit from this so they are and in any case There always needs to be a way for an individual developer to go in and maybe optimize even more for their specific site so Really, I want to call out that even though smart defaults. They should remain defaults So and because they are based on logic It may just need to be require a bit more thinking on how you can make these overriding because it's not just a single value Sometimes it may help introducing an extra filter for example with lazy loading Then we introduced this filter there with where you can control for every individual image whether it should be lazy loaded or not So this way in eventually the developer can go in and has full control to make this even more optimal for their site I mentioned before that we did some analysis to find a good heuristic, but yeah, let's be real It's unlikely even for smart defaults to cover every possible use case out there so we should be focusing on the following two points like the default logic it should Notable performance improvement for the vast majority of sites think about maybe at least 70 per 70 or 80 percent of WordPress sites But then the remaining WordPress sites, of course, they could still be optimized further But it would probably require manual optimization because they behave in two specific Yeah, two edge. Maybe yeah, two unique in edge case ways that we can't address it in a universal way but the main thing about if for those sites is For at least those should they should not see a performance regression So whenever we built something like this and they find a heuristic We need to make sure we find a heuristic that Improves it for the majority, but for the ones that it doesn't improve keeps it at the level that it was before So to define a heuristic that satisfies these requirements It is critical to validate the behavior than afterwards also on real-world sites and using field metrics from tools like the Chrome UX report One of the biggest challenges with these smart defaults today, though Is that WordPress content is generated on the server side in PHP? This means we have no idea on how that content is interpreted and loaded on the client side And we also don't have any reliable information on certain aspects like the viewport size so That has been also a significant drawback in this lazy loading effort because the word pass cut It's about the viewport which image should not be lazy loaded So we but we could only use the server site to make some guess Basically about it and that's why we needed to do this this whole analysis. So Let's say a WordPress user publishes a new publishes a new page today and then several users visit this page It's published where WordPress simply serves the page from the server side at its best capacity But probably not fully optimized Let's dream here for a moment Imagine we had a mechanism there like some background script that ran in the front end of the WordPress site to gather relevant client heuristics and then this data could be sent to the rest API to a new WordPress rest API endpoint where it would be processed and then stored in the word pass database then subsequent requests For subsequent requests WordPress could use this information to serve the page content in an optimized way This may sound crazy and of course there would be several complexity involved in this like around security around Around storage about the different viewports. So responsiveness But I also think what that here would enable for WordPress and all sites out there It's would be massive like many so many So many different optimization techniques for a performance require a client awareness like critical CSS deferring JavaScript resource prioritization in general But also lazy loading images like I already said it could be optimized even more with that Just to give you a few examples I told you I'm an optimist But I truly believe that we can achieve something like this not next month and maybe not even next year But I think we can work towards it from now on Of course this requires a mind shift We need to really try things and we need to also be prepared for failures But we must also must avoid shutting down those types of ideas before they even attempted I'd love for you to think about these ideas and paradigms further Let's start focusing more on ways that we can fix things in core out of the box without Requiring every plug-in and theme developer to be out to you to use a certain API What I really want to convey is APIs should still be part of the solution But they should not be the full solution Especially in regards to the last point. Let's brainstorm this further I'd love to hear your ideas about that. Of course also your concerns We need that too, but let's just not go into this like yeah, there's no way we can get this into WordPress core We need to think big like like that big I hope I was able to Spark some inspiration for you with those concepts if any of this resonates you with you, please help us in the performance team There are many ways to support the efforts of the performance team and Really I want to emphasize right now is only the beginning so anybody is that contributes can really help Shape the team and the roadmap So going forward the best entry point like I already mentioned before is the make WordPress org slash performance website You will find you already find links here to everything else that's relevant to contributing to the team and very soon You will find a fully fledged comprehensive handbook with documentation including onboarding One of the best ways to familiarize yourself with the processes is to participate in our weekly slack chats They happen every Tuesday at 15 UTC which is eight in the morning West Coast time so get up early, please We also have the word press slash performance a repository in GitHub Which is home to the performance lab plug-in development But also that repository use for any kinds of discussions on issues around other aspects of the performance team as well So here you can really contribute and to your to our feature projects, but you can also propose your new ideas and Last but not least, please test the performance plug-in performance lab plug-in And provide feedback on the individual modules So whether you can you can do that through the word press support forums reviews or even by reporting box on GitHub directly So even if you cannot Commit directly to contributing to the team or if you're unsure where to start This is the excellent way just testing the plug-in is an excellent way to support the performance team And it can also be an entry point for more. I'd love to see you around in the performance team But also today, let's chat more if you're interested in any of this And I'm also going to be at the contributor day tomorrow We're gonna have an area there where we're gonna work on word press performance So please join the contributor day if you're interested as well and help us. Yeah to move things forward That's it. Thank you We have ten minutes for questions and we're also taking questions from the chat Yes so I worked with four web finals quite a bit and We're very aware of how that works Our clients have those metrics However, it also seems like at the same time there's two separate rules for people like there's people that are All that stuff And I don't feel like Like there's a certain threshold where it just doesn't make a difference On how terrible your performance is You're still gonna rank higher Just kind of curious how that conversation happens or at Google or penalizing those people who really do have like authority, but I mean You search chicken recipes. I can guarantee you with the number one thing on there doesn't pass They're just terrible Performance, and I'm curious how that happens. How that how that discussion happens so let me see if we can understand what you're asking which is how come there's a discrepancy between what Google says About performance in terms of how it affects your ranking Versus what we see in the wild in an actual search Okay, Felix I I can't really speak much to that because I'm I'm not part of in I'm not involved in this piece at all like Google search or the ranking so From out like I'm more I'm I'm for me for my perspective. It's really cold white vitals are a way to measure performance and and Yeah, for me the goal to get good cold white vitals would be to get a good user experience Of course it does affect Ranking somehow, but I have no idea how Better I mean there are I'm sure there are there are people are talking about this It's just not it's just people in other teams of Google Okay, and we have a question from the chat So Scott brim Says he's in a debate with others about WordPress performance And he's looking for either a link to your slides so he can reference those or some written materials that you might be able to share Okay, so Scott brim is looking for links to share Where he can get your resources I yeah, I will definitely publish the slides Just be a later today Probably in the next hour and I share link on my Twitter profile Probably then so if you look at Felix Arons on Twitter then you you should find that okay, and then we had someone Okay, I'll have you next and there was a lady over here on my left Yes Okay, so how would a development team get started with performance is that what you asked Yeah, I think so at the I think one of the good ways to start is You could have I just be asked specifically about a plug-in for example. Yeah. Yeah, so if you You could have you could install the plug-in on some test site and configure it with Yeah, with different content and I don't know of course a plug-in could do whatever whatever But you could basically have maybe even have multiple test sites with different configurations of the same plug-in which so and then you can You can test though test test these pages with tools like a web page test or page speed insights to see Yeah, where are the where where are the violations and From there, of course when you want one a little one thing that may be a little complex there is to figure out Is it is this problem from from your plug-in or is it from WordPress core? But in general if you the main thing there is that you would need to test this on a site where it's only your plug-in and maybe a Super minimal theme which has nothing in it so that the theme would not affect performance Okay, and our questioner from over here Maybe I Think I mean I yeah, I think that's something that Yeah, if I'm I'm person not that familiar with yeah with AI but we But I think there yeah, if there is people that would contribute to the performance team Who have more of this background knowledge there? I would be super excited about that because I do think there is definitely a lot of opportunities for it Okay, and over here I I do actually yes not know about this right now, but you can come to the Google booth later, and I'm sure somebody there will know Okay Do you think it would be helpful or distracting to put performance measurement feedback in terms of environmental impact in terms of incentivizing people Towards trying to make their sites faster Sorry, can you can say the first part of it during a website takes energy? There's an environmental impact to that the internet itself is a major source of carbon emissions globally Do you think that highlighting that in the way that we talk about performance might be a way to incentivize? more people to take this seriously or Do you think that would be a distraction? I Mean I definitely don't think it would be distraction. I think it could definitely Yeah, definitely help incentivize performance Second and then we'll take third row and then the chat But Hmm, I mean That does sound more like a plug-in team perform issue Yeah, yeah, yeah, I Think right right I I Mean I don't have a spontaneous idea about this right now, but I think that Yeah, I mean that would be that would definitely be worth looking into I I guess I would Yeah, I'm struggling right now with the idea of Because that's so deeply in the in the code base you kind of need to scan the code base of the plug-in to find certain problems there So I don't know how you would then automatically fix the code base of the plug-in or something maybe Okay, third row Between the word press for plug-ins What from a site developers point of view what should you be looking for to optimize just from that Overall view what is the what is the worst offender for For those core web vitals. What's the what's the first thing you should look for in terms of what's taken too much time I Think that varies a lot on different case-by-case basis So I think that's where it's best to use one of these tools to run is run it over your site and see what is what are the worst Problems according to this like web page test page the insights again are two of those tools that I would recommend there And we are at time. Thank you very much Hope to see you tomorrow contributor day and the social tonight And we'll be back here in 15 minutes for the next top