Не блокирующие стили без отображения голого html?

Привет. Суть такая что бы добится 100% скорости страницы по PageSpeed нужно что б ничего не блокировало отображение. Для этого я использую LoadCSS.js и стили загружаются асинхронно, только вот клиенту при этом не нравится что страница как бы прыгает (отображается без стилей только сам html код). Все мои агрументы слушать не хотят и считают что это отпугивает клиентов, мол со страницей что-то не так. Пробовал инлайново давать лоадер страницы, а в коллбеке к loadcss делать удаление лоадера, но иногда колбек от loadcss срабатывает тогда, когда браузер еще не распарсил стили и видно опять голый html.
Есть ли у кого-то какие мысли?
Мне приходит в голову только весь css инлайново в каждую страницу вставить, но он весит 115кб и мне кажется это не лучший выход. Можно еще critical css написать / сгенерировать черег галп, но суть та же.
У меня 2 файла стилей: компоненты, стили страницы.
Думал может инлайново закинуть только стили страницы, а стили компонентов (components.css) грузить асинхронно, но тогда проблема в том что стили компонентов могут переписывать стили из style.css.
В общем палка о 2 концах, что кто посоветует? Сайт чисто html страницы (около 20 штук) с аякс запросами к cockpit cms.
Спасибо.
  • Вопрос задан
  • 281 просмотр
Пригласить эксперта
Ответы на вопрос 3
@Alk90
php, mysql, jquery, css, html, api
Единственный вариант - вынести основные стили элементов в отдельный файл и загружать его не обращая внимание на Speed Test. Такие элементы как стили кнопок, ajax форм и прочего уже грузите в конце страницы. Но я не стал бы так заморачиваться, если там не значительное количество стилей...
А вообще, не обращайте внимание на замечание Speed Test, если это исправляется только прыганием страницы или еще какими-то не удобствами для пользователя...
У меня на всех сайтах CSS стоит в хедере (так же как и у вас 90-120кб). Но Speed Test пишет 95% скорости загрузки.
Более того, браузеру проще накладывать DOM уже поверх существующих стилей, чем после подгрузки стилей пробегать по всему DOM для их применения. Это можно заметить и в Speed Test. Пробовал на нескольких сайтах... Если подключение css находится в конце документа, то Speed Test показывает меньшую скорость, чем когда он находится вверху.
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
PageSpeed - это подсказки, а не руководство к действию. Вам робот указывает, что можно сделать, что бы ускорить загрузку страницы. Это не значит что это надо делать. Это не seo советы от гугл. Это просто удобный инструмент, что бы глянуть, а что там еще я не сделал. Пользуйтесь здравым смыслом.
Ведь Вы же не ставите на автомобиль ракетный двигатель, хотя это быстрее.
Если уж маниакальная зависимость от скорости - то вынесите часть ключевых стилей в отдельный файл и подключите в head синхронно. Остальное асинхронно.
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Все мои агрументы слушать не хотят и считают что это отпугивает клиентов, мол со страницей что-то не так.


Блин!!! Правильно они считают!!!
Что за фанатизм? Pagespeed — это рекомендация, а не стопроцентная истина.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы