Idea - Single Request SPA

fast.md

Fast Loading a SPA with a single request

Authors

• Yoshua Wuyts
• David Mark Clements

Motivation

We need an Open Source alternative to AMP.

Fastest experience possible for SPA's (or pages) on both Mobile and Desktop.

Key Numbers

• tcp segment size (MSS) default is 536B
• 1KB single ethernet packet
• 14KB single roundtrip (first frame is 1460B)
• 65kb upper bound for single frame

Constraints

• Must fit in one request - TCP/HTTP connections are expensive (HTTP2 is not an option)
• Must support noscript users (Accesibility, TOR, etc.)
• Minimal time to first render
  • ...and second, and third
• No FOUC/FOUT (must use system fonts)

Concepts

• Initial UI - the first thing a user sees, fits into first 500 bytes
• Full SPA UI - the fully functioning SPA, preferably fits into 14KB, or else 65KB
• noscript UI - functioning application for users without JavaScript (accesibility, TOR, etc)

Implementation

In the same page (in this order) (same TCP connection):

1. Load initial UI ( < 500 bytes)
2. Include noscript tag with redirect (meta refresh to noscript UI)
3. Include a comment tag, containing the full SPA UI with all content and assets inlined
4. Include an inline script tag, which extracts the contents of the comment tag and injects them into the page
5. done.

Ordering is important (1..4)

To assist in fitting initial UI into 500 bytes, convert CSS class styles into inline styles (in initial UI)

Putting the full SPA UI is in a comment tag, with all assets and content inlined allows us to load a complete application in one HTTP request - without relying on HTTP2.

Caching

• Service Workers?
• AppCache?

Tool

• response size validator: look at response, generally (total size). Lookup
  • Optionally add SSL 32 bytes for real response size
• css inliner - no good ones exist yet; get CSS inline with HTML
• html noscript cutoff point - dump everything past the noscript tag

https://gist.github.com/davidmarkclements/18d091d56e0b476e53b02e78e62056ef