WordPress Сайт

Как Исправить Удалите Код 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, чтобы получить заметный результат.

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

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

  • Доступ к панели управления WordPress

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

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

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

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

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

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

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

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

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

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

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

  1. Перейдите во вкладку Performance  General Settings. Найдите Minify в списке вверху страницы.
  2. Вы увидите несколько вариантов под этим заголовком. Первый под названием Minify; поставьте галочку Enable напротив него.
  3. В настройках Minify mode, выберите Manual и нажмите на кнопку Save all settings.

W3 Total Cache Minify настройки

  1. На данном этапе вы должны определить все JS и CSS скрипты, которые вызывают блокировку отображения. Вы можете найти эти скрипты с помощью Google PageSpeed Insights. Если вы оставили вкладку с PageSpeed открытой, как рекомендовалось в Шаге 1, вы найдёте надпись Как исправить? под соответствующей рекомендацией. Нажмите на неё. Это откроет список со всеми скриптами и таблицами стилей, которые вызывают появление ошибки Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы.
  2. Вернитесь в WordPress. Перейдите во вкладку Performance → Minify. Вам необходимо будет оптимизировать и JS, и CSS файлы отдельно.
  3. Во-первых, давайте начнём с JS. На странице найдите заголовок JS, далее вы увидите раздел Operations in areas. Здесь выберите Non-blocking using defer в качестве embed типа перед тегом  <head>.

W3 Total Cache JS minify Настройки

  1. Затем, под подзаголовком JS file management, выберите активную тему и нажмите кнопку Add Script. Теперь просто скопируйте адреса JS скриптов со страницы PageSpeed и вставьте их один за одним. Это завершит исправление JS файлов.

W3 Total Cache JS minify Добавление

  1. Переходим к CSS. Прокрутите ту же страницу и найдите раздел CSS. Под подзаголовком CSS file management, выберите вашу активную тему и нажмите Add a style sheet. Также как и для JS скриптов, скопируйте и вставьте CSS таблицы стилей со страницы PageSpeed Insights.

W3 Total Cache CSS minify Добавление

  1. Наконец, нажмите кнопку Save settings and purge cache.

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

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

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

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

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

Autoptimize Настройки

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

Google Speed Insights Autoptimize

Как вы можете заметить из скриншота сверху, 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.

Speed Bosster Pack Настройки

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

Speed Bosster Pack Настройки Дополнительные

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

Заключение

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

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

1 комментарий

Нажмите здесь, чтобы оставить комментарий

Присоединяйтесь к тысячам других подписчиков по всему миру

и получайте самые свежие руководства на вашу электронную почту

Пожалуйста, подождите...

Спасибо за подписку!

Начните экономить сейчас!

Хостинг и доменное имя от

руб.95
00