Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Удалите код javascript препятствующий отображению wordpress
Удалите код javascript и css блокирующий отображение верхней части страницы: устраняем ошибку
В статье разберемся с таким понятием и пунктом в pagespeed insights как «удалите код javascript и css блокирующий отображение верхней части страницы». Как с ним бороться и изменить этот пункт напишу ниже (способ только для wordpress).
Установка плагина JS & CSS Script Optimizer
Есть у меня статья про плагин autoptimize, знаменитый и неповторимый, но стал он позиции сдавать, много файлов и запросов начал делать, при том еще оказалось что он дает брешь в защите.
Советую прочитать, как использовать autoptimize и как проанализировать блог на вирусы.
Искал замену, нашел классный, устанавливается он стандартным поиском в админпанели.
- Вкладка.
- Добавить новый.
- Вводим запрос JS & CSS Script Optimizer.
- Устанавливаем и активируем.
Устраняем проблему удалите код javascript и css блокирующий отображение верхней части страницы
Плагин не слабо создает файлов, но динамика положительная. В общем заходим в настройки и смотрим скриншот, как и что делать.
Первый раздел: включение плагина wordpress и скрытие скриптов
В этом разделе включим плагин полностью и настроим минификацию и скрытие скриптов в подвал.
- Включаем модуль.
- Директории на хостинге где будут располагаться кешировнные файлы стилей и javascript.
- Включение модуля сжатия и оптимизации javascript.
- Эти два пункта я тестировал, но особых различий не нашел, все остается на своих местах, выбирайте любой, либо тестируйте.
- Игнорировать внешние скрипты, галочку не ставим, иначе они не будут оптимизированы.
- Первый чекбокс это объединить все скрипты в два файла и разделить их, первые пойдут в header другие в подвал, не рекомендую ставить, так как не понятно по какому принципу определяется расположение. Второй объединить одним файлом и переместить в подвал, ставим галочку.
- Исключить, если один из скриптов перестал работать, то прописывайте его название здесь.
Второй раздел: как исправить стили
Плагин так же отвечает на вопрос как исправить и сжать файлы внешнего вида, посмотрим на настройки.
- Включаем модуль оптимизации.
- При включении галочки внешние не будут оптимизированы.
- Объединить, включаем.
- По умолчанию активна.
- Сюда прописываем стили которые начали спорить. На одно клиентском сайте, пришлось прописать.
- Сохраняем изменения.
На этом настройка закончена, подождите десять минут, чтобы плагин сделал работу и радуйтесь результатам.
Вывод
JS & CSS Script Optimizer имеет перед autoptimize много преимуществ.
- Меньше споров.
- Простота использования.
- Удаляет из верхней области не только файлы вордпресса и темы, но и сторонних ресурсов.
- Безопасность.
Есть один минус, не умеет минифицировать HTML код, что очень плохо, ищу решение проблемы, о решении напишу в статье. Теперь вы знаете как избавиться от пункта в pagespeed insights: удалите код javascript и css блокирующий отображение верхней части страницы, успехов.
P.S. И в заключении супер видео (для опытных).
wpsovet.ru
Удалить код JavaScript и CSS, который блокирует отображение
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
Давайте проверим насколько важна это рекомендация, так как «нет чисел - нет явлений».
Изначально проверим сайт на скорость загрузки.
Мобильная версия - 90/100. Так на мобильной версии нет js подключений, у нас только задача с css. Уберем подключение блокирующего файла css вниз сайта и оставим только стили видимой части в <head>. Смотрим результат:
Теперь проверяем декстопную версию сайта
96/100 и все та же задача с блокирующим css. Скрипты js для просмотра анимации тут расположены внизу по умолчанию, так как показ анимации слайдов тут нужен после прогрузки всей страницы. Проделываем тоже самое, что и с мобильной версией.
В css тут настроена адаптация с помощью @media screen, но в тело документа мы ставим стили по умолчанию, а @media screen оставили в css документе, которая подключается ниже.
Результаты отличные. Проверим site-rb.ru на скорость загрузки на сервисе sitespeed.ru.
По разработке и наполнении сайта проблем не выявлено. Что и следовало доказать.
Реализуем все рекомендации от Google в проекте ufa-da.ru
Проверка на одном сайте еще не дает полной картины, и поэтому берем второй проект на проверку. Для более наглядных изменений проверим сайт на двух сервисах по выявлению скорости загрузки.
Смотрим результаты до проведения наших работ.
Проведем работы по мобильной версии. Подключение jquery перенесли вниз. css верхней части контента поставили. Интересно, что даже скрытые в верхней части блоки, тоже нужно описывать в теле html документа, если этого не делать то google ругается на это.
Переходим к декстопной версии. После тех же манипуляций с кодом css и js мы получили
И взглянем на результаты по сервису site-speed
Тут показатели не 100 процентные, так как в этой статье мы рассматриваем только ошибку блокирования css и js файлов.
Что можем сказать в итоге по этой ошибке?
Ошибка играет не последнюю роль в загрузке сайта. Судя по проекту ufa-da, сервис site-speed дает в 34% от всех факторов загрузки, а google дает 11-12%. Проект ufa-da привожу в итоге, как так он близок по структуре и верстке ко всем сайтам, ежели site-rb. Отсюда вывод, что стоит обратить внимание на эту ошибку. Если поисковик google все больше внимания уделяет качественным сайтам, то для продвижения вашего сайта будет только плюсом.
Отсюда вывод, что стоит обратить внимание на эту ошибку
www.site-rb.ru
Совет «Удалите код препятствующий отображению» в PageSpeed
Компьютер пытается загрузить скрипт и до того момента, пока он полностью не загрузится, приостанавливает отображение контента. Фактор этот существенно влияет на ранжирование сайта поисковиками. По данным Google, в дальнейшем все веб-ресурсы поисковая машина станет оценивать не по ссылкам с других доменов, а на основании поведения посетителей и времени загрузки работы сайта, а значит эта рекомендация очень существенна – если её выполнить, есть вероятность повысить свои позиции в рейтинге.
Удаление кода JS, который провоцирует ошибку
Чтобы сбойный код не мешал работе сайта, его нужно перенести из блока head в блок footer. Вслепую здесь действовать нельзя, нужно учесть правила размещения скриптов. Все JS-блоки, которые принимают участие в показе внешнего вида веб-страницы, нужно включать в верхнем блоке, а которые не принимают – в нижнем. Некоторые инъекции стоит делать внутри HTML-страницы, а атрибут async позволяет осуществить вызов асинхронно.
Замечание «Удалите код JavaScript препятствующий отображению» на движке для сайтов WordPress устраняется достаточно просто. В CMS есть функция wp_register_script, позволяющая установить очередь подгрузки JS-иньекций. Для ее использования нужно поправить файл functions.php, установив значение true для вышеназванной функции. Также необходимо указать параметр true для вызова в блоке footer в самом теле функции.
Для того, чтобы убрать текст «Удалите код JavaScript препятствующий отображению» на Joomla, нужно просто вставить скрипт в блок head целиком, а не просто вызвать его.
На обновления блога теперь можно подписаться Вконтакте
lsreg.ru
Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Сообщение удалите код JavaScript и CSS, блокирующий отображение верхней части страницы – это рекомендации Google по ускорению вашего сайта. Такое пожелание к оптимизации ресурса можно встретить, если вы проверите свой сайт на скорость загрузки в PageSpeed Tools.
Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Что это означает
На своем ресурсе Гугл анализирует сайты и выдает основные рекомендации – что должен сделать веб-мастер, чтобы сократить время загрузки страницы, а значит, результатом этого станет повышение позиций сайта в поисковой выдаче.
Если остальные рекомендации, типа: оптимизируйте изображения, оптимизируйте загрузку видимого контента и тому подобные, выполнить не составит проблем, то «удалите код JavaScript и CSS, блокирующий отображение верхней части страницы», которое является одним из важнейших действий, заставляет владельцев сайтов поломать голову – как это можно исправить.
Скажу сразу – я не силен в программировании и на своем WordPress блоге предпочитаю скрипты ручному изменению кода системных файлов. Задался решением, как выполнить данную рекомендацию и я нашел выход.
Плагин Autoptimize устраняет эту проблему
1) Установите плагин Autoptimize.
2) Настройте в точности, как я описал в этой статье.
3) Если PageSpeed Tools до сих пор показывает ошибку, посмотрите на какие скрипты он реагирует и удалите их из строчки в настройках плагина Autoptimize (опции JavaScript — Exclude scripts from Autoptimize). Это означает, что они будут оптимизированы.
4) Радуйтесь! PageSpeed Tools больше не ругается.
Я рассказал вам, как устранить рекомендацию удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Теперь видимая часть страниц стала загружаться намного быстрее, сайт занимает более высокие позиции в поиске, посетителей стало больше.
Кстати, вот сравнение оценки моего сайта до того, как я занялся оптимизацией (тогда еще по глупости пользовался конструктором WIX) и после того, как я перешел на WordPress (здесь получил широкий спектр инструментов для улучшения своего блога). Сегодня моя оценка 96%. А у вас?
Добавлено 17.05.2017:
Удалил Вебвизор от Яндекса (так как он сильно тормозит скорость загрузки) и сменил код Метрики на сайте. Теперь у меня 98%.
buxrabota.com
