Better illustrate the purpose

web/compromise.php

@@ -0,0 +1,9 @@
+<?php
+header('Cache-Control: s-max-age=60, stale-while-revalidate=82800');
+sleep(5);
+print('This is a slow test with data cached for 1 min but updated smartly so that for 23 hours people will experience a fast experience. ' . date('Y-m-d H:i:s'));
+?>
+<p id="js-date"></p>
+<script type="text/javascript">
+  document.getElementById('js-date').innerText = new Date().toISOString();
+</script>

web/index.php

@@ -1,11 +1,17 @@
 <?php
-header('Cache-Control: s-max-age=10, stale-while-revalidate=20');
+// First visit -> 5s, times match
+// Second visit -> instant, times don't match
+// … T+14 -> instant, times don't match
+// … T+15 (or 16) -> instant, times match (or almost)
+// Nothing for 30s -> 5s, times match
+header('Cache-Control: s-max-age=60, stale-while-revalidate=20');
 sleep(5);
-print('This is a slow test. ' . date('Y-m-d H:i:s'));
+print('This is a slow test with data cached for 10s but updated smartly. ' . date('Y-m-d H:i:s'));
 ?>
 <ul>
   <li><a href="./slow.php">Slow</a></li>
   <li><a href="./slow-but-fast.php">Slow but fast</a></li>
+  <li><a href="./compromise.php">A good compromise to deal with slow pages fast</a></li>
 </ul>
 <p id="js-date"></p>
 <script type="text/javascript">

web/slow-but-fast.php

@@ -1,7 +1,7 @@
 <?php
-header('Cache-Control: s-max-age=1, stale-while-revalidate=20');
+header('Cache-Control: s-max-age=1, stale-while-revalidate=99999999');
 sleep(5);
-print('This is a slow instant test. ' . date('Y-m-d H:i:s'));
+print('This is a slow test with as fresh data as possible. ' . date('Y-m-d H:i:s'));
 ?>
 <p id="js-date"></p>
 <script type="text/javascript">

web/slow.php

@@ -1,7 +1,7 @@
 <?php
 header('Cache-Control: s-max-age=10');
 sleep(5);
-print('This is a slow instant test. ' . date('Y-m-d H:i:s'));
+print('This is a slow test with 10s caching. ' . date('Y-m-d H:i:s'));
 ?>
 <p id="js-date"></p>
 <script type="text/javascript">