We are a group of volunteers who review and approve themes submitted to be included in the official WordPress Theme directory.
We do license, security, and code quality reviews.
We help build and maintain default themes.
The primary focus of the team is to help theme authors transition to blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-based themes.
The performance impact of using jQuery in WordPress themes
You may be familiar with the recommendation to not use jQuery for performance reasons, but maybe you haven’t seen any evidence yet. To dive deeper into the topic, I recently conducted an at-scale analysis looking at popular WordPress themes, to see whether jQuery is in fact a notable performance offender or whether it is all just some myth – TL;DR it has a significant negative impact on performance. In this article I will share the results of the analysis and outline ways to reduce usage of jQuery in WordPress themes, so that we can enhance performance across the web.
WordPress core JS file
Number of themes flagged out of 100 themes tested
jQuery usage in themes correlates with worse LCP performance
After establishing that jQuery is a common performance problem, the next step was to quantify how bad its negative impact actually is. For this purpose I inspected the Core Web Vitals (CWV) metrics results for each theme, most importantly the Largest Contentful Paint (LCP) metric, which focuses on loading performance. Across all the 100 themes, the average LCP value of themes using jQuery is 65.6% worse than for themes without jQuery (4,585.14ms for jQuery themes vs 2,769.74ms for non-jQuery themes, a lower value meaning faster loading performance). Of course jQuery is by far not the only aspect that factors into LCP, and the performance between different themes varies greatly. Yet, the at-scale analysis shows a clear correlation indicating that removing jQuery from a theme will bring a performance boost.
If you are using jQuery extensions, for example anything based on jQuery UI, migrating away may be less trivial, depending on the complexity of the feature that the extension provides. You may want to research alternatives not based on jQuery that offer similar functionality – if there is one that satisfies your needs, it may be worth migrating your codebase to it, as jQuery still adds some overhead compared to using vanilla JS. For example, Twenty Thirteen relies on jQuery-based Masonry, but it could easily use vanilla JS-based Masonry instead. It should be evaluated on a case-by-case basis though – for some complex use-cases replacing jQuery may not be feasible. Or it may not be worth the effort, for example if the vanilla JS extension that would replace the jQuery extension and jQuery core is not notably smaller or more performant. Yet, not using jQuery can always be considered the general recommendation.
Potential next steps in reducing jQuery usage