Optimization

Using caching to improve website performance – W3 Total Cache plugin

Transcript

Introduction

Let’s explore caching to improve website performance. Caching is a technique used to improve the performance of websites. It involves storing frequently accessed data in a cache, which can be quickly retrieved when needed, rather than retrieving it from the server every time a user visits the website. Caching is like having a personal bookshelf for frequently used files and data. When a user visits a cached website, the browser checks the cache first for required files. If found, the website loads faster. It lessens the server’s burden by serving cached files instead of generating them repeatedly. Ultimately, caching enhances user experience by providing faster loading times and smoother website navigation.

Cache levels

Caching occurs at multiple levels to optimize website performance. At the front end, browser caching stores static files like images and CSS on visitor devices, reducing server requests. Moving deeper, object caching in WordPress speeds up data retrieval by storing frequently accessed information in fast-access storage systems like Redis or Memcached. At the server level, opcode caching improves PHP execution, while advanced solutions like Varnish can dramatically boost performance for high-traffic sites. Each caching layer contributes to faster load times and reduced server load, creating a smoother user experience.

Adding a plugin is probably one of the most simple ways to optimize caching on your WordPress website. Cache plugins simplify implementation, optimize performance, offer advanced techniques and include cache management features for efficient and targeted caching on your website. Let’s briefly look at four of the most common caching types you will encounter.

Common types of caching

First up is page caching. Think of it as taking a snapshot of your webpage. We serve this pre-made version instead of building the page from scratch every time someone visits. It’s like having a photo ready to show instead of painting a picture on the spot. This approach creates a static copy of the page, eliminating the need to query the database repeatedly. The result? Faster load times for your visitors.

Number two, browser caching. When you visit a website, your browser saves certain files so the next time you visit that site, your browser can use the stored files instead of downloading them again. This helps to load the website faster since the browser doesn’t have to fetch all the files from the server every time.

Number three is server caching. Server caching involves storing commonly accessed website data. When a user requests that data, the server can quickly retrieve it from the cache instead of generating it again.

And number four, CDN caching. Content Delivery Networks store copies of website files on servers located in different parts of the world. When a user visits the website, the files are loaded from the nearest server, reducing the time it takes for the content to reach them.

Using a plugin

Some plugins to explore are W3 Total Cache, WP Faster Cache, and LiteSpeed cache, but many others are available in the Plugins Directory. In this example today, we will install and activate the W3 Total Cache plugin and then enable some of the most important settings. Once we have installed and activated the plugin, we can go to Settings. Once you land here, you can follow the setup guide or skip it if you please.

Setup guide

We will go ahead and follow the necessary steps. Let’s go ahead and test the page cache. And we are after the fastest time, and as you will notice, they have also recommended disk enhancement, which is actually the fastest time. Then, we can click on Next and select Test database cache. Now, at the bottom below, it is recommended to leave this feature disabled as the server database engine may be faster than disk caching. So, let’s move along and test the object cache. And then select the fastest time. Then, we can click Next and test the browser cache. We will keep it enabled and then move on to image optimization. This will allow you to enable the WebP converter. It adds the ability to convert images in the Media Library to the modern WebP format for better performance. Finally, we can also enable a lazy load of images. When lazy load images are selected, images and other media elements only load when the user reaches that section, reducing website load time.

General settings

When the setup is done, we can visit General Settings to learn more about extra settings and features. Let’s take a closer look at some General Settings. First up is page cache. The first thing we want to do is ensure that this is enabled. Adding page cache can improve performance and reduce server load. Please note that some hosts also provide page caching.

Next, we are going to look at minify or minification. This technique is all about trimming the fat from your website’s code. Minification automatically strips away unnecessary data from CSS, JavaScript, feed pages, and post HTML. Think of it like compressing a file before sending it. You’re not losing any important information, just making it more compact. We can, therefore, go ahead and enable minify. I’ve read through the documentation, so I will go ahead and say I understand the risks. And leaving minify mode on auto will suffice. However, if you notice any odd behavior or if your site doesn’t look quite right after enabling this, minification could be the culprit. It’s a powerful tool, but sometimes it can be overzealous in trimming.

Then, we can scroll down to the opcode cache. Opcode cache is available to pro-version users and allows you to store compiled PHP code. Now, we move on to database cache and object cache. Let’s first talk about database cache. As you know, it was recommended during the setup that it might be better to keep this disabled on this specific website. It also says it is best used if the object cache is not available. Object cache is possible, so we have therefore enabled this feature as it further reduces execution time for common operations. But please note that database cache and object cache are not recommended when using shared server hosting.

Up next, we will ensure that browser cache is enabled, as it reduces server load and decreases response time by using the cache available in a visitor’s web browser. As mentioned, CDN caching is also important. And to implement this, you need a CDN provider. So make sure you sign up for a provider such as CloudFlare, Amazon CloudFront or others. Let’s move on to the Google Page Speed section. Here you can connect to the PageSpeed Insights API, which lets you analyze the performance of your website. If you authorize this, you must connect your Gmail account.

When in your dashboard, you can use your left sidebar to fine-tune more specific settings for different cache types. Lastly, it is worth mentioning that sometimes the cache won’t realize you have made changes or updated your site, and instead of loading the new version of your site, it will load the old version. You might then consider clearing your cache to ensure the newest version of your site loads as a form of troubleshooting. You will find options to clear the cache at the top of your dashboard.

Conclusion

To conclude, by understanding and implementing these different levels of caching, you can enhance your website’s speed and performance, ensuring a smoother experience for your visitors.

This is a preview lesson

Register or sign in to take this lesson.

Suggestions

Found a typo, grammar error or outdated screenshot? Contact us.