удалите код javascript и css блокирующий отображение верхней части страницы

Удалите из верхней части страницы код JavaScript и CSS!

Продолжаю тему ускорения сайта, теперь передо мной ещё один пункт, который мне подсказал Google: Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение. Сейчас попробую разобраться, что там лишнего и как удалить лишний JavaScript и CSS?

Тесты, я напомню, я произвожу этим сервисом: developers.google.com, где в отношении JavaScript и CSS мне был дан конкретный совет:

Как видите, у меня это самая большая проблема, 8 скриптов подгружается сразу и из-за этого первый экран загружается не так быстро, как хотелось бы. Так же есть 10 css файлов, которые тоже не оптимизированы. Ну что же, будем решать проблему!

Как удалить из верхней части страницы код JavaScript?

По этому вопросу претензии примерно такие:

Удалите код JavaScript, препятствующий отображению:

Недавно нашел интересное решение: в function.php нужно вставить код, который будет давать команду нужным нам скриптам загружаться не сразу:

Сам google советует в скрипт вставить атрибут async, который делал бы его загрузку асинхронной. Но это решение подходит только для внешних скриптов, например, этот атрибут async можно вставить в script рекламы Яндекс Директ, если у вас его реклама выводится в первом экране.

Оптимизировать плагины таким образом трудно, нужно лезть в код каждого плагина и прописывать в него этот атрибут, или его альтернативу. Я не программист и так поступать не буду. К тому же если вы постоянно обновляете плагины, то все ваши труды пропадут после обновления.

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

Как оптимизировать работу CSS?

Напомню список претензий:

Оптимизируйте работу CSS на следующих ресурсах:

Решить же вопрос можно установкой плагина, который сам объединит все стили в один файл. Плагина, который бы выполнял только эту функцию не нашел, поэтому расскажу о плагине, который делает все сразу, и удаляет скрипты, и оптимизирует css.

Как оптимизировать все сразу?

Я решил себе установить плагин Autoptimize, который оптимизирует и скрипты, и css одновременно. После установки плагина нужно лишь зайти в его настройки и поставить галочки в нужном месте:

После этого Google Page Speed выдает такое:

Ни одного скрипта не грузится, только два файла css, которые включают в себя все стили, а все скрипты перемещаются в область подвала.

Если теперь посмотреть на исходный код страницы, то там оптимизированная КАША, в которой без бутылки не разобраться.

Сначала я подумал, что этот плагин не решит моих проблем полностью, но как оказалось, это было из за того, что я его не до конца настроил!

После выставления галочек в нужном месте я получил ОТЛИЧНЫЙ результат! ВСЕ ПРОБЛЕМЫ ИСЧЕЗЛИ!

Чтобы так получилось нужно нажать кнопку вверху Show advanced settings и тогда появятся дополнительные настройки. Нужно, чтобы стояли галочки в пунктах:

Оптимизировать код HTML?

Оптимизировать код JavaScript?

Оптимизировать код CSS?

Inline all CSS?

Save aggregated script/css as static files

После этого правда у меня перестал работать плагин, который фиксирует виджет, но это совсем не проблема, скорость загрузки сайта намного важнее. А еще важнее угодить дяде Гуглу.

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

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

Удаление кода JavaScript и CSS Google PageSpeed

Источник

Как Исправить Удалите Код JavaScript и CSS, Блокирующий Отображение Верхней Части Страницы

Введение

Скорость сайта — это один из самых важных факторов, который помогает привлечь и удержать посетителей. Всё остальные факторы имеют равное значение, но быстрый сайт имеет больше шансов заполучить много пользователей. Это происходит из-за того, что поисковые системы берут данный фактор во внимание при вычислении результатов рейтинга в поиске. Поэтому, если вы хотите оставить своих конкурентов у разбитого SEO корыта, сделайте скорость сайта своим приоритетом.

Конечно, оценить скорость вашего сайта может показаться немного сложным. Есть много факторов, которые могут повлиять на результат — скорость интернет соединения, географическое положение и т.д. Однако не стоит переживать, в этом нелегком деле вам может помочь Google’s PageSpeed Insights. Это бесплатный сервис от Google, который даёт оценку сайту на основе его скорости загрузки. В идеале, вы должны попытаться заполучить самую высокую оценку на PageSpeed. И если вы уже воспользовались данным онлайн инструментом, значит вы могли столкнуться с довольно известной рекомендацией по оптимизации скорости загрузки сайта Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы.

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

Чтобы узнать немного больше об этой рекомендации, мы должны взглянуть на критерии по которым Google выдаёт баллы на PageSpeed Insights. Существует 10 правил для скорости определенных Google, и несоответствие одному из них выльется в уменьшение количества баллов.

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы одно из этих правил. Обычно загрузка JS и CSS скриптов заставляет браузер отложить загрузку HTML страницы. Конечно, это не является проблемой. Даже больше, это то чего вы хотите, никто не захочет смотреть на сайт без соответствующего оформления.

Однако Удалите код JavaScript и CSS, относится к тем скриптам, которые влияют на отклик страницы, но не используются в содержимом верхней части страницы (ATF). Содержимое ATF — это часть страницы, которая видна пользователю когда страница загружается; любая часть страницы для просмотра которой необходимо прокрутить сайт вниз не является ATF. Поэтому Google этой рекомендацией, говорит вам о том, что у вас на странице присутствуют JS и CSS скрипты, которые без надобности замедляют загрузку сайта, так как часть страницы на которую они влияют ещё не видна пользователю.

В этом руководстве по WordPress, мы воспользуемся Google PageSpeed Insights для обнаружения скриптов блокирующих отображение. Затем мы покажем вам 3 способа, как исправить эту проблему на WordPress. В дополнение к этому, вы также должны взглянуть на другие способы увеличить скорость загрузки сайта на WordPress, чтобы получить заметный результат.

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

Исправляем Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

JS и CSS являются важными составляющими любого современного сайта не только для его работы, но и для его внешнего вида. Однако тут есть один нюанс — производительность. Несмотря на то, что вы можете принять некоторые меры, вроде включения отложения загрузки JavaScript, иногда этого может оказаться недостаточно. Мы конечно же говорим о рекомендации удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Чтобы исправить данную ошибку, мы должны узнать существует ли данная проблема на вашем сайте вообще. После того, как мы подтвердим наличие, мы сможем приступить непосредственно к ее устранению.

Шаг 1 – Использование Google PageSpeed Insights для поиска кода JavaScript и CSS, блокирующего отображение верхней части страницы

Первый шаг для решения данной проблемы, это проверка вашего сайта с помощью Google PageSpeed Insights. Просто посетите данную страницу и введите в поле адрес вашего сайта. Нажмите кнопку Анализировать для получения отчета о сайте. Большинство сайтов имеют оценку от 50 до 70; это должно стать ориентиром вашей оценки. Помимо оценки, Google предоставит список с рекомендациям по улучшению скорости загрузки сайта.

Чтобы показать, как исправить ошибку Удалите код JavaScript и CSS, мы воспользуемся настоящим сайтом. На скриншоте выше вы можете увидеть, что на данный момент он содержит пару скриптов блокирующих отображение.

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

Важная вещь на которую необходимо обратить внимание — вашей задачей не должно стать получение 100 баллов на PageSpeed Insights. Скорее, ей должно стать стремление получить хорошую оценку без ущерба функционалу и дизайну сайта. Если на вашем сайте есть скрипты необходимые для работы robust UX, вы не должны удалять их просто для того, чтобы получить высокие оценки на PageSpeed Insights. Правила по которым Google оценивает сайты являются лишь рекомендациями и должны быть восприняты именно так.

Шаг 2 – Исправление Удалите код JavaScript и CSS

Вариант 1 – Использование W3 Total Cache

Теперь, когда вы знаете о наличии кода, блокирующего отображение страницы, у вас есть несколько вариантов его исправления. Мы рекомендуем скачать плагин, который поможет вам легко разобраться с этой проблемой. Один из наших любимых плагинов это W3 Total Cache. Установите и активируйте его. Далее, следуйте этим инструкциям:

Теперь вернитесь на страницу Google PageSpeed Insights для проверки исправления ошибки. На скриншоте ниже вы можете увидеть, что настройка W3 Total Cache помогла устранить ошибку Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы с нашего тестового сайта.

Если вы хотите еще больше контроля над вашим ATF содержимым, воспользуйтесь плагинов Above The Fold Optimization. Этот плагин разработан специально для ATF содержимого и совместим с другими популярными плагинами, вроде W3 Total Cache и Autoptimize.

Вариант 2 – Использование Autoptimize

Сравнительно простой метод для решения проблемы блокирующего кода, это использование плагина под названием Autoptimize. Скачайте и установите плагин, что не должно занять много времени. После этого перейдите во вкладку Настройки → Autoptimize. Здесь, выставьте галочки напротив Оптимизировать код JavaScript? и Оптимизировать код CSS?, и нажмите кнопку Сохранить изменения и очистить кэш.

В большинстве случаев этого достаточно, чтобы исправить блокирующий код (зависит от темы и активных плагинов). Чтобы узнать являетесь это вашим случаем, запустите проверку вашего сайта в PageSpeed Insights вновь.

Как вы можете заметить из скриншота сверху, Autoptimize оставил 1 блокирующий ресурс CSS.

Если вы хотите полностью закончить оптимизацию, вернитесь в раздел Настройки → Autoptimize. Нажмите кнопку Show Advanced Settings. Далее, выставьте галочки напротив опций Also aggregate inline JS и Also aggregate inline CSS. Закончите нажав на кнопку Сохранить изменения и очистить кэш. Чтобы проверить результат, вновь запустите проверку PageSpeed Insights.

Вариант 3 – Использование Speed Booster Pack

Еще один популярный плагин, который может помочь вам решить проблему Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы на WordPress сайте — это Speed Booster Pack. Скачайте и активируйте плагин. Его настройки вы сможете найти в разделе Настройки → Speed Booster Pack в панели управления WordPress.

Для JS скриптов вам необходимо включить Move scripts to the footer и Defer parsing of JavaScript files.

Для CSS перейдите в меню Still need more speed?. Здесь вы найдёте дополнительные настройки относящиеся к CSS оптимизации.

Вы можете поэкспериментировать с этими настройками, чтобы найти баланс — включение всех опций может привести к Flash of unstyled content (FOUC). Это случается в том случае, если браузер загружает страницу без ожидания загрузки таблицы стилей, вызывая отключение всех стилей на странице. Теперь осталось лишь вновь проверить сайт на наличие проблемы.

Заключение

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

Помните, работа над увеличением скорости загрузки сайт не должна наносить ущерб его функционалу. Поэтому не волнуйтесь, если у вас еще остался какой-либо из блокирующих кодов. Это руководство было для вас полезным? У нас есть множество других на hostinger.ru/rukovodstva.

Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.

Источник

Удалите из верхней части страницы код javascript и CSS при помощи WordPress плагина Autoptimize

Здравствуйте, уважаемые коллеги веб-мастера! Мало кто из нас не проверял свой сайт на скорость загрузки всем известным сервисом PageSpeed Insight от Google и не сталкивался при этом с рекомендацией — « Удалите из верхней части страницы код javascript и CSS, блокирующий отображение «.

Скажите, вас эта рекомендация тоже ставила в тупик, как и меня? Если так, читайте дальше, я помогу вам решить эту задачку.

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

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

Итак, для выполнения рекомендаций Гугла по удалению кода javascript и CSS из верхней части страницы я подрядил плагин Autoptimize, который объединяет скрипты и стили в один файл и переносит его из верхней части страницы, чего мы собственно и добиваемся. Кроме того, плагин сокращает HTML, JS и CSS (еще один плюсик нам от PageSpeed Insight).

Таким образом, мы убьем сразу много зайцев :-).

Плагин можно найти по названию через поиск в панели администратора сайта или скачать с депозитария WordPress по адресу — https://ru.wordpress.org/plugins/autoptimize/

Настройки плагина для WordPress Autoptimize

Для успешного завершения миссии на wordpress-book.ru мне хватило поставить галочку в шестом пункте у Inline all CSS в опциях CSS, как на скриншоте ниже, и все на этом.

В вашем случае все может сложиться немного сложнее. Например, некоторые плагины, использующие в работе библиотеку jQuery, просто перестают работать и приходится ковыряться в настройках более плотно. Как известно, случаи бывают разные, поэтому рассмотрим все настройки плагина Autoptimize.

Параметры HTML

1 Активируйте опцию « Оптимизировать код HTML » если этого просит PageSpeed Insight.

2 Комментарии HTML я сохранять не стал за ненадобностью.

Опции JavaScript

Если после активации плагина под рекомендацией «Удалите из верхней части ….» исчезли из списка JS и сайт продолжает работать по-прежнему, без перекосов, без конфликтов плагинов и т.д., оставьте тут настройки как есть. Иначе поэкспериментируйте со следующими опциями:

1 Force JavaScript in

Некоторые скрипты требуют загрузки только с верхней части страницы (от чего мы как раз избавляемся), иначе они будут работать некорректно или вообще объявят забастовку. Опция обеспечивает им это условие к недовольству PageSpeed Insight. Включите в самом крайнем случае, только если не помогут функции ниже.

2 Also aggregate inline JS

Речь идет об интеграции JS в HTML. После включения, как уверяет разработчик, должна значительно вырасти скорость сайта. Параметр активен по умолчанию.

3 Exclude scripts from Autoptimize

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

4 Add try-catch wrapping

Если какой-либо скрипт работает некорректно, он не даст жизни остальным. Опция позволяет обойти сломанный JS и продолжить работу.

Многие веб-мастера размещают в сайдбаре различные блоки, работающие на JS. Это могут быть блоки подписки, перенаправления трафика партнерских программ и тому подобные. Чтобы скрипт блока не блокировал загрузку (плагин отказался решать эту задачу), отложите ее. Для этого просто вставьте атрибут « async » в код скрипта как на скриншоте.

Опции CSS

1 Оптимизировать код CSS

Как уже было обговорено, опция сокращает все CSS и объединяет их в один файл. Для удаления CSS из верхней части страницы этого недостаточно.

2 Generate data: URLs for images

Если в каком-либо файле CSS прописаны пути к маленьким изображениям (меньше 4кб), то этот запрос будет прописан в основном файле CSS.

3 Remove Google Fonts

Замена шрифтов Гугла (которые почему-то не любит PageSpeed Insight если таковые наличествуют) на стандартные.

4 Also aggregate inline CSS

Как и в случае с JS, опция интегрирует ту часть CSS в HTML, которую посчитает нужной, что также должно положительно сказаться на скорости загрузки.

5 Inline and Defer CSS

Позволяет интегрировать в HTML только CSS видимой отрисовки сайта с отложенной загрузкой остального кода CSS.

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

Для определения CSS видимой отрисовки существует несколько сервисов, о которых упоминается в разделе «fag» на странице плагина. Эту функцию я не активировал ни разу и пока описывать не буду, если только вы не попросите в комментариях.

6 Inline all CSS

В отличие от предыдущего пункта, опция интегрирует вообще все стили в HTML. После активации, как правило, PageSpeed Insight перестает ругаться на блокирующие CSS в верхней части страницы.

7 Exclude CSS from Autoptimize

Оптимизация CSS, как и JS, может повлечь за собой их неправильную работу. Добавьте сюда эти файлы, чтобы исключить их из оптимизации.

CDN Options

CDN Base URL

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

Информация о кэше

Save aggregated script/css as static files

Опция выключит статическое сжатие скриптов и стилей. Активируйте, если на сайте используется Gzip сжатие.

После завершения или в процессе работы с настройками Autoptimize, вы конечно захотите посмотреть результаты своего труда в вышеупомянутом сервисе. Сохраняйте изменения нажатием кнопки « Сохранить изменения и очистить кэш » чтобы проверять только свежие страницы.

Надеюсь, вы справитесь, скорость вашего сайта возрастет и это обязательно отметят поисковые машины.

Источник

WordPress. «Render-Blocking JavaScript and CSS». Как это исправить?

Скорость загрузки — очень важный фактор, влияющий на рейтинг сайта на SERP (Search Engine Result Page), или на странице результатов поиска. PageSpeed Insights от Google — отличный инструмент для оптимизации скорости загрузки вашего веб-сайта. Он не только показывает текущую скорость, но и определяет проблемы, которые тормозят ваш ресурс. В этом руководстве мы покажем, как устранить одну из наиболее частых проблем, с которой вы можете столкнуться, тестируя ваш сайт. Так что, если вы увидели предупреждение: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, — не волнуйтесь, решение в этой статье.

Что Означает Предупреждение “Eliminate render-blocking JavaScript and CSS in above-the-fold content”

В правилах Google PageSpeed, вы найдёте следующее требование: “Eliminate render-blocking JavaScript and CSS”. Невыполнение этого требования может существенно повлияет на скорость загрузки вашего сайта — замедлить его. Наверняка у вас возник вопрос, как JavaScript и CSS могут замедлить работу сайта?

Проще говоря, всякий раз, когда вы устанавливаете новый плагин или тему, front-end пополняется новым кодом JavaScript и CSS. Следовательно, браузерам может потребоваться больше времени для загрузки этого кода, а соответственно веб-страницы.

Верхняя часть страницы, или ATF (Above The Fold) — это часть сайта, которую видит пользователь сразу же после его загрузки. Любая другая часть — всё, что вы видите, прокрутив вниз — это BTF (Below The Fold), или нижняя часть.

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

Ищем «Render-Blocking JavaScript and CSS» с Помощью Google Page Insights

Чтобы исправить эту ошибку, вы должны сначала проверить скорость вашего сайта с помощью PageSpeed Insights:

Средняя оценка большинства cайтов — от 50 до 70 баллов. Также ниже на странице вы найдёте рекомендации Google по улучшению производительности вашего сайта.

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

Помните, что максимальное количество баллов, то есть 100 — это не главное. Ваша цель — попытаться получить хорошую оценку без ущерба для UX.

Также помните, что не стоит удалять скрипты, имеющие решающее значение для UX, только чтобы получить немного высший балл PageSpeed Insights.

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

Устранение ошибки “Eliminate render-blocking JavaScript and CSS in above-the-fold content”

Минимизировать ресурсы JavaScript и CSS, блокирующие рендеринг, на сайтах WordPress действительно просто. Мы рекомендуем использовать следующие плагины WordPress, чтобы устранить проблему:

W3 Total Cache

Один из моих любимых плагинов — W3 Total Cache. После того, как вы закончили установку и активацию, выполните следующие действия в административной панели WordPress:

Autoptimize

Ещё одно решение, которое также может помочь в устранении ошибок JavaScript и CSS, блокирующих рендеринг — плагин под названием Autoptimize. Плагин частично переведён на русский. Выполните следующие действия на панели инструментов после его установки и активации:

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

Чтобы убедится, что проблема была решена, проверьте свой сайт в Google PageSpeed Insights ещё раз. Если предупреждение не появляется, здорово — вы можете двигаться дальше! В противном случае давайте попробуем выполнить некоторые дополнительные действия.

Speed Booster Pack

Последнее, но не менее важное решение — Speed Booster Pack. Этот плагин также достаточно эффективно устраняет проблему с JavaScript и CSS на вашем сайте. Чтобы исправить ошибку с помощью этого плагина, вы должны выполнить следующие действия:

После того, как вы выполнили одну из описанных выше инструкций, проверьте ваш сайт в Google PageSpeed Insights ещё раз, чтобы убедится что проблема блокировки отображения верхней части страницы действительно устранена.

Выводы

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

Google’s PageSpeed Insights даёт оценку скорости загрузки сайтов, а также предлагает советы по их оптимизации. И в случае, когда, тестируя ваш сайт WordPress, вы столкнётесь с предупреждением “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, мы рекомендуем воспользоваться одним из выше упомянутых плагинов.

Источник