• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How to Implement “Stale-While-Revalidate” on your Website

Bhagwad Park

Published on: May 13, 2019

Categories: Website Performance 1

Lately, I’ve been much concerned with improving my cache-hit ratios on CDNs. And I recently discovered the “stale-while-revalidate” directive. While a CDN like Cloudflare is easy to set up and use, they don’t provide much in the way of statistics. Specifically, you can’t easily get cache hit ratios for static assets, because we don’t know if their analytics graph includes requests for dynamic pages.

Moreover, I have a suspicion that Cloudflare doesn’t hold your static assets for very long in their EDGE cache if there aren’t too many requests. For example, by default, the Time to Live (TTL) on Cloudflare servers is a measly 120 minutes – or just two hours. For this reason, I’m experimenting with other CDN providers, where I can get accurate statistics.

What Does “stale-while-revalidate” Do?

Simply put, the “stale-while-revalidate” directive allows a CDN to serve an expired asset to a client, while it revalidates the file in the background.

So let’s say we have a CSS file that’s lying on the EDGE cache and expires in one week. Under normal circumstances, after one week, the first request for that CSS file will take longer than usual to service. Because the CDN will see that it has expired, request the origin for the new file, wait for the response, and then send the fresh one to the client.

And when you have dozens or even hundreds of static assets, with say 20 POPs all over the world, that’s a very large number of requests that take a long time to get going.

Instead of this, we can use “stale-while-revalidate” to tell the server: “Look, I know this file has expired. But for now, let the client have the older version of the file, just this once. In the meantime, revalidate the file from the origin in the background, so that the next client to request the file will have the fresh one”.

In essence, “stale-while-revalidate” allows you to have extremely short “max-age” directives, because it removes the disadvantage of longer wait times for clients if the file needs to be refreshed. Now that can happen in the background without impacting load times.

This goes hand in hand with the other related directive.

Related: “stale-if-error”

Sometimes for one reason or the other, your origin server will return an error to the CDN for a static file. Normally if this happens, the CDN will pass on the error to the client. That’s not good!

Now you can instruct your CDNs to continue serving the stale cached file even if the origin returns an error. And you can specify a time in seconds to tell the CDN for how long it should keep doing this before returning an error.

Both the “stale-while-revalidate” and the “stale-if-error” directives are great for improving your cache hit ratio and delivering great speeds to your customers.

Implementing the “stale” Directives in .htaccess

Here’s what I use in my .htaccess file to implement these instructions:

Add cache control and stale while revalidate or error directives
 <filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
     Header set Cache-Control "max-age=2592000, stale-while-revalidate=604800, stale-if-error=604800"
 </filesMatch>

Make sure this doesn’t conflict with any other cache control headers you might be sending. Specifically, check your plugins, and any other directives in .htaccess which might give different directions.

Integrating with Cloudflare

You can use a CDN in conjunction with Cloudflare. I do. In which case, you want Cloudflare to meddle as little as possible with the responses sent from your origin. To make sure of this, go to the “Caching” section of Cloudflare and scroll down to the “Browser Cache Expiration” section. Set the dropdown box to “Respect Existing Headers” as shown here:

Force Cloudflare to Respect Existing Headers

Now Cloudflare will pass your headers onto your CDN as expected.

Verifying the Headers

If all goes well, you should be able to check the status of each static file in your browser via the Chrome Development tools under the Network tab like this:

Verify that stale-while-revalidate is working

As you can see, the “stale-while-revalidate” headers are making it correctly from the .htaccess file!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Comments

  1. Guti says

    June 15, 2022 at 3:51 am

    Thank you

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA