Smart Caching Techniques: The Key to Faster Website Load Times

Performance affects site visitors’ experience as soon as your URL loads in their browser. If the site takes longer than the blink of an eye to load — a mere 400 milliseconds — users will jump away or maybe to a competitor. And it’s not just load speed that matters to users; up-to-date content is crucial for creating happy customers. Out-of-date content coupled with a slow site will compound, affecting your engagement, bounce and conversion rates, and sales. 

For your DevOps teams, being resource-smart is particularly of interest. As the ones responsible for hosting, managing, and configuring your web servers, an unnecessarily heavy load on your infrastructure directly translates to more work for them. Inefficient resource use also impacts CTOs and CEOs, who want to reduce unnecessary operational costs, and at the same time, stay competitive with a fast-performing website and an engaged user base.

Everyone wants their site to be performant, responsive, resource-smart, and user-friendly. This is where implementing smart caching techniques comes in. Smart caching practices make it easier to serve your content quickly and maximize the server power you already have. Additionally, smart caching allows you to scale smoothly and effectively as your needs and infrastructure grow, keeping you on the right course for the present and future.

Caching improves site performance by storing frequently accessed data in a temporary storage area for faster retrieval. There are several factors to consider when determining your particular caching needs and how to optimize them.

• Typical traffic — how many simultaneous requests your server generally receives over a given period.
• Repeat users — understand how people use your site. Repeat visits may require re-downloading the same content, which takes longer.
• Peak times or “exceptional circumstances” — consider the nature of your site’s content. Will you often have ad campaigns to drive new users? Be aware of your high traffic times and anticipate increased loads.
• Location of servers — the physical distance from your servers to your users can affect load time. 
• Size and power of servers — avoid wasting your precious server resources by having too much or insufficient power.
• Amount of dynamic vs. static content — regularly updated or personalized content (known as dynamic content) creates more complexity, meaning longer load times, and more strain on your servers.

Caching concepts 

There are two approaches to caching, server-side and client-side, with different advantages to each. They can also be used together to further optimize performance.

Server-side focuses on caching data on the server to improve server performance and reduce load. Server-side caching includes content delivery networks (CDNs), object caching, and reverse proxy caching. It’s a good idea to use when you want to improve your site’s performance and scalability.

Client-side caching includes site and browser caching and focuses on caching data on the client's device to improve page load times and reduce network requests. Site caching works well for websites with mainly static content. Browser caching plays well with static content too, as well as sites with large media files and high quantities of return visitors.

A clear-eyed assessment of your site’s server setup, peak times, typical traffic, and amount of dynamic content will help you figure out the caching solution that best fits your needs. If your site’s content leans toward static and you have less traffic, a basic configuration makes sense. You will need a more complex configuration if you have heavy traffic or your site has more dynamic content that changes frequently.

Whatever configuration you decide on, basic or complex, both rely on communication with HTTP caching proxies. These caching proxies reduce the time it takes to fetch data for a user request and act as a buffer between your application and your users. In Sulu’s case, we use HttpCache and Varnish. 

Use Symfony HttpCache for basic configuration

Symfony HttpCache is Sulu’s default caching proxy. Written in PHP, it provides fast caching out-of-the-box, and it tends to work well for smaller companies that receive less traffic and need a basic configuration. Symfony HttpCache supports:

• Full page caching — where the whole page is rendered and returned to the user. Full-page caching is a good use case for pages with more static content.
• Cache invalidation and cache expiry — come pre-packaged so you don’t have to build them yourself.
• Edge Side Includes (ESI) — to handle dynamic content

Use Varnish for more complex configuration

Sulu’s other caching proxy is Varnish, a fully-featured reverse proxy cache. Varnish is an optimal solution for a large website with more dynamic content, especially if it receives high traffic. One of Varnish’s main benefits is its speed: it’s roughly two times faster than the default caching proxy. On top of that, it’s configurable. Varnish also supports the use of ESI to handle dynamic content, as well as:

• Distributed setups — which enable multiple servers
• Cache invalidation — so your site will appear more up-to-date
• Cache warming — to resolve the “blank page” issue
• Varnish Configuration Language (VCL) — to customize and control cache behavior

Using Varnish with ESI 

Sometimes, the majority of content on a page stays consistent for each user, but certain elements are dynamic. This was a difficult scenario to work with in the past because while dynamic content is extra engaging for users, it was not always considered cacheable. 

But technologies like ESI have changed this. ESI allows specific parts of a page to have a different caching strategy from the main page. For example, if you have a relatively static page except for a news ticker at the bottom, you can cache the news ticker independently of the rest of the page using ESI.

Upgrading to a more complex caching setup

It can be difficult to know when it’s time to move from a more basic caching proxy, like Symfony HttpCache, to a more fully-featured one, like Varnish. Some pointers on what to look for:

• Any of the above preconditions apply to your infrastructure, i.e. heavy peak times or a distributed system with multiple servers
• High traffic that has been steadily growing, especially if the growth is over years

If you notice either of these two points, it may be time to upgrade to Varnish. The good news is that HttpCache and Varnish use the same standard, so upgrading from one to the other is relatively straightforward, simple, and smooth.

Using smart caching to improve user experience and website performance

Some CEOs think they have no choice but to add more servers to keep up with their site’s needs and users’ expectations. But adding more servers costs time, energy, and money, and it isn’t a sustainable strategy in the long term. It’s possible to meet your growing demand without adding countless servers to your infrastructure. 

Smart caching practices make it easier to maximize the server power you already. Caching proxies like Symfony HTTP Cache and Varnish can act as helpful intermediaries between your servers and your users, keeping the load away from your application. They also enable techniques like grace mode and cache warming to serve content to your users as quickly as possible, so they aren’t kept waiting.

Sulu’s client, Küchengötter, is a high-traffic recipe website, containing upwards of 40,000 recipes. Predictably, around mealtimes, Küchengötter would get flooded with requests. With over 7 million visitors per month, these significant traffic spikes brought the servers down at least once a week. Users got frustrated, contributing to high bounce rates, and the Küchengötter DevOps team had to scramble to fix it. The complex nature of Küchengötter’s pages contributed to performance issues — the system needed to assemble multiple pieces of content like recipe ingredients, cooking steps, and ratings quickly.

The page complexity, combined with the number of parallel requests received during high traffic peaks, all while trying to clear the cache, was a heavy burden for Küchengötter’s site. Johannes Wachter, Core Sulu Developer, explains, “It was a tricky situation because we had to decide if we go with bigger servers to handle those few minutes of load while we clear the cache, or we could better use the server power by optimizing the Varnish configuration.”

Küchengötter needed a solution that could rise to their challenges and a caching configuration that could evolve over time. By the criteria we established above, it was clear Küchengötter needed a complex caching setup; they needed Varnish! Using Varnish, there is only one request per stale cache entry, and Küchengötter was better able to predict the load on their servers and thus, save their DevOps teams a lot of headaches. It also reduced the frequent downtime they were experiencing to almost zero. By implementing ESI,  Küchengötter could change only the dynamic parts of their pages that needed updating, and not waste valuable server resources on static content.

A performant website is critical to any organization’s success. A poor-performing, less responsive site will not only cost you customers, but also dock you points with Google, sending you spiraling down the list of search result rankings. Staying responsive is crucial to keep your users, Google, and decision-makers happy. 

With smart caching techniques and the support of powerful caching proxies, you can analyze your individual website’s needs, adapt your infrastructure to suit them, and enjoy the view as your performance and user experience vastly improve. Smart caching practices can keep your website performant, responsive, ranking higher in search results, and reduce user latency. Even better, Sulu can scale with you to meet new growth demands.