Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

The Impact of Web Caching

DZone's Guide to

The Impact of Web Caching

Need a refresher on caching? Read on for the pros and cons of using web caching, and how to optimize your results to create a better UX/UI.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Try to remember something that happened on your last vacation. How long did it take you to recall? Now, try to remember it again. You were probably able to recall it faster the second time— but, why? This is because as soon as you recalled the event the first time, your brain saved the information to your recent memory.

The same concept applies to caching. Caching is a way of temporarily storing the contents of a webpage in locations near the user, similar to the way our memory works. There are several types of caching options available like database caching, application caching, distributed caching, etc. In this article, we’ll talk about web caching and how it affects user experience.

What Is Web Caching?

Website developers use different techniques to optimize performance and improve speed. One such method is web caching, which involves downloading the shared page elements (JavaScript, CSS, images, etc.) and storing it closer to the user so the browser can retrieve this data from the stored location, rather than querying the web server again.

Web caching minimizes network traffic and improves the perceived performance of the webpage. Caching can be implemented at different levels along the network path. The following are the possible caching entities between the origin server and the browser:

  • Local browser: Your browser maintains a place on your hard disk where it stores content that is being requested frequently.
  • ISPs or caching proxies: Servers along the network path can cache the content. These servers can belong to either ISPs or any other third party.
  • Content Delivery Network (CDN): CDNs make use of multiple networked servers to distribute the web content from locations closer to the users.
  • Proxy for your backend server: You can have your infrastructure built on top of your backend servers, which can cache all your content and act as a focal point for reducing the load on your backend server.

How Do the Caching Entities Know What to Cache?

Caching is implemented through an HTTP headers directive, named “Cache-Control,” which is sent out in instances of HTTP response headers. If the request is allowed to cache, entities will keep a copy of the page for a specified period, which helps the content owner determine the caching behavior. Cache control lets the entities identify the response/request that can be cached and for how long.

Syntax Cache-Control: public 

Here is an example of an HTTP Response with a Cache-Control header:

How Does Caching Help in Improving User Experience?

User experience can have a direct impact on your brand; it can either build your online business or hinder its growth. There are several components that contribute to a satisfactory user experience. Caching is an important factor to consider when optimizing website performance. It has the following advantages:

1.Reduced Latency

The load time of a website can be a cause for user frustration; pages that take a long time to load usually result in higher bounce rates; let us look at some of the stats:

  • 51% of online shoppers in the US say that site slowness is the top reason they’d abandon a purchase.
  • A 2-second delay in load time during a transaction results in abandonment rates of up to 87%.

The speed at which the webpage loads is crucial in ensuring a good digital experience and caching can reduce load time as it serves content from a location nearest to the users – either on the user’s hard disk or a nearby server.

The above image illustrates the impact of caching. As you can see, the page loads 50% faster when cached. Caching reduces latency in the roundtrip time by retrieving the content much faster. The time taken to retrieve the resource from the cache will be lower than the time it takes from the origin server and this speeds up the content delivery process.

2. Content Availability

Content availability is a key component in user experience as users from across the globe can access the website. A site may not load for a user due to several reasons – the network may be prone to frequent interruptions or the site may be experiencing intermittent outages. In such cases, caching will save the day by serving end users the cached content, making the website robust.

3. Avoids Network Congestion

The internet handles huge amounts of data and manages heavy traffic through the day; as a result, bandwidth congestion can be an issue on major networks.

To understand this better, let’s use a restaurant as an example. Assume that there is only a single location for this restaurant in the city, making it a crowded spot with customers coming in every few minutes. If the restaurant ends up exhausting all of its resources trying to manage everyone, service could be delayed as they are working above their existing capacity, resulting in a long line of customers waiting to be served. The restaurant would be able to manage better if they had more than one location in the city to help distribute the customers and balance the load.
The same logic applies to the internet as well. Network congestion can be greatly reduced with caching, as the path traveled in fetching the content is cut short when it’s cached. Since all the requests are not directed towards the origin, it frees up the network and reduces the load on the origin server, helping it serve non-cached content faster.

The image above demonstrates the difference in the number of requests with or without cache on the wire.

Disadvantages of Caching

The best practices for implementing a cache strategy are not strictly defined, so if caching is not set up correctly, then the browser will not be able to validate the cached content and the page may load outdated content, which can have a negative impact on the user experience.

Caching entities include third-party proxy servers shared by multiple users which are always at risk of being compromised. If caching servers are hacked then it impacts all the users connected to this server.

Troubleshooting Caching Issues

A performance monitoring solution has proven to be a very effective way of mitigating issues associated with caching. One of our own customers reported an issue in which users from certain locations were unable to use the search feature on their website. In this instance, the search results were blank.

While troubleshooting the issue, we found that one of the CDN servers was fetching a zero-byte JavaScript from cache. The cache was not updated at the CDN level, which resulted in the search error. This incident taught us two vital lessons:

  • Continuous evaluation of caching policies is important.
  • Always have CDN monitoring in place.

Implementation of caching will help grow your business positively by being a vital cog in ensuring business sustenance. But at the same time, it is very important to ensure optimal caching policies are in place to suit your business. Tailored solutions are the way to go because there is no one-size-fits-all solution. Caching may not be the talisman, but it will ensure that your business stays afloat and affluent with minimal exertions.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
caching ,web dev ,ux/ui design

Published at DZone with permission of Alva Yashaswi, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}