Fast load times have a positive effect on the user’s interaction with a website and can eventually lead to more sales for online shops. This article will show you practical tips on how to optimize the load time of your WordPress pages.
Here, you have to differentiate between three areas: server, images, and theme 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>
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.
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 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 / 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.
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
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.
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.
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">
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.
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.
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:
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".
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.
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.
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.
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/
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.
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.
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.
Published on 07/13/2016 by Hans Jung.
Hans Jung is an SEO Consultant at One Advertising agency in Munich, where he advises clients on their projects and provides workshops. In addition to SEO, he is interested in CMS WordPress and has already published almost 100 articles on Pressengers. At conferences and meet-ups, his topic of choice is WordPress SEO.Become a guest author »