Оптимизировать доставку CSS с head.js для Google Page Speed ​​не удалось

Мои шаблоны страниц имеют assets массив javascript со списком ресурсов css, js для использования на этой странице, например:

<!DOCTYPE html>
<html>
..........
..........
<script type="text/javascript">
var assets= ["/css/my.css", "/js/my.js", "/js/other.js"];
</script>
<script type="text/javascript" src="/js/head.js" async="async"></script>
</body>
</html>

с помощью head.js (загружается асинхронно) загрузите список ресурсов страницы:

// head.core code - v1.0.2 
// head.css3 code - v1.0.0 
// head.load code - v1.0.3
head.load(assets);

Теперь Google Page Speed ​​на вкладке для мобильных устройств (не на рабочем столе) говорит, что оптимизировать доставку CSS my.css

но my.css загружается асинхронно из head.js загружается асинхронно

Что я делаю неправильно?

Источник

1 ответ

Решение

Оптимизировать доставку CSS необязательно означает загружать их асинхронно в одиночку. Это также может означать, что CSS может быть раздутым, и у него есть класс, который нельзя использовать для рендеринга выше сгиба или нет на данной странице.

Когда разработчик с помощью инструмента минимизирует свой CSS, это происходит, когда все CSS-страницы объединены и раздуты!

Одним из способов справиться с этим является использование встроенного CSS-кода, который требуется для рендеринга над сгибом и перемещения остальной части CSS в нижнюю часть страницы. Если нет, вы можете попробовать использовать Google Apache или плагин скорости страницы Ngnix. https://developers.google.com/speed/pagespeed/module/

Источник
Другие вопросы по тегам