<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- много контента -->
<script src="main.js"></script>
</body><link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script"><link rel="preload" href="style.css" as="style"> ведь сам тег скрипта идёт не намного позже?<link rel="preload" href="main.js" as="script"> ведь скрипты потому и в подвале сайта, чтобы отложить их загрузку? 
rel="preload" имеет смысл использовать только для файлов (css, js, fonts, video, img), которые загружаются не из html-кода, а позже из других css/js-файлов или по ajax/socket. Чтобы браузер не ждал, когда обнаружится потребность в этом файле, а заранее загрузил его. ведь скрипты потому и в подвале сайта, чтобы отложить их загрузку?
Простой