Advanced Concepts – Speed & Performance

Watch This Lesson

Lesson Overview

In this advanced web design lesson, we’ll explore Speed & Performance tips:

1. Hosting
2. Images
3. Videos
4. Plugins
5. Redirects

The following lesson will discuss the final 3 tips: CDN, Caching, Minification.

Lesson Transcription

Welcome! I’m Leighton, your webmaster. In today’s lesson, let’s talk about some more advanced concepts of a website: Speed & Performance. Let’s start with a question: which sounds more appealing to you? A website that loads in 10 seconds…. Or a website that loads in 2? (pause) You would probably prefer 2 seconds. In fact, is there a chance you wouldn’t even wait 10 seconds for the first site? Statistically speaking, some websites lose traffic and even revenue because of slow load times. So you and I both agree that a fast website is ideal… but who else do you think agrees with us? Google! Search engines have always recommended having a fast-loading website, but as of May 2021, Google’s search ranking algorithms got another upgrade to prioritize what’s called Core Web Vitals, which is a group of performance indicators that basically tell you how fast your website loads. The point of all this is, your visitors, your clients and the search engines would all prefer your website to load as quickly as possible. But that’s easier said than done. And that’s also why this is an “advanced concept.” There is SO much that goes into performance and dictates load time. It’s not just the click of 1 button. So how exactly do you increase the speed of your website? What do you think impacts the load time? Well, there’s a ton of factors, so let’s cover 8 of the major ones. And remember: the Web continues to evolve. New software comes out, coding languages mature, WordPress updates itself… So it’s super important that you continue your education and research the latest developments in web design. That being said, let’s go through these 8 site performance principles, namely, Hosting, Images, Videos, Plugins, Redirects, and then the next lesson will wrap up with Caching, CDN and Minfiication.

1. Hosting. Remember, your server is the foundation of your website. Its infrastructure. I cannot overstate this: Hosting is the #1 biggest contributor to your website’s performance, hands down. After all, how stable is a house if the foundation is weak? Cheap shared economy servers, by nature, are limited in their performance potential. That means all other performance tricks you implement can only do so much if you’re on a low-quality server. Now, that doesn’t mean hosting is the beginning and the end of your performance audit, but it is the core. Your performance potential is restricted on a lower-end server. On the other hand, if you’re on a terrific cloud server, like Cloudways, but you neglect other performance recommendations, your site’s load time could still suffer. Of course, when you’re first starting out and on a slim budget, a few extra seconds of load time might be an acceptable trade-off for affordable hosting, and that’s fine, but when the time comes to take performance seriously, consider dedicated or managed cloud hosting as step #1. Personally, I absolutely love Cloudways as a managed cloud server, and they’re still on the affordable end. Here’s a convenient link to Cloudways, and you can review the Hosting lesson in Section 1 of this Course to recap the various options available to you.
2. Images. This is a huge contributor to page load time. But graphics are also pretty much essential for a quality design. After all, can you recall visiting a website that did not have any images whatsoever? It’s rare. Most sites use a combination of images in the background and the foreground. Whether it be abstract background images, pictures of the team, the company logo, product images, photo galleries, websites are full of images. So how does this affect performance? First off, 1 standard photograph will typically be larger than the entire web page’s HTML. Multiply that by several images and you can see how images account for such a large percentage of Internet traffic. For example: think of an image from a smartphone camera. What do you think the typical size of a smartphone photo is? Traditionally, high-definition photos can be around 4 Megabytes, depending on your phone’s file type and compression. So let’s say 5 of those photos are uploaded directly to your website without any resizing or compression. How many Megabytes would that add up to? Just the photos themselves would be 20 Megabytes, which is extremely large for a web page! Uploading raw images to a website is a major mistake that new webmasters make, and generally it’s because nobody tells them otherwise! WordPress will accept most any photograph you upload without any indication that you should optimize and compress it first. WordPress is supposed to handle this for you, but for the sake of performance, the “best practice” is to optimize it first, THEN upload it. So how would you optimize an image? There’s a 3-step process. (Step 1) Look at the Filetype. JPG works in most cases. WEBP is also a good choice so long as you make sure there’s a JPG fallback for browsers that don’t support WEBP. But for the most part, JPG is universally recognized and compressible. You may have heard of PNG, but because the quality is so high on PNG, the file size is much larger, so this should ONLY be used if you need transparency for your web design project. (Step 2) Resize. Ideally, your images should be resized down to the resolution you actually need to display it. For example, if you are displaying a headshot JPG image at 600 pixel width, you could scale that 4000 pixel High-definition headshot down to 600 pixels, since that’s the rendering size. Alternatively, you could scale it down to 1800 or 1200 pixels, and that will appease devices that have a higher pixel density, like 2x or 3x. In other words, a 1200 pixel image rendered at 600 pixels on a high-density device will look high definition instead of pixelated. (Step 3) Compress. This is where you squeeze a few more kilobytes off of your file size by removing bloated metadata and other unnecessary junk without compromising image quality. You could, for example, take an image from 200 kilobytes down to 150 kilobytes in just a few seconds with an image compression tool. There are plenty of free ones. I personally use ImageOptim.com for the Mac, but there are several free options. Just drop your photo in and it automatically saves the smaller version. Follow those 3 steps (Filetype, Resize, Convert), and you’ll shred a major percentage off your page size and load time.
   • Demonstrate a 5Mb PNG file. Convert to JPG. Resize. Compress. Upload.
3. Videos: This can be another major contributor to web page load time. But videos are so important right now, yeah? How do we consciously integrate video onto our clients’ websites without sacrificing the performance of the website? Well let’s talk about this. For example, let’s say you want to add a video tutorial to your site. You create, edit, and export the video file. Then what? Do you upload this directly to your website via FTP or through the WordPress Media section? It’s possible. WordPress does allow video uploads. But for the sake of performance, absolutely avoid that. Unless your video is just a few Megabytes. See, when you host your own videos on your server, they take up a ton of space. High definition videos can easily be over 100 Megabytes. This is especially an issue on a shared server. You have limited space and could even violate the hosting Terms, which could get your hosting account shut down entirely. And even if you can upload large videos to your hosting provider, it will likely provide a poor user experience. Think about it: If multiple users attempt to watch a video on your site at the same time, your server will need to deliver that huge file to all of them. If your server has a limited amount of bandwidth, this can result in lags and pauses in playback. Have you ever watched a video that paused every few seconds to buffer? Was that frustrating? It certainly was. Don’t do this to your visitors or to your clients’ visitors. So what’s the solution to this issue? What comes to your mind as an acceptable way to display your videos without uploading them to your website? Try a 3rd party video hosting service. Think YouTube, Vimeo, Wistia. Then, once you’ve uploaded your video, then embed it onto your web page. The video hosting service will handle all the bandwidth, rendering, compression, all that advanced stuff on their end while displaying the optimal viewing experience on your web page without overloading your server. This process saves space, results in faster load times, and is extremely easy to do.
4. Plugins: another way to improve your website’s performance is by keeping an eye on plugins. On a WordPress website, it’s easy to fall into the trap of installing another plugin every time you need additional functionality. But do you think there could be a downside to accumulating a bunch of plugins? You’re right; the performance could suffer. See, every plugin (even performance related plugins ironically) must be loaded and read in order to operate, so each plugin adds to the page size and load time. Some are really small and lightweight, while others, like WooCommerce, are extensive. So do you think this means we should avoid plugins altogether? No, not necessarily. Some plugins are necessary, either for the management of a website, like backups and security, or the functionality, like booking calendars and eCommerce. So my advice to you is to be very intentional with your plugin choices. Pick and choose your plugins carefully, and review them every few months to see if there are any you can deactivate. And be aware of things you can do within WordPress or Divi without adding a plugin. For example: when you install Google Analytics for tracking, Google gives you a snippet of code to place on your site. Do you think this requires a plugin to install? There are plenty of analytics plugins available, but Divi (and many themes) has an area where you can add code to your website’s header and footer. In other words, you can achieve this functionality within Divi without bogging your site down with yet another plugin! Other times, you’ll research a problem and find a solution that requires editing your theme’s functions.php file. Adding a plugin might solve that problem too, but if you can fix something by just adding a piece of code to your theme’s functions.php, that is much cleaner and lighter. So keep an eye on those plugins, and your website’s performance will thank you.
5. Redirects: have you ever visited a web page only to be redirected to another page? Occasionally, there’s legitimate reasons to do this, like for tracking or short vanity links like bit.ly or when a company changes domain names but still has sites linking to the old URL. But when a web page redirects to another, do you think that happens instantaneously? You’re right. It doesn’t. Each redirect takes a little bit of time, and several redirects could add up to a few seconds. Precious time indeed! Think of redirects like taking the long road into town. Cutting out the redirects is like taking a shortcut! So your best practice for performance is to limit or eliminate redirects unless absolutely necessary.
   Finally, we’ll finish up the remaining 3 performance principles (Caching, CDNs and Minifying) in the next lesson.

And that’s it! There’s an overview of some of the best 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. Let’s recap all of the tips we just learned: You can optimize your website’s performance by:

1. Upgrading Your Hosting
2. Optimizing Images
3. Hosting Videos Externally
4. Deactivating Unnecessary Plugins
5. Limiting Redirects.

We’ll wrap up the final 3 tips in the next lesson.

I’m Leighton, and now you know how to improve your website’s speed and performance!

Lesson Homework

I want you to implement the 5 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.