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

Содержание

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

Сайт WordPress

Ноя 30, 2018

Elena B.

5хв. читання

Введение

Скорость сайта — это один из самых важных факторов, который помогает привлечь и удержать посетителей. Всё остальные факторы имеют равное значение, но быстрый сайт имеет больше шансов заполучить много пользователей. Это происходит из-за того, что поисковые системы берут данный фактор во внимание при вычислении результатов рейтинга в поиске. Поэтому, если вы хотите оставить своих конкурентов у разбитого 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 предоставит список с рекомендациям по улучшению скорости загрузки сайта.

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

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

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

Шаг 2 – Исправление

Удалите код JavaScript и CSS

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

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

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

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

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

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

Наконец, нажмите кнопку Save settings and purge 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 сервера.

Більше статей від Elena B.

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

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

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

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

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

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

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

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

После установки и активации Autoptimize, перейдите к его настройкам.

Расставьте галочки.

Далее перейдите к расширенным настройкам плагина, для чего в правом верхнем углу кликните по кнопочке «Show advanced settings«

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

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

Параметры HTML

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

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

Опции JavaScript

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

1 Force JavaScript in <head>

Некоторые скрипты требуют загрузки только с верхней части страницы (от чего мы как раз избавляемся), иначе они будут работать некорректно или вообще объявят забастовку. Опция обеспечивает им это условие к недовольству 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

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

Это, вероятно, вызывает у вас два вопроса:

Что вообще такое ресурсы, блокирующие рендеринг?
Как вы можете устранить ресурсы, блокирующие рендеринг, в WordPress?

В этом посте мы ответим вам на оба вопроса. Вот все, что мы рассмотрим в этом посте:

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

Предпочитаете смотреть видеоверсию?

Что означает «Устранение ресурсов, блокирующих рендеринг»?

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

Когда посетитель попадает на ваш сайт, его веб-браузер в основном начинает с верхней части кода вашего сайта и читает вниз. Сверху вниз, понял?

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

Давайте рассмотрим крайний пример, чтобы показать, почему это может быть проблемой.

Допустим, у вас есть классный эффект JavaScript в нижнем колонтитуле вашего сайта. Он основан на «coolfooter.js», который представляет собой скрипт, ссылка на который находится в верхней части кода вашего сайта (, несмотря на то, что эффект находится в нижнем колонтитуле, поэтому посетители не увидят его, пока не прокрутят до нижнего колонтитула ).

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

Метазаголовок
Coolfooter. js
HTML для содержимого верхней части страницы. Это весь контент, который посетитель видит сразу ( до того, как он начнет взаимодействовать со страницей )

И вот почему это проблема:

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

Конечный результат? Отображение HTML-кода в верхней части страницы занимает больше времени, это означает, что ваши посетители будут воспринимать ваш сайт как более медленный.

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

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

Что такое ресурсы, блокирующие визуализацию?

Говоря о ресурсах, блокирующих рендеринг, мы обычно имеем в виду:

CSS
JavaScript

Важно понимать, что

не все файлы CSS и JavaScript блокируют рендеринг .

Например, важно загружать ваш критический CSS вверху, иначе ваши посетители могут столкнуться с тем, что известно как вспышка нестилизованного контента (FOUC).

Являются ли изображения блокирующими ресурсы?

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили трафик более чем на 1000%?

Присоединяйтесь к более чем 20 000 других людей, которые получают нашу еженедельную рассылку с советами по WordPress, посвященными инсайдерской информации!

Подпишитесь сейчас

Как проверить, есть ли на вашем веб-сайте ресурсы, блокирующие рендеринг

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

Все, что вам нужно сделать, это ввести URL-адрес, который вы хотите проверить. Затем, если у вас возникнут проблемы с ресурсами, блокирующими отрисовку, PageSpeed Insights перечислит каждый отдельный ресурс в разделе Устранить ресурсы, блокирующие отрисовку в разделе Возможности :

Сообщение об устранении ресурсов, блокирующих отрисовку, в PageSpeed Insights

How Do You Устранить ресурсы, блокирующие рендеринг?

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

Однако полезно понимать, что эти подключаемые модули делают за кулисами, чтобы устранить ресурсы, блокирующие рендеринг.

Как устранить JavaScript, блокирующий рендеринг

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

Async — позволяет анализатору HTML (, например, браузеру посетителя ) загружать JavaScript, продолжая анализировать остальную часть HTML. То есть он не останавливает парсинг полностью во время загрузки файла. Однако он приостановит синтаксический анализатор HTML для выполнения скрипта после его загрузки.
Отложить — позволяет синтаксическому анализатору HTML загружать JavaScript во время синтаксического анализа остальной части HTML и ожидает выполнения сценария до завершения синтаксического анализа HTML.

Эта иллюстрация из Growing with the Web отлично показывает разницу:

JavaScript async vs defer

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

Async не использует этот подход, что иногда может вызывать проблемы, если вы применяете async ко всем ресурсам JavaScript, поскольку это часто может нарушить работу ресурсов, которые зависят от ресурсов, которые появляются ранее в документе. Наиболее распространенная проблема, которую создает асинхронность, — это поврежденные ресурсы jQuery, которые пытаются загрузиться до того, как jquery. js был добавлен в документ.

Как устранить CSS, блокирующий рендеринг

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

Определить стили, необходимые для отображения содержимого в верхней части страницы, и доставить эти стили в HTML.
Используйте атрибут media в элементах ссылки, которые извлекают файлы CSS, чтобы идентифицировать ресурсы CSS, которые являются условными, т. е. необходимы только для определенных устройств или ситуаций.
Оставшиеся ресурсы CSS должны быть загружены асинхронно, что обычно делается путем добавления их с помощью отложенного или асинхронного JavaScript. Честно говоря, мы действительно запутались, не так ли? Это определенно территория фронтенд-инженера. Это здорово, если вы фронтенд-инженер, но большинство из нас им не является. Хорошей новостью является то, что это статья о WordPress, и вы можете устранить или, по крайней мере, значительно уменьшить количество ресурсов JS и CSS, блокирующих рендеринг, влияющих на ваш сайт, с помощью правильных плагинов.

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

Если вы не можете найти функцию на панели инструментов, просто посмотрите наше видео «Как включить минимизацию в MyKinsta».

Как устранить ресурсы CSS и JavaScript, блокирующие рендеринг, с помощью плагинов WordPress

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

Автооптимизация + асинхронный JavaScript (бесплатно)
WP Ракета (платно)

Для справки, вот как выглядит наш тестовый сайт до оптимизации доставки CSS и JavaScript:

Сообщение об устранении ресурсов, блокирующих рендеринг, в PageSpeed Insights

Если вы проверяете эффективность своих изменений с помощью Google PageSpeed Insights, имейте в виду, что Google кэширует свои результаты в течение нескольких минут. По сути, это означает, что если вы быстро…

Протестируйте свой неоптимизированный сайт
Активировать один из плагинов в этом разделе
Повторно протестируйте свой сайт

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

Как устранить ресурсы, блокирующие рендеринг, с помощью плагина Autoptimize + Async JavaScript

Autoptimize и Async JavaScript — это два отдельных бесплатных плагина от одного и того же разработчика. Вместе они помогают оптимизировать доставку как CSS, так и JavaScript.

После установки обоих плагинов перейдите в Настройки → Асинхронный JavaScript и:

Установите флажок Включить асинхронный JavaScript вверху.
Выберите между Применить асинхронный режим и Применить отсрочку в поле Быстрых настроек .

Как настроить подключаемый модуль Async JavaScript

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

После того, как вы настроили плагин Async JavaScript, перейдите в Настройки → Автооптимизация и:

Установите флажок, чтобы Оптимизировать код JavaScript
Установите флажок, чтобы Оптимизировать код CSS

Как настроить плагин Autoptimize

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

После настройки автоматической оптимизации и асинхронного JavaScript наш тестовый сайт прошел аудит PageSpeed Insights «Устранение ресурсов, блокирующих рендеринг»:

Результаты PageSpeed Insights с автоматической оптимизацией и асинхронным JavaScript

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

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

Как устранить ресурсы, блокирующие рендеринг, с помощью WP Rocket

WP Rocket — популярный премиум-плагин WordPress для повышения производительности и кэширования.

Обычно мы не разрешаем кешировать плагины на сайтах WordPress, размещенных в Kinsta, потому что мы уже обрабатываем кэширование для вас на уровне сервера с помощью быстрого кэша Nginx FastCGI.

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

После установки и активации WP Rocket перейдите на вкладку Оптимизация файлов . Затем включите следующие два параметра:

Оптимизация доставки CSS в разделе

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

Как настроить WP Rocket

После активации этих двух функций наш тестовый сайт также прошел аудит «устранение ресурсов, блокирующих рендеринг» в PageSpeed Insights. WP Rocket также удалось устранить больше ресурсов, блокирующих рендеринг, чем установка Autoptimize/Async JavaScript:

Результаты PageSpeed Insights с WP Rocket

Вот как можно устранить ресурсы, блокирующие рендеринг, на вашем веб-сайте WordPress!

Хотите избавиться от блокирующих рендеринг ресурсов в #WordPress? Это очень просто с правильными плагинами. .. Узнайте, как изменить их настройки и сделать ваш сайт быстрее! ⚙️🏃‍♀️Нажмите, чтобы твитнуть

Резюме

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

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

Чтобы устранить ресурсы, блокирующие рендеринг, в WordPress, вы можете использовать готовые плагины.

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

Если вы готовы платить, вы можете использовать WP Rocket, который предлагает специальную интеграцию с Kinsta и может помочь с множеством других настроек производительности WordPress.

У вас есть дополнительные вопросы о том, как устранить ресурсы, блокирующие рендеринг, в WordPress? Дайте нам знать об этом в комментариях!

Экономьте время, затраты и повышайте производительность сайта с помощью:

Мгновенная помощь от экспертов по хостингу WordPress, круглосуточно и без выходных.
Интеграция с Cloudflare Enterprise.
Глобальный охват аудитории благодаря 35 центрам обработки данных по всему миру.
Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

Все это и многое другое в одном плане без долгосрочных контрактов, сопровождаемой миграции и 30-дневной гарантии возврата денег. Ознакомьтесь с нашими планами или поговорите с отделом продаж, чтобы найти план, который подходит именно вам.

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

Опубликовано в Производительность, WordPress Автор: Эрин Майерс

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

Эти посторонние файлы называются блокирующими рендеринг JavaScript и CSS. В этой статье мы объясним, что это за ресурсы, блокирующие рендеринг, а затем покажем вам, как удалить ресурсы, блокирующие рендеринг, с вашего сайта WordPress. Давайте начнем!

Что такое JavaScript и CSS, блокирующие рендеринг?

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

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

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

Почему JavaScript и CSS, блокирующие отрисовку, вредны для веб-страниц?

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

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

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

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

Как устранить блокировку рендеринга JavaScript и CSS

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

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

Чтобы уменьшить количество скриптов, блокирующих рендеринг, на вашем сайте, вам необходимо следовать нескольким рекомендациям:

«Минимизируйте» ваш JavaScript и CSS. Это означает удаление всех лишних пробелов и ненужных комментариев в коде.
Объедините ваш JavaScript и CSS. Для этого вам нужно взять несколько разных файлов .js и .css и объединить их. В идеале у вас будет всего несколько таких файлов.
Отложить загрузку JavaScript. Может быть полезно заставить файлы JavaScript ждать загрузки, пока все остальное на странице не будет готово. Надежный способ отложить JavaScript — использовать асинхронную загрузку.

Эти советы может быть сложно выполнить вручную в WordPress, потому что многие внешние плагины поставляются со своими собственными файлами JavaScript и CSS. Один плагин может легко подключить до пяти или шести скриптов к интерфейсу вашего сайта. Эти файлы могут складываться довольно быстро!

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

Плагины для уменьшения количества JavaScript и CSS, блокирующих рендеринг

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

1. WP Rocket

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

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

Есть несколько бесплатных дополнений, которые вы можете получить для WP Rocket в каталоге плагинов WordPress. Однако сам базовый плагин стоит 49 долларов.год для одного веб-сайта и один год поддержки с дополнительными уровнями, предлагающими больше возможностей.

2. Autoptimize

Функция Autoptimize разработана специально для решения проблем, возникающих с помощью рекомендательных инструментов, таких как PageSpeed Insights. Все настройки, позволяющие настроить плагин для вашего веб-сайта, будут содержаться в новом меню на панели управления WordPress.

Автооптимизация охватывает все основные задачи оптимизации, такие как минимизация и кэширование скриптов. Одной из уникальных особенностей является то, что он также может оптимизировать и преобразовывать изображения в формат WebP. Этот инструмент имеет отличные общие отзывы, хотя вы должны иметь в виду, что его настройка может быть несколько сложной.

Хотя сам плагин бесплатный, вы можете приобрести у разработчиков один из двух пакетов, которые помогут с его настройкой. Существует индивидуальный план конфигурации по цене около 165 долларов (149 евро). Вы также можете получить практический профессиональный обзор вашего веб-сайта и экспертной конфигурации плагина примерно за 667 долларов (599 евро).

3. JCH Optimize

JCH Optimize также предлагает несколько уникальных инструментов, помогающих сократить время загрузки страницы. Например, это может уменьшить количество HTTP-запросов, необходимых для загрузки ваших страниц, а также уменьшить размер этих страниц. Это приводит к снижению нагрузки на сервер и снижению требований к пропускной способности.

Еще одной уникальной особенностью JCH Optimize является генератор спрайтов. Это объединяет фоновые изображения в «спрайты», поэтому для их загрузки в браузер требуется меньше HTTP-запросов. Однако одним из недостатков этого плагина может быть крутая кривая обучения. Большинству пользователей придется полагаться на документацию поддержки, чтобы убедиться, что они правильно настроили плагин, чтобы избежать ошибок.

При этом у плагина много пятизвездочных отзывов и более 10 000 активных установок. Что касается цены, доступна бесплатная версия плагина. Однако, если вам нужен доступ к поддержке и расширенным функциям, таким как Optimize Image API, вам необходимо приобрести подписку. Они начинаются с 29 долларов.на шесть месяцев поддержки и доступа к API.

4. Speed Booster Pack

Speed Booster Pack предлагает оптимизацию CSS и JavaScript, отложенную загрузку и функцию удаления ненужных элементов. Разработчики Optimocha поддерживают плагин в актуальном состоянии с постоянно развивающейся кодовой базой, поэтому вы знаете, что всегда будете использовать новейшие методы. Существует также встроенная функция оптимизации WooCommerce, которая устраняет узкие места.

Одним из преимуществ использования Speed Booster Pack является возможность интеграции с сетью доставки контента (CDN).