In this advanced web design lesson, we’ll explore the final 3 speed & performance tips: CDN, Cache, Minification.
Welcome! I’m Leighton, your webmaster. In today’s lesson, let’s build upon the performance principles mentioned in the previous lesson. Specifically, let’s discuss the benefits of Caching, CDN and Minifying, starting with minifying.
CDN: Now let’s look at the value of a CDN, or Content Delivery Network. CDN is another popular web development term. What is a Content Delivery Network? In simple terms, with a CDN, a network of servers hosts your website locally to speed up page load times. For example: A user in Ireland accessing a website hosted in California wouldn’t have to ping the American origin server but rather a closer one in Ireland. Essentially, copies of your site are stored at multiple, geographically diverse data centers so that users have faster and more reliable access to your site. So how do you install a CDN? Do you think these are expensive? Well, not necessarily. There are plenty of options: KeyCDN, StackPath, Amazon CloudFront, Bunny CDN, Fastly. Cloudways has its own built-in CDN for only $1 per 25GB. All of those solutions can work well if configured properly. But what’s the CDN that I prefer? I start off with the free version of CloudFlare. They not only offer CDN service but combine that with security and optimization features, like minification and caching. I actually use the Free CloudFlare as my exclusive CDN and Minifier. Let me show you what CloudFlare has to offer and how to turn on their CDN.
Caching: Here’s another popular Web term. Have you heard of caching? Whether you realize it or not, your browser and the websites you visit are probably already utilizing caching to speed things up. Here’s how it works: When a site caches, the server saves copies of its web pages, so it doesn’t have to start from scratch every time it loads the website. It remembers how the website looked recently and shows you that. In addition to server-side caching, your browser is probably already saving copies of web pages on your device as well. With a multiple layers of browser and server caching, you can reduce load time, which increases the performance. A couple questions come to mind. Are there any downsides, and how do we implement caching? So can you think of any potential issues of your server and browser showing you a recent version of a web page? Think about this: What if you updated your Contact page on Wednesday, but the browser is still showing Tuesday’s version? That’s a common issue. Caching typically has a TTL, or Time To Live, basically how long cache should remain until grabbing a new copy. If you want people to see a recently updated web page before their copy of it expires, you might have to do what’s called Clearing the Cache. This is when all cache is flushed, automatically expires, so everyone sees the latest copy. This can be done on your browser as well as on your server. So how does one implement cache on a website? Well, as we mentioned, unlike minification, there can be multiple layers of caching. That doesn’t mean you should install multiple cache-related plugins, rather, that means you could have the browser cache, WordPress cache, hosting server cache, etc. There are plenty of caching plugins out there, like W3 Total Cache, WP Rocket, WP Super Cache, Autoptimize. So which one do I prefer? As mentioned in the CloudFlare demonstration, I actually use CloudFlare’s Free caching. See, instead of relying on WordPress to load a plugin, it’s more efficient to cache on a server level. Cloudways does offer its own caching through Breeze, but I prefer CloudFlare, especially since it’s free and easy to setup. Let me show you my ideal CloudFlare Caching setup.
And that’s it! There’s an overview of 3 more ways to improve your website’s performance. And again, please continue your education by reading up on the latest developments and best practices in this industry because the Web is always evolving, and we only scratched the surface of performance ideas in these 2 lessons. Let’s recap the 3 performance tips in this lesson: You can optimize your website’s performance by:
Minifying Your Code
Using a CDN
Caching Your Website
I’m Leighton, and now you know how to improve your website’s speed and performance through Minification, Caching and Content Delivery Networks!
I want you to implement the 3 performance suggestions in this lesson on your website. Be prepared to do extra research when you run into any issues as the guidelines in this lesson might require fine-tuning for your particular project.