Intro
These numbers definitely don’t lie, I’ve been optimizing my website for over a month now and it looks like I can finally rest. Thus, I’m going to tell you all exactly what I did to finally achieve good optimization despite all the junk that I have on my site!
Of course though, before I start, I’m going to document everything that I had for the sake of reproducibility. I believe that these results would work best on webhosts that are configured for LiteSpeed, in my case it would be Hostinger.
Prerequisites
- Hostinger Cloud Professional Hosting Plan (I’m sure the hosting plan has a very minimal impact up until you start hosting a relatively large audience).
- WordPress 6.1 with Hello Elementor Theme
- PHP 8.1
- Cloudflare Pro Plan + Argo (I will most likely do the same tutorial but on Cloudflare’s free plan without Argo and see how it matches up).
- LiteSpeed Plugin.
- Docket Cache Plugin.
- Cloudflare Plugin.
- I am assuming that you more-or-less understand how to navigate around Cloudflare but here is a tutorial just in case you don’t or merely need a refresher https://themeisle.com/blog/cloudflare-for-wordpress-tutorial/
Part I
After you have completed the prerequisites by getting exactly the same things (or its equivalents/something close) then we can continue.
Step 1) First thing I did was access the cloudflare plugin (if you haven’t already, sign in with your email address and API Key in order to connect your plugin to the website) which we can find in our wp-admin settings of our websites, and clicked “Apply Recommended Cloudflare Settings for WordPress.” We want to make sure that APO (Automatic Platform Optimization) is also enabled, caching by device type is checked.
Step 2) In the settings tab of the cloudflare plugin, I have “Always Online” enabled as well as “Auto Purge Content On Update” enabled. In the Security section of the tab I have Automatic HTTPS Rewrites enabled. Everything else in the tab is either on default settings or disabled.
Step 3) Go on the cloudflare website itself and access Home -> Website -> Speed -> Optimization. There should be a banner saying “Enable Argo” and if you haven’t already, then do so and return to the optimization tab.
Step 4) My exact settings are as follows:
- Image Resizing: Off
- Polish: Off
- Auto Minify: HTML/CSS/JavaScript are Off
- Brotli: On
- Early Hints: On
- Automatic Platform Optimization for WordPress: On
- Enhanced HTTP/2 Prioritization: On
- TCP Turbo: Automatically Enabled
- Mirage: On
- Rocket Loader: On
- Automatic Signed Exchanges (SXGs): On
- AMP Real URL: Off
Part II
Save all of your settings and purge everything. Check your website and make sure that nothing is broken. If everything is looking all set then continue on.
Author’s Note: Now we start fiddling around with LiteSpeed Cache. After enabling it I’m sure you’ve already noticed the annoying banner insisting that LiteSpeed “may conflict with Cloudflare and Docket Cache.” And it is true! At one point in time my website was quite problematic due to the caching conflicts between Cloudflare and LiteSpeed.
This was in the beginning however when I was relatively inexperienced compared to how I am now so I wasn’t quite sure what I was doing. Nowadays however, I know a little bit more, just enough to write this out.
In any case though, if you’re annoyed with that banner that will never quite disappear (is there a setting for it? I haven’t seen it yet) I do know of a solution, and I will put it out in a subsequent documentation under this tutorial as it’s currently out of the scope of this tutorial (page optimization of course). So without further ado, let us continue.
Part III
Step 5) If you’re reading this beyond November 2022 then you’re in luck! Back in the day we didn’t have a thing called “Presets.” Now we do however, and I think it’s the main reason why my website isn’t broke haha.
I tested out the Advanced/Aggressive/Extreme presets. I found that on Advanced, my speed and structure were reaching decent metrics, but not enough. On the Extreme preset, my website broke and I’m not really interested in spending hours configuring everything exactly right. I finally tested out Aggressive and saw that my website wasn’t breaking, so I kept it!
Step 6) So it seems like Advanced or Aggressive presets are the best choices for now. After we’re done with picking the optimal preset, let’s head over to the CDN tab. Scroll all the way to the bottom and input the necessary information to activate and enable Cloudflare API.
Step 7) Now for the final part, messing with the Docket Cache plugin! Go ahead and click on the configuration tab of the plugin and we’ll start. Now, fair warning, my web host does not support Redis or Memcached which is why I am using Docket Cache. Otherwise, LiteSpeed does support both Redis & Memcached if I am correct.
Step 8) If you are in the same boat that I’m in and can’t use either Redis or Memcached for “Persistent Object Caching” then Docket Cache is your next best bet. For my configuration this is what I have:
- Feature Options Section: Everything enabled.
- Cache Options Section: Everything enabled.
- Everything Else: Default Settings with the exception of enabling Flush Cache During Deactivation. Never know when I’ll be able to switch over to Redis and be able to deactivate Docket Cache after all! For the meantime though, Docket Cache is serving us well.
Outro
Well, that’s all that I really have to say for this tutorial I think. It’s my first tutorial and it’s gone pretty well I’ve gotta say. If there’s anything more to add then I’ll gladly re-edit this tutorial and update it as necessary! So until next time.
Regards From Your Fellow Wonderer,
Andrew Stargazer
