Skip to content

Instantly share code, notes, and snippets.

@davidmarkclements

davidmarkclements/fast.md

Last active March 31, 2017 18:45
Show Gist options
  • Save davidmarkclements/c5247d5cc57747bc7bec33ca0ecbaa9d to your computer and use it in GitHub Desktop.
Save davidmarkclements/c5247d5cc57747bc7bec33ca0ecbaa9d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. David Mark Clements revised this gist Aug 20, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions fast.md
    View file
    Original file line number Diff line number Diff line change
    @@ -51,6 +51,6 @@ application in one HTTP request - without relying on HTTP2.

    ## Caching

    Service Workers?
    AppCache?
    * Service Workers?
    * AppCache?

  2. David Mark Clements revised this gist Aug 20, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions fast.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,8 @@

    ## Authors

    [Yoshua Wuyts](https://github.com/yoshuawuyts/)
    [David Mark Clements](https://github.com/davidmarkclements/)
    * [Yoshua Wuyts](https://github.com/yoshuawuyts/)
    * [David Mark Clements](https://github.com/davidmarkclements/)

    ## Motivation

  3. David Mark Clements revised this gist Aug 20, 2016. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions fast.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,10 @@
    # Fast Loading a SPA with a single request

    ## Authors

    [Yoshua Wuyts](https://github.com/yoshuawuyts/)
    [David Mark Clements](https://github.com/davidmarkclements/)

    ## Motivation

    We need an Open Source alternative to AMP.
  4. David Mark Clements revised this gist Aug 20, 2016. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions fast.md
    View file
    Original file line number Diff line number Diff line change
    @@ -44,5 +44,8 @@ To assist in fitting initial UI into 500 bytes, convert CSS class styles into in
    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?

  5. David Mark Clements revised this gist Aug 20, 2016. 1 changed file with 9 additions and 2 deletions.
    11 changes: 9 additions & 2 deletions fast.md
    View file
    Original file line number Diff line number Diff line change
    @@ -32,10 +32,17 @@ Fastest experience possible for SPA's (or pages) on both Mobile and Desktop.
    In the same page (in this order) (same TCP connection):

    1. Load initial UI ( < 500 bytes)
    2. Include noscript tag with redirect
    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 content tag and injects them into the page
    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.



  6. David Mark Clements revised this gist Aug 20, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion fast.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # Fast Loading a SPA with a single request

    ## Motiviation
    ## Motivation

    We need an Open Source alternative to AMP.

    @@ -25,6 +25,7 @@ Fastest experience possible for SPA's (or pages) on both Mobile and Desktop.

    * 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

  7. David Mark Clements created this gist Aug 20, 2016.
    40 changes: 40 additions & 0 deletions fast.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    # Fast Loading a SPA with a single request

    ## Motiviation

    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

    ## Implementation

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

    1. Load initial UI ( < 500 bytes)
    2. Include noscript tag with redirect
    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 content tag and injects them into the page
    5. done.

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