Your WordPress is slow? Then you are wasting a lot of potential. Not only are your visitors annoyed by slow loading times, you may also lose visibility in Google. I will 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 confirming that slow websites equal less sales on balance. Mobile users in particular will abandon a site 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 the visitors also want to see or download. Faster is always better, but it also depends on the expectations of the visitor. For example, apple.com has notoriously poor performance scores:

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 optimizing 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.

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, highlighting a text passage, clicking a link or button, etc. It could be that a site has a search box. Maybe this site takes a total of 10 seconds to fully load. How fast can someone click the search box and type in the box? Keep in mind here: the "user" is not always a human. Often it is bots interacting with pages. For example, the Google bot that measures the performance of a site and includes these values in the calculation of rankings.

The "Cumulative Layout Shift " (CLS) is to be avoided throughout. If a layout "shifts" during loading, it 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/height values 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-centered, 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 skillful structure of the site and the correct use of HTML, CSS and JavaScript.

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:

• PageSpeed Insights from Google
• GTmetrix
• Lighthouse is built directly into Google Chrome's developer tools.
• TREO Site Speed

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

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 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 if 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 hosting for 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 host offers 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 plans for the WooCommerce hosting of your online shop. It goes without saying that the larger packages provide an additional performance boost.

One thing is clear: if you pay more, you usually get more performance. This of course applies to all hosts. 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 website 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 plugin inserts 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 site and 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:

• WP Fastest Cache (free + chargeable)
• LiteSpeed Cache (free of charge, but only works with the LiteSpeed Web Server)
• WP-Optimize (free of charge + chargeable)
• WP Super Cache (free, from the WordPress manufacturer)
• Hummingbird (free of charge + chargeable)
• WP Rocket (fee required, here my tutorial on YouTube)
• Cache Enabler (free of charge)
• Borlabs Cache (fee required)
• Hyper Cache (free of charge)
• Comet Cache (free + chargeable)

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 a caching plugin. 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 plugin or 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.

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:

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.

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.

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 optimized 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:

• Astra
• GeneratePress
• Blocksy
• Kadence

These are true meta themes, so they allow just about every layout option imaginable, they have an enormous selection of fancy layouts and are optimized 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.

Optimize 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 colors 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 percent and often achieves 50 percent 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:

• Smush
• Optimus
• EWWW Image Optimizer
• ShortPixel Image Optimizer
• TinyPNG
• Imsanity
• Imagify
• reSmush.it
• Kraken.io Image Optimizer
• WP Compress
• Autoptimize
• WP Offload Media
• Optimole
• Hammy
• Robin image optimizer
• WP Compress
• Imsanity

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.

Most optimizers 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 optimize 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 causes an image to load only when your visitors scrolls to the place where it appears on the site. Most image optimizers support this. Whereas there are also free plugins for this, for example Lazy Load from WP Rocket and Lazy Loader. Also videos can or should be loaded only when "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 site or post. There are several possibilities that lead to the goal.

An example: The WordPress website uses a form manager like WPForms. This plugin loads 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 here:

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.

A plugin like perfmatters has more than two dozen optimizations in the normal options alone. Are they all useful? That depends on how well WordPress users know the features. For example, the RSS feed can be turned off, which saves a few bytes. But it also means that visitors of the website can no longer easily subscribe to the posts via RSS feed. So you should think twice about that.

It is astonishing how many gimmicks WordPress has activated by default (emojis, dashicons, etc.). They can be deactivated safely. 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 site is 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, accessingwc-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.

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 optimizing for FCP and LCP, there are nowadays ways of achieving drastic performance gains via various plugins and even directly in the themes. In my tests, these are often the best techniques for bringing sites into the 90-100 range. It is the delayed reloading of the CSS and JS files.

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

The "Defer option" ensures that JavaScript is only loaded later in the rendering process. HTML and assets are loaded before JS. In practice, this means that interactive elements in particular are not immediately available in the first few seconds. But the site itself 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 enormous, but after activating it, you have to check every site to see if it still works properly.

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

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. One part of the site looks the same (colors, 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.

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 a test is necessary. But if the test is a success, the boost is really big.

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

Conclusion - Speed Up WordPress

There are many levers for optimizing WordPress performance. Fast WordPress hosting is important and the basis for everything. But only fast hosting alone 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.
• Optimize the loading sequence. Deferring CSS and JS by means of plugin or service or loading what is really necessary first, then the rest (keyword: Critical CSS).
• Get rid of unnecessary ballast: Do you 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.