Hi
I'm AJ
Other hats: security, decentralization
Today: how to make your web pages load/run fast
Why?
Be good to your users
In early 2015 Pinterest engineers ran an experiment that improved mobile web home landing page performance by 60 percent and mobile signup conversion rate by 40 percent.
Driving user growth with performance improvements
Wtf does "loading a page" even mean?
DNS query
TCP handshake
Possible TLS handshake
HTTP GET
HTML to DOM tree parsing
Incremental parsing
Resource fetches triggered by HTML elements
Focus: high-level stuff
Ignoring TCP optimizations
Ignoring TLS optimizations
Basically, stuff in the HTML, mostly
Things that take time
Network round-trips (request-response cycles)
Downloading data
Latency (physical distance)
Parsing (less important)
Minification
Makes your JS smaller
Removes whitespace, comments
Renames variables (e.g. var a=document.getElementById;a('foo');
File concatenation
Eliminates dead code
Image formats
JPEG is pretty good
PNGs are huge
GIFs are even worse
No transparency, no animation? -> JPEGs
Compression
Compress your images
Turn down the quality
Turn on HTTP gzip compression
HTTP Keep-Alive
Keeps TCP connections alive after response termination
Connection can be reused
Eliminates a network round-trip
Caching
Browser keeps local copies of stuff
Cache things aggressively
Eliminates request-response cycles
Cache-busting
Put unique key in CSS/JS filename
Key tied to file version (content hash, build date)
Key changes whenever file changes
Allows for long (1+ years) cache durations
Ordering
Put CSS as early as possible
Put JS at the end of <body>
<script> without async/defer blocks page parsing
Render server-side
"Booting" client-side is terrible for performance
Entire extra request-response cycle before even first paint
No incremental parsing/downloads
Browsers are better than you at parsing HTML
Terrible:
<!DOCTYPE html>
<html>
<body>
<script href="app.js"></script>
</body>
</html>
CDNs
Physically close to most places
Good for static assets
Public CDNs (e.g. Google's CDN with jQuery and stuff) improve cacheability if you use exact version numbers
(But they leak history & are attack surface without Subresource Integrity)
Access this presentation again
