Как правильно создать критический css?
для загрузки стилей нужны, как правило, доли секунды. поэтому критическими стилями вообще редко кто заморачивается. 

что выносить в критический css — всегда по ситуации, но имхо основной принцип должен быть не в том, что сначала мы полностью рендерим первый экран, а потом все остальное. 
а в том, чтобы в том коротком временном промежутке, пока грузятся стили, не мелькал «голый» текст в столбик. 
т.е. прячем второстепенные и служебные элементы, откладываем на потом тени-градиенты с прочими красивостями и т.п. главное — отобразить лейаут, чтобы при полной загрузке контент не прыгал. 

3. Прелоадеры и критический css вместе не могу существовать?
critical css нужен, чтобы отобразить сайт практически мгновенно для пользователя, чтобы не пялиться целую секунду на дурацкий прелоадер.
 Где золотая середина?
Золотая середина это обычно + 1 секция ниже(ей вы перекрываете особо большие экраны).
ноутбука с HD-разрешением, а у другого 4к монитор повернутый вертикально.
Как правило критический css создается с упором на пользователей мобильный девайсов, либо же пользователей с очень плохим интернет соединением. Но 2020 год на дворе, и ваш css в 100кб, для 99% пользователей просто смешон. Большинство статей которые вы читаете про критический css - зарубежные(плохой интернет, + многомиллионный охват аудитории, какой нибудь портал вроде bbc news), если у вас такого охвата нет, и вы "стримите" свой бизнес на Россию - заморачиваться с критическим css не столь продуктивно.
Прелоадеры
Прелоадер нужен как правило, если у вашего сайта загрузка более 3+ секунд, он позволяет снизить коэффициент отказа у пользователя, и убрать агрессию к вам) Если ваш сайт загружается до 3 секунд - прелоадер тоже такое себе.