I’m obsessed with optimizing my websites for performance. In this post, I’ll share a few tips and tricks that I use to make sure BrianLi.com loads quickly. Before we get into the optimization tips, here are two examples of BrianLi.com’s load time – 277 ms for a text-heavy page and 0.6s for an image-heavy page.
High Performance Web Hosting
While I do use Cloudflare’s full-page caching on certain pages on BrianLi.com, having a high performance web hosting company is extremely important for serving pages that aren’t cached by Cloudflare. BrianLi.com is hosted on Kinsta, which also happens to be where I work. Biases aside, I’ve tried all the major WordPress hosting companies including WP Engine, Pagely, Cloudways, Flywheel, Bluehost, and more. Before joining the Kinsta team last year, I had already used their platform and formed my conclusion. Kinsta’s containerized hosting platform is powered by Google Cloud’s with server-level caching. If you’re interested in moving to the best managed WordPress hosting company in the business, check out Kinsta’s plans.
I use three optimization plugins on BrianLi.com. The first one is a must-use plugin from Kinsta that connects WordPress to the backend server-level caching setup. The second plugin I use is Autoptimize to minify HTML, CSS, and JS. Finally, I use Imagify to optimize images. I like Imagify because it offloads image optimization to external servers, which means the performance of my Kinsta server won’t be affected by the optimization process.
Cloudflare CDN & Caching
I use Cloudflare’s free-tier, which offers caching, security, and CDN services. With Cloudflare’s free CDN, I’m able to serve static assets (HTML, CSS, JS, and images) from data centers that closer to my visitors. Since BrianLi.com is available in English, Japanese, Korean, and Chinese, being able to offload static assets to servers around the world puts less strain on my origin server in the USA and gives overseas visitors a better user experience. I also use Cloudflare’s full-page caching to cache posts with this special page rule.
BrianLi.com’s permalink syntax for English single posts always start with a year (e.g. 2019), while translated posts are prepended with a language identifier (e.g. ja/2019). Both of these examples are matched by
/*20*/. Next, the three subsequent wildcards
(/*/*/*) match the month, day, and post slug. Since single post URLs are the only ones that match this URL structure, other pages are unaffected by Cloudflare’s full-page caching.
That’s it. My secret recipe is high performance web hosting from Kinsta, a few optimization plugins to minify assets and optimize images, and Cloudflare’s free CDN and page caching. With that said, this setup may not work everyone. Cloudflare’s full-page caching may not be compatible with e-commerce and other highly dynamic sites. Since BrianLi.com’s single posts are 100% static, Cloudflare’s full-page caching can be used with no issues. The other tips are still valid for the most websites. A good web host, proper minificiation, and a CDN can go a long way to improving a website’s performance.