ember-fastboot / ember-fastboot/fastboot-app-server

HTTP/2 Server push support

Open
#91 3 comments 13 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
140
Forks
70
PR merge metrics
No merged PRs in 30d

Description

I believe Fastboot could be serving assets even faster if it were leverage [HTTP/2 sever push](https://w3c.github.io/preload/#server-push-http-2).

### Background

Server push, which is defined in the [HTTP/2 specification](https://w3c.github.io/preload/#bib-rfc7540), allows a server to pre‑emptively push resources to a remote client, anticipating that the client may soon request those resources.

That's perfect for an Ember app because we always have 4 predictable files that need to be loaded:

`ember-app.js`
`ember-app.css`
`vendor.js`
`vendor.css`

### The idea

The idea is to push these 4 files along with the `index.html` to the client instead of waiting for `index.html` to land, then fire 4 request, then wait for those requests to land.

### Nginx

In Nginx you can specify files to push with `http2_push`:

```
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;

server_name foo-app.com;

location / {
# Pass requests to Fastboot
proxy_pass http://0.0.0.0:8000;

# Leverage HTTP/2 server push
http2_push /assets/lmpa-interflux-com-dd56fc256fbb789e812d33c1ca0a2cdb.css;
http2_push /assets/outdatedbrowser.min-9131a0c1fc3c983e7770d2a8978ffbb4.css;
http2_push /assets/lmpa-interflux-com-e99f983e06bc16d6677864b25e1f0e4f.js;
http2_push /assets/vendor-743626574e3ff471643e8686d1be9635.js;
http2_push /assets/outdatedbrowser.min-29fcaeff82d07e196a8d053f0601fcc4.js;
http2_push /assets/fonts/lato/subset-Lato-Regular.woff2;
http2_push /assets/fonts/lato/subset-Lato-Bold.woff2;
http2_push /assets/fonts/lato/subset-Lato-Black.woff2;
}
}
```

Pre-emptively pushing these files increase my project's load times from:

![screen shot 2018-10-27 at 00 30 21](https://user-images.githubusercontent.com/4415419/47569521-8ded1900-d97f-11e8-8f49-f6c0b3118fc7.png)
![screen shot 2018-10-27 at 00 30 29](https://user-images.githubusercontent.com/4415419/47569523-8e85af80-d97f-11e8-83b1-946bc0199005.png)

To:

![screen shot 2018-10-27 at 00 22 27](https://user-images.githubusercontent.com/4415419/47569222-d0622600-d97e-11e8-8923-c5e80a9661e4.png)
![screen shot 2018-10-27 at 00 22 19](https://user-images.githubusercontent.com/4415419/47569221-cfc98f80-d97e-11e8-8d1e-2fa5dd3cd908.png)

Before:

![screen shot 2018-10-27 at 00 33 39](https://user-images.githubusercontent.com/4415419/47569710-06ec7080-d980-11e8-9530-9a7e4f433849.png)

After:

![screen shot 2018-10-27 at 00 33 31](https://user-images.githubusercontent.com/4415419/47569708-06ec7080-d980-11e8-9189-deec7cd22d02.png)

That's amazing! 🌮

Do give me more! 🙏

### Caveat

The Ember files are fingerprinted... Which is great for busting caches when deploying new fixes, but that also breaks having set static `http2_push` paths.

### Bad solution

Stop fingerprinting files in order to leverage static `http2_push`. 🔥

Is bad because busting caches is arguably more important.

### Beter solution

Since NGINX 1.13.9 support was `http2_push_preload on;` which automatically HTTP/2 server pushes files marked by the `Link` header.

That means in Nginx setting:

```
location / {
proxy_pass http://0.0.0.0:8000;
http2_push_preload on;
}
```

And having Fastboot somehow add the following response header when fetching `index.html`:

```
Link: "; as=script; rel=preload, ; as=style; rel=preload"
```

Would preload this JS and CSS file.

### Feature request?

1. Is there a way to add the `Link` header to each Fastboot responses?

2. Does Fastboot have an index of the fingerprinted files we can concatenate into the `Link` header?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.