Если Google жалуется на несколько файлов .css одновременно, разумным будет объединить их все в один файл, соблюдая очерёдность, с которой они вызывались в head сайта.
Не забываем о том, что .css могут находиться в разных папках. Например, нативная css какого-нибудь плагина, вроде fancybox. Её тоже пихаем в наш общий файл .css, при этом не забываем изменить относительные пути к файлам в добавляемом коде.
Минификация готового файла
https://cssminifier.com/ (может не работать)
https://www.minifier.org/
Добавляем CSS по-иному??
Идея ниже на данный момент неактуальная. Не получилось, проблем больше, чем эффекта. Лучше использовать старый добрый link и никакие части .css не выносить в head сайта.
link - не наша тема :)
Добавляем CSS через синхронный XMLHttpRequest следующим образом:
<script>if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET",'/css/style.min.css',false);
xhr.send();
var lazyStyle = document.createElement('style');
lazyStyle.innerHTML = xhr.responseText;
document.head.appendChild(lazyStyle);
</script>
Более правильный асинхронный XMLHttpRequest
<script>if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET",'/css/style.min.css',false);
xhr.send(); xhr.onreadystatechange = function() {
var lazyStyle = document.createElement('style');
lazyStyle.innerHTML = xhr.responseText;
document.head.appendChild(lazyStyle);}
</script>