Нужно ли обязательно удалять «Render Blocking CSS» - PullRequest
0 голосов
/ 03 ноября 2018

Я прошел мою домашнюю страницу через тест Google PageSpeed, и он дал мне 69 баллов для мобильных и 95 для настольных компьютеров. Единственная проблема - блокировка рендера CSS.

Теперь, все мои веб-страницы на моем веб-сайте выше фальца. т.е. нигде не задействован свиток. Учитывая это, лично я чувствую, что не должен делать ничего особенного, поскольку CSS необходим для просмотра моей страницы так, как я ее разработал, с самого начала.

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

Я игнорирую Google? Это означало бы, что я никогда не наберу 100/100, и не повлияет ли это на мои шансы на SEO?

1 Ответ

0 голосов
/ 04 ноября 2018

TL; DR - Нет, не нужно. Но в большинстве случаев это помогает, косвенно.


Имеется блокировка рендера для предотвращения FOUC .

В идеале вам следует загружать только CSS, отвечающий за рендеринг "над сгибом" вашей страницы в качестве блокировки рендеринга, а все остальные стили - с использованием асинхронных методов.

Однако большинство сайтов загружают весь свой CSS как блокировку рендера. Зачем? Потому что большинство веб-сайтов не позволяют специалисту по CSS настраивать загрузку CSS для своего конкретного случая. Иногда они платят за тему, но это все.
Темы обычно не оптимизируются с этой точки зрения, потому что нет способа узнать, какие элементы пользователь захочет расположить над областью сгиба.

Это огромная проблема?

NO.

Прежде всего, все это происходит только тогда, когда пользователь загружает самую первую страницу вашего сайта. На всех других страницах будут использоваться кэшированные таблицы стилей (уже загруженные на первой посещенной странице) (если только вы не загружаете разные таблицы стилей для разных страниц).

И во-вторых, общая идея о том, что Google снижает SEO-оценку вашей страницы за использование CSS, блокирующего рендеринг, технически неверна. Они налагают штрафы по многим другим причинам (таким как проблемы доступности, читаемости и отзывчивости), но не за то, что имеют блокирующий рендеринг CSS.


Однако между ними существует косвенная корреляция.
Google Page Speed ​​- это инструмент, который говорит вам, как вы можете улучшить скорость загрузки вашей страницы или создать впечатление, что страница загружается быстрее.

  • если вы исправите обнаруженные проблемы, страница будет загружаться быстрее или, по крайней мере, будет казаться быстрее
  • если ваша страница работает быстрее или быстрее, вероятность того, что пользователи нажмут кнопку "Назад" в ожидании загрузки вашей страницы, меньше.
    В ЭТОМ поведении пользователя возникает наказание за SEO. Google регистрирует любое такое поведение как обычный «пользователь не нашел то, что он искал на этом сайте» и снижает оценку SEO страницы для всего, что пользователь искал для

Любой способ удержать пользователей от нажатия кнопки «Назад» в течение первых 30 секунд после того, как они ушли на ваш сайт (что снизит показатель отказов), является хорошим способом борьбы со штрафами SEO.
И ... это правда: один из самых эффективных методов - ускорить загрузку вашей страницы.

Другие включают в себя:

  • делает процесс загрузки выглядеть профессионально (разместите правильные размеры заполнителей для изображений, чтобы страница не прыгала при загрузке);
  • держать FOUC как можно ближе к 0
  • рендерит что-то, а не ничего
  • если возможно, дать пользователям общее представление о том, сколько страниц загружено (в%)
  • сделать сайт загруженным с некоторой базовой схемой того, что на более длинных страницах. пользователи будут читать схему, пытаясь выяснить, находятся ли они на нужной странице, и они не заметят время загрузки - поскольку вы даете им что-то делать во время ожидания
  • отрежь "бла бла" и постарайся быть честным в отношении всего, что может предложить твоя страница

Я не могу подчеркнуть это достаточно: это действительно окупается, если честно. С точки зрения SEO существует огромная разница:
Если ваша страница посвящена A, но вы хотите показать это пользователям, которые ищут B, не говорите им, что у вас есть B, и не скрывайте это от них. Просто скажите им:
«Смотри, это не B, а A, но вот несколько причин, почему вы должны рассмотреть A вместо B».

Большинство пользователей будут читать эти причины. Особенно, если они хорошо написаны, они решают реальные проблемы и не выглядят так, будто просто пытаются выиграть время.
Очень хорошая идея - поместить ваш самый сильный аргумент в список второго или третьего в списке (второй, если первый, довольно длинный, третий, если первые два не очень длинные).
ThАргументация такова: если вы поместите это ниже, многие пользователи не прочитают последние три слабых аргумента - они пометят весь список как неубедительный и вернутся назад.
Кроме того, если вы разместите аргументы в порядке их важности, пользователь поймет это, и, как только они достигнут двух неубедительных аргументов, они предположат, что дальше по списку становится все хуже, и, опять же, они ' нажму кнопку назад. Но если вы поместите второй или третий аргумент сильнее предыдущих, они прочитают весь список в надежде найти другой.

Теперь, если ваши аргументы убедительны, пользователь выберет A вместо B => Win .
Если нет, они все равно перейдут на B, но, по крайней мере, они сделают это позже ( после того, как прочитают ваши причины), и штраф будет намного меньше, если таковой имеется (чем дольше пользователь тратит) на вашей странице, тем меньше штраф, если они нажмут обратно) => Без потерь .

Если вы можете держать пользователя занятым более 30 секунд, вы, как правило, занимаетесь оптимизацией SEO. И это действительно важная проблема SEO, а не блокировка рендера как таковая.


В конце концов, вполне возможно создать страницу с очень низким показателем на Page Speed, имея при этом очень высокий показатель SEO. Это маловероятно, но вполне возможно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...