martinthomson / i-d-template

A template for IETF internet draft git repositories
Other
208 stars 182 forks source link

Render local HTML with local fonts? #291

Closed LPardue closed 3 years ago

LPardue commented 3 years ago

I was editing some documents today in the http-extensions repo. After running make I had some HTML I wanted to look at e.g. $WORKING_PATH/httpwg/http-extensions/draft-ietf-httpbis-priority.html. Today my Internet is slower than normal and I noticed the page seemed to be render blocked for ~10-15 seconds while it attempted to fetch https://martinthomson.github.io/i-d-template/fonts.css.

image

Anything we can do to make local HTML pull a local fonts.css and dependencies?

LPardue commented 3 years ago

to make it even more painful, the cache-control headers on those requests seem quite aggressive too.

martinthomson commented 3 years ago

Yeah, that's unfortunate. The whole mess of font handling is simultaneously a huge performance burden and a massive privacy problem. What I've done here is use font-display: swap, which is the standard way of having font rendering get out of the way. That results in a short period where the browser blocks, but then using fallback fonts (also in the style sheet) until the fonts load fully. The problem that I hadn't anticipated is the CSS load taking so long. That blocks.

The way to fix that is to inline that CSS file too. Then you can get the font-display: swap treatment, which is poor, but not something that blocks rendering in the same way.

I have little or control over Cache-Control here, so without another layer of fronting (doable, for sure), this is what you get there. Besides, you can't possibly be complaining about the outstanding performance of GitHub's CDN provider, can you?

martinthomson commented 3 years ago

@LPardue give e1d1641a013da3d7032f3fa4331791140e1fd1e6 a try. I've inlined the CSS, which is bad, but it might help out some.

martinthomson commented 3 years ago

Closing this on the presumption that the issue is addressed by the inlining.