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

Рассмотрим сервис от Google по проверки скорости загрузки сайта - PageSpeed Insights. У большинства сайтов возникает ошибка «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы». Это происходит потому, что до введения гуглом правил по улучшению скорости загрузки, все верстали сайты по-другому. Разберем этот пункт подробнее.

У большинства сайтов возникает ошибка «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы»

Как влияют блокирующие css? 

Google в своих рекоммендациях пишет: «Браузеры запрашивают внешние файлы CSS перед отображением контента на экране. Это приводит к задержке и замедляет обработку страницы.».  Рекомендуется если css малых объемов, то можно вставить его в документ HTML, а при больших объемах страниц, нужно вставлять строки css, которые отвечают на видимую часть сайта при первой загрузке. Тем самым сайт будет загружаться быстрее используя только нужные стили для отображения сайта, и только потом догружать остальные элементы, которые не видит пользователь изначально.

Давайте проверим насколько важна это рекомендация, так как «нет чисел - нет явлений».

Как влияют блокирующие js?

Google поясняет это: «Перед отображением страницы браузер должен выполнить ее синтаксический анализ. Если при этом он обнаруживает внешний скрипт, он должен его загрузить. Это лишний цикл операций, который замедляет показ страницы». Рекомендуется оставлять код в документе HTML, только тот участок скрипта, который нужен для отображения верхней части сайта, который должен увидеть пользователь. Можно также просто отложить загрузку js в верхней части сайта с помощью атрибута async. К примеру <script async src="my.js">

Реализуем все рекомендации от Google в проекте site-rb.ru

Давайте проверим насколько важна это рекомендация, так как «нет чисел - нет явлений».

Изначально проверим сайт на скорость загрузки.

mobilnaja versija

 

Мобильная версия -  90/100. Так на мобильной версии нет js подключений, у нас только задача с css. Уберем подключение блокирующего файла css вниз сайта и оставим только стили видимой части в <head>. Смотрим результат:

smotrim rezultat

Теперь проверяем декстопную версию сайта

versija sajta

96/100 и все та же задача с блокирующим css.  Скрипты js для просмотра анимации тут расположены внизу по умолчанию, так как показ анимации слайдов тут нужен после прогрузки всей страницы. Проделываем тоже самое, что и с мобильной версией. 

В css тут настроена адаптация с помощью @media screen, но в тело документа мы ставим стили по умолчанию, а @media screen оставили в css документе, которая подключается ниже.

animacii slajdy

Результаты отличные. Проверим site-rb.ru на скорость загрузки на сервисе sitespeed.ru.

zagruzka na servise

По разработке и наполнении сайта проблем не выявлено. Что и следовало доказать.

Реализуем все рекомендации от Google в проекте ufa-da.ru

Проверка на одном сайте еще не дает полной картины, и поэтому берем второй проект на проверку. Для более наглядных изменений проверим сайт на двух сервисах по выявлению скорости загрузки.

Смотрим результаты до проведения наших работ.

rekomendacii

nashi raboty

diagramma

Проведем работы по мобильной версии. Подключение jquery перенесли вниз. css верхней части контента поставили. Интересно, что даже скрытые в верхней части блоки, тоже нужно описывать в теле html документа, если этого не делать то google ругается на это.

podkljuchenie

Переходим к декстопной версии. После тех же манипуляций с кодом css и js мы получили

dekstopnaja versija

И взглянем на результаты по сервису site-speed

servis skorost

Тут показатели не 100 процентные, так как в этой статье мы рассматриваем только ошибку блокирования css и js файлов.

Что можем сказать в итоге по этой ошибке?

Ошибка играет не последнюю роль в загрузке сайта. Судя по проекту ufa-da, сервис site-speed дает в 34% от всех факторов загрузки, а google дает  11-12%. Проект ufa-da привожу в итоге, как так он близок по структуре и верстке ко всем сайтам, ежели site-rb. Отсюда вывод, что стоит обратить внимание на эту ошибку. Если поисковик google все больше внимания уделяет качественным сайтам, то для продвижения вашего сайта будет только плюсом.

Отсюда вывод, что стоит обратить внимание на эту ошибку

Блог студии

Блог студии


Введите текст на картинке
captcha

Читайте также

Читайте также
Готов ли Ваш сайт к лидогенерации?
Готов ли Ваш сайт к лидогенерации ?