Tag: performance

Removing all default WordPress CSS styles

The weet theme is extremely fast. One of the ways to achieve this, is by not loading any of the styles that are shipped with WordPress.

After updating to WordPress version 6.4, I noticed that a stylesheet was loading with this theme. Apparently a new stylesheet was introduced. I used the excellent Query Monitor plugin to tell me where this was loaded. Turns out that a separate stylesheet for components exists.

Query monitor panel showing CSS source link for the wp-components handle

In classic themes you can remove stylesheets with PHP if you know the appropriate handle.

function my_dequeue_styles() {
  wp_dequeue_style( 'global-styles' );
  wp_dequeue_style( 'wp-block-library' );
  wp_dequeue_style( 'classic-theme-styles' );
  wp_dequeue_style( 'wp-components' );
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_styles', 10, 0 );

In that case you also have to provide your own CSS.

It seems that I have to keep my eye on changes in WordPress and update the weet theme accordingly.

Is WordPress slow?

Web sites built with WordPress have the reputation to be slow. And a lot of them are. But so is the average web site. So what factors do matter?

Recently, I saw a post on the fediverse, mentioning that the person showed their bespoke web site to a young WordPress developer and how much faster it was. The argument was that you don’t need systems. So I compared that site with wee.press using Google Pagespeed Insights. Their site was fast, but slightly slower. So it all depends. Although I have come across WordPress sites with a performance score of 0 (as in zero) 🤦.

Comparison of their site and wee.press in Google Pagespeed Insights

Pagespeed Insights is a synthetic test, meaning it is simulated. It is an indicator of how well a site might perform. To be clear, this score has no influence on your actual SEO ranking. Google uses real data from people that use the Google Chrome browser.

So, the system used to build a site is usually not that important. It comes down to how well it is configured. To understand performance you will have to look at the frontend and backend.

The frontend is everything that gets send to your web browser: HTML, CSS, JavaScript, fonts, images.

All this is send by the backend (the servers that run WordPress). This is were PHP gets executed (the programming language). And where the database runs, that stores your content (typically MySQL or MariaDB).

The Performance Golden Rule by Steve Souders is still relevant:

80-90% of the end-user response time is spent on the frontend.
Start there

Pagespeed Insights can help to identify some problems. You can also use the developer tools from your web browser. With the F12 key you can open these tools. In the network tab you can see what is loaded and how long this takes.

The network tab from the developer tools in Firefox for wordpress.org

I also like to use Yellow Lab Tools to identify performance issues. It returns different aspects as a nice list. That has helped me in the past to quickly identify problems with clear actions that need to be taken.

Optimising the frontend is mostly about identifying assets that should not be loaded. Unfortunately this takes time and effort. If you start a new site, you have the opportunity to decide if adding a plugin has a performance impact. Preventing a slow web site is easier than fixing it. But I know that WordPress makes it (too) easy to quickly add new features.

Using a fast theme is also a good start. Multi-purpose themes tend to be slow, because they offer a lot of features, usually with a performance cost. Unfortunately, the theme directory does not provide help in this matter. There is no feature filter for speed.

If you have identified styles and/or scripts, you will have to remove them partially or completely. An example on how to do this for the Twentysixteen theme, is available on GitLab. I created this child theme for a meetup site. It uses a couple of functions to disable some features: wp_dequeue_style, remove_theme_support, unregister_sidebar. To disable scripts you can use wp_dequeue_script.

Images are not that big of a problem in WordPress any more. Lots of new features were introduced, including responsive images, lazy loading, optimising the image quality, and limiting the maximum size. And more is coming, like support for newer image formats.

If you have a slow backend, this is usually caused by some plugin. To track down backend performance issues, I can recommend the Query Monitor plugin. This shows you how long a page takes to load, the amount of database queries, and what PHP functions were used.

Information from Query Monitor in the WordPress admin toolbar

Good hosting also helps with backend performance. There is a performance page on WordPress.org about aspects that matter for hosting. Here you can find technical information on different aspects of backends.

A caching plugin can help, if you have a content site. I like to use Surge. For web shops or membership sites this will not help much. Here you need to add an object caching solution, like Redis or Memcache. This is something you cannot install as a plugin. Your hoster needs to support it. More information can be found on the above mentioned performance page.

Using a Content Delivery Network (CDN) can be helpful, if you have a lot of traffic and a global audience. It also helps against distributed denial-of-service (DDoS) attacks. But for small or locally focused sites this is not worth the effort, in my opinion.

Improving the speed of WordPress is an ongoing process and there is a dedicated performance team working on it. So with every new WordPress version you should get a bit faster site. You can follow the ongoing developments by installing the Performance Lab plugin.

What I would like to see in WordPress, is improved asset loading. Assets (especially styles and scripts) should only be loaded if they are necessary on a page. CSS and JS in plugins and themes are usually loaded on all pages. This causes the majority of the performance issues. There are some plugins to help to optimise loading assets, but this cannot be fully automated. I usually do this by hand.

Understanding how to measure performance helps to improve your WordPress site. Or any other web site. So, stop building slow web sites, pretty please 🙏