When you inline CSS, you eliminate the required round trips to retrieve the styles, and they are immediately available to the browser as it parses the DOM. This makes these two critical steps much faster.
To refresh, when the browser encounters external style sheets, it blocks any rendering until the style sheets are fully loaded.
As I mentioned earlier, you want to limit the size of a page's CSS to just the CSS required to render the page. By limiting the styles to just those used by the page, you can typically reduce the amount of CSS to a handful of kilobytes.
Because the amount of real CSS is minimal, you can inline those styles in the document's head element. Now, the browser has no external file to download and a minimal amount of CSS to load. Plus, you have the critical styles required to render the app shell.
The PWA ticket app has a very...
