How to optimize the load time of WordPress pages

Here, you have to differentiate between three areas: server, images, and theme optimization.

1. Server optimization

In over 80% of the cases, the sluggishness of WordPress pages can be attributed to the execution of the PHP code, and the rest to the database.
Unlike with PHP 5.6, PHP 7 offers a noticeable speed advantage. Nonetheless, it is still much better if no PHP code has to be executed whenever a website is called. Therefore, optimization of the PageSpeed for WP recommends that you avoid execution of PHP codes by using either static pages or through caching.

Figure 1: PHP execution is largely responsible for server delays © Jan Thiel - https://wlwp.eu/p>

Static WordPress webpages

Many companies, affiliates, and clubs do not use WordPress as an interactive blog platform but rather as a CMS. Certain functions, such as comments, Ping- and trackbacks, are hereby deactivated, web content is rarely updated, and new pages are almost never added. The Simply Static plugin can be very important for such cases. You can use the plugin to create static copies of the WordPress page and save it in a directory. As a result, no PHP code is executed once the page is called and requests to the database are avoided.

Possible configuration: Setting WP through a subdomain with directory protection (or on a local computer), where the domain points to the directory with the static copies of the WordPress page.

Caching

Instead of static pages, the rest of the websites use caching, including WooCommerce shops (about WooCommerce: The Cart, My Account, and Checkout reports are excluded from caching). Here, HTML pages are created using content from the database and PHP code: Instead of creating new HTML pages every time the website is called, the user receives a previously saved copy.

This enables the server to respond faster to user requests and the server can handle more users since the database need not be accessed or the PHP code executed every time the URL is called. For most WordPress websites, a simple and solid caching solution (e.g., Cache Enabler) is enough. However, if you prefer complexity and would like to optimize all the small details, you can use W3 total cache. The specialized WordPress hosting companies also offer Nginx Caching as an alternative to plugins. This makes the use of WordPress extensions unnecessary.

Browser cache

Browser caching goes one step further. Here, static resources are loaded from the user’s browser cache once a user revisits the webpage instead of repeatedly retrieving them from the server. This works well with the two aforementioned caching plugins.

Gzip or mod.deflate

gzip / deflate are used to compress content (HTML, CSS, and JS) before transmission between the server and user in order to minimize the amount of data transferred. Activation is hereby done using .htaccess / (nginx: ngx_http_gzip_module, apache: mod_deflate) or using a plugin.

keep-alive

In particular, HTTPS webpages profit a lot from keep-alive. Keep-alive helps avoid repeated establishment of connections between the server and user for each of the resources of a webpage. This takes much longer for HTTPS webpages since a TLS handshake must first take place before a connection is established and the server and browser must have a matching key. Keep-alive keeps the connection between the server and browser open and the connection used to transmit all resources. As a result, only one TLS handshake is necessary.

Figure 2: Only one TLS handshake is needed for all resources to be transmitted from the server

Minimize the number of requests

The number of parallel connections between the server and browser is a major bottleneck for HTTP/2 or older formats due to browser-based limitations.
To counteract this, static elements would be retrieved, e.g., from subdomains and CSS and JavaScript files interlinked. This is no longer necessary with the standard HTTP/2 since it can support a much larger number of parallel connections between the server and browser.

Interlinking CSS and JavaScript

The W3 total cache is very helpful if you want to easily interlink CSS or JS files through the WordPress backend. First, you need to set the Minify mode radio button from auto to manual in the subpage’s General settings. Next, add the resources to be interlinked on the Minify subpage.

You can easily do this using the test on webpagetest.org: Simply copy & paste the resources listed under Performance review (that are not retrieved via CDN) and specify the point where they should be added in the code.

Figure 3: Using W3 total cache to interlink JavaScript or CSS files and specify their position in the code

DNS prefetch, preconnect, and sub-resource vs. self-hosting

Externally provided resources, such as Web fonts or Google’s Analytics tracking, additionally slow down a page’s load time since, besides the DNS lookup of the page, the IP addresses of the various servers must also be resolved. This process is accelerated by using the HTML head section to inform the browser of all the other domains that are needed for the page to be loaded – or through self-hosting of the content:

Figure 4: Caching and self-hosting fonts lead to shorter load times

With fonts, you should ensure you only load the font weights used in the theme (or only the embedded icons for icon fonts).

Figure 5: Using preconnect to establish the necessary connections to the other servers early on

External resources are downloaded faster if the connection to the servers is established in advance. This entails embedding the respective domains in the page’s head section using the preconnect attribute:

<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://www.google-analytics.com">

<link rel="preconnect" href="https://stats.g.doubleclick.net">

WordPress hosting

Nowadays, almost all German web hosting companies offer "WordPress Hosting" services. This basically means providing a 1-click installation in addition to a database and sufficient PHP memory.

Figure 6: The same WordPress page loads much faster on a dedicated WordPress hosting platform than on shared hosting

For webpages that target users in Germany, it makes sense to host in Germany or the nearby region. The largest internet nodes in Germany are located in Frankfurt and Karlsruhe. Hosting services that are based in Aachen also profit in a very short Time To First Byte. In the long run, it all comes down to the respective connection between the data centers and the server configuration.

Content Delivery Network (CDN)

Only a few web operators need a CDN and, if your readers are in Germany, there is certainly no need for use to use the Photon CDN from WordPress. This is because the servers are in the USA and slow down the page loading for users in Europe.

2. Optimization of images

Images usually make up the largest volume of a website. You should therefore dedicate special attention to the images when optimizing your website’s load time. Here, the following measures can be very useful:

Optimizing image dimensions

Automation can be very beneficial if you work alone on your website or if you have well-established processes in your company. Instead of shrinking images to the correct dimensions before uploading them, you can have WordPress do it for you. All you need to do is specify the appropriate image sizes in the Imsanity plugin and any images you upload will always be converted to the correct dimensions before being saved. This saves you a lot of time and ensures that no step is "forgotten".

Compressing images

Out of the numerous image compression software with WordPress integration, such as Optimus or EWWW Image Optimizer, none achieves better results than kraken.io, which is available at a fee. A combination of this software and the Imsanity plugin means that your images are first converted to the correct dimensions, then projected to different sizes (thumbnails) before being optimized with kraken.io and saved on the server: The perfectly automated workflow for optimized images in WordPress.

Responsive images

The results of responsive images on WordPress are fairly moderate. If you are a perfectionist and do not mind investing a bit of time in the optimization, I would advise you to read the e-book by Matthias Schwindt. It clearly explains how you can implement responsive and retina images on WordPress.

Lazy load

Below-the-fold images are downloaded via lazy load when necessary. Here, the Rocket Lazy Load and a3 Lazy Load plugins have proven to be perfect tools. This function only pays off if you have many images on your webpage as is often the case with one pagers.

3. Optimizing the theme

WordPress themes are often overloaded with unnecessary and unused features. This is partly due to powerful frameworks, such as Bootstrap, that are only rarely reduced to the necessary features and classes. The overload can also be attributed to users who, when purchasing, expect more features in the theme and then end up using just half of the available features.

You can use https://unused-css.com/ to easily find out just how little the code is actually used. Simply enter the sitemap URL to ensure that all your pages are analyzed. If you have created your own themes that rely on frameworks like Bootstrap, you can use the following customizer to keep your code lean: http://getbootstrap.com/customize/

Statische social buttons

Besides privacy concerns, the possible negative effect on the page’s load time is another problem associated with having many social buttons that use JavaScript. You can structure static sharing buttons to be both fast and privacy-compliant, e.g., by using fastwp or plugins such as Shariff Wrapper.

Above-the-fold CSS

Regarding critical path rendering, the CSS required for the visible section (above-the-fold) is added in the head section and then reloaded for the rest of the style sheets in the body section.

Here, the criticalpathcssgenerator or the more convenient premium version criticalcss.com can be of great help if you want to identify the above-the-fold CSS. However, if you want to save yourself the efforts for adjusting your theme, simply add this key CSS using the Autoptimize plugin that is also perfectly suited as a caching plugin.

Accelerated Mobile Pages (AMP)

As much as the opinions about AMP differ extensively, the basic principle is convincingly simple: "Avoid unnecessary functions and excessive use of tracking pixels – especially on mobile pages."

Figure 7: Resources from 44 domains lead to much longer load times

AMP reduce a page to the essential content. This can have a very positive impact on the load time.

If you want to use AMP with WordPress, it is advisable to use the official AMP plugin from Automattic. Here, you can also modify the appearance of the AMP page to match the color of the theme using two extensions: Glue for Yoast SEO & AMP (recommended for all who use the WordPress SEO by Yoast) or Pagefrog (that also supports Facebook Instant Articles). If you want to learn more about AMP, Philipp Roos’ Magazine provides a very good overview.

Conclusion

The tips presented in this article can help you reduce the load time of WordPress to one to two seconds. To do this, all you need are static or cached pages, optimized server configurations, compressed images, and a lean theme.