• Push (or preload) the most important resources.
• Render the initial route as soon as possible.
• Pre-cache remaining assets.
• Lazy load other routes and non-critical assets.

With the same tag <link rel="preload" \> at the head of an HTML document we can ask the server either to push resources (if supported) or preload them (if there is no 'push' support or the 'nopush' attribute is specified). We should only push/preload the limited number of critical resources. Because, if all the resources have the highest priority - non of them really has. It's a good idea to load other resources 'in place' when they are needed or during idle time. It's called lazy loading and is mostly applicable to scripts and images.

So, split your code and push/preload or lazy load parts according to their usage.

Extra efforts to render the first page as soon as possible (First Paint) are inlining resources or server-side rendering. The first violates cashing, the second can harm Time to Interactive.

Going further, we can seek help from service workers. They can take assets directly from the cache rather than the server on repeat visits. In simple cases, it could be easily achieved with the help of some libraries.

• Apply instant loading with the PRPL pattern