For those familiar with photography, when adjusting the shutter speed, we just have two dials to play with: the ISO dial and the aperture ring. But setting up a fast WordPress site is a completely different story, it is more complicated, you have lots of speed knobs and not all those parameters are so easy to adjust.
Table of Contents
- Introduction: Who doesn’t want a fast WordPress website?
- The web page speed layers impacting our slow WordPress
- The path to a fast WordPress hosting
- How to get a fast WordPress site on a fast hosting? – The checklist
- Conclusion
Introduction: Who doesn’t want a fast WordPress website?
In this post Part 1/2, we’ll learn Who is Who in terms of speed taking a look at the different page speed layers.
Then, we’ll focus on the server-side stages, identifying the hosting provider and the WordPress backend elements that can make a WordPress site slow.
In Part 2/2 “Understanding Content Download and Page rendering”, we will go to the client-side dealing with frontend delivery and browser Page Content Paint.
Our post goal: avoid falling into the “web page essay”, and focus on the effectiveness by tackling the main WordPress speed factors.
The web page speed layers impacting our slow WordPress
First things first!
Before playing with WordPress speed dials, we need to understand the basics about the speed of a web page and how to measure it.
The true way to really know if we have a fast WordPress site page is measuring everything from server to user, this is what we call – Browser page load time.
The Browser Page Load Time
The Browser Page Load Time measures the true speed a user perceives when browsing a web page. And it is the result of four sequential consuming time phases always involved in each web page load.
In this chart from Newrelic, it’s easy to identify the four phase segments of a Browser page load time:
Browser page load time chart from a Newrelic monitor
We’ll talk about them, so it’s important to understand, or at least to have a basic idea (take a quick look at the words in bold).
- Web application: The time spent by the server building the page we are requesting.
- Network: The Network layer includes time spent in redirects as well as in requesting and receiving the requested web page.
- DOM processing: The time it takes to parse the HTML into a DOM and retrieve and execute synchronous scripts.
- Page rendering: This phase measures browser-side processing of the page content, and often includes time for scripts and static assets to load.
Who is ruining my WordPress speed?
All phases are important. You can buy the most expensive WordPress hosting service with an excellent Web application and Network time and ruin the Browser Page Load Time by having a slow Page rendering.
This is what the above chart shows: an average of 1 second in Web application and Network, but more than 4 seconds spent in Browser Time!
Pay attention to all speed phases.
If you want a fast WordPress site, you have to pay attention to all speed phases.
WordPress is a so powerful piece of software that this power can play against your WordPress Page Load speed.
WordPress is slow in wp-admin or in the front?
It’s worth to note that with WordPress we have two “speeds” to measure:
- The speed our users perceive when browsing the site “the frontend speed”, and
- The speed we as administrators feel when managing our WordPress from the admin panel “the backend”.
Each one has a different treatment, thus, we will use the terms “user speed” and “admin speed” to refer to each one.
The path to a fast WordPress hosting
In this post we will cover Web application and Network speeds.
Both speed phases will help us to identify bottlenecks and tune the three players involved:
- The WordPress theme and plugin stack: main responsible for the workload our server needs to process during the building phase.
- Our WordPress server: responsible for building web pages (Web Application speed).
- Provider of network infrastructure: in charge of delivering requests and contents (Network speed).
The TTFB metric to analyze your hosting
We are lucky, we are able to measure effectively our Web application and network speeds by using a unique metric: TTFB – Time to first byte.
TTFB gives us an idea of time spent contacting our server (latency) and building our page (backend processing).
Wikipedia defines Time To First Byte as “the duration from the virtual user making an HTTP request to the first byte of the page being received by the browser“.
Use this Time-To-First-Byte metric to check if you have room to improve your WordPress components and Hosting Provider.
What is a good TTFB when measuring the WordPress user speed?
TTFB does have a strong impact when analyzing your WordPress front user speed with Google Page Speed, or Google Lighthouse:
| Time To First Byte in milliseconds | Google Page Speed impact. |
| 10 to 200 ms | Recommended by Google |
| 200 to 400 ms | Average |
| 400 to 600 ms | Slow |
| 800 to 1000 ms | Bad |
| 1000 ms or more | Google considers unacceptable. |
What is a good TTFB when measuring the WordPress admin speed?
When you work on the WordPress admin side, things are different. WordPress in the wp-admin needs more server resources. The content edit and WordPress administration tasks are done at a comfortable speed when our TTFB is less than 500ms.
Using the browser to measure the TTFB
There is no need for extra tools, you can use your own browser. In our case we will use Chrome and its Developer Tools Network panel (learn how to use it).
To open the “Developer Tools”, select:
- “Top Menu→View→Developer→Developer Tools” or
- “⌥+⌘+I” on Mac or
- “F12+Ctrl+Shift+I” on Windows.
Note: you can also open it from the top right “Three dot menu”:
Then, from the Developer Tools window, select the Network tab:
On the left column, we have all the elements requested. Don’t get overwhelmed, we will only work with the first request, in our case, our main HTML page at wetopi.com:
Above our TTFB is 31.57 ms. This is an excellent result. Read on the next section the checklist we followed to achieve this result.
Let’s see the “admin speed“. This next capture shows a much higher TTFB, 327.38 ms. It’s the time measured when, being in our WordPress admin panel, we press “Update”. Below, a capture taken while working on this post.
In the WordPress admin panel, we are not taking advantage of all the caching techniques offered by our plugins and hosting providers. We need Pure Server Performance and a lean WordPress.
How to get a fast WordPress site on a fast hosting? – The checklist
Follow this steps to get a fast WordPress during Web application and Network stages.
1 Check your hosting Internet connection latency
A component of our TTFB is the network latency. Latency is how long it takes data to travel between its source and destination, measured in milliseconds.
MUST HAVE: a network latency of no more than 100 ms (same continent), or 200 ms (remote continent).
Build your latency map
RECOMMENDED: Latency is directly related to the infrastructure of your provider. In case of a high latency: a) Tell this to your current provider and ask for a solution, b) Look for new providers. Locate the ones serving in the same continent your main audience lives and start tracing Latency Maps of their main site.
2 Run a lean WordPress site
The most common causes of big TTFB times are bloated plugins. Each plugin you install usually means less user speed and/or less admin speed.
RECOMMENDED: Use What You Need. Dan Norris, co-founder of WordPress website support service WP Curve (acquired by Godaddy), recommends 20 to be a good number. We at wetopi are running with 16 plugins!
RECOMMENDED: One way to see which plugins are affecting your site’s performance is to use the wordpress plugin P3 Plugin Profiler
or Query Monitor.
MUST HAVE: Do not experiment with your production WordPress. Use always a clone or a “sandboxing environment”.
Each plugin, template or demo content you test usually means more server process time. It’s good to know that when you uninstall a plugin, template, …, your WordPress not always ends up as clean as it was before!
Don’t think “cloning” your WordPress is a waste of time!
It takes just seconds to experiment with a clone of your production site!
No more excuses.
3 Optimize your database tables
If you have been running your WordPress site for a long time, don’t forget to optimize and “clean” your database.
RECOMMENDED: Optimize your database contents with WP-Optimize. This simple but effective plugin allows you to clean up your WordPress database and optimize it without phpMyAdmin. Follow this tutorial step by step (keep in mind point 2 and remove this plugin once used).
4 Get a Fast Server
Hardware and software are big players in TTFB.
MUST HAVE: a hosting with reserved resources: With Wetopi we are using containers, the last technology, this makes a huge difference, and avoids the extra cost of a dedicated server sysadmin (yes, the administration is the real cost of a dedicated server).
MUST HAVE: a hosting with SSD (Solid State Disks).
AVOID: a hosting with SSD and no RAID (for redundancy). SSD are more reliable, but also can fail. Don’t take risks.
MUST HAVE: An Nginx web server tuned to serve WordPress pages. Nginx properly configured combined with PHP-fpm can easily be 2 times faster compared to standard Apache+mod_php.
MUST HAVE: check your PHP engine has OpCache Caching or equivalent (better WordPress speed with opcache) up and running.
RECOMMENDED: php7. Look for a hosting with sandboxing environments or easy to clone so you can test your site with the new super-fast php7 engine (WordPress is php7 ready, but you must check the compatibility of your plugins).
In our case, we have passed all checks! This page is running on a WordPress in a standard containerized wetopi server, where hardware, web server and configs are all tuned exclusively for a fast WordPress site experience.
5 Cache
Once we have improved with points 2 + 3 + 4, then it’s time for “Cache”. TTFB for users (not for admins) can be reduced with a cache system. This cache system will serve our posts and pages as static files, reducing the processing load on the server.
RECOMMENDED: Use a WordPress cache plugin: WP Super Cache (complexity: low), W3 Total Cache (complexity: high).
Learn more: https://premium.wpmudev.org/blog/top-wordpress-caching-plugins/.
6 HTTP/2 or HTTP/3
This is the HTTP network protocol used by the World Wide Web. This new HTTP/2 and HTTP/3 do not require any changes to how existing web applications work, and all web site applications can take advantage of new features for increased speed.
What is HTTP/3?
HTTP/3 is the next major revision of the hypertext transfer protocol (HTTP). It will improve speed, security, and reliability.
You can put your server behind Cloudflare proxies to easily support HTTP/3.
MUST HAVE: If you already have a secure site HTTPS (a page served with SSL, a secure connection) you are adding a considerable extra time, at least 100 ms (SSL handshaking is the major cost of HTTPS). You must jump to an HTTP/2 server to compensate this handshaking delay with the new speed improvements.
RECOMMENDED: a modern web server with HTTP/2 and easy One-click Certificate management. The “Multiplexing” and “HTTP header compression” advantages will help you to reduce the Browser page load time.
In our case, all of the WordPress machines you launch at wetopi have free one click Let’sencript certificates.
You can learn more about HTTP/2 performance statistics at keycdn.
How to identify the HTTP protocol version?
There is no need for extra tools, you can use the Google Chrome Developer Tools.
The protocol is shown in the Network panel, above in this article (“Using the browser to measure the TTFB”). If you don’t see the Protocol column, right-click over the list titles row, and select the columns you want to display.
Conclusion
If you are reading this, you are taking it seriously. Don’t get upset if we have forgotten some crucial aspect. Tuning for speed is a complex subject and we are focusing on the effective path. Let us know, and help us to build this path to a fast WordPress site.
We are techies passionate about WordPress. With wetopi, a Managed WordPress Hosting, we want to minimize the friction that every professional faces when working and hosting WordPress projects.
Not a wetopi user?
Free full performance servers for your development and test.
No credit card required.
