Advanced Concepts – CDN, Cache, Minification

Watch This Lesson

Lesson Overview

In this advanced web design lesson, we’ll explore the final 3 speed & performance tips: CDN, Cache, Minification.

Lesson Transcription

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.

1. Minify: Have you heard of minifying? It’s a buzz-word in the web design space. Let’s put it in simple terms. Minifying code means removing anything that a computer doesn’t need in order to understand and carry out the code. This includes code comments, whitespace, and unnecessary semicolons. This makes CSS, JavaScript and HTML files slightly smaller so that they load faster in the browser and take up less bandwidth. On its own, minification will result in only minimal speed improvements. However, implemented along with these other tips, it will result in better website performance. Another term that goes along with this is combining, which means combining multiple CSS and Javascript files into one. The fewer files to load, the better. So how do we go about this? Do you just check some “minify and combine” box? In some cases, yeah! Let me explain. So there’s several ways to accomplish minification. You could manually minify all files yourself, one by one, by copying and pasting them into an online code minifier. You could install a minification plugin. You could enable minification within Divi. You could turn it on through your hosting server. There are several ways to accomplish this, and here’s your Best Practice: If you can turn on minification on a server-level, before your plugins even begin to load, that’s the most efficient way. I like to use the minification in CloudFlare’s Free plan, and we’ll talk about that in the next point. Beyond that, if your theme has minification built in (and Divi does), try that. As a final option, if all else fails, install a minification plugin like Autoptimize, but remember: your WordPress software has to load first and call up that plugin before it even starts working. In terms of milliseconds, that’s a slower option by nature. However you accomplish minification, you must remember these 2 rules: (1) Only use one method of minification at a time. You should not turn on multiple forms of minification. These are not designed to work together. That might lead to problems down the road. (2) Always test. Minification can break your website if not implemented properly. Any time you turn it on or off, you need to refresh your website to make sure it’s still operational. So in summary, turn on 1 reliable form of minification, test it out, and enjoy a minimal performance boost.
2. 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.
   • Demonstrate CloudFlare CDN
3. 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.
   • Demonstrate CloudFlare Cache

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:

1. Minifying Your Code
2. Using a CDN
3. 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!

Lesson Homework

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.