The effective path to a fast WordPress site and to begin working with our own wetopi.com
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.
In this post Part1/2, we’ll learn Who is Who in terms of speed and then we’ll work with the server side: our provider and WordPress backend speed.
In Part 2/2 Understanding Content Download and Page rendering, we will go to the client side dealing with frontend delivery and browser build.
Our post goal: avoid falling in the “web page essay” side of things and focus on effectiveness by tackling the main WordPress speed factors.
WordPress Speed – The web page speed layers
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.
This is 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?
If you want a fast WordPress site, you’ll need to pay attention to all speed phases.
WordPress is a so powerful piece of software that this power can play against your super provider.
You can buy the most expensive WordPress hosting service and ruin the Page load time by having a slow Browser time. 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!
Wait! As WordPress webmasters we have two speeds!
It’s worth to note that with WordPress we have two “speeds”. The speed our users perceive when browsing the site, and the speed we as admin
suffer feel when managing our WordPress content from the admin panel. 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 hosting server: responsible for building web pages (Web Application speed).
- Provider network infrastructure: in charge of delivering requests and contents (Network speed).
A simple metric to rule them all
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“.
DO IT: use this metric to check if you have room to improve. Use it to measure improvement in your Web application and network speeds. this means our hosting provider.
Our goal: TTFB < 500ms for our “users speed” (e.g. when loading the homepage) , <1000ms for our “admin speed” (e.g. when updating a post).
Using our own Browser to measure TTFB
There is no need for extra tools, we can use our own browser. In our case we will use Chrome and its Developer Tools Network panel (learn how to use it).
Open it: (select “Menu→View→Developer→Developer Tools or ⌥+⌘+I on Mac or F12+Ctrl+Shift+I on Win) then 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 162 ms. This is an excellent result. Read on this next section the checklist we followed.
Let’s see the “admin speed“. This next capture shows a much higher TTFB. It’s the time measured when, being in our WordPress admin panel, we press “Save Draft”. 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
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 here: http://www.maplatency.com/
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 Fast Server
Hardware and software are big players in TTFB.
MUST HAVE: a hosting with reserved resources: With wetopi.com 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.
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/
This is a major revision of the HTTP network protocol used by the World Wide Web. This new HTTP/2 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. The only downside is HTTP/2 requires a secured connection. This means dealing with https and Secure Certificates.
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 off the WordPress machines you launch at wetopi have free one click Let’sencript certificates.
Learn more: https://www.keycdn.com/blog/http2-statistics/
RECOMMENDED: If you are investigating various WordPress hosting providers, it might be worth installing a browser plug-in. The HTTP/2 and SPDY indicator plug-in for Google Chrome is an excellent tool to visually indicate if the website you are currently using supports HTTP/2
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.
At wetopi, we want to minimize the friction that every professional face when working and hosting WordPress projects.
In short, we are just techies passionate about WordPress. With wetopi, a specialized WordPress hosting, we want to go further to offer professionals and agencies a platform to work efficiently and effectively.
Not a wetopi user?
Free full performance servers for your development and test.
No credit card required.