- Define your shell styles in index.html to avoid additional network requests
- Set your background color/image in index.html so that a refresh does not cause the browser to flash white
Here's an example of a blank favicon converted to base64 to get rid of a network request
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />
Preconnect to external resources
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://www.google-analytics.com/" />
<link rel="preconnect" href="https://firestore.googleapis.com" />
You'll want to host your fonts locally, so they can be cached. Then you want to preload them like this:
<link
rel="preload"
href="/font/MaterialIcons-Regular.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
I have yet to see any perfomance benefit from this
<link rel="dns-prefetch" href="https://www.googleapis.com" />
Prefetched resources from the main bundle will decrease your scores.
- Statically import your app shell resources/components
- If a resource only provides side-effects(component registration) import it dynamically unless needed on first-render
- Chunk large libs like Firebase
- It's possible to chunk two dynamic imports together by providing the same
/* webpackChunkName */