Как отключить плагины которые блокируют java script

Устраните ресурсы, блокирующие рендеринг

Published on четверг, 2 мая 2019 г. • Updated on вторник, 11 августа 2020 г.

Table of contents

Какие URL-адреса помечаются как ресурсы, блокирующие рендеринг?
Как определить критические ресурсы
Как избавиться от скриптов, блокирующих рендеринг
Как избавиться от таблиц стилей, блокирующих рендеринг
Рекомендации по стекам
- AMP
- Drupal
- Joomla
- WordPress
В разделе Opportunities (Возможности) отчета Lighthouse перечислены все URL-адреса, блокирующие первую отрисовку страницы. Цель: уменьшить влияние URL-адресов, блокирующих рендеринг, путем встраивания критических ресурсов, отсрочки загрузки некритических ресурсов и удаления всего неиспользуемого.

# Какие URL-адреса помечаются как ресурсы, блокирующие рендеринг?

Lighthouse отмечает два типа URL-адресов, блокирующих рендеринг: скрипты и таблицы стилей.

Скрипт помечается, если он:
- Находится в документа.
- Не имеет атрибута defer .
- Не имеет атрибута async .
Таблица стилей помечается, если она:
- Не имеет атрибута disabled . Если этот атрибут присутствует, браузер не загружает таблицу стилей.
- Не имеет атрибута media , который соответствует конкретному устройству пользователя. media=»all» считается блокирующим рендеринг.
# Как определить критические ресурсы

Первый шаг к уменьшению воздействия ресурсов, блокирующих рендеринг, — это определить, что критично, а что нет. Используйте вкладку Coverage в Chrome DevTools, чтобы определить некритический код CSS и JS. Когда вы загружаете или запускаете страницу, вкладка показывает, какое количество кода из всего загруженного реально использовалось.

Вы можете уменьшить размер своих страниц, отправляя только тот код и стили, которые вам нужны. Щелкните URL-адрес, чтобы просмотреть этот файл на панели Sources (Источники). Стили в файлах CSS и код в файлах JavaScript отмечены двумя цветами:
- зеленый (критический): стили, необходимые для первой отрисовки; код, который важен для основных функций страницы;
- красный (некритический): стили, применяемые к контенту, который не виден сразу; код, неиспользуемый в основных функциях страницы.
# Как избавиться от скриптов, блокирующих рендеринг

Как только вы определили критический код, переместите этот код из URL-адреса, блокирующего рендеринг, во встроенный тег script на вашей HTML-странице. Теперь во время загрузки у страницы будет всё необходимое для обработки основных функций.

Если в URL-адресе, блокирующем рендеринг, есть код, который не является критическим, вы можете сохранить его в URL-адресе, а затем пометить URL-адрес атрибутами async или defer (см. также статью «Добавление интерактивности с помощью JavaScript»).

Код, который вообще не используется, следует удалить (см. статью «Удалите неиспользуемый код»).

# Как избавиться от таблиц стилей, блокирующих рендеринг

Используйте прием, аналогичный переносу критического кода во встроенный тег , встройте критические стили, необходимые для первой отрисовки, в блок элемента head HTML-страницы. Затем асинхронно загрузите остальные стили, используя ссылку preload (см. статью «Отложите загрузку неиспользуемого CSS»).

Подумайте об автоматизации процесса извлечения и встраивания CSS верхней половины полосы с помощью инструмента Critical.

Другой подход к устранению стилей, блокирующих рендеринг, — это разделить эти стили на разные файлы, организованные по медиа-запросам. Затем добавьте атрибут media к каждой ссылке таблицы стилей. При загрузке страницы браузер блокирует только первую отрисовку, чтобы получить таблицы стилей, соответствующие устройству пользователя (см. статью «Блокирующий рендеринг CSS»).

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

# Рекомендации по стекам

# AMP

# Drupal

Подумайте об использовании модуля для встраивания критического кода CSS и JavaScript или о потенциальной асинхронной загрузке ресурсов через JavaScript, например, с помощью модуля Advanced CSS/JS Aggregation.

# Joomla

# WordPress

Существует ряд плагинов WordPress, которые могут помочь вам встроить критические ресурсы или отложить загрузку менее важных ресурсов.

# Ресурсы
- Исходный код проверки Eliminate render-blocking resources (Устраните ресурсы, блокирующие рендеринг).
- Сократите полезную нагрузку JavaScript за счет разделения кода.
- Удалите неиспользуемый код (codelab).
- Оптимизация загрузки JavaScript.
Updated on вторник, 11 августа 2020 г. • Improve article

Table of contents
- Какие URL-адреса помечаются как ресурсы, блокирующие рендеринг?
- Как определить критические ресурсы
- Как избавиться от скриптов, блокирующих рендеринг
- Как избавиться от таблиц стилей, блокирующих рендеринг
- Рекомендации по стекам
  - AMP
  - Drupal
  - Joomla
  - WordPress
  Как очистить кэш браузера и отключить расширения?
  
  В службу технической поддержки платформы LPgenerator часто приходят письма от пользователей, которые жалуются на аномальное поведение визуального редактора: не сохраняются изменения, элементы целевой страницы не отображаются или разъезжаются в разный стороны и т.д.
  
  В 99% случаев проблема кроется в используемом браузере, а именно, в его кэше, расширениях или запрете на обработку javascript`ов.
  
  Обратите внимание: рекомендуем работать с редактором через браузер Google Chrome.
  
  Наблюдения показывают, что с ним возникает меньше всего ошибок и проблем.
  
  Сегодня мы расскажем вам о том, как очистить кэш браузера, отключить ненужные расширения и включить обработку скриптов. Итак, приступим.
  
  1. Как очистить кэш браузера?
  
  Кэш (cache) браузера — это копия содержимого веб-страниц, которые вы посещали. Если целевая страница (или ее отдельные элементы), которую вы хотите просмотреть, уже есть в кэше, браузер мгновенно загрузит ее с вашего жесткого диска без обращения к серверу.
  
  Таким образом, после сохранения изменений в редакторе LPgenerator вы можете увидеть не отредактированную страницу, а ее копию из кэша. В этом случае страница еще не содержит последних внесенных вами изменений, поэтому создается впечатление, что редактор их не сохранил. Более того, перегруженный кэш также может сказываться на скорости работы функционала платформы.
  
  О том, как правильно очистить кэш, читайте в руководствах, приведенных ниже.
  
  После очистки кэша обязательно перезапустите браузер и проверьте работоспособность.
  
  Если проблемы с редактором все же остались, то причиной, возможно, являются расширения вашего браузера. Об этом читайте во второй части нашего руководства.
  
  1.2. Как очистить кэш Google Chrome?
  
  Перед началом операции убедитесь, что все необходимые данные (сообщения, страница в редакторе, текст и проч.) в браузере сохранены.
  
  1) Кликните по значку меню в правом верхнем углу:
  
  2) Выберите пункт «История»:
  
  Обратите внимание: открыть историю в Chrome можно и с помощью сочетания клавиш Ctrl+h
  
  3) Кликните «Очистить историю»:
  
  4) Выберите «За все время»(это важно, в противном случае толка от очистки не будет),
  установите галочку напротив пункта «Изображения и другие файлы, сохраненные в кеше» и нажмите «Очистить историю»:
  
  5) Готово. Закройте и откройте браузер (это важно, в противном случае очистка не поможет).
  
  2. Как отключить расширения браузера?
  
  Расширение браузера (плагин, аддон) — компьютерная программа, которая расширяет функциональные возможности браузера. Иногда в функционал расширений входит блокировка различных элементов и технологий, необходимых для корректной работы визуального редактора LPgenerator.
  
  Вот некоторые из расширений, которые следует отключить:
  - NoScript;
  - Adblock (Adblock Plus);
  - Ghostery.
  Если указанные выше плагины не включены в вашем браузере, а проблема все равно остается, советуем отключить все установленные в браузере плагины, а затем последовательно включать их для того, чтобы определить, какой именно вызывает ошибку.
  
  Ниже мы поясним как отключать расширения в браузерах Google Chrome, Mozilla Firefox, Opera и Internet Explorer.
  
  Как отключать расширения в Google Chrome?
  
  1) Нажмите на значок настроек справа в верхнем углу:
  
  2) Выберите пункт «Настройки»:
  
  3) Выберите раздел «Расширения» слева:
  
  4) Снимите галочки напротив расширений, которые блокируют рекламу. Плагин не удалится и его можно будет включить, когда понадобится:
  
  Примечание: самыми популярными блокировщиками являются плагины Adblock и Adguard, но возможно, у вас установлены другие расширения для блокировки — их нужно отключить.
  
  5) Если вы не хотите отключать расширение, то можете приостановить его работу на странице.
  
  6) Готово. После отключения работы плагинов нужно перезагрузить страницу. Желательно нажать сочетание клавиш Ctrl и R:
  
  Если после выполненных рекомендаций проблема останется актуальной, попробуйте отключить все расширения в браузере и перезагрузить раздел.
  
  Как отключить расширения в Mozilla Firefox?
  
  1) Откройте меню Firefox в панели браузера справа
  
  2) Выберете из выпадающего списка раздел “Дополнения”
  
  3) Напротив расширения нажмите кнопку “Отключить”
  
  После произведенных действий перезапустите браузер и проверьте работу LPgenerator.
  
  Как отключить расширения в Opera?
  
  1) Из меню выберите Расширения > Управление расширениями.
  
  2) Щелкните по кнопке «Отключить» напротив соответствующего расширения.
  
  Как отключить расширения в Internet Explorer?
  
  1) Нажмите по значку настроек в браузере
  
  2) Выберете пункт “Настроить надстройки”
  
  3) Кликните по надстройке и нажмите “Отключить”
  
  Как отключить расширения в Safari?
  
  1) Кликните по иконке настроек в правом меню браузера
  
  2) Из выпадающего списка выберете пункт “Настройки”
  
  3) Перейдите в раздел “Расширения”
  
  4) Вы можете отключить сразу все расширения, воспользовавшись ползунком Выкл\вкл
  
  5) Для того чтобы отключить конкретное расширение, снимите галочку возле него
  
  3. Как отключить запрет на выполнение JavaScript?
  
  Если все предыдущие действия не дали нужного результата, то, возможно, в вашем браузере отключен JavaScript. С отключенным JavaScript большинство сайтов в интернете уже не могут нормально функционировать. Данная проблема встречается не часто и по умолчанию JavaScript включен в браузере.
  
  Если данный функционал все же отключен, то вы увидите предупреждение в личном кабинете LPgenerator:
  
  “Вероятнее всего, у вас отключен JavaScript. Внимание: для корректной работы сервиса критически важно активировать JavaScript. Мы гарантируем, что сайт не содержит никаких вредоносных скриптов. Спасибо.”
  
  Вы можете самостоятельно включить поддержку JavaScript в вашем браузере. Для этого перейдите по ссылке для вашего браузера ниже:
  
  Также обратите внимание, что причиной сбоев в работе редактора LPgenerator может быть устаревшая версия браузера. В этом случае вы можете попробовать принудительно обновить его, в крайнем случае, переустановить браузер.
  
  При работе с нашей платформой мы рекомендуем использовать браузер Google Chrome. Наименее предпочтительным является Internet Explorer.
  
  Если после выполнения всех указанных действия проблема остается актуальной, обратитесь в техническую поддержку: support@lpgenerator.ru
  
  Хорошего дня и высоких конверсий!
  
  Алена Балакина,
  специалист службы технической поддержки LPgenerator
  
  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:
  1. Перейдите на страницу, вставьте URL-адрес вашего сайта в поле “Enter a web page URL”.
  2. Нажмите на “Analyze”, чтобы получить результаты.
  Средняя оценка большинства 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:
  1. В левом меню выберите Performance ->General Settings
  2. В меню сверху, выберите пункт Minify, и под заголовком вы увидите несколько параметров.
  3. Установите флажок “Enable” для Minify. После этого выберите Minify mode — “Manual”.
  4. Нажмите кнопку “Save all settings”.
- Извлеките все скрипты JavaScript и CSS, блокирующие рендеринг. Google PageSpeed Insights поможет вам их найти.
- После того, как вы найдёте скрипт, который всё портит, возвращайтесь назад в Performance ->Minify.
- Начнём с удаления JS. На странице найдите заголовок JS, далее вы увидите раздел “Operations in areas”. Здесь выберите Non-blocking using “defer” в качестве embed type перед тегом — Before .