This talk is anecdotal about the story of YouTube Feather, the woes of browser caching, the effects of HTML5 Unicorns, and the undying love for all things kitten videos. Given at http://www.jseverywhere.org/ on October 25, 2013 in San Francisco by Matthew Keas. http://mkeas.org http://twitter.com/matthiasak

1. JS in Rural Communities
Matthew
Keas

2. @matthiasak
http://mkeas.org
http://parivedasolutions.com

4. !e
Ky
Rr e
Ayou
He
he
r
n
po
u
en gons
p
a
p
ha of dr
y
ma o r y
t
as

5. "one of the senior engineers began a rant about the
page weight of the video watch page being far too
large"

6. "1.2MB and dozens of requests"
"if they can write an entire Quake clone in under
100KB, we have no excuse for this!"

7. "After three painstaking days, I had arrived at a much leaner
solution. It still was not under 100KB though. Having just
finished writing the HTML5 video player, I decided to plug it
in instead of the far heavier Flash player. Bam! 98KB and
only 14 requests."
tiny
HTML

8. "I decided to limit the functionality"
masthead
video player
five related videos
sharing button
flagging tool
ten comments loaded in via AJAX
remedy?

9. "After a week of data collection, the numbers came back…
and they were baffling. The average aggregate page latency
under Feather had actually INCREASED"
HALLOWEEN
Party

10. "We plotted the data geographically and compared it to our total
numbers broken out by region"
hello!
howdy!
YOUTUBE
. YES!!

11. Southeast Asia
A m e ri c a
South
OPEN
Come in,
Re
m
ot
e
Si
be
ri a
WE’RE
A
ca
ri
f

12. Average page load time under Feather was over TWO
MINUTES!
50
POSTAGE
STAMP
Normal page would take over 20 minutes.

13. "By keeping your client side code small and
lightweight, you can literally open your product up
to new markets."
ADDING
MATT'ISM
Improve you experience and broaden your reach
with:
• Fewer requests per page load
• Smaller requests per page load
• Less frequent requests per page load

14. ADDING
MATT'ISM
Improve you experience and broaden your reach
with:
• Fewer requests per page load (inlining, base64
encoding)
• Smaller requests per page load (concatenation,
compression, minification)
• Less frequent requests per page load (caching)

15. IF YOU CARE
CACHE
OR BEWARE

16. Methods of Caching?
Implied persistence
HTML <meta> tags
(http://www.mnot.net/cache_docs/)
HTTP Headers
(http://www.mobify.com/blog/beginners-guideto-http-cache-headers/)
Persist data via cookies...
Appcache
JavaScript?
23
ADMIT
NONE
17

17. HTML <meta> tags
Meta tags are easy to use, but aren’t very effective.
That’s because they’re only honored by a few
browser caches, not proxy caches (which almost
never read the HTML in the document).

18. HTTP Headers
Example Caching headers for dynamic content (Wordpress blog):
HTTP/1.1 200 OK
Cache-Control: no-transform,public,max-age=300,s-maxage=900
Content-Type: text/html; charset=UTF-8
Date: Mon, 29 Apr 2013 16:38:15 GMT
ETag: "bbea5db7e1785119a7f94fdd504c546e"
Last-Modified: Sat, 27 Apr 2013 00:44:54 GMT
Server: AmazonS3
Vary: Accept-Encoding
X-Cache: HIT

19. HTML5 Appcache
(http://caniuse.com/#search=appcache
)
No support IE9- (trolololollllll)
Offline browsing - users can navigate your full site
when they're offline. (good)
Speed - cached resources are local, and therefore
load faster. (good)
Reduced server load (good)
Pretty Sexy

20. HTML Appcache

21. Más Problemas
http://appcachefacts.info
/
One failed file in CACHE section => entire cache
disregarded.
Regardless of whether you include the address
of the current page in the manifest, it will be
cached.
In Firefox, any resources served with Cachecontrol: no-store will not be cached, even if
they're explicitly included in the manifest.
No granular dynamic control from JS.
:–(

22. Is using JS to manage your cache
reasonable?
Yes. (http://caniuse.com/#feat=namevalue-storage)
If you need to support IE7 or Opera Mobile, then
employ HTTP Headers and/or just load resources
lazily.
Also, polyfills.
IE8 implemented this?
Wow.

23. Is this an original idea?
Sort of.
Anal
y
tics

24. Many Script Loaders Employed
Today

25. We truly are spoiled with such an
awesome community

26. We started POC'ing Local
Storage as a cache
Local
St
orage
KIC
KS
GRA
SS
SINC
E IE8

27. Local Storage
Like cookies
Persistent
At least 5MB
Never attached blindly to requests
Event model to keep other tabs and windows
synchronized
Polyfills

28. Broke-al Storage
String values only — serialization may be
necessary (awkward)
Unstructured data with no transactions, indexing
or searching facilities (awkward)
May exhibit poor performance on large datasets
(bad)

29. Loader
https://github.com/matthiasak/Loader
ary year
nor he
ho t
of
me
na
oa
L
r
e
d

30. Loading Browser Assets
CORS compatible or Same Origin? AJAX in
parallel, cache, and execute/embed sequentially.
Not Same Origin? Add Script/Link and set the
src/href.

31. Loading Browser Assets
Promises to control flow of async downloads and
"readystates".
Small abstraction for making a GET
Small functions to write tags to the <HEAD>
Tiny abstraction for Local Storage and error
handling
Automatically look for files to load (in similar
fashion to Require.js)

32. Begin by Loading Loader

33. Load Only What Is Needed
1
2
3

34. Performance, Pro-formance
http://www.stevesouders.com/blog/2011/03/28/storager-case-study-binggoogle/
"Bing and Google Search make extensive use of
localStorage for stashing SCRIPT and STYLE blocks
that are used on subsequent page views. None of
the other top sites from my previous post use
localStorage in this way. Are Bing and Google
Search onto something?
Yes, definitely."

35. Real-World Testing?
http://jsperf.com/localstorage-versus-browsercache/6

36. "Cutting the mustard"
http://responsivenews.co.uk/post/18948466399/cutting-themustard

38. Where I Put My Experiments Before
They Are Ready For Primetime

39. FIRS
T
VISIT

40. FIRST
VISIT

41. SPEED
DEMON?
SECOND VISIT
!

42. SECOND
VISIT

43. THANK
YOU
@matthiasak