If you Google phrases like “How to optimize WordPress website speed” or “Ways to speed up WordPress,” you’ll find a long list of tutorials and discussions about WordPress performance, covering topics such as selecting good WordPress hosting and themes, using cache plugins, CDN, image compression, and so on.
I am here to walk you through how the WordPress CMS works and how everything is exclusively rendered between your web server, CMS, and backend, from a single click on your website to a page result display from that request. I’m referring to the initial server response time.
When someone comes to your site and requests a page, the CMS has to actual dynamically generate the markup for every single request and that adds a lot of overhead.
A single click from a browser sends a request off to a server and that server is going to make a bunch of requests off to the CMS, which then has to go make requests off to a database. It then takes the data from the database, builds the template, and sends the HTML and assets back to the browser. And the huge problem with that is that all of those hurdles must be cleared before the browser can begin downloading the page, so what we’re looking at here is the time to the first byte while everything is going on and the browser is sitting there waiting for the server to respond.
Take a look at the classic example of WordPress CMS setup.
Every time somebody would hit a page you’d be sitting there waiting a whole second before it even starts downloading. Good customer experience is key for a high conversion rate, especially when running an online store like WooCommerce, where every millisecond counts. In fact, according to Google, the average mobile user will abandon your site if it takes more than 3 seconds to load.
We all know that we wanted to improve the site’s speed. In the traditional shared hosting plan, there is a limit to what you can do to optimize and speed up your WordPress site since you are sharing hosting resources. This is a perfect plan if you’re a small business or startup trying to build your online presence.
However, if you want to build a blazingly fast WordPress site that can handle a high volume of visitors, you’ll need to choose the best cloud hosting and technology for your WordPress.
CHOOSING QUALITY HOSTING
A good hosting company should have the following features:
- A solid technical support
- Highly-distributed cloud infrastructure
- Scalability when your demand grows
- High availability and uptime
- SSD drives for high performance
- Security, such as application firewalls and SSL certificates
And these are things you should look for when shopping for the right Cloud VPS hosting plan.
Our ultimate goal is to reduce initial server response time or latency. So now let’s add some infrastructure in place to actually try and optimize WordPress performance.
LAUNCHING A MODERN WORDPRESS SERVER STACK
The LEMP stack is what we’re working with here. Some of you may be familiar with the acronym LEMP, which stands for Linux, Nginx, MariaDB, and PHP-FPM. Apache and Litespeed are two other common web servers out there. Depending on your use case, they all have pros and cons.
What we like about Nginx is that it’s a robust, scalable, and lightning-fast web server.
To handle PHP requests, Nginx uses a PHP-FPM (FastCGI Process Manager) processor by default. This enables Nginx to forward requests to FastCGI, which in turn employs persistent processes to handle all incoming requests without having to create a new process for each one . This reduces the webserver’s overhead, resulting in faster page response.
Again we go over this. We’ve got all of these requests happening step by step.
In this example, we use Nginx Fastcgi Cache for page cache
The first thing we do is to add in a page cache and essentially what we’re doing here is when the server is making a request back to the CMS. If you’ve got content that isn’t changing, you’ve got markup that is exactly the same for every user. We cache that and what ends up happening there is there’s no overhead. The content goes straight to the browser, and we don’t have to wait that one second for the content to come down.
Great! Now that we’ve cached for static contents and files but what happens if we have dynamic content like e-commerce recommendations for different products. We can’t cache the HTML for the page because it’s different for every visitor, so we put a database cache in front of that.
Redis is a high-performance database and caching server that is available as an open-source and an enterprise. It basically caches data from database queries into memory, which allows fast access to the data .
In this case, we use Redis as a persistent object cache for WordPress
When the CMS requests make requests off to the database, we can actually cache common requests. Next time when someone makes the same request that is already in the object cache, we can move straight on to rendering the markup and sending it down to the browser as fast as possible.
The great thing is that FastCGI and Redis cache come pre-installed on our optimized WordPress server. What is left for you to do is to install the plugins, which you can follow this guideline.
ADDING CONTENT DISTRIBUTED NETWORK (CDN)
The next big step is to add a CDN (Content Distributed Network), such as Cloudflare, into this WordPress stack. The reason for this is that if your server is in North America and someone in Japan requests a page, the distance will increase the time to the first byte and the time it takes for images and assets to download. A CDN essentially distributes your cache content and assets all over the world so that when someone in Japan requests a page, the time it takes for images and assets to download will be faster.
They actually get the content from a server in Japan, which makes the process a lot faster, and in a simple setup, you’re only sending over your assets, but you can make this setup even more complex by serving the page to the CDN as well.