Google's Chrome team publishes web performance case studies, progressive web app guides, and DevTools tips on Medium.
HN links it for web performance case studies (Netflix, Pinterest) and loading priorities; one commenter notes the site's slow five-second black screen on load.
It's ironic that a site about UI/UX has a 5 seconds black screen during load. This might be due to the HN hug of death however. In either case, a small loader (or similar modern loading indicator pattern) would increase the site's usability by miles.
Edit:
Interesting that this comment is being downvoted. Initial page loading time is not a nitpick, it is the main source of an increased bounce rates.
> "[Users] with an average page load time of 2 seconds view 8.9 pages on average, while those with an average page load time of 7 seconds view only 3.7 pages on average. The number of pages viewed consistently decreases as page speed decreases, and the difference in pages viewed between users averaging 2 second load times and users averaging 4 seconds is 3.x pages. This means that a 2 second delay in page load time could mean a user exits your site 3 pages earlier."¹
Articles upon articles are written on the topic and UI/UX experts have a lot of patterns available to mitigate the issue.
This article showcases a lot of great way one can use to change the perception of a slow loading page: https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3
---
¹ https://blog.littledata.io/2017/04/07/how-does-page-load-speed-affect-bounce-rate/
Just to add a few bits: I'm not an infra person so can't tell about managing a H2 deployment, but from frontend web performance perspective H2 is very interesting and somehow not used to its full potential.
H2 has built-in support for interesting concepts like prioritization and re-prioritization of requests. Unfortunately, most impls in clients and servers are either not full or not very good:
I recommend googling "http/2 prioritization" and checking blogs and talks from Andy Davies and Pat Meenan. The subject is super interesting and inherently hard; browsers need to make certain assumptions whether scripts, fonts or CSS are more important and should be prioritized and it's non-obvious how to handle it best.
https://github.com/andydavies/http2-prioritization-issues
https://medium.com/dev-channel/javascript-loading-priorities-in-chrome-57c54cfa6672
You know the article addresses this exact problem? It links to another article focused on this problem, which suggests reducing the saturation of images: https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b
(It doesn't seem to have occurred to that author to try reducing the brightness of the images, or reducing saturation with the saturate() instead of grayscale(), but those also seem worth trying, brightness in particular.)
Apple's Smart Invert is even simpler, it just leaves media like images and video as-is, only inverting colors of other things.
I suppose for diagrams that you know are black-on-white, inversion is nice, but it should be opt-in.
I may be wrong since this article is from 2018 but it seems like Netfix uses React for everything but their homepage [1]. Facebook uses it's own framework since, well, that framework is React. But their framework isn't some special-purposes framework built for Facebook's purposes either, it's a general purpose framework, used by tons of companies including Netfix. So I don't think many web tech companies are going to find success building their own special-purposes front-end frameworks, like some earlier comments seem to suggest.
[1]: https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
Reminds me of this optimization by Netflix: https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9#1b0c
The talk (https://www.youtube.com/watch?v=V8oTJ8OZ5S0) was one of the most watchable performance optimization talks I've seen.
TLDR - they used a combination of the link prefetch technique, which works for HTML but is not fully supported by all browsers, as well as XHR prefetching, which will work for prefetching Javascript and CSS.
Yes, it makes the request high priority: https://medium.com/dev-channel/javascript-loading-priorities-in-chrome-57c54cfa6672
> than the server just instructing the client not to cache it
Easier said than done, especially when it's served from a CDN you don't control the headers of.
Using a <script> tag and a callback is known as JSONP– this technique is used to bypass Cross-Origin Resource Sharing (CORS) for data fetching.