Performance optimization of WordPress sites

The speed of websites is of increasing importance for the rankings assigned to a website by Google. In order to sustainably increase the placement of your own website and thus increase its visibility, performance optimization is of increasing importance. Why is that and what can you do specifically?

Motivation for the shortest possible page loading times

Every user wants to be able to view the websites they have selected in the shortest possible time. Google addresses this acceptance criterion with higher rankings for websites that have low page loading times.

A BBC study showed that with every second of additional waiting time, 10% more users leave the site prematurely. This is already a fundamental issue in the desktop area.

However, at the latest with the widespread use of mobile devices, which only have a small bandwidth, the difference between fast and slow loading websites becomes very clear.

So what can a website operator or even SEO do to make their website load faster without losing functionality? We will approach this question in more detail with the focus on WordPress pages in this article.

What is performance?

First of all, the often-cited term of performance. What does it mean exactly? Strictly speaking, it’s synonymous with performance. In physics, performance is the work done in a specific time.

Performance = work / time

What does that tell us?

How can you fundamentally increase the performance?

In order to increase the performance of a website, you could do three things:

1. Reduce the work to be done so that less work has to be done per unit of time
2. Increase the infrastructure resources so that more work can be done per unit of time
3. Both of the foregoing

In fact, we as SEO take care of both reducing the work to be done and increasing the throughput of work done.

But how exactly can this be done? To do this, it makes sense to take a look at the individual components of a website in general and WordPress in particular.

The architecture of modern websites

A modern website comprises the following levels:

1. Server hardware (CPU, memory, hard drives)
2. Web server software (Apache, nginx, etc.)
3. PHP level (settings within php.ini)
4. Database level (MySQL, Oracle, etc.)
5. Content Management System (CMS) (WordPress, Typo3, etc.)
6. Plugins within the CMS (WooCommerce as a shop system, etc.)

We can distinguish the level of the plugins into:

1. Plugins that provide functionality for website visitors (shops, surveys, forums, etc.)
2. Plugins that provide functionality for the website operator (SEO plugins, browser cache plugins, image optimization plugins, etc.)

The latter can offer added performance. We will talk more about this later. But first we should look at what performance plugins can do and why this is an improvement. However, it also automatically becomes clear where the limits of performance plugins are. This makes it easier for you as an SEO to understand what is necessary for the sustainable speed improvement of your website.

The levels of performance optimization

Analogous to the architecture levels above, we can include the following levels to increase performance:

1. Server hardware optimization: Increasing the resources of the web server (CPU with a higher clock rate and / or multiple cores, larger memory, faster hard drives, e.g. solid state drives)
2. Web server optimization: activation of modules and options at web server level (explained later)
3. PHP optimization: Settings within php.ini (e.g. activation of transfer compression, etc.)
4. Database level: Use of options for increasing the throughput of database operations (e.g. providing a read replica)
5. CMS level: establishment of a lean theme / template
6. Plugin level: Deactivation of all unneeded CMS plugins, use of performance plugins, correct settings within all optimization plugins

The higher level always influences all of the lower levels. This automatically means that performance plugins can only take effect at the CMS level and cannot speed up operations above the CMS. For example, a plug-in cannot increase server resources or compensate for misconfigured server or PHP settings, since each plug-in depends on them in order to function.

Plugins are directly dependent on the correct basic configuration of the overall system. Then plugins can optimize what is delivered to the user as a website. It is therefore worth optimizing at all the aforementioned levels in order to effectively reduce the loading time of your own page. Plugins alone are not enough.

We will now go into detail on the individual optimization levels.

The selection of high-performance server infrastructure

First of all, the name of the first optimization level already provides the reason why websites, especially complex CMS such as WordPress, should not be rented on externally hosted servers such as wordpress.com.

Even if you come to a result here quickly and do not have to do much configuration work, this is precisely where the disadvantage lies: you then have no influence on the configuration.

If you don’t want to put a server in your office or rent a root server that has to be looked after, a middle ground is recommended. Renting a well-equipped managed server doesn’t have to be expensive. The company Hetzner supplies very cheap and high-performance server tariffs. Various adjustments to the server and PHP configuration can also be made afterwards.

Concrete recommendation

A server with at least the following hardware characteristics is recommended:

• CPU e.g. Intel® Xeon® E5-1650 v2 Hexa-Core
• RAM at least 64 GB DDR3 ECC
• Hard drive for example 2 x 500 GB SSD
• Network: 1 GBit / s port connection with guaranteed bandwidth

Optimizing the web server environment

At the web server level, a number of equipment features and extensions are recommended, which can reduce and accelerate the delivery of the data sent from the web server to the client’s browser.

Concrete recommendation

A web server with the following software is recommended:

• Apache with the option for the following extensions: mod_http2, mod_deflate, mod_brotli and mod_pagespeed
• PHP5 and PHP7
• MySQL with managed backup functionality or, optionally, use of external database systems such as Relational Database Services (RDS) from Amazon Web Services (AWS)
• SSH access
• Integrated backup functionality for backing up the web space

The selection of optimal PHP settings

Closely interwoven with the web server level is the extension of the hypertext precompiler used on the server, or PHP for short, which is responsible for the dynamic generation of HTML output based on computing and database operations.

The characteristics of the PHP level can be configured via php.ini, for example. The PHP scripts running on the server can also change some settings.

It is advisable to activate the following PHP extensions in order to provide basic functionalities that can accelerate the execution of the PHP scripts or reduce the amount of data generated by them.

Concrete recommendation

We recommend activating the following extensions:

• APCu
• OPcache

Further adjustments on the server and PHP side are useful, which affect the level of the content delivered via the server. However, this will only be discussed further below.

Optimizing the database environment

At the level of the database system, the data that is later read by the CMS (and possibly written by the visitor to the CMS frontend) must be made accessible in a high-performance manner.

Concrete recommendation

It is advisable to use options to increase the throughput of database operations, for example by maintaining a read replica. This can, for example, be booked as an option in upscale infrastructures such as the Relational Database Services (RDS) of Amazon Web Services (AWS).

In addition, self-created scripts must be developed in such a way that unnecessary access to the database is avoided. The transfer of PHP-intensive evaluations into the database system can in turn mean a performance advantage, since the amount of data that has to be read from the database and then processed is reduced.

WordPress performance tuning

A content management system like WordPress is essentially used to provide the function for separating the layout and content of a website or blog.

No matter what content (text, images, videos, etc.) your blog has, it can always be displayed in completely different ways by selecting or developing a different theme (new color scheme, new position of menus, widgets, sidebars, header, footer, favicon and much more).

This separation of layout and content is a very important basic requirement in the fight against loss of performance. So you can optimize the theme without endangering your content.

What can still happen, however, is that you negatively influence the display of your content by incorrectly adjusting your theme.

Even if we are going to talk about plugins and their powerful possibilities for performance optimization right away, it should already be said at this point that careless handling of the settings of performance plugins generally has disadvantages in terms of both speed and presentation of the theme can.

For this reason we prefer to describe in the following “on foot” which specific actions can have advantages in the rapid delivery of a website and why. The following video can serve as an additional source of motivation and information about why such adjustments are important and how you can make them.

Record the initial state as an optimization reference

In the course of optimizing for performance at the CMS level, the question always arises: what can I leave out? In order to answer this question it is of course important to clarify: what has been charged so far? Here you can use the following tools:

1. https://tools.pingdom.com
2. https://www.webpagetest.org
3. Google PageSpeed Insights
4. SERPBOT Performance Checker
5. GTMetrix

Once the current performance status of your website has been recorded, you can start accelerating the theme and content of your WordPress site.

Acceleration of the WordPress theme

Manual measures to adapt your theme from here on are in particular the following:

1. Only use the Cascading Style Sheet (CSS) definitions that are absolutely necessary to display your website. Particularly complex function plugins such as WooCommerce or OptimizePress define tons of new style definitions that are not necessarily required. Therefore, at least thin out the style definitions of the theme you are using as far as you can.
   Caution: Always use the function for creating child themes in order not to endanger your basic theme and to make it maintainable. Otherwise, you will no longer be able to update your basic theme or you will lose all the adjustments you have made.
2. Only load scripts (like JavaScript) that you actually need. Themes often load prophylactic scripts that provide theme functionalities that you have not necessarily activated. Examples are sliders, more complex contact forms or video players. In order not to load scripts that have been loaded so far, you can go to the functions.php of your theme and explicitly prohibit certain scripts from loading. See the functions wp_deregister_script und wp_deregister_style
3. Theme files (such as CSS and script files) are static and their delivery can be accelerated by caching at the server and browser level. A cache validator should be specified for the browser level.
4. Minify all CSS and script files. Line breaks, paragraphs, comments, tabs and spaces are not required for the execution and slow down the delivery. You can do this, for example using https://www.minifier.org/ or https://csscompressor.com/ or https://jscompress.com/ or other sites you may find.
5. Combine scattered CSS files and script files into one central file each to reduce unnecessary request overhead.
6. Some scripts can be loaded offset. This should be done carefully, as the functionality of your website may be limited if interdependent scripts were loaded too late.
7. Small CSS definitions and script content should be defined inline (within the HTML code) in order to reduce unnecessary network requests and file loading times.
8. If possible, use a content delivery network (CDN) to deliver static files such as CSS and script files. Here, for example, Amazon CloudFront from AWS comes into question.

Accelerated delivery of content

1. Deliver pictures in the size in which they are displayed. There is no reason to deliver an image with a higher resolution than is ultimately necessary for its representation. The image size ultimately displayed should also be explicitly defined in the <img> tag.
2. Automatically load only those images that get into the browser’s viewport by scrolling. Normally, all images on a page load completely down to the last image. This slows down the loading of the website enormously, especially with large image files. Here you might want to use a plugin; we’ll come to that in a moment.
3. Use compression methods to optimize all of the images used in your articles without sacrificing visible quality. You can do this, for example using tinyjpg.com or ezgif.com.
4. If possible, use a content delivery network (CDN) to deliver your image files. Here, for example, Amazon CloudFront from AWS comes into question.

Plugin tips for WordPress

Many of the functions mentioned above are greatly simplified by various plugins, which are described in more detail below.

But first a word about plugins in general. The rule is: the less, the better. If a plugin is not required, deactivate it. (For security reasons, you should even delete it.)

Some of the data of the plugins that are left over are usually just as optimized as the theme you are using. But at this point we do not want to recommend that you make changes to your plugins.

Rather, you should leave this task to another plugin that is specially designed to optimize performance. It is important to choose wise settings and to test after each step whether your site still behaves visually and functionally as you expect.

Concrete recommendation

We recommend using one of the following performance plugins:

1. WP Fastest Cache
2. W3 Total Cache
3. Pagespeed Ninja
4. and others

Please keep in mind that the manipulation of scripts (e.g. delayed loading, but also the miniaturization of the source code) can lead to certain functions of your site no longer behaving as intended.

You should therefore not only check for visual changes, but also test all functions again after each new setting (for example, carrying out an order process in your shop system). Remember to reset the page cache and your own browser cache before every test, otherwise you will check an outdated status.

The performance conclusion

A comprehensive performance optimization of WordPress-based websites should be done on several levels due to the complexity of the underlying technologies. From the infrastructural to the web server and database level to the level of theme and content optimization, there are various options. On the one hand, it is important to reduce the work to be performed by the system and, on the other hand, to increase the ability of the system to perform the remaining work.

Only a part of these tasks can be accomplished by performance plugins. The respective plugins are ultimately dependent on the possibilities, restrictions and existing settings of the underlying system. In order not to put too much energy into the preparation of the theme and content, it is recommended to use them. Here, however, a comparison should always be made between before and after optimization in order to understand the effectiveness of the changes.

Under no circumstances should a function test of the website be missing after optimization. Both the visual elements of a website and its functions themselves are prone to errors due to inconsistent optimizations. We wish you every success with your optimization project and are available to answer your questions immediately.