Дмитрий Кузнецов

Необходимо повесить событие на инпут и в зависимости от числа выводить n-ое количество звёзд.

Sass, less, gulp и прочие сборщики ни как, практически, не улучшат скорость загрузки. Да, через сборщики можно уменьшить тот же самый css файл посредствам минификации, но это дело другое..
В вашем случае у вас крайне мало файлов для каких-либо серьёзных проблем.

Из советов из своего опыта могу выделить следующее:
1. Разбейте css файл на важные и не особо важные части. В важном - основа страницы, сбросы стилей и т.п. В неважном - всякие красоты и т.п.
2. Сожмите все css файлы.
3. Сожмите все используемые картинки. В качестве бонуса можно сделать их в формате webp, но используйте их как запасной вариант, так как не все старые браузера поддерживают этот формат.
4. Запустите сайт и проверьте загрузку через специальные средства (Google Pagespeed, например) и встроенными средствами браузера. Так вы увидите слабые места загрузки.
5. Оптимизируйте JS скрипты, проверьте что бы они правильно подключались и загружались после прогрузки страницы.

Если вы не используется ol или ul, то зачем ломать семантику и добавлять li? Оборачивать в div то же не обязательно, просто в btns-container можете добавить свойства grid'а или flex'а и наслаждаться нормальным отображением.

в конце тэга body:

<script type="text/javascript">
      function soundClick() {
  	var audio = document.getElementById('audio');
        audio.play();
    }
    </script>
</body>

<div class align="center">
    <audio src="радуга.mp3" id="audio"></audio>
    
    <button type="button" class="buttonSwagee" onclick="soundClick()">Послушать трэк свэгги</button>
  </div>

Так в чём проблема то? При неудачном запросе просто вызываете функцию showNotification с нужными данными и всё.

Почему вам кажется что этот вариант не верный?

Как вариант - это просто 2 отдельных блока.

Что-то типо такого: (писал на Tailwindcss, может где-то ещё такие же стили используются)
.flex.flex-col>div*2>Текст