Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use HTTP 103 to preload assets while we wait for Matrix requests to respond #32

Closed
MadLittleMods opened this issue Jul 4, 2022 · 1 comment · Fixed by #171
Closed

Use HTTP 103 to preload assets while we wait for Matrix requests to respond #32

MadLittleMods opened this issue Jul 4, 2022 · 1 comment · Fixed by #171
Labels
A-backend Related to the backend Node.js server pieces A-performance What is slow, what made it faster and more efficient? T-Enhancement New feature or request
Milestone
Matrix Public Arc...

Comments

@MadLittleMods
Copy link
Contributor

MadLittleMods commented Jul 4, 2022 •
edited
Loading

https://developer.chrome.com/blog/new-in-chrome-103/#http103

https://github.com/bashi/early-hints-explainer/blob/main/explainer.md

HTTP/1.1 103 Early Hints
Link: <style.css>; rel="preload"; as="style"

HTTP/1.1 200 OK
Link: <style.css>; rel="preload"; as="style"
Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
...

Easy with Cloudflare?

From https://developers.cloudflare.com/cache/about/early-hints/, it seems like we can just add Link rel="preload" headers to our page and then enable the feature in Cloudflare which will pick those up and serve them as 103 early hints for us.

Early Hints are only generated and cached:

  • For URIs with .html, .htm, or .php file extensions, or no file extension
  • On 200, 301, or 302 response return codes
  • When the response contains link headers with preconnect or preload rel types, such as Link: </img/preloaded.png>; rel=preload
@MadLittleMods MadLittleMods added the T-Enhancement New feature or request label Jul 4, 2022
@MadLittleMods MadLittleMods added the A-performance What is slow, what made it faster and more efficient? label Oct 20, 2022
@MadLittleMods MadLittleMods mentioned this issue Nov 10, 2022
Closed
@MadLittleMods MadLittleMods added the A-backend Related to the backend Node.js server pieces label Apr 11, 2023
MadLittleMods added a commit that referenced this issue Apr 19, 2023
@MadLittleMods
Add preload link headers for downstream Cloudflare early hints
afdb541 
Fix #32
@MadLittleMods MadLittleMods mentioned this issue Apr 19, 2023
Merged
MadLittleMods added a commit that referenced this issue Apr 19, 2023
@MadLittleMods
Add preload link headers for downstream Cloudflare early hints (#171)
17a39ab 
Because it takes us at best several seconds to request information from a homeserver and then server-side render the page, the browser has to wait for the response before it can even try loading the necessary assets. With this change that facilitates early hints, the browser can preload all of the assets necessary before we are done generating the response and will be ready to go by the time we're all done on the server.

Fix #32

Part of #132

See https://developers.cloudflare.com/cache/about/early-hints/ for information on enabling in Cloudflare
@MadLittleMods
Copy link
Contributor Author

This is technically closed because #171 adds enough info for Cloudflare to technically handle this but we haven't turned it on for the archive.matrix.org deployment yet because we can only control that option in Cloudflare for the entire matrix.org domain and want to make sure it won't cause any side-effects. Since this only really pertains to the archive.matrix.org deployment, this is tracked internally with https://github.com/vector-im/sre-internal/issues/2513

It's possible that instead of handling the 103 early hints in Cloudflare, we instead do it on the nginx reverse proxy layer or maybe in the app itself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-backend Related to the backend Node.js server pieces A-performance What is slow, what made it faster and more efficient? T-Enhancement New feature or request
Projects
None yet
Milestone
Matrix Public Archive v0.1.0
1 participant
@MadLittleMods