Cache, Website Cache and Server Cache

Cache (pronounced “cash”) is a reserved storage location that collects temporary data to help websites, browsers, and apps load faster.

Cache makes it easy to quickly retrieve data to help devices run faster. It acts like a memory bank, making it easy to access data locally instead of redownloading it every time you visit a website or open an app.

Types of Cache:

Website Cache

Website Cache or Page Cache stores website data the first time a web page is loaded. Each time a user returns to your website, saved elements are quickly accessed and displayed to visitors.

How Website Cache Works

When you open a site, the web caching gathers all the website data, turns it into an HTML file and opens it on your browser.

The next time you open the same site, the cache will load a copy. This helps the server to work faster and not overload.

Best Way to Set Up Website Cache

Website cache is purely client-side, which means that all the stored elements are controlled by the end user. As a website owner, the only say you have is how long content remains in the cache.

If a page has elements that never change, you can set the cache expiration date far into the future. However, elements that change regularly should have shorter expiration periods, so they’re periodically refreshed, otherwise, your site will continue to display outdated content to users even after you’ve published updates.

For this reason, site caching is ideal for websites with a lot of static content. Since your site rarely changes, users can continue loading your pages quickly while still seeing the latest version of your site. On the other hand, sites that include many dynamic features may benefit more from other types of caching.

Server Cache

A server cache is a type of cache that’s related to website caching, but instead, it’s stored on a site’s server. Server caching is fully handled and administered on the server without involving the end user or a browser.

How Server Cache Works

When a user request a web page, the browser takes the request and analyses it. It then determines whether the user has already visited the web page before or not. If the user has, then it searches for the content it has saved on the end user’s computer.

After that, it sends the server the requests to send all other data and objects that are not there on the client side to put up the web page completely.

The server authenticates the request and serves accordingly.

After authentication, the server acts like a browser; it searches for previous requests and if there is data stored in the cache to serve immediately.

Best Way to Set Up Server Cache

Server cache can be considered as an umbrella for many types of caches. The three most common types include:

Object cache: This kind of cache is used for quick retrieval and faster page loading for database queries.

CDN cache: Content Delivery Network (CDN) is a set of servers that are located at different geographic locations. The server that’s closest to the end user will return cached content to load content faster.

Opcode cache: This cache stores precompiled codes so that PHP does not have to load and parse scripts for every request.

Server cache is the best method to reduce server loads. This is especially helpful for high-traffic sites to return web pages faster.

The methods used to set up server caching vary depending on the specific type of cache you want to implement. Cloudflare is a popular CDN for WordPress users. If you want to activate object caching, WordPress has a built-in system you can use.

For opcode caching, you’ll need a WordPress plugin such as WP Rocket. After installing and activating it, opcode caching should initiate automatically. You can update or purge the cache in the plugin’s settings.

Browser Cache

Browser cache, as the name suggests, exists on the user’s browser. It’s stored in the user’s hard drive and makes sure that it’s not necessary to download every element of a webpage for subsequent visits.

For example, a page you frequently visit will have many elements that do not change over time, like icons and logos. It’s practical to store these images on the first visit to reduce the loading time on later visits.

How Browser Cache Works

A browser cache is a kind of client-side cache, which means it’s also a type of site caching. It works in the same way and it’s a cache system that’s built into a browser. Website elements are stored by the browser on your visitor’s computer and grouped with other files associated with your content. A browser cache can contain HTML pages, CSS stylesheets, images, and other multimedia content.

Best Way to Set Up Browser Cache

All browsers have a cache that flushes out old files without any need for user intervention. So when a page is updated and the content stored in the cache is obsolete, the browser knows it should flush out the old content and save the updates in its place.

WordPress plugins, including WP Super Cache and WP Rocket, can also be used to leverage browser caching.

The end-user can also manually clear out their browser’s cache whenever they want.

Setting Up WP Rocket in WordPress

WP Rocket has already enabled page caching by default, but the settings can be tweaked to further improve your website’s speed.

Setting Up Caching Options

1. Mobile Caching

Mobile caching is already turned on by default. However, it is recommended to check the ‘Separate cache files for mobile devices’ option as well.

This option allows WP Rocket to create separate cache files for mobile users. Checking this option ensures that mobile users get the full cached mobile experience.

This is applicable to Advivo since the site has almost 20% mobile users based on MS Clarity report.

2. User Cache

If you run a website where users need to log in to your website to access certain features, then you need to check this option.

For example, if you run a WooCommerce store or a membership website, then this option will improve user experience for all logged-in users.

This may not be necessary for Advivo as it does not run a membership site.

3. Cache Lifespan

Cache lifespan is the time you want to store the cached files on your website. The default limit is set to 10 hours which would work for most websites, however, you can set it to a lower value if you run a very busy site. You can also set it to a higher value if you don’t update your website frequently.

After the lifespan time has passed, WP Rocket will delete the cached files and immediately start preloading the cache with updated content.

This can be set accordingly for Advivo based on average monthly traffic. As of the last 28 days, the site had a total of 1730 users based on Google Analytics.

(Don’t forget to click on the Save Changes button to store your settings.)

Minifying Files using WP Rocket

WP Rocket enables you to minify static files such as JavaScript and CSS stylesheets. You can simply switch to the ‘File Optimization’ tab and check the boxes for the file types that you want to be minified.

Minifying static content makes file sizes smaller. In most cases, this difference is too small to make any noticeable impact on your website’s performance, however, if you run a large traffic site, then this can have a big impact in reducing your overall bandwidth usage and saving on hosting costs.

The one caveat is that minifying files can also have unexpected consequences like files not loading or not working as intended.

If you turn this setting on, then please make sure to thoroughly review your website pages to make sure everything is working as intended.

Lazy Load Media to Improve Page Load Speed

Lazy loading downloads only the images that will be visible on the user’s screen. This makes your page load and feels faster.

WP Rocket comes with a built-in lazy loading feature. You can enable lazy loading for images by simply switching to the ‘Media’ tab on WP Rocket’s settings page. You can also enable lazy loading for embeds like YouTube videos and iframes.

Note: While lazy loading images will help improve perceived website speed, you should always save and optimise images for the web to get maximum results.

This is applicable to the Advivo site since it contains a lot of images as well as videos.

Fine Tune Preloading

By default, WP Rocket starts crawling your homepage and follows links to preload cache. Alternatively, you can tell the plugin to use your XML sitemap to build cache, or you can turn off the preloading feature as well, but we do not recommend that.

Turning off preloading will tell WordPress to only cache pages when they are requested by a user. This means the first user to load that specific page will always see a slow website.

Note: Please keep preloading ‘on’ to get maximum performance results.

Set up Advanced Caching Rules

WP Rocket gives you full control over caching. You can switch to the ‘Advanced Rules’ tab on the settings page to exclude pages that you don’t want to be cached.

You can also exclude cookies, and user agents (browsers and device types), and automatically rebuild cache when you update specific pages or posts.

The default settings would work for most websites. If you are unsure about these options, then you need to leave them blank.

This settings area is best for developers and power users who need custom settings due to a complex website setup.

Performing Database Clean up using WP Rocket

WP Rocket also makes it easy to clean up the WordPress database. It has very little to no effect on your website performance, but you can still review these options if you want to.

Switch to the ‘Database’ tab on the plugin settings page. From here you can delete post revisions, drafts, spam, and trash comments.

We don’t recommend deleting post revisions because they can be useful for undoing changes to your WordPress posts and pages. You also don’t need to delete spam and trashed comments as WordPress automatically clean them up after 30 days.

Reducing Heartbeat API Activity

Heartbeat API allows WordPress to send a periodic request to the hosting server in the background. This allows your website to perform scheduled tasks.

For example, when writing blog posts the editor uses heartbeat API to check connectivity and post changes.

You can click on the Heartbeat API tab to control this feature and reduce the heartbeat API frequency.

We don’t recommend deactivating the Heartbeat API because it offers some very useful features. However, you can reduce its frequency to improve performance, especially for larger sites.

Experience the Difference with Custom Web Design

Transform your online vision with Web Development Brisbane. We’re your reliable partner for Web Development, Web Hosting, Web Design, and Copywriting in Brisbane. Call 0468 967 890 or send a message to get started today.