Комплексный маркетинг сайта: продвижение сайта, контекстная реклама, соц. сети, аналитика. От 15.000 рублей в месяц.
Главная » Полезные статьи » Раскрутка сайта » Google PageSpeed Insights » Сокращаем код .css

Сокращаем код .css

Если Google жалуется на несколько файлов .css одновременно, разумным будет объединить их все в один файл, соблюдая очерёдность, с которой они вызывались в head сайта.

Не забываем о том, что .css могут находиться в разных папках. Например, нативная css какого-нибудь плагина, вроде fancybox. Её тоже пихаем в наш общий файл .css, при этом не забываем изменить относительные пути к файлам в добавляемом коде.

Минификация готового файла

https://cssminifier.com/

Добавляем 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>

Во всех статьях в коде заменены:

[ на &#91;

{ на &#123;

< на &123;

Звоните +7 (812) 914-41-56, ответим на вопросы на тему работы с MODX Evolution или комплексного маркетинга.

Заказать эту или любую другую услугу вы можете на странице контактов.