4 ms·
I love this pattern. I've been studying web performance for a while in the context of working on my project Gatsby [0] — a React.js static site generator. The n
by kylemathews 10y ago
I love this pattern. I've been studying web performance for a while in the context of working on my project Gatsby [0] — a React.js static site generator. The next version of Gatsby is explicitly patterned after PRPL.
Gatsby at build time generates a static HTML version of each page. Which makes the initial load time of a Gatsby site super fast. The browser then loads the minimum Javascript necessary to make that page interactive. Then in a service worker, it starts prefetching Javascript and data necessary for other pages so that when you click on a link, it takes very little time to fetch the code/data and then make the page transition.
A couple sites running 1.0 code that you can check out are my blog https://www.bricolage.io/ https://www.bricolage.io/ and an example site cloned from Instagram https://gatsbygram.gatsbyjs.org/ https://gatsbygram.gatsbyjs.org/
I wrote up the performance plans for Gatsby in this issue [1].
One analogy I came up for that which I really like is to JIT or lean manufacturing.
Quoting myself:
"There's a close analogy to just-in-time manufacturing ideas. Companies found that the way to be the most responsive to customers is to actually avoid doing work ahead of time. When they did do work ahead of time this would paradoxically slow them down as the speculative work would get in the way of getting the work done that's actually necessary (resource contention).
For both manufacturing and web apps there's high inventory cost (unused code takes up memory) and a premium on responsiveness. The car customer wants their new car yesterday and the web app consumer wants their app running immediately. Any work you do ahead of time because "they might need it" gets in the way of the app being responsive to the user.
With both you want to wait until the user asks for something and then work overtime to get it to them as fast as possible."
[0] https://github.com/gatsbyjs/gatsby https://github.com/gatsbyjs/gatsby
[1] https://github.com/gatsbyjs/gatsby/issues/431 https://github.com/gatsbyjs/gatsby/issues/431