CSS и SEO — что лучше стили в отдельном файле или в теле страницы?
Друзья у меня вопрос, как он выглядит я описал в названии поста. В общем я не могу понять СЕО спец. говорит что нужно выносить стили в отдельный файл, но если я это делаю появляется определенное количество дополнительных запросов. Если оставить стили в теле страницы (а учитывая что сайт на WordPress, и стилей имеется нормальное количество) получается офигеть какое офигенное начало страницы (если смотреть через Ctrl+U) и соответственное увеличение количества ошибок через тест страницы на W3.
Лично я за CSS в теле страницы (ну придется ошибки править, тут не как по другому), как Вы считаете что будет правильнее?
По правилам гугла...
Выделяется базовый набор стилей только самые основные,к примеру сетка, основные цвета сайта и может размер шрифтов, и вставляется это inline прямо в header.
Все файлы css подключаются асинхронно в инете есть множество примеров js скриптов которые это делают.
Спасибо за ответ. Вот я приконектил скрипт loadcss, штука хорошая но. По путно под него пришлось дописывать плагин autoptimize так как в асинхронн мне нужно отправлять все сжатые стили. И все равно Гугл ругается на блокирующий стиль.
Ок, как на WordPress можно выбрать из всех стилей только те которые по правилам гугла могут быть в хедере? Ведь файлов стилей много, и правила отрисовки меняются с каждой новой загрузкой стилей.
для меня это была очень муторная работа, я ставил плагин на файрфокс которые мне показывал все стили которые использоваются на текущей странице а потом в ручную пересобирал.....
Поверьте для меня это занятие такое же муторное как и для Вас. Я четко понимаю что достаточно найти инструменты и выработать навыки но блин... Чет сколько ищу не нахожу панацени по данному вопросу. (
Панацея — это поставить плагин кэширования и забить, уделяя внимание контенту сайта.
Если же по теме:
Рекомендация гугла по удалению css из head — это просто рекомендация.
Он имеет в виду, что вам нужно разобраться какие из этих стилей нужны там, а какие нет.
В идеале, конечно, сделать 2 css файла:
CSS файл первого экрана
CSS файл всей страницы
Первый экран загружать в head, а всё остальное загружать где-нибудь внизу.
Но лично я считаю, что достаточно засунуть всё важное в один файл и оставив его в head (минимизировав). С этим прекрасно справляется плагин для кэширования.
Вниз же стоит переместить css файлы подключаемых плагинов, однако делать это поочерёдно и следить чтобы верстка не ехала.
Ну а на тех страницах, где этот плагин не реализуется — его css вообще грузиться не должен.
Oblomow, спасибо за ответ. В общем в последних моих работах использую связку wp super cache + autoptimize + несколько часов танцев в стиле датракийцев и все поекты вылетают в зеленую зону Гугл инсижн.
UX/UI designer, researcher and almost a developer.
Забейте на количество запросов и выносите css, как и полагается в файлы, предварительно объединив в один общий *main.css (для wp это не проблема). Если сайт загружается 2 с. и менее, то и поводов волноваться нет.
Без острой необходимости inline путем (в html код) внедрять css код не гигиенично. И СЕО-шник прав, поисковые машины это расценивают ущербным фактором.
Под "острой необходимостью" я подразумеваю приоритет в css при работе с JS, либо отсутствие возможности для отдельного url втащить конкретный стиль для класса или id.
Простой
Средний
Простой
