e20a67d2ba
Preload fonts and images ( #187 )
...
Part of https://github.com/matrix-org/matrix-public-archive/issues/132
2023-04-26 16:35:00 -05:00
27863a1945
Iterate on `crossorigin` language in `Link` preload header comments ( #186 )
...
Hopefully more accurate now 🤞
2023-04-26 04:05:11 -05:00
a3952f1d31
Fix preload link headers ( #185 )
...
Follow-up to https://github.com/matrix-org/matrix-public-archive/pull/171 and https://github.com/matrix-org/matrix-public-archive/pull/175 where they broke because we went from scripts to modules.
Part of https://github.com/matrix-org/matrix-public-archive/issues/132
Before this PR, we were seeing these warning in the Chrome devtools console:
```
A preload for 'foo' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
```
This is caused by a credentials mode mismatch between the `<script type="module">` tag and the `Link` header. A `<script type="module">` with no `crossorigin` attribute indicates a credentials mode of `omit` and a naive `Link: </foo-url>; rel=preload; as=script;` has a default credentials mode of `same-origin`, hence the mismatch and warning we're seeing.
We could set the credentials mode to match using `Link: </foo-url>; rel=preload; as=script; omit` but there is an even better option! We can use the dedicated `Link: </foo-url>; rel=modulepreload` link type which not only downloads and puts the the file in the cache like a normal preload but the browser also knows it's a JavaScript module now and can parse/compile it so it's ready to go.
---
Future consideration: Adding `nopush` to preload link headers. Many servers initiate an HTTP/2 Server Push when they encounter a preload link in HTTP header form otherwise. Do we want/care about that (or maybe we don't)? (mentioned in https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf#6f54 )
---
References for preload `Link` headers:
- https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf#6f54
- https://html.spec.whatwg.org/multipage/links.html#link-type-preload
- https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/#headers
- https://developer.chrome.com/blog/modulepreload/#ok-so-why-doesnt-link-relpreload-work-for-modules
2023-04-26 03:29:57 -05:00
9c0b6fe85e
Production ready build ( #175 )
...
- Rename `public` -> `client` so it doesn't get copied automagically as-is (without hashes which we want for cache busting), https://vitejs.dev/guide/assets.html#the-public-directory
- We still build the version files to `public/` so their copied as-is and Vite handles it for us (so we can use `emptyOutDir`)
- Use a multiple entrypoint `.js` Vite build so things can be more intelligently bundled and take less time
- We aren't using library mode because it doesn't minify or bundle assets
- Using hash asset tags for cache busting. Hash of the file included in the file name
- We lookup these hashed assets from `manifest.json` that Vite builds (https://vitejs.dev/guide/backend-integration.html ) to serve and preload
- In terms of optimized bundles, I know the current output isn't great now but will have to opt to fix that up separately in the future. Tracked by https://github.com/matrix-org/matrix-public-archive/issues/176
2023-04-24 23:50:53 -05:00
17a39ab8db
Add preload link headers for downstream Cloudflare early hints ( #171 )
...
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 https://github.com/matrix-org/matrix-public-archive/issues/32
Part of https://github.com/matrix-org/matrix-public-archive/issues/132
See https://developers.cloudflare.com/cache/about/early-hints/ for information on enabling in Cloudflare
2023-04-19 14:20:01 -05:00
Eric Eastwood