Put the stylesheet at the top of the head, before React Router's preloads
1 file+3−30/1 viewed
| 63 | 63 | ||
| 64 | 64 | ||
| 65 | 65 | export const links: Route.LinksFunction = () => [ | |
| 66 | − | // The stylesheet first, ahead of the fonts and module preloads, so a slow | |
| 67 | − | // connection paints sooner (docs/research/css-shipping.md). | |
| 68 | − | { rel: "stylesheet", href: appCss }, | |
| 69 | 66 | { rel: "icon", href: "/favicon.ico", sizes: "32x32" }, | |
| 70 | 67 | { rel: "icon", type: "image/svg+xml", href: "/favicon.svg" }, | |
| 71 | 68 | { rel: "icon", type: "image/png", sizes: "192x192", href: "/icon-192.png" }, | |
| 470 | 467 | <meta charSet="utf-8" /> | |
| 471 | 468 | <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| 472 | 469 | <meta name="theme-color" content="#0f0f11" /> | |
| 470 | + | {/* The stylesheet before everything React Router preloads, so a slow | |
| 471 | + | connection paints sooner (docs/research/css-shipping.md). */} | |
| 472 | + | <link rel="stylesheet" href={appCss} /> | |
| 473 | 473 | <Meta /> | |
| 474 | 474 | <Links /> | |
| 475 | 475 | </head> |