Jake Archibald & Surma - Setting up a static render in 30 minutes

"Join Jake Archibald and Surma as they show you how to set up a static render in just 30 minutes, sharing practical tips and techniques to improve performance and compatibility in your web app building process."

Key takeaways

You don’t need plugins for every feature, just for the parts that are not render-to-string compatible.
The first interaction is configuring the game, which can take up to 5.1 seconds to load.
To improve performance, inline CSS and add preload tags for fonts and scripts.
The problem with Webpack is that it’s complex and uses undocumented APIs.
Rollup is a better choice for building web apps because it’s simpler and more flexible.
The asset emit method in Rollup can be used to create a static render.
The thin block in the network waterfall represents the time it takes to set up a connection.
The red bar in the network waterfall represents the time it takes for the user to see something on the screen.
Preloading fonts and scripts can improve the perception of performance.
JavaScript DOM doesn’t understand linear gradients and is slower than Preact.
Preact doesn’t support Suspense, which can lead to a poor user experience.
Rollup has an ecosystem of plugins that can be used to build web apps.
Creating a static render can improve the performance of a web app.
The goal is to make the first interaction faster, not to make it perfect.
Font subsetting can reduce the size of fonts downloaded by the browser.
Zopley is a compressor that creates normal compatible GZIP files but is better at compressing.
The authors used Rollup to build an HTML game and achieved a good balance between performance and compatibility.
The authors used their own plugin to create a static render, which improved the performance of the game.
The game was designed to work offline first, which improved the user experience.
The authors used various techniques to improve the performance of the game, including font inlining and script preload.
The authors recommend skipping certain steps in the build process to improve performance.

Jake Archibald & Surma - Setting up a static render in 30 minutes

More talks