The critical path is the set of resources the first paint waits for. Everything else is optional and should not be on that path. Once you can name the set, the fix is mechanical: shrink that set, and make its members small.
About 1 min of reading
Name the critical set for one page
List the subresources
Before you run it, say out loud what it will print. Then open the answer.
Test one removal
Before you run it, say out loud what it will print. Then open the answer.
Move the optional ones
Before you run it, say out loud what it will print. Then open the answer.
Inline the patch
Before you run it, say out loud what it will print. Then open the answer.
Block one resource at a time and reload. If the first paint changes, that resource was on the path. A handful of reloads names the whole set.
Inlined bytes are re-sent on every HTML request and cannot be cached separately. Inline the small first-patch only, and keep the rest as a tokened file.
Write down the resources first paint waits for. On a well-built page it is the HTML, one CSS file, and one or two fonts. Anything else is on the path by accident.
The rules the first screen needs can be inlined so the first paint waits for one request instead of two. Inline the patch, not the whole stylesheet, or you lose the long cache.
A resource the first paint does not wait for should be requested after it. That is what defer, async, loading=lazy, and IntersectionObserver are for.
Each one is defined here on this site. Open the entry for the full definition and the other words it points at.