Привет. Суть такая что бы добится 100% скорости страницы по PageSpeed нужно что б ничего не блокировало отображение. Для этого я использую LoadCSS.js и стили загружаются асинхронно, только вот клиенту при этом не нравится что страница как бы прыгает (отображается без стилей только сам html код). Все мои агрументы слушать не хотят и считают что это отпугивает клиентов, мол со страницей что-то не так. Пробовал инлайново давать лоадер страницы, а в коллбеке к loadcss делать удаление лоадера, но иногда колбек от loadcss срабатывает тогда, когда браузер еще не распарсил стили и видно опять голый html.
Есть ли у кого-то какие мысли?
Мне приходит в голову только весь css инлайново в каждую страницу вставить, но он весит 115кб и мне кажется это не лучший выход. Можно еще critical css написать / сгенерировать черег галп, но суть та же.
У меня 2 файла стилей: компоненты, стили страницы.
Думал может инлайново закинуть только стили страницы, а стили компонентов (components.css) грузить асинхронно, но тогда проблема в том что стили компонентов могут переписывать стили из style.css.
В общем палка о 2 концах, что кто посоветует? Сайт чисто html страницы (около 20 штук) с аякс запросами к cockpit cms.
Спасибо.
Единственный вариант - вынести основные стили элементов в отдельный файл и загружать его не обращая внимание на Speed Test. Такие элементы как стили кнопок, ajax форм и прочего уже грузите в конце страницы. Но я не стал бы так заморачиваться, если там не значительное количество стилей...
А вообще, не обращайте внимание на замечание Speed Test, если это исправляется только прыганием страницы или еще какими-то не удобствами для пользователя...
У меня на всех сайтах CSS стоит в хедере (так же как и у вас 90-120кб). Но Speed Test пишет 95% скорости загрузки.
Более того, браузеру проще накладывать DOM уже поверх существующих стилей, чем после подгрузки стилей пробегать по всему DOM для их применения. Это можно заметить и в Speed Test. Пробовал на нескольких сайтах... Если подключение css находится в конце документа, то Speed Test показывает меньшую скорость, чем когда он находится вверху.
PageSpeed - это подсказки, а не руководство к действию. Вам робот указывает, что можно сделать, что бы ускорить загрузку страницы. Это не значит что это надо делать. Это не seo советы от гугл. Это просто удобный инструмент, что бы глянуть, а что там еще я не сделал. Пользуйтесь здравым смыслом.
Ведь Вы же не ставите на автомобиль ракетный двигатель, хотя это быстрее.
Если уж маниакальная зависимость от скорости - то вынесите часть ключевых стилей в отдельный файл и подключите в head синхронно. Остальное асинхронно.
Немного ошибаетесь. Гугл заявил что будет ранжировать сайты и по скорости загрузки (по крайне мерие в европе), около недели назад. Это станет заметно начиная с июня месяца, посему и этот вопрос.
Ссылка вот: https://webmasters.googleblog.com/2018/01/using-pa...
На русском: https://www.watermillsky.ru/2018/01/21/google-page...
С блокировкой стилей сайт набирает 68 пунктов и попадает в желтую зону, если убрать блокировку то поднимается до 89.
Если уж маниакальная зависимость от скорости - то вынесите часть ключевых стилей в отдельный файл и подключите в head синхронно. Остальное асинхронно.
Так тогда заблокируется сраница до загрузки файла стилей и толку будет 0. Единственное если подключать инлайново. Только потом если грузить асинхронно файл с стилем компонентов, то он перепишет часть моих стилей, а должно быть наоборот. Или разбивать на 3 css файла. И грузить стили инлайново, потом асинхронно файл со стилем компонентов, потом уже файл с переопредилениями стилей для компонентов.
по скорости, Карл, а не по показателю googleSpeed. Вы можете получить 100%, но при этом это будет, допустим 5с, а другой сайт даст 3c при 50%. Соответственно он быстрее. Но я Вас уверяю вес этого параметра при ранжировании минимальный. Так что гнаться надо за скоростью, а не показателями в googleSpeed. googleSpeed только помогает, показывает полезную инфу и не более того.
Клиент хочет так сказать сесть на 2 стула. И около 90% по pagespeed и загрузка без "рассыпания" страницы. Что-то 1 тут не устраивает, поэтому и думаю варианты. Я бы забил для своих проектов, но ...
