Webapp performance

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)

More resources

webpagetest.org

Lighthouse

mod_pagespeed

Thanks!

Questions?

Access this presentation again

https://strugee.net/presentation-webapp-performance/

QR code to presentation URL

Or, check out the source.