Slides for my Laracon EU 2022 presentation in Amsterdam about caching Laravel applications with Varnish. See https://feryn.eu/speaking/taking-laravel-edge-leverage-http-caching-varnish-maximum-scalability/ for more information.

1. TAKING LARAVEL TO
THE EDGE WITH HTTP
CACHING & VARNISH
By Thijs Feryn

2. Slow websites
SUCK

3. WEB PERFORMANCE IS AN
ESSENTIAL PART OF THE
USER EXPERIENCE

4. SLOW~DOWN

8. THROWING
SERVERS
ATTHEPROBLEM

9. MO' MONEY
MO' SERVERS
MO' PROBLEMS

10. IDENTIFY SLOWEST PARTS

11. OPTIMIZE

12. AFTER A WHILE YOU HIT THE LIMITS

13. CACHE

14. HI, I'M THIJS

15. I'M THE TECH
EVANGELIST
AT

18. 9,000,000 WEBSITES
21% OF THE TOP 10K WEBSITES

19. I'M @THIJSFERYN

22. USER SERVER

23. REVERSE CACHING PROXY

24. USER PROXY SERVER

25. USER PROXY SERVER
THE EDGE

26. USER VARNISH SERVER
THE EDGE

28. BUILT FOR PERFORMANCE

29. THE POWER OF http://

30. Cache-Control: public, max-age=3600

31. Cache-Control: public, max-age=3600,
s-maxage=86400

32. Cache-Control: private, no-cache, no-store

33. Cache-Control: public, max-age=3600,
stale-while-revalidate=300

34. ORIGIN
VARNISH
GRACE
SERVE STALE
OBJECT
BACKGROUND
FETCH

35. Vary: Accept-Encoding, Accept-Language,
X-Forwarded-Proto

37. FOR YOUR EYES ONLY
NOT CACHED

38. VARNISH CONFIGURATION LANGUAGE

39. VCL CAPABILITIES
✓ REQUEST HANDLING
✓ REQUEST ROUTING
✓ RESPONSE MANIPULATION
✓ BACKEND SELECTION
✓ CONTROLLING THE CACHE
✓ DECISION-MAKING "ON THE EDGE"

41. vcl 4.1;
backend default {
.host = "127.0.0.1";
.port = "8080";
}
sub vcl_recv {
if(req.url ~ "^/admin(/.*|$)") {
return(pass);
}
unset req.http.Cookie;
}

42. I ANSWER TO #VARNISH
ON STACKOVERFLOW

43. THIJS@VARNISH-SOFTWARE.COM

45. Route::middleware('cache.headers:public;max_age=3600;etag')
->group(function () {
Route::get('/', function () {
return view('welcome');
});
});

46. HTTP/1.1 200 OK
Host: localhost:8000
Date: Mon, 25 Apr 2022 15:44:58 GMT
Connection: close
Content-Type: text/html; charset=UTF-8
Cache-Control: no-cache, private
Date: Mon, 25 Apr 2022 15:44:58 GMT
Set-Cookie: XSRF-
TOKEN=eyJpdiI6IjRvRndmL2pHcnFQamZBYnBxSFgyQWc9PSIsInZhbHVlIjoiM200RUU0N0h
Lc3YzN3Jaa21MQVdzaENDSEg4cEU4bG1TWk5pWlgwMjZyTko0cjVmUC9kYjhGVmtYem8xanBu
ZlFwT1ZJT3grR0RwWURoMGppTnh2K09kOGtHQmc4V3JYUmZrVyt2OERIdGNkZXloNHYzZWNDd
GJ3MGZRWk1oMkwiLCJtYWMiOiIxOTZlMTAwNTY2MTM5NmY2Zjg1OGIwNTQxNjUzZDlhZjQ2ZG
JlZDQzZjRjZTQ2MjBkNzQxYzc2MTc2NzJmY2QwIiwidGFnIjoiIn0%3D; expires=Mon,
25-Apr-2022 17:44:58 GMT; Max-Age=7200; path=/; samesite=lax
Set-Cookie:
laravel_session=eyJpdiI6Im1PcExWeWZkVkpDTFZpajR2TUtheWc9PSIsInZhbHVlIjoid
EpTRGpldjJYREFYOTBvaHI0RDlOeTI0NHM0bGh5cVE3QmlqMjBBZ3p1QWZRdC92ek9OUThaaU
tDQndjSi9adnBtQTRaWlpUVk9EQk80Z2drUjREQmJJdDBicGZ0bjNiTlNxckd4Mm5zNWpkM1B
mcTMzREtzMUsrMVBZeUdXd0kiLCJtYWMiOiIyNDY0NmU5ZTMzNTAxODM2Y2E4YzNhMDRhMWU4
NjBkMzRiYzg4MDc4MjQ1MDk3NDczZDI5ZjVlNzc3MzcxOWU3IiwidGFnIjoiIn0%3D;
expires=Mon, 25-Apr-2022 17:44:58 GMT; Max-Age=7200; path=/; httponly;
samesite=lax

47. Route::withoutMiddleware([StartSession::class,
ShareErrorsFromSession::class, VerifyCsrfToken::class])
->group(function () {
Route::middleware('cache.headers:public;max_age=3600;etag')
->group(function () {
Route::get('/', function () {
return view('welcome');
});
});
});

48. Route::withoutMiddleware([StartSession::class,
ShareErrorsFromSession::class, VerifyCsrfToken::class])
->group(function () {
Route::middleware('cache.headers:public;max_age=3600;etag')
->group(function () {
Route::get('/', function () {
return view('welcome');
});
});
});

49. HTTP/1.1 200 OK
Host: 127.0.0.1:8000
Date: Mon, 25 Apr 2022 15:34:44 GMT
Connection: close
Content-Type: text/html; charset=UTF-8
Cache-Control: max-age=3600, public
Date: Mon, 25 Apr 2022 15:34:44 GMT
ETag: "13b73edae8443990be1aa8f1a483bc27"

50. ONLY FETCH PAYLOAD THAT HAS CHANGED

51. HTTP/1.1 200 OK

52. OTHERWISE:
HTTP/1.1 304 Not Modified

53. VARNISH SUPPORTS
CONDITIONAL REQUESTS
FOR CLIENTS & BACKENDS

54. GET / HTTP/1.1
Host: 127.0.0.1:8000
If-None-Match: "13b73edae8443990be1aa8f1a483bc27"
HTTP/1.1 304 Not Modified
Host: 127.0.0.1:8000
Date: Mon, 25 Apr 2022 15:34:44 GMT
Connection: close
Content-Type: text/html; charset=UTF-8
Cache-Control: max-age=3600, public
Date: Mon, 25 Apr 2022 15:34:44 GMT
ETag: "13b73edae8443990be1aa8f1a483bc27"

55. QUICKLY

56. EARLY

57. <?php
namespace AppHttpMiddleware;
use IlluminateHttpRequest;
use IlluminateSupportFacadesCache;
use Closure;
use SymfonyComponentHttpFoundationResponse;
class NotModified
{
public function handle(Request $request, Closure $next)
{
if (!$request->isMethodCacheable()) {
return $next($request);
}
$etag = Cache::get('etag:'.md5($request->getUri()));
$cacheControl = Cache::get('etag-cache-control:'.md5(
$request->getUri()));
$response = new Response('',304,
['ETag' => $etag, 'Cache-Control' => $cacheControl]);
if($response->isNotModified(($request))) {
return $response;
}

58. $response = $next($request);
Cache::put('etag:'.md5($request->getUri()),
$response->headers->get('ETag'),10);
Cache::put('etag-cache-control:'.md5($request->getUri()),
$response->headers->get('Cache-Control'),10);
return $response;
}
}

60. NO CACHE

61. PLACEHOLDERS

62. SEPARATE
HTTP REQUEST

63. AJAX

64. EDGE-SIDE INCLUDES ESI

65. <esi:include src="/header" />

66. ESI
✓ PLACEHOLDER
✓ PARSED BY VARNISH
✓ OUTPUT IS A COMPOSITION OF BLOCKS
✓ STATE PER BLOCK
✓ TTL PER BLOCK

67. VARNISH Surrogate-Capability: key="ESI/1.0"
Surrogate-Control: content="ESI/1.0"
<esi:include src="/header" />
LARAVEL
Parse ESI placeholders
VARNISH

68. sub vcl_recv {
set req.http.Surrogate-Capability = "key=ESI/1.0";
}
sub vcl_backend_response {
if (beresp.http.Surrogate-Control ~ "ESI/1.0") {
unset beresp.http.Surrogate-Control;
set beresp.do_esi = true;
}
}

69. COMPOSITION AT THE VIEW LAYER

70. Route::middleware('cache.headers:public;max_age=3600;etag')->group(function
() {
Route::get('/', function () {
return view('welcome');
});
});
Route::middleware('cache.headers:private')->group(function () {
Route::get('/header', function () {
return view("header");
});
});

71. Route::middleware('cache.headers:public;max_age=3600;etag')->group(function
() {
Route::get('/', function () {
return view('welcome');
});
});
Route::middleware('cache.headers:private')->group(function () {
Route::get('/header', function () {
return view("header");
});
});

72. <!DOCTYPE html>
<html>
<body>
@esi(/header)
<p>Welcome</p>
</body>
</html>

73. <!DOCTYPE html>
<html>
<body>
<esi:include src="/header" />
<p>Welcome</p>
</body>
</html>

74. <!DOCTYPE html>
<html>
<body>
<p>The current time is 21:07:53.</p>
<p>Welcome</p>
</body>
</html>

75. composer require myerscode/laravel-sub-request

76. <?php
namespace AppProviders;
use IlluminateSupportServiceProvider;
use IlluminateSupportFacadesBlade;
class EsiServiceProvider extends ServiceProvider
{
public function boot(): void
{
Blade::directive('esi', function (string $url) {
if(str_contains($this->app->request->headers->get('Surrogate-Capability'),
'ESI/1.0')) {
return "<?php echo '<esi:include src="$url" />'; ?>";
} else {
return "<?php echo subrequest('GET','$url')->getContent(); ?>";
}
});
}
}

77. @esi(/header)

78. @esi(/header)
@esi(/nav)
<p>Main content</p>
@esi(/footer)

79. <?php
namespace AppHttpMiddleware;
use IlluminateHttpRequest;
use Closure;
class Surrogate
{
public function handle(Request $request, Closure $next)
{
$response = $next($request);
if(str_contains($request->headers->get('Surrogate-Capability'), 'ESI/1.0')) {
$response->headers->set('Surrogate-Control', 'content="ESI/1.0"');
}
return $response;
}
}

80. HOW DO YOU IDENTIFY AN
OBJECT IN CACHE?

81. sub vcl_hash {
hash_data(req.url);
if (req.http.host) {
hash_data(req.http.host);
} else {
hash_data(server.ip);
}
return (lookup);
}

82. sub vcl_hash {
hash_data(req.url);
if (req.http.host) {
hash_data(req.http.host);
} else {
hash_data(server.ip);
}
return (lookup);
}

83. <p>{{ __('Welcome') }}</p>

84. <?php
return [
'locale' => 'en',
'fallback_locale' => 'en'
];

85. composer require orkhanahmadov/laravel-accept-language-middleware

86. HTTP/1.1 200 OK
Host: localhost
Content-Language: en
GET / HTTP/1.1
Host: localhost
Accept-Language: en
HTTP/1.1 200 OK
Host: localhost
Content-Language: en
GET / HTTP/1.1
Host: localhost
Accept-Language: nl

87. Vary: Accept-Language

88. HTTP/1.1 200 OK
Host: localhost
Content-Language: en
GET / HTTP/1.1
Host: localhost
Accept-Language: en
HTTP/1.1 200 OK
Host: localhost
Content-Language: nl
GET / HTTP/1.1
Host: localhost
Accept-Language: nl

89. <?php
namespace AppHttpMiddleware;
use IlluminateHttpRequest;
use Closure;
class Vary
{
public function handle(Request $request, Closure $next)
{
$response = $next($request);
$response->headers->set('Vary','Accept-Language');
return $response;
}
}

90. YOU CAN DO ALL OF THIS IN VCL TOO

91. sub vcl_recv {
set req.http.Surrogate-Capability = "key=ESI/1.0";
}
sub vcl_backend_response {
set beresp.ttl = 1h;
set beresp.grace = 2h;
set beresp.http.Vary = "Accept-Language,
Accept-Encoding, X-Forwarded-Proto";
if (beresp.http.Surrogate-Control ~ "ESI/1.0") {
unset beresp.http.Surrogate-Control;
set beresp.do_esi = true;
}
}

92. THIS IS JUST THE TIP OF THE ICEBERG

94. HTTPS://VARNISH-SOFTWARE.COM/DEVELOPERS

96. HTTPS://WWW.VARNISH-SOFTWARE.COM/
PRODUCTS/VARNISH-CLOUD/