WordPress performance

Make WordPress Faster: The Best Tips for More Performance

Your WordPress is slow? Then you are wasting a lot of potential. Not only are your visitors annoyed by the slow loading times, you may also lose visibility in Google. I'll show you step by step how you can make WordPress faster.

If you sell something through WordPress, for example with WooCommercethen there are enough studies that confirm that slow websites make less sales on balance. Mobile users in particular will abandon a sitepage if it takes longer than three seconds to load. Faster websites are essential for the survival of your business.

Measure speed

If you want to make a website faster, you first have to measure how fast/slow it is before optimization. The pure loading time is important, but not necessarily decisive. Some websites simply have large "assets" (for example images and video) that visitors want to see or download. Faster is always better, but it also depends on the expectations of the visitors. For example, apple.com has notoriously poor performance:

Performance Apple website
Poor website performance at apple.com

That is not exactly optimal. However, this circumstance is well founded. Apple places extremely high value on displaying its own products in the highest possible quality and therefore uses enormously large images without optimising them, as this tutorial for WordPress shows. Visitors to Apple put up with this and are happy to wait a little longer for the site to load.

Overall, the performance of the Apple pages feels quite fast. Especially the display of the first elements is usually lightning fast. These are measured under the aspect of "First Contentful Paint " (FCP). The FCP determines in perception how fast the loading of a site"feels". Therefore, FCP plays a particularly important role in optimization. Values of 2 to 3 seconds should not be exceeded. Less than 2 seconds or faster is better.

First Contentful Paint
Good values at the First Contentful Paint

The "Largest Contentful Paint " (LCP) reflects the loading time of the remaining elements from the main content. If you can stay under 3 seconds here, you're already pretty good. However, large product images and similar assets can also push this value up significantly, which is perfectly okay depending on the purpose.

The "First Input Delay" (FID) measures the time that passes before your visitors can actually interact with the page. For example, marking a text passage, clicking a link or button, etc. It could be, for example, that sitehas a search box. Maybe this sitetakes a total of 10 seconds to load completely. How quickly can someone click on the search box and type into the field? Keep in mind here: the "user" is not always a human. Often it is bots that interact with pages. For example, the Google bot that measures the performance of siteand includes these values in the calculation of the rankings.

The "Cumulative Layout Shift " (CLS) is to be avoided throughout. If a layout "shifts" during loading, this can be enormously irritating for your visitors. Clicks on the wrong button can be the result. In most cases, such shifts are caused by missing width and length specifications (width/height) for images. The CLS should always be 0.

These four values are therefore decisive when evaluating the speed of a WordPress website. They are user-centred, i.e. not raw performance values such as time to first byte, which plays a major role in assessing server performance or the connection to the server. This also means that these values are less determined by caching and selection for WordPress hosting, even if this of course also plays a major role in WordPress performance. Rather, they are determined by the skilful structure of siteand the correct use of HTML, CSS and JavaScript.

Reduce HTML, CSS and JavaScript

Minifying HTML, CSS and JavaScript files is one of many small levers to optimise the loading speed of your WordPress website. In the article Reducing HTML, CSS and JavaScript in WordPress, we explain how you can save loading time through lean code.

Performance optimization has become quite complicated in recent years. Especially since Google announced that these user-centric performance criteria will be included in the ranking calculation. The best tools to measure your WordPress performance:

I personally like TREO because it is fast and clear. PageSpeed Insights and GTmetrix are extremely detailed.

Performance Treo Site Speed Report
Evaluation at Treo Site Speed

With this knowledge and the tools, you are well equipped to measure your own performance. If you are doing this yourself, I suggest the following approach:

  • First measure the initial state. How fast is your website before optimization?
  • Activate or implement an optimization.
  • Then you can measure the performance again. Has it demonstrably made a difference? If not, remove the optimization and try something else. If yes, then keep the optimization. Test whether everything still works as before and add another optimization.

Many try to achieve a score of 100 at PageSpeed Insights . There is nothing wrong with that for now, except that it is not necessary to get the full score. Other tools measure differently and what a 100 is at PageSpeed Insights may not be so good at GTmetrix. Besides, getting from a 30 to a 90 is clearly more important than getting from a 90 to a 100.

Improve WordPress performance

Faster WordPress Hosting

THE fastest hostin every situation and at every time does not exist. There are too many factors that affect the delivery time and processing of requests. The following factors do not make the assessment easy:

  • Time of day
  • Server utilisation
  • Geolocation
  • The speed of the user's connection.

Nevertheless, each hostoffers different packages that can have a significant impact on the performance of a WordPress website. Entry-level packages are usually cheaper and naturally not as fast. Therefore, one of the first sensible optimizations is actually to upgrade the package.

At Raidboxes , for example, there are starter packages in Managed WordPress Hosting that take care of the administrative work with WordPress and already include optimizations such as server-side caching. But there are also particularly high-performance packages in High Traffic Hosting, for example for projects with very high access numbers. Also special plansfor the WooCommerce hosting of your online shop. It goes without saying that the larger packages provide an additional performance boost.

Which WordPress hosting for which project?

You are unsure how much power or which package you need for your website with WordPress or WooCommerce ? Or how much the speed of your website can actually increase after migration? Our WordPress experts will be happy to advise you, also on the topic of WordPress performance.

One thing is clear: if you pay more, you usually get more performance. This of course applies to all host. Almost all performance tweaks are increased by tariff upgrades. But what can be gained without switching directly to a higher plan?

Use WordPress Caching

Apart from the simplest blogs, almost every WordPress site uses a variety of other plugins. As a rule, plugins delay the loading time by a fraction of a second every time a page is called up. Especially when the plugininserts elements into the HTML code, which then have to be loaded additionally or else perform further database queries.

What if WordPress only had to do these additional "tasks" once per siteand simply retrieved the result of these "additional" operations from the cache on the next call? This would significantly speed up the next loading process, because the server would only have to deliver a finished file. Ideally, no further calculations take place, which drastically shortens the loading time. For example, a site, which has an uncached loading time of 5 seconds, can be delivered within milliseconds. Improvements in speed between 20 and 100 times faster are not unusual when caching is switched on.

Caching solutions are essential for speeding up WordPress websites. Ideally via a server-based solution, more on that in a moment. Otherwise, use one of the caching plugins that are very popular in the community:

Paid plugins usually have more features. However, free plugins help in most cases to tease out 90 percent of all possible time gains.

However, caching plugins are like a bandage. They hide problems that would be better fixed from the start. They don't necessarily remove superfluous HTML, they don't compress image files that are too large, they don't necessarily change the order in which JS and CSS files are included, and so on. Even cached pages can thus still be slow.

If you work cleanly from the outset, you don't really need cachingplugin. At least in theory. Because caching in general naturally relieves the server and is therefore always recommended. I'm more concerned here with the argument for good planning and clean, well-thought-out code.

In addition, Raidboxes relies on a particularly high-performance, server-side caching. This means you don't need an additional pluginor a paid solution.

Flex containers instead of columns and rows in the Page Builder

Page builders or site builders have become indispensable for many agencies and developers, as they make the design of pages and articles much easier.

Advantages and disadvantages of page builders

Page builders are controversial in the WordPress scene. While some praise the ease of use, others criticise the inefficient source code or bloated websites. See our postsPage Builder: Curse or Blessing, Page Builder Features and 16 Popular WordPress Page Builders in Comparison.

For over 10 years, it has been standard procedure in all popular page builders to create the layout with columns and rows. This often leads to a nested DIV salad:

Page Builder div Source Code
Nested source code

This often happens on every single site, which usually inflates the code unnecessarily and can also have negative effects on the FCP. This can usually be avoided by clever planning when creating the layout. Site builder manufacturers are now taking the CSS standards Flexbox and Grid into account when creating layouts. This is good news, because it reduces the amount of code.

Performance Elementor Flexbox Container
Activate Flexbox Container in Elementor

In the current version of the Elementor page builder, for example, the flexbox container can be activated in the settings. This not only gives you more flexibility in the design, it also reduces the HTML code and makes loading times faster.

A click on Direction -> Row aligns the containers in a row. A simple three-container structure will not immediately improve performance dramatically. But if all sections, rows and columns are implemented with this new technique, the gain can be significant. Especially over many pages and also when optimising FCP and LCP.

Elementor Container Flexbox
One container with three subcontainers

The feature is still in alpha stage at Elementor. Other builders have been using this new approach for some time and all builders will offer it in the future. It is therefore worthwhile to adopt the new way of working into the workflow as soon as possible.

It is less important to use CSS-Flexbox and/or CSS-Grid, but to avoid nesting. Theoretically, even a table-based layout from the 2000s can be optimised by "de-nesting".

The right WordPress Theme

There are thousands of themes for WordPress. I'm sure they're all already optimally trimmed for performance, right? Wrong. Most themes concentrate on looking pretty. From a sales point of view, that makes sense. Themes are mainly chosen for their attractiveness. Very few WordPress themes really care about making lean code a priority - or as far as Page Builder is concerned: creating lean code.

These themes and builders are currently recommended from my point of view:

These are true meta themes, so they allow just about every layout option imaginable, they have an enormous selection of fancy layouts and are optimised for performance from the ground up. Most of these WordPress themes can be combined with other page builders like Elementor. Some have their own page builder.

Optimise images and other elements

The vast majority of websites use images. Larger images often look better, but also increase loading times. Smaller is better, but regardless, there are a lot of tips to consider:

  • Maximum dimensions of less than 2,000 pixels are recommended. Larger images open better in a new window.
  • The right format is crucial. JPEG for photographic images with many colours and shades, PNGs and GIFs can be much smaller for images with fewer colours. The best thing is to try it out.
  • Vector graphics such as logos and illustrations look great as SVGs, are infinitely scalable and also small. SVGs are also pure text files with instructions from which a graphic is created. As text files they benefit from GZIP compression, more on that in a moment.
  • Google's WebP format can reduce JPG files by another 25 to 34 percent.
  • WebP has been around since 2010, but the new AVIF format reduces WebP by another 30 per cent and often achieves 50 per cent savings compared to JPEG. AVIF does not yet have full support for all browsers, but this is growing from month to month.

There are plugins that convert your images into all formats when you upload them and then simply embed the smallest file. Here are the most popular plugins for WordPress:

WP Compress has a very clear interface and performs compression tasks in the background. The extension is not exactly cheap, but very convenient. If you would rather start with a free plugin, you should take a closer look at Imsanity.

WordPress Performance WP Compress plugin
A report of the WP Compress plugin

Most optimisers have a premium model that limits either by image size or number of images. The exception is Robin. Should you even pay for such a plugin? It depends on how much control you need. It is alternatively possible to optimise the images yourself with desktop tools, or on the command line(optimizt, compress-images) or online before uploading(TinyPNG, Shortpixel).

Most plug-ins also create images in different, smaller sizes. Depending on the resolution of the user's browser, a significantly smaller file is directly integrated, which again leads to significant performance gains.

Lazy loading means that an image is only loaded when your visitors scroll to the point where it appears on site. Most image optimisers support this. Most image optimisers support this. There are also free plugins for this, for example Lazy Load from WP Rocket and Lazy Loader. Videos can or should also be loaded only when they are "reached", see Lazy Load for Videos.

Cache fonts

Besides images, any other assets can be cached locally (on the server). This not only improves compliance with international data protection laws, it usually also improves performance. Especially if the fonts are cached. Then the browser downloads them once and displays them directly the next time without having to load them first. This works well with the WordPress pluginOMGF host Google Fonts Locally, for example.

Selective loading of assets per site

A particularly effective method to gain more speed is to selectively load CSS and JS files according to siteor post. There are several possibilities that lead to the goal.

An example: The WordPress website uses a form manager like WPForms. This pluginloads its form functions immediately on each site. However, this functionality is only needed on the contact page. Freesoul Deactivate Plugins is a plugin that supports this:

Deactivate Plugins WordPress Performance
Activation or deactivation of plugins per subpage

It enables the activation or deactivation of all plugins per site via a matrix. It is also possible to use performance plugins such as perfmatters for this purpose, which also prevents the delivery of CSS and JS files. However, Freesoul suppresses the loading of the entire plugin, thus also reducing the work that has to be done in the background on the server.

Tweaks with perfmatters

Is it worth buying a plugin like perfmatters? Thoeretically, all optimizations can also be done manually or with other plugins. However, that would be an insanely high amount of work, especially if it has to be done for several WordPress websites.

In the normal options alone, a pluginlike perfmatters has more than two dozen optimizations. Are they all useful? That depends on how familiar WordPress users are with the features. For example, the RSS feed can be switched off, which saves a few bytes. But it also means that visitors to the website can no longer simply subscribe to postsvia RSS feed. So you should think carefully about this.

Perfmatters WordPress Performance pluginOptions
Just some of the options from perfmatters

It is astonishing how many games WordPress has activated by default (emojis, dashicons, etc.); they can be deactivated safely for the time being. You should be more careful with the settings related to the database. Theoretically, deactivating the revisions could waste a lot of working time. If a cache is used anyway, database optimizations are usually not very important.

In contrast, using Google Maps on a siteis usually a disaster for performance. These maps should really only be loaded if urgently necessary. Many themes include a map on the start page, for example, but this is not absolutely necessary. With WooCommerce online shops, calling wc-ajax=get_refreshed_fragments can cause severe delays. These can be switched off with "Disable card fragments".

In any case, it is worth taking a look at the documentation of perfmatters and WP Rocket. If you really want to dive in, you will find a lot of starting points there. Of course, you can also just buy one of these plugins and save yourself a lot of time. However, you will understand less about what happens in the background.

Minification

Minification removes unnecessary characters, especially spaces and tabs from HTML, CSS and JS files. It is more best practice than it really gives a big performance boost. With Autoptimize, minification can be switched on or off very easily.

Gzip compression and Brotli

Compared to minification, compression often grinds down more than 50 percent of the file size of text files. It is definitely worthwhile to switch this on, for example the Brotli compression algorithm. In most cases, such compression is already switched on by the web hoster. If not, there are additional tools that store the files compressed in the file system. Above all, because the compression of text files is usually much more effective.

Raidboxes Brotli Gzip Compression
84.5 percent savings are impressive

Brotli is a compression format developed by Google that is even more efficient than Gzip. Of course, Brotli is also supported by Raidboxes .

Significant optimizations for JavaScript and CSS

Especially when it comes to optimising for FCP and LCP, there are nowadays ways of achieving drastic performance gains via various plug-ins and even directly in the themes. In my tests, these are often the best techniques for bringing siteinto the 90-100 range. It is the delayed reloading of the CSS and JS files.

In the free pluginAutoptimize there is a setting "Aggregate JS-files". This is activated by default. To enjoy real acceleration, the following settings are necessary:

Autoptimize Javascript Options
JavaScript options from Autoptimize

The "Defer option" ensures that JavaScript is only loaded later in the rendering process. HTML and assets are loaded first, then JS. In practice, this means that interactive elements in particular are not immediately available in the first few seconds. But the siteitself is displayed as fast as lightning.

Since JavaScript can programmatically reload just about anything it wants, this technique should be treated with caution. A lot can go wrong here. This is also the reason why the option is not activated by default. The performance gain can be gigantic, but after activating it, you have to check every siteto see if it still works properly.

The same applies after each update and when using new plug-ins that may bring their own JavaScript files into play. Activating this option is therefore only advisable if you can invest some time afterwards and regularly to check it.

Autoptimize CSS Options
Part of the CSS options of Autoptimize

The situation is similar for the CSS files. Eliminate render-blocking CSS" must be activated here. With CSS instructions, there is the additional problem that certain pages or even areas on the website should look slightly different. Part of sitelooks the same (colours, fonts, position of the header), but another part looks different (image in the header, additional info in the footer, etc.).

Autoptimize refers here to an external and chargeable service that attempts to solve this problem. "Critical CSS" is the CSS that must be loaded at the very beginning. The rest can be loaded later.

Critical CSS Autoptimize
Reference to the Critical CSS Service

Plugins like WP Rocket and perfmatters also have such a function. How well this works depends on which plugins you would like to use on your own WordPress website. So it only works with a test. But if it works, then the boost is really big.

Getting this function for free is currently almost impossible, because it is a hard problem. Because every website is different. Even every subpage on a website is different and changes constantly through updates. The only way to get 100 per cent performance out of this is to develop a deep understanding of what actually happens when each siteis loading. Only if you are willing to take this time-consuming path can you actually achieve a 100 for each site.

Conclusion - Making WordPress faster

There are many levers for optimising WordPress performance. Fast WordPress hosting is important and the basis for everything. But only fast hosting does not guarantee top speeds. For this, it is necessary:

  • Make the assets on the website as small as possible, i.e. compress them.
  • Select the right format (such as WebP or SVG). Only load images that are as large as necessary for the respective purpose (desktop vs. tablet vs. mobile).
  • Enable caching or use server-based caching: Once a resource is "assembled", it can be loaded from the caches until something changes. External resources such as Google Fonts should also be loaded from your own server.
  • Optimise the loading sequence. Deferring CSS and JS by means of pluginor service or loading what is really necessary first, then the rest (keyword: Critical CSS).
  • Get rid of unnecessary ballast: Do we really need emojis for every loading process?

The most important tip I can give you from practical experience: Caching and deferring usually provide 90 percent of the performance. So this is where you should focus your own optimizations. I wish you much success and high speed for your projects with WordPress and WooCommerce.

Your questions about WordPress performance

What questions do you have about making WordPress faster? Feel free to use the comment function. You want to be informed about new postson WordPress and WooCommerce ? Then follow us on Twitter, Facebook, LinkedIn or via our newsletter.

Did you like the article?

Your rating helps us improve our future content.

Post a comment

Your email address will not be published.