29.2 percent of all existing websites run on Wordpress. It is a powerful content management system and allows for a lot of customization, but at a cost of web performance. It doesn’t have to be like that. This site runs on WordPress and it left the other websites in the dust.
Others bragged about how they go their site to load under 1 second. Mine loads in under 0.2 second. Five times faster. Look at the Pingdom’s result below. It is faster than 100% of tested sites.
I will show you how I got my website to load under 200 ms for only $5 a year. No CDN. No special paid plugins. Using only free plugins from the WordPress plugins directory. All on shared hosting that cost me only $5 a year. I paid only 42 cents a month to get this speed.
Note: I used affiliate links in this post.
- 172 ms. A Blink of An Eye. That is how fast this website loads.
- How It Was Like Before I Speed Up the Website
- 1. Fast WordPress Hosting
- Results After Moving To Buyshared
- 2. Choosing The Right Plugins
- 3. Use A Fast Lightweight WordPress Theme
- 4. Upgrading PHP Version
- 5. Optimize Image
- 6. Changed Font to System Font
- 7. Wordpress Caching & Compression
- 8. HTTPS Slows Down Your Site
- 9. Shave Off ms With A Fast DNS
- 10. Be Selective Of Scripts On Per Page/Post Basis
- 11. Optimize Your Database
- Final Result So Far – 172 ms Load Time
How It Was Like Before I Speed Up the Website
In October 2017, I received a reminder from Hostgator for an upcoming renewal. It will cost me $358.20 for a three years plan and that made me paused my work in the middle of the day, thinking of how I should proceed with this. The current hosting plan was hosting a few low traffic site and this personal blog, earning nothing to justify the 300 dollars price tag. I ran that site through Pingdom first to get a baseline of its speed.
A loading time of 3.53 s. Another round of tests saw the loading speed of 7.21 s to Melbourne and 6.65 s to Stockholm. Terrible loading speed for a lightweight site. The site was hosted on the Hostgator’s Hatchling plan with the Thesis theme and using WP Supercache.
Here is another rundown of the website through Webpagetest. Notice the terrible time to first byte.
The site was optimized based on popular recommended suggestions from three to four years ago, maybe even before that, but time passed and website optimization became more complex with higher emphasize on speed, especially with the increase of mobile usage to access the web. The only speed optimization update I did for the last few years was to upgrade the PHP to 7.0 when it was available through Hostgator.
That was when I hatched a plan to revive this site and try to get it as fast as possible at the cheapest price point.
1. Fast WordPress Hosting
All fast website needs a good foundation, and that foundation often depends on the hosting provider. A lot happened in the backend of the hosting providers without us, the users being able to see it.
- What hardware is the host using? Upgrading to faster servers cost money to providers, so some might skimp on it.
- How is the network linking to the host? Are they connected to the major lines?
- What server is powering the host?
There is also the DIY VPS and Dedicated Server option. But I will go the shared hosting route because it is suitable for low to mid traffic sites, and you will need a lot of traffic before considering an upgrade. I will suggest a few hosts to avoid and also a few good ones to think of.
1a. Hosting To Avoid
Bluehost, or all hosts owned by EIG, including Hostgator. You can check for a list of EIG owned companies here. Wait, what? Why is Bluehost to be avoided when everyone else is recommending them? Even WordPress official site recommended it. The only reason they recommended it is for the money. Bluehost is incredibly generous with referral commission. They paid over $5 million in commissions last year (their own words, not mine). If someone recommends using Bluehost and the likes, use this tool to check if that person is using Bluehost or not. Chances are they are not. Read more on hosts ratings after being acquired by EIG here. Still, if you planned to use an EIG hosts, go with Bluehost or Hostgator. They are part of the core brands and thus, will receive more money for infrastructure upgrades.
GoDaddy. Cheap, but shady. Check this reddit thread.
1b. Recommended Budget Hosting
Buyshared – This is the host I go with and currently used for this site. $5 per year for performance better than that of Bluehost. Choose a location in between Las Vegas or Luxembourg. You can scour LowEndTalk for reviews on this site and perhaps other budget hosts as well. Fran, the owner is responsive and helpful. The downside is that I find them to be strict with fraud checking and often, no hosting spots available (As of 25 Dec 2017, there is no space available at any two location). This is a good thing to prevent hosting from being oversold and ensure optimal server performance, but it also means that you can’t buy hosting until they open it up.
Note that LET’s members are mostly host providers themselves or experienced webmasters and they can be crude. Otherwise, they are a mine for hosting knowledge.
Specification: Litespeed, SSD, Free SSL, CPanel, CloudLinux
Impactshared – The smallest budget package is also $5 per year. Similar specification and performance as above with host location in Dallas, Texas. At least, they always seemed to have space for new hosting.
If I cannot get a space with Buyshared, I will go with Impactshared for hosting in the US.
I have other hosts to recommend in other countries but I am not listing them here because their lowest price is not as cheap. Why is there no hyped in-depth review of the host with all their features? They didn’t pay me enough to do so. It’s only $5 per year to host with them. How much commission can they pay me with that money?
1c. Recommended Managed Hosting
Kinsta – If the site is for a business that has a large amount of traffic and requires uptime and performance, I often recommend people to go to Kinsta. The lowest plan offered is $30 per month. For the same amount of money, you can get better bang for your buck if you go with the more premium options from the budget hosts above. On the other hand, Kinsta is using the Google Cloud Platform (that has its own faster fiber connection). The site can be faster just because the data is sent through google fibers to the rest of the world.
What you are actually paying for here with the extra money is the support and their knowledge in optimizing website performance. If your website had grown popular and you needed someone to make sure it is fast and remained up, transfer to Kinsta.
How about something in between? The budget shared hosts above are good enough to start off with. If the site grew larger than what those budget host could offer, move to Kinsta straight. At that level, the site should be earning a lot more that you want it to continue load fast and none of the headache to manage the server.
I cloned my site using All in One WP Migration plugin and migrated the site to Buyshared. Here is the result for the same site, with a slight downgrade as the default PHP here is 5.6.
Loading speed improved from 3.53 s to 1.57 s just by changing the host. I improved the website speed by 2 seconds faster just by moving to a faster (and cheaper) web host. Noticed that the time to first byte changed from F to A.
2. Choosing The Right Plugins
Contrary to popular belief, a fast site can have a large number of plugins. What matters more towards the site speed is how the plugin is coded. Just because the plugin is available in the Wordpress plugin directory or even a premium paid plugin, it does not mean that the developer knows how to create a fast plugin. One plugin could slow the site by 100 ms (I’m looking at you, Yoast), while another plugin could use only 1 ms. Just by removing that slow plugin, I can use another hundred faster plugins in its space.
To first start this, I removed all existing plugins from the WordPress installation.
It looks like the site got slightly faster after I removed the plugin. It’s mostly because I removed the plugin that loads my Gravatar.
Many sites would suggest premium plugins like WP Rocket, Hummingbird, and WP Smush to optimize their website but these cost money, and their features could actually be replicated using free plugins available in the directory.
How To Run A WordPress Site Plugins Audit With P3 (Plugin Performance Profiler)
You can run a check on the plugins on your site using the P3 Profiler to see which plugin slows down your site the most. What you need from P3 is the relative result. Use the Pareto principle. The slowest 20 percents of your plugins will account for 80 percents of your site drag. Remove those plugins and replace them with a faster one and you will find your site loading faster.
Rank your plugins by the weight and then determine if you need these plugins or employ two strategies to reduce their impact.
Remember to uninstall and remove the P3 Profiler after you used it because it is a site drag to be left installed.
How To Get Around P3 Incompatibility With PHP 7
But wait, the P3 Profiler is broken, or at least all those reviews for this plugin said so. Yes, the plugin no longer works if you upgrade your PHP version to 7 and above. This is because PHP 7 is incompatible with P3 coding, and to update it to the latest PHP requires a rebuild of the code from the ground up.
One way to bypass this is by downgrading your PHP version on CPanel to 5.5 to run P3. After you are done, remove P3 and upgrade the PHP version back to 7.
Use This, Not That – Contact Form 7
Contact Form 7 plugin is a popular plugin with 5+ million installations. It only goes to show that popular plugins can be the worst site drag. What many don’t know is that this plugin’s script and CSS are also loaded globally everywhere on the website. It slows the site down with useless pieces of code. The only place you needed a contact form is on your contact page. You don’t need it in your posts or homepage.
You can check how much slower it made the site by running the site through Pingdom Speed Tool with and without the plugin. Use a faster contact form plugin. I tested a number of them to get the quickest loading and does not load globally. I am using Simple Basic Contact Form on this site. It only has 8k+ installation. Often, the gems in the WordPress directory had few users aware of them.
3. Use A Fast Lightweight WordPress Theme
WordPress theme can make or break a site. Often, people viewed based on aesthetics and not on page speed at all. Hence, a lot of themes out there are not coded for speed. The same goes for premium themes.
A lot of developers relied on the Font Awesome crutch to provide good looking icons. Font Awesome is good, but it takes time to load it. And often, the developers used it for three things. The hamburger icon, the search magnifying glass and arrow for scroll to the top. These would be better replaced by lightweight PNG files instead of requesting Font Awesome. A developer who cared for speed would not include Font Awesome as part of the website design.
I choose the free theme called Branches over the old Thesis theme. Is there anything wrong with Thesis? None at all. It is the first customizable builder I used but I had decided to use everything free from the directory. Nothing paid at all for this site.
Feast your eyes on a 565 ms load time website. At this stage, I did not installed any plugins yet. Nothing to speed things up. It is still blank. I dropped another 1 second in load time just by choosing a lightweight free theme.
At the end, I reverted to a free theme called GeneratePress. I really like this theme and its paid version. The developer kept website speed in mind when designing the theme.
Update: 29 Dec 2017: I changed it back to Branches theme because I enjoyed the minimalistic look and the speed of the theme. Plus, it is slightly faster than GeneratePress.
4. Upgrading PHP Version
Shared hosting often uses PHP 5.4 or 5.6 as the default. This is mostly due to compatibility issue. Like the P3 Profiler, not every plugin is compatible once you upgraded the PHP version. Hence, the host chooses the easiest option, which was to keep the PHP version at the lowest level until almost everything is PHP 7 compatible.
Which is a shame because PHP 7 offered better performance over PHP 5.6.
5. Optimize Image
Possibly the most gains to be obtained in terms of performance. Raw image is often too big and too detailed for web use. You can cut down on the resolution significantly and the picture would still look the same on screen.
I used the ShortPixel plugin to optimize my images. I also used it to enabled webP format, which promised another 25 percents reduction in image size. The free plan allowed for about 20 images to be optimized each month. You can pay to have more. Note: Litespeed Cache offered this too though I haven’t tried it.
If you wanted to be more proactive, optimizing the image began before you even upload it online. Use an image editor like Photoshop, GIMP or pixlr to do the image optimization below.
Update 3 Jan 2018: I stopped using Shortpixel. It remained great but I am already doing aggressive image optimization via Photoshop before loading them. Further optimization done by Shortpixel degraded the image beyond what I preferred. I used the Litespeed Cache to turn on webp image instead of through Shortpixel.
Resize Your Image
Cut down on the image dimension in image editor. Use a plugin like Imsanity to make sure you don’t go beyond the limit. Don’t expect WordPress to do it on your behalf, or even to do it well.
Use The Right Type of Image
I prefer to think of it in this mantra- save the image in: Jpeg for photos. Png for large blocks of solid color. Gif for small image. Opt for png or gif type image if you could. Plugin could convert your jpeg photo into webp format which promised another 25% reduction in image size.
Reduce The Color Palette
The more colors you used, the larger the file became. So, choose a smaller color palette option. Gif came with 8-bit color. Choose PNG-8 instead of PNG-256. In Photoshop, choose to save the image for web. Reduced the color-bit and watched as the image size went down.
6. Changed Font to System Font
Any additional HTTP request often means more time required to load the site. A lot of the themes now relied on Google Fonts to provide better-looking fonts for the website.
In the best case scenario, Google Fonts added no weight to the loading time, but because it is an external request, there will always be some drag when requesting from Google system.
What I did was to remove it using Remove Google Font References plugin and then adjust using CSS. (Later, replace it with Litespeed Cache instead).
7. Wordpress Caching & Compression
Compression is basically zipping your site to make it smaller. It takes less time to deliver a smaller file rather than a larger one. Gzip should already be enabled in the server. If not, something like Far Future Expiration plugin can enabled it.
Caching is create a snapshot image of the site for the visitor so that Wordpress has no need to request the server to recreate another copy of the site each time a new visitor come. It is almost the first thing that came to mind when it comes to speeding up WordPress. All the guides would include a section on caching and there are many ways to do it. My usual plugin of choice for doing this is Cache Enabler.
At this point, I had already installed – Disable emojis, Far Future Expiration Plugin, Query Strings Remover, Remove Google Fonts, WP JQuery Plus, and Cache Enabler when I realized that Buyshared is using Litespeed server.
Litespeed also released its own Litespeed Cache, which is a caching plugin specifically for Wordpress site hosted on a Litespeed server, and it is jammed with features. I can remove all the plugins above (except for Far Future Expiration plugin) and replaced it with a single Litespeed Cache plugin. And this plugin has very active development, with new updates every week or so.
It also introduced an image optimization feature after I started this project by which, I could stop using Shortpixel. But I have not tried it yet. Update: Yup, I stopped but only because I did the optimization offline.
Note: In general, I prefer my plugin to do one thing and do it well. Plugins that added a lot of features together tend to be bloated and slowed down the site. Litespeed Cache is great, but sometimes, I wondered if it is better to split it into a few different plugins if I don’t use some of the features.
Hyper Fast – The Site Loads in 168 ms
Lo and behold. 168 ms load time. I broke through the 200 ms load time barrier. All these on free plugins and using a free theme. I got 1.14 s load time to Melbourne and 800 ms load time to Stockholm. Not too shabby.
8. HTTPS Slows Down Your Site
After I broke through the 200 ms barrier, I decided to convert my site from http to https by installing a SSL cert using Let’s Encrypt. However, it slowed down the site enough that I was unable to get it below 200 ms again.
Update 29 Dec 2017: I reverted back to the Branches theme, and with more optimization techniques after I converted to https, I managed to get it below 200 ms again.
This is because the TLS handshake for the encryption took some time. In the original unencrypted site, the data took two rounds. One from the computer to the host server and then back. However, with encryption installed, the data now took four trips. The initial data request. The TLS request from the server. The TLS reply from the computer, and then only after that, the data reply from the server. The handshake does not take a lot of time, but if the site is well-optimized and already loading at sub 200 ms, then it is a large proportion of drag.
It is even worse for visitors from halfway around the world from the host like Australia because the data has to travel twice around the world. Four rounds of halfway around the world trip for the data to travel through.
Https is suitable for a heavy website with a lot of different parts to download due to HTTP2, but for me, it did slow the site. Yet, why did I keep it? It is mainly to future-proof the site and to prevent that naggy ‘Not secure’ tag from showing up. Google made an effort to encourage it by showing a ‘Not secure’ tag in Chrome for sites not using https. If you think that it is not bad enough, Google planned to make the tag a popping red color in the future.
9. Shave Off ms With A Fast DNS
You will notice by now that I am not using a CDN at all. This is because this site is so fast that I had no need for a CDN. Wait, didn’t Cloudflare offer free CDN that comes with DDoS protection? Why not use that?
Avoid Cloudflare CDN
Here is the problem with using Cloudflare services, it slows down the site. Whenever I used Cloudflare CDN services in the past, my sites will experienced a delay. This is because Cloudflare is a full proxy service and it added another layer before a visitor could reach the origin server.
In its essence, Cloudflare is a security company. The extra layer allowed Cloudflare to screen the data before passing it through. Hence, the sites using Cloudflare would have worse time to first byte, meaning slower load time.
Also, I experienced a number of “server not responding” errors (502 Bad Gateway Error) when I know that the server is perfectly fine. It is not apparent if I accessed the site when I am in North America, but when I am in Asia, it became more noticeable. I don’t trust what Cloudflare claimed that the error was a fault in the origin server. Once I removed Cloudflare, I no longer experienced such errors when accessing the site.
Use Cloudflare DNS
Despite my misgivings about Cloudflare, I recommend taking advantage of its vast infrastructure and use the Cloudflare DNS Manager to manage the DNS. Check out DNSPerf for real-time performance of the DNS speed. Cloudflare DNS often ranked at the very top of the performance, even over other giants. Let us compared it to another DNS provider such as Namecheap (because DNS optimization is often neglected that most tend to stick with the domain name registrar for DNS management). 15 ms vs 72 ms.
Just by switching over to Cloudflare, you can shave another 50 ms off the loading time. A small number, yet an improvement all the same. In order to be hyper fast, every ms counts.
How To Use Cloudflare DNS Without CDN
- Add your site to Cloudflare. Click on “Add Site” and then scan “Scan DNS Records”. Or you can go through this in CPanel if there is a Cloudflare extension.
- Check the DNS results for A, AAAA, and CNAME records. Make sure the Cloudflare cloud is gray so that traffic does not pass through the Cloudflare network. Add a CNAME mapping for www extension as well here.
- Continue with the free plan.
- Update the nameservers in the domain name registrar to that of Cloudflare. From this point onwards, Cloudflare would be your DNS manager.
- Return to Cloudflare and find “Pause Website” and paused it.
- That’s it. You are done. You are now using Cloudflare as the DNS provider without going through its CDN.
10. Be Selective Of Scripts On Per Page/Post Basis
This is a powerful method that is often neglected and is a case of why some plugins are just bad for load time. Some plugins load the scripts and stylesheets globally. They will load on every single page whether you need it or not. This is not good for site performance.
Remember Contact Form 7 from above? Let say you still wanted to use that plugin for some reason. Fine. Let us minimize the damage then. We can make sure that this plugin only loads at the Contact Page by using a selective activation plugin – a Gonzales plugin.
Use it to be selective of where the scripts and stylesheets load and watch as your load time decreased magically.
Note: I also used it to remove Font Awesome if necessary.
Replicate Popular Gonzales Plugin Without Paying $15 Annual Fee
The most popular plugin capable of doing this is the paid Gonzales plugin retailing at $15 for one site or $100 for an unlimited license with a year support. Another paid plugin capable of this is the perfmatters plugin retailing at $20 for one site or $100 for unlimited.
However, I can achieve similar results by using free plugins like Asset Queue Manager (only 1k + installations). Another usable plugin that I am testing on this site now is the WP Asset Cleanup plugin (also only 1k + installations).
11. Optimize Your Database
Each time you write a post, I am sure there will be multiple revisions saved for it. Over time, these revisions became redundant and hogged resources in WordPress. Does cleaning them really make a difference in website speed? No really actually that I can see of. It is just good housekeeping. I used to use WP-Optimize to clean my database, but Litespeed Cache offered such feature in it as well so I decided to use that instead.
Final Result So Far – 172 ms Load Time
Without using any CDN, paid plugins or paid theme.
I achieved this on nothing more than a $5 a year budget shared hosting, an $8 a year domain name and the rest is free.
How Much Does It Cost To Start A Self-Hosted Blog? $13 A Year | Cheapest Option in 2018