WebPerformancePart1-Caching/index.html at master · SteveReiter/WebPerformancePart1-Caching · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>Web Performance Part 1 - Caching</title>

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/black.css">

		<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>
					<section data-markdown>
						<textarea data-template>
							# Web Performance
							### Part 1 - Caching
							<br>
							<br>
							<br>
							Steve Reiter
							Contact: DevEdmonton Slack
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## A little about me
							<br>
							- Senior Developer at Investopedia for 2.5 years
							- Over 13 million unique monthly visitors
							- ~14,000 active sessions at peak
							- ~800,000,000 page views in 2017
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## DotDash
							<br>
							- Online Publisher
							- 7 Sites and growing
							- ~115 million unique monthly visitors across all sites
							- About 9x more traffic than Investopedia alone
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## SO like, we do a lot of caching
						</textarea>
					</section>
				</section>
				<section>
					<section data-markdown>
						## Caching Basics
					</section>
					<section data-markdown>
						<textarea data-template>
							### What is a Cache?
							<br>
							- Fundamentally just a key/value pair
							- Anything from in-memory data structure to 3rd party services
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							### When should you cache?
							<br>
							- API limits or cost
							- Speed
							- Volume
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## How do you use it?
							<br>
							#### Check, Fetch, Cache
							- Check the cache for data
							- Fetch the data
							- Cache the data
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Checking the Cache
							<br>
							- Build your data request (query, URL, etc.)
							- Use it as a cache key, hash if needed (Lazy)
							<br>
							**OR**
							- Generate an appropriate unique key
							- Keys must match the cardinality of your data requests
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Caching the data
							- After checking the cache, fetch the data as you normally would
							- Put the data into the cache using the same key
							- Add an appropriate expiry time
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## How to pick a Cache Expiry
							- Valid cache times can range from seconds to days or weeks
							- Depends on how often the data changes and how frequently you need the data
							- Caching effectiveness is measured by hit ratio
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## How does the Cache Expire
							- Many systems will clear items from the cache for you
								- Browser Cache
								- Content Delivery Networks
								- Redis
								- Memcache
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							### Want to know more about basic caching?
							<br>
							## Caching in single page apps for fun and profit
							Ben Zittlau - Exchange.js May/June 2015
							https://www.youtube.com/watch?v=pesvdJ2IF3Q
						</textarea>
					</section>
				</section>
				<section>
					<section data-markdown>
						<textarea data-template>
							## Caching on the web
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Caching on the web
							- Browser cache
							- Content Deliver Networks
							- Backend caching (Database, API)
							- Client side caching API data
							- Response caching (Fastly/Varnish)
						</textarea>
					</section>
				</section>
				<section>
					<section data-markdown>
						<textarea data-template>
							## The browser cache
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## super brief overview of a page load
							<br>
							- Browser fetches the document
							- Document includes additional resources
							- Browser fetches and caches resources
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Example Resources
							<br>
							<pre><code><link rel="stylesheet" href="/styles/main.css?v=5.866" /></code></pre>
							<pre><code><script src="/js/article.js?v=5.866"></script></code></pre>
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Good example of basic caching
							<br>
							"https://i.investopedia.com/styles/main.css?v=5.866"
							- The URL is part of the cache key
							- Version parameter used to invalidate the cache when the resource changes
							- Also invalidates the cache in Content Deliver Networks (CDN)
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## The browser cache in more detail
							<br>
							- Cross-domain (Except Safari)
							- Common js libraries and fonts are shared
								- But only if pulled from the same URL
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## It's Actually multiple caches
							<img data-src="images/caches_all_the_way_down.png">
							Source: https://www.fastly.com/blog/understanding-vary-header-browser
						</textarea>
					</section>
				</section>
				<section>
					<section data-markdown>
						<textarea data-template>
							## Response Caching
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Varnish
							- Reverse Proxy
							- Sits in front of your web server
							- Caches http responses from the web server
							- The Fastly CDN uses a fork of varnish
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Highly Configurable
							- Varnish Configuration Language (VCL)
							- Can manipulate headers before passing requests to the backend
							- Edge Side Includes allow for partial caching
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Cons
							- Easy to forget about it
							- New features can cause the cache to be bypassed
								- Example: Don't cache any set cookie response. New feature sets a cookie... in the site header.
							- When the cache is bypassed, the web stack is suddenly hit with a huge influx of requests
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Real World Example
							- We don't cache post requests, for obvious reasons
							- Someone finally decided to DDOS us with post requests...
						</textarea>
					</section>
				</section>
				<section>
					<section data-markdown>
						<textarea data-template>
							#### Putting it all together
							<img data-src="images/cache_flow.png">
						</textarea>
					</section>
				</section>
				<section>
					<section data-markdown>
						<textarea data-template>
							## HTTP Headers
							<br>
							<br>
							Used to control caching
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Cache Control
							<pre><code>cache-control: max-age=2592000</code></pre>
							- Tells the browser how long this should be cached
							- Browser should use the cache item until this expires
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Cache Control
							<pre><code>cache-control: public</code></pre>
							- Indicates that this entity can be cached for all users of the browser
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Cache Control
							<pre><code>cache-control: private</code></pre>
							- Indicates that this entity should only be cached for the current user
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Cache Control
							<pre><code>cache-control: no-cache</code></pre>
							- Tells the browser to not cache this entity at all
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Entity tag
							<pre><code>etag: "3278c-5798abbfe3480-gzip"</code></pre>
							- Response header
							- Unique ID used to identify a specific version
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## If-match
							<pre><code>If-Match: "3278c-5798abbfe3480-gzip"</code></pre>
							- Request header
							- Represents the entity tag of the currently cached item
							- Server compares this value to the ETag of the current version
							- Return a "304 Not Modified" status if unchanged
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Vary
							<pre><code>vary: Accept-Encoding</code></pre>
							- Response header
							- Sets a request header as an additional validator for this cache item
							- If the request header must match it's value in the request that populated the cache
							- Also used by CDN's and Varnish
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Problems with Vary
							<br>
							- Can't look at subfields in a header
							- Not terribly useful for the browser cache, things like user-agent aren't going to change
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## More info on headers
							<br>
							https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers
							- Mozilla has excellent documentation on http headers
						</textarea>
					</section>
				</section>
				<section>
					<section data-markdown>
						<textarea data-template>
							## the future
							<br>
							Several proposals to improve cache control
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## HTTP Client Hints
							<br>
							- Proposal from Google
							- Adds additional request headers indicating browser features/settings
								- Viewport-Width
								- Device Pixel Ratio
						</textarea>
					</section>
					<section data-markdown>
						<textarea data-template>
							## Key Header
							<br>
							- Another proposal
							- Similar to vary but allows subfields
							- Won't end up with multiple cache buckets when you just want to vary on "Accept-Encoding: gzip"
							<pre><code>accept-encoding: gzip, deflate, br</code></pre>
							<pre><code>accept-encoding: gzip, br</code></pre>
							<pre><code>accept-encoding: gzip</code></pre>
						</textarea>
					</section>
				</section>
			</div>
		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<script>
			// More info about config & dependencies:
			// - https://github.com/hakimel/reveal.js#configuration
			// - https://github.com/hakimel/reveal.js#dependencies
			Reveal.initialize({
				dependencies: [
					{ src: 'plugin/markdown/marked.js' },
					{ src: 'plugin/markdown/markdown.js' },
					{ src: 'plugin/notes/notes.js', async: true },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
				]
			});
		</script>
	</body>
</html>