Как оптимизировать css для PageSpeed?

Question

[sadieff]

Ребята, помогите. Хочу загнать страницу в зеленую зону для мобильных.
https://yadi.sk/i/M-QK8XO73LLHJE
В итоге ругается на css. Весь код сжал в одну строку. А подключается только один шрифт из google fonts и выдает мне 71 из-за этого. Как победить PageSpeed?

Answer 1

[RaulDuke]

Он хочет чтобы Вы большую часть css грузили после контента (например после body). Если Вы сделаете так, то он повысит рейтинг, но при загрузке, несколько первых мгновений на экране будет происходит содомия. Блоки будут скакать, уменьшаться/увеличиваться и т.д.

Если мне хочется пролезть в "зеленую зону" PageSpeed, то я делаю так:

Вверху инлайново подгружаю верстку, которая касается лэйаута (размеры контейнеров, хидера, верхних элементов). Внизу все остальное. В таком случае нет этих неприятных скачков при загрузке.

Comments

[Yustas Alexu]

Хороший совет, но править такой сайт будет не меньшей содомией.

[RaulDuke]

Yustas Alexu: ну или попробовать малой кровью.

Весь css вниз, вверх сверстать лоадер с инлайновыми стилями, с оверлеем и спиннером (и сами знаете кем), который под собой будет прятать творящийся ад, после загрузки onReady прятать его.

Какие-то были проблемы у поисковиков с такими решениями, но я уже не помню подробностей, возможно, сейчас это не актуально.