We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
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."
- 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.