How We Made WordPress Faster than Fixed Site Generators (Case Research Study– Speeding up WPBeginner)

On the 10 th anniversary of WPBeginner, I shared that WPBeginner hosting facilities got a big upgrade thanks to our webhosting partner, HostGator

Shortly after, I began getting e-mails from readers asking me to share the information on how we made WPBeginner load blazing quickly.

Yes, WPBeginner load quicker than many static website generators and in some cases faster than Google AMP websites too.

In this article, I will give you behind the scenes look at how we made WordPress faster than fixed website generators and headless CMS platforms.

Speeding up WPBeginner - Behind the Scenes

Note: This post is a bit more technical than what we typically release on WPBeginner. For non-techy users, I suggest following our supreme guide on how to accelerate WordPress

Background

Lately WordPress has actually been getting a lot of bad representative from “modern” developers where they state WordPress is sluggish.

The declaration is generally followed up with, you should change to a JAMstack fixed website generator like GatsbyJS Others in the enterprise world will state that you ought to switch to a headless CMS like Contentful

Numerous of my extremely effective entrepreneur buddies began asking me whether this held true.

Some even started the process of moving to a headless CMS because they read case studies of how others unlocked big speed enhancements by changing from WordPress to fixed site generators.

This was really frustrating for me because I knew they were losing 10s of thousands of dollars in migration costs. Not to mention, the unlimited customization expenses that will rack up in the future.

So I took it as an obstacle to prove that a large WordPress content sites like WPBeginner can fill simply as quick if not faster than many modern-day static site generators.

You can call me old school, however at the end of the day, a fixed website is just a page packing from cache.

Outcomes

Prior to I jump to the precise WordPress hosting infrastructure, server configurations, and plugins, I believe its handy to share the results.

Here’s how fast WPBeginner web page loads on Pingdom from their Washington, DC server:

WPBeginner Homepage Pingdom

Depending on the time of day and place you examine from, this result will differ anywhere from 400 ms– 700 ms range which is quite quick for a homepage.

Here’s a test that I ran for a single post page considering that it has bigger images and more content:

WPBeginner Single Posts Page Speed Test from Pingdom

We likewise got a best rating of “100” in Google page speed test for desktop. Although we do have some room for enhancement on mobile rating.

WPBeginner Google Page Speed Test

The results above are for cached pages which is what our readers and online search engine bots get when they view our site. The viewed load time of WPBeginner is near instant (more on this later).

For the sake of comparison, here’s a speed test result for Gatsby’s homepage. This is a popular static website generator that a lot of designers are raving about:

Gatsby Homepage Pingdom

Here’s the speed test result of Netlify’s homepage, a popular fixed website host, that a lot of designers suggest. Notice that they have half the amount of requests, and their page size is 30% of WPBeginner, yet it still loads slower than our homepage.

Netlify Homepage Pingdom

The homepage speed of Contentful, the headless CMS which is “how enterprises deliver better digital experiences” is just not optimized at all. This was the slowest site we checked.

Contentful Homepage Pingdom

I am sharing these stats not to challenge the other structures, but rather to offer point of view that not all brand-new things are as glossy as they might appear.

WordPress with an appropriate hosting infrastructure and optimizations can be simply as fast as any fixed site generator. Moreover, no other platform will even come close to the level of flexibility that WordPress uses to company owner through its large ecosystem of plugins and themes.

WPBeginner Hosting Facilities

When it pertains to site speed, nothing plays a more crucial function than your web hosting infrastructure.

As a number of you already understand, I have actually been a HostGator customer considering that2007 I began the WPBeginner blog in 2009 on a small HostGator shared hosting account.

As our site grew, we upgraded to their VPS hosting and then devoted servers.

Over the last decade, I have gotten an opportunity to work closely with a lot of their staff member, and they have become a prolonged part of the WPBeginner family.

So when I took on the difficulty to make WPBeginner faster than fixed website generators, I turned to them for assistance.

I shared my vision with their management group, and they provided to help me construct one of a kind enterprise hosting setup for WPBeginner.

They put the best engineers from both Bluehost and HostGator team to work closely with me to make WPBeginner blazing quick.

Here’s an introduction of what the WPBeginner hosting setup looks like:

WPBeginner Hosting Infrastructure

As you can see, this is a multi-server setup spread across two geographical regions (Texas and Utah). There are a total of 9 servers not consisting of the load balancer cloud. Each server is a Xeon-D CPU with 8 cores (16 threads) with 32 GB RAM and 2 x 1TB SSD (RAID setup).

We are using Google’s Cloud Load Balancing platform, so we can have smooth autoscaling and load balancing, worldwide.

Once the hardware was setup with appropriate information syncing in location, the Bluehost and HostGator team collaborated to enhance the server configurations for WordPress. My hope is that some of these optimizations will quickly make it into future WordPress hosting plans :)

Server Setup Summary

Summarizing the server setups of this complex setup in simply a few paragraph is really hard, but I will attempt my best.

We are utilizing Apache for our web server software since the group is more familiar with it. I won’t go into the NGINX vs Apache argument.

We are using PHP 7.2 together with PHP-FPM pools, so we can manage high loads of processes and requests. If your hosting business is not utilizing PHP 7+, then you’re losing out on severe speed optimization.

We’re utilizing Opcode caching with an innovative cache warmer to guarantee that no real user ought to experience an uncached pageview.

We’re likewise utilizing Things cache with memcache, so we can enhance the response time for uncached page hits and other API response times in the WordPress admin location for logged-in users (our authors). Here’s a network load tab of our “All Posts” screen in the WordPress admin:

WPBeginner Post Edit Screen

To put in point of view, our admin area experience is now 2X quicker than what we had formerly.

For our database server, we changed from MySQL to MariaDB which is a clone of MySQL however faster and better. We likewise switched from HyperDB to LudicrousDB because it assists us enhance our database duplication, failover, and load balancing.

There’s likewise a great deal of other configurations that helps us with efficiency and scalability such as HTTP/2 and HSTS for faster connection + file encryption, ability to spin up additional servers in brand-new areas in case of datacenter blackout, etc.

I seem like I’m underestimating to the fantastic setup that the group has actually built, however please understand that my core strength is marketing. Yes, I am a blogger who discusses WordPress, however a lot of the technical optimizations here are method above my pay-grade.

They were done by super clever engineers in Endurance group including David Collins (chief designer of Endurance/ CTO of HostGator), Mike Hansen (core WordPress developer), and others whom I’ll thank in the credits area below.

CDN, WAF, and DNS

Aside from webhosting, the other areas that play a significant function in your site speed is your DNS company, your < a href =" https://www.wpbeginner.com/beginners-guide/why-you-need-a-cdn-for-your-wordpress-blog-infographic/" title =" Why You Required a CDN for your WordPress Blog site? [Infographic]" > content shipment network( aka CDN), and your web application firewall software( WAF).

While I have it listed as 3 different things, a great deal of business are now offering these solutions in a bundled plan such as Sucuri, Cloudflare, MaxCDN (StackPath), etc.

Considering that I desire to have maximum control and spread the threat, I am using three different companies to manage each part efficiently.

WPBeginner DNS is powered by DNS Made Easy(very same company as Constellix). They are consistently ranked as the fastest DNS companies on the planet. The benefit of DNS Made Easy is that I can do international traffic direction when a particular information center on my CDN or WAF isn’t working correctly to make sure maximum uptime.

Our CDN is powered by MaxCDN (StackPath) They essentially enable us to serve our static possessions (images, CSS files, and JavaScripts) from their large network of servers throughout the world.

We’re utilizing Sucuri as our web application firewall program. Aside from blocking attacks, they likewise serve as another layer of CDN, and their general efficiency is just fantastic. I believe they have the finest WordPress firewall solution in the market.

When dealing with site speed optimizations, slashing off every millisecond matters. That’s why utilizing these service suppliers combined with our brand-new webhosting infrastructure makes a substantial distinction.

To illustrate, here’s the waterfall breakdown of WPBeginner.com vs GatsbyJS.org vs CloudFlare.com:

Waterfall Breakdown of Requests on WPBeginner

Notice that WPBeginner’s DNS time, SSL time, Connect time, and Wait time are all excellent when compared to these other popular sites. Each of these enhancements substance to provide the very best outcomes.

Instant.page, Optimized Images, and Other Finest Practices

Among the important things you might have discovered is the near instant load time when you search WPBeginner posts and pages.

Aside from all the things I pointed out above, we’re likewise cheating latency by using a script called instant.page which uses just-in-time preloading.

Essentially prior to a user clicks on a link, they have to hover their mouse over that link. When a user has hovered for 65 ms (very brief period of time), one out of two will really click on the link.

Instant.page script begins preloading that page at this moment, so when the user in fact clicks the link a lot of the heavy lifting is currently done. This makes the human brain views website load time as nearly immediate.

To allow Instant.page on your site, you can simply install and activate the Instant Page WordPress plugin

Instant Page Script

This script is quite neat. I extremely recommend taking a look at their site and clicking on the “test your clicking speed” button to see how it cheats the brain.

Enhancing Images for Web

While there are new image formats being developed such as webp, we’re not using them yet. Instead we ask all of our writers to enhance each image utilizing the TinyPNG tool.

You can likewise automate the image compression using plugins like Optimole or EWWW Image Optimizer

Nevertheless, I personally choose to have the team do this by hand, so we’re not submitting large files on the server.

Currently, we’re not doing any lazy loading for images, however I do prepare to include it in the future now that Google has lazy packing assistance built-in to Chrome 76

There’s likewise a ticket in WordPress core to include this function on all sites (actually hoping that this occurs quickly), so I do not have to compose a custom plugin.

Restricting HTTP Queries + Best Practices

Reduce cross-domain HTTP requests

Depending on the WordPress plugins you utilize, some will add additional CSS and JavaScript files on each page load. These extra HTTP demands can leave control if you have a lot of plugins on your website.

For more details, see how WordPress plugins can affect your site load time

Now before you leap to the wrong conclusion that a lot of WordPress plugins are bad, I want to let you know that there are 62 active plugins operating on the WPBeginner website.

What you need to do is integrate CSS and JavaScript files where possible to reduce HTTP requests. Some WordPress caching plugins like WP Rocket can do this instantly with their minification feature.

You can likewise follow the instructions in this post to do it manually which is what our team at WPBeginner has done.

Aside from HTTP demands that plugins and styles add, you also want to be mindful of other third-party scripts that you add on your site since each script will affect your website speed.

For instance, if you are running a lot of advertising scripts or retargeting scripts, then they will decrease your site. You may wish to use a tool like Google Tag Manager to conditionally load scripts just when they’re needed.

If you’re an ad-supported website like TechCrunch or TheNextWeb, then there’s really little you can do about this because getting rid of ads isn’t an alternative.

Fortunately, WPBeginner does not depend on third-party advertisement scripts to earn money. Want to see how WPBeginner earns money? See my post on WPBeginner income

Lessons Learned (so far) + My Final Thoughts

This is a brand brand-new hosting infrastructure, and I make certain there are lots of lessons I will be learning overtime.

So far I enjoy the speed enhancements because it has actually helped us increase our SEO rankings, and our admin area is much quicker.

With the new multi-server setup, we presented a new release workflow to bring WPBeginner up to par with the rest of Remarkable Motive product sites

What this indicates is that we now have appropriate version managing built-in, and there are measures put in location to stop me from being reckless (i.e adding plugins without proper testing, upgrading plugins from the control panel without screening, etc).

These modifications also set the course for me to finally get out of advancement and hand over the reigns of WPBeginner website to our dev group.

I have actually been resisting this for several years, however I believe the time is coming, and I just need to accept it.

The brand-new setup does not have cPanel or WHM, so this makes me almost useless anyways because I’m not really proficient with command line any longer.

Up until now we have actually learnt 2 big lessons:

Initially, upgrading WordPress isn’t as direct due to server sync/ duplication. When we updated my personal blog ( SyedBalkhi.com) to WordPress 5.2, the update files didn’t sync effectively on one of the web nodes, and debugging took a lot longer than expected. We’re dealing with constructing a much better develop/ screening process for this.

Second, we require to have better interaction throughout teams because we had a minor crisis with load balancer misconfigurations which resulted in some downtime. To make it worst, I was on a transatlantic flight on Turkish Airline companies, and the WiFi wasn’t working.

Thankfully whatever got arranged thanks to the quick response time by the hosting team, however this helped us develop several new Standard procedure (SOPs) to much better manage the occurrence in the future.

General I’m extremely happy with the setup, and I understand that some of the caching configurations/ optimizations that were produced WPBeginner will end up being a standard part of HostGator Cloud and Bluehost WordPress hosting plans.

I think this ought to go without saying that if you’re just beginning a site, blog, or an online store, then you DO NOT need this advanced enterprise setup.

I always suggest that you start little with HostGator shared or Bluehost shared plans like I did, and then update your hosting infrastructure as your business grows.

You can use a great deal of the optimizations that I shared above on your present WordPress hosting plans.

For instance, Bluehost basic strategy currently features a built-in caching plugin that you can use, and they use PHP 7 by default as well.

You can combine that with a CDN + WAF like Sucuri to substantially speed up your website.

Now if you are a mid-market/ business who desires a similar hosting setup, then please reach out to me by means of our contact kind I can help point you in the best direction.

Special Thanks + Credits

Thank you HostGator and Bluehost

While in the article above, I have actually offered tons of shout out to HostGator and Bluehost brand names, I wish to take a moment to recognize and value the specific individuals that worked behind the scenes to make it occur.

Initially, I want to state thank you to the Endurance management group Suhaib, Mitch, John Orlando, Mike Lillie, and Brady Nord for consenting to assist me with the obstacle.

I likewise want to thank Mike Hansen, David Collins, Rick Radinger, Chris Miles, David Ryan, Jesse Cook, David Foster, Micah Wood, William Earnhardt, Robin Mendieta, Rod Johnson, Alfred Najem, and others in the information center team for actually doing the effort and making it take place.

I want to offer a special shout out to Steven Job (founder of DNSMadeEasy) for rapidly addressing my questions and assisting me better comprehend some settings. Also want to provide a shout out to Tony Perez and Daniel Cid at Sucuri for always having my back.

Finally, I desire to offer unique acknowledgment to Chris Christoff. He’s the co-founder of MonsterInsights, and he was kind sufficient to assist me with a great deal of the screening and implementation.

I really hope that you found this behind the scenes case research study about WPBeginner hosting infrastructure to be valuable. You may also wish to see our ultimate guide on how to accelerate WordPress which is way more newbie friendly.

Perk: Here are the best WordPress plugins and tools that I advise for all WordPress websites.

If you liked this article, then please register for our YouTube Channel for WordPress video tutorials. You can also discover us on Twitter and Facebook

Comments are closed.