Put the styles in the page

How to do it

If the whole stylesheet is small (under about 15 KB compressed), inline all of it in <style>. Otherwise inline the part for the top of the page and load the rest without blocking. Remove blocking <link rel="stylesheet"> from the head.

Example

<head>
  <style>/* all CSS when small, or only what the top of the page needs */</style>
</head>
<body>
  <!-- page content -->
  <!-- a stylesheet at the end of body doesn't block the content above it, and needs no inline onload, which a strict CSP forbids -->
  <link rel="stylesheet" href="/rest.5d2e9b.css">
</body>

How to check

Lighthouse shows no render-blocking requests.

Measured

On a reference site, an 18 KB stylesheet (4.6 KB compressed) was moved from inline to a file. In real Chrome at a 100 ms round trip, first paint came 200 ms later, one extra round trip.