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

Здравствуйте, друзья!

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

Если вы не знаете что это такое — читайте дальше и все поймете. Поехали!

«Ресурсы, блокирующие отображение» — если вы видели это всплывающее окно при тестировании скорости вашего веб-сайта или слышали о нем как о частой причине низкой скорости загрузки, вы, вероятно, сбиты с толку.

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

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

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

Совершенно потеряны?

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

Что такое ресурсы, блокирующие отображение?

Когда кто-то посещает страницу вашего веб-сайта, ему необходимо загрузить (или «обработать») весь ее контент.

Сюда входит код, а именно HTML, CSS и Javascript.

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

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

Все, что они получат — это пустой белый экран.

Но почему?

В HTML есть смысл в блокировке отображения.

HTML — это ядро вашего веб-сайта, где находится весь контент.

Без него у вас не было бы веб-сайта для загрузки.

А HTML обычно очень маленький, поэтому загрузка не займет много времени.

Проблемы могут возникнуть с CSS и Javascript.

CSS влияет на стиль вашей страницы — он позиционирует элементы, определяет макет и делает ваш сайт адаптивным.

Без CSS ваш сайт выглядел бы как большой блок текста с некоторыми ссылками и изображениями.

А Javascript делает ваш сайт динамичным, меняя его внешний вид на лету.

Плагины WordPress также могут использовать его для добавления функциональности вашему сайту.

Но вот в чем дело: не все скрипты видны сразу.

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

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

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

Зачем избавляться от ресурсов, блокирующих отображение?

Поэтому людям приходится ждать еще несколько миллисекунд (или даже секунд!), чтобы сайт загрузился — какая разница?

Но это может иметь большее влияние на ваших посетителей, чем вы думаете.

Когда дело доходит до загрузки, на счету каждая секунда.

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

Если вы не будете идти в ногу со временем, скорее всего, они просто нажмут кнопку «Закрыть» ваш сайт и найдут другой.

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

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

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

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

Есть ли на вашем сайте ресурсы для блокировки отображения?

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

Но если вы еще не тестировали его, самое время это сделать.

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

PageSpeed Insights — самый популярный из этих инструментов.

Вы можете ввести любой URL-адрес, который хотите, чтобы увидеть их оценку сайта.

Переходите в этот сервис и введите адрес вашего сайта прямо сейчас.

Через несколько секунд появятся результаты.

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

Если у него есть ресурсы, блокирующие отображение, вы должны увидеть их на вкладке «Оптимизация».

Вы можете спросить: а так ли важно получить идеальную оценку PageSpeed?

Ответ в том, что это зависит от обстоятельств.

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

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

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

Устранение блокировки отрисовки CSS и Javascript вручную

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

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

Чтобы оптимизировать Javascript, вы можете выбрать отдельные скрипты, которые отображаются ниже на странице, и добавить к ним атрибут «async» или атрибу «defer».

Атрибут «async»

Атрибут «async» является логическим атрибутом.

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

Этот атрибут «async» предназначен только для внешних скриптов (и должен использоваться только при наличии атрибута «src»).

Существует несколько способов выполнения внешнего сценария:

• Если атрибут «async» присутствует: сценарий выполняется асинхронно с остальной частью страницы (сценарий будет выполняться, пока страница продолжает синтаксический анализ),
• Если атрибута «async» нет, а атрибут «defer» присутствует: сценарий выполняется, когда страница завершает синтаксический анализ,
• Если атрибут «async» и атрибут «defer» отсутствуют: сценарий извлекается и выполняется немедленно, прежде чем браузер продолжит синтаксический анализ страницы.

Атрибут «defer»

Атрибут «defer» также является логическим атрибутом.

Если он присутствует, он указывает, что сценарий выполняется после завершения синтаксического анализа страницы.

Атрибут «defer» предназначен только для внешних скриптов (и должен использоваться только при наличии атрибута «src»).

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

Атрибут «async» позволяет продолжить загрузку HTML наряду с Javascript, но на короткое время остановки загрузки для выполнения сценария.

Атрибут «defer» делает то же самое, но он выполняет скрипт только после завершения синтаксического анализа HTML.

Когда следует использовать любой из атрибутов?

Атрибут «async» иногда может нарушать работу скриптов в зависимости от порядка загрузки, например jQuery, поэтому в случае сомнений используйте «defer» — он всегда выполняет сценарии в правильном порядке.

Вы можете использовать независимые скрипты «async», которые не полагаются ни на что другое для загрузки.

Исправление CSS, блокирующего отображение, может потребовать немного больше работы.

Вы можете встроить CSS, который отображается для линии загрузки, поместив их в раздел <head> вашего HTML-документа.

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

Что касается остальной части вашего CSS, вы можете добавить атрибуты «async» или «defer» так же, как с Javascript.

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

Помните: вкладка «Coverage» (покрытие) в инструментах разработчика браузера может помочь вам быстро определить элементы, которые вашим посетителям нужно загрузить в первую очередь.

А также выявить неиспользуемый код, который можно удалить.

Плагины для устранения ресурсов, блокирующих отображение

Хотя можно оптимизировать Javascript и CSS, даже не касаясь плагина WordPress, вам не нужно делать всю эту работу.

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

В этом случае один из этих плагинов отлично справится со своей задачей.

Autoptimize и Async Javascript

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

Autoptimize — это универсальный плагин оптимизации.

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

Все это доступно одним нажатием кнопки.

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

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

Просто зайдите в «Настройки — Autoptimize» в своей административной панели и включите «Оптимизировать код Javascript» и «Оптимизировать код CSS».

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

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

Использовать его так же просто.

Посетите «Настройки — AsyncJS» и включите его.

Здесь вы можете выбрать между «async» или «defer».

Проверьте это, и если при «async» ваша страница ломается, включите «defer» вместо этого.

Вам также следует отложить или исключить jQuery, поскольку его включение «async» почти наверняка сломает ваш сайт.

WP Rocket

Одним из недостатков Autoptimize является то, что его может быть немного сложно настроить.

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

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

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

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

Чтобы включить их, перейдите в «Настройки — WP Rocket — Оптимизация файлов».

Включите две настройки, упомянутые выше, и все готово.

Пока вы здесь, вы также можете минимизировать свой Javascript и CSS для еще более быстрой загрузки.

W3 Total Cache

Этот последний плагин немного сложнее.

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

Если вы предпочитаете просто поставить галочку и все готово, вам следует попробовать WP Rocket или Autoptimize, но W3 Total Cache позволяет вам лучше контролировать, какие файлы нужно отложить.

Еще одно преимущество W3 Total Cache перед другими плагинами заключается в том, что он у вас, вероятно, уже установлен.

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

После установки плагина первое, что вам нужно сделать, это вернуться на страницу результатов PageSpeed Insights.

В разделе «Устранение ресурсов, блокирующих отображение» вы должны увидеть список файлов Javascript и CSS, вызывающих проблему.

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

Вернувшись в панель управления WordPress, перейдите в «Performance — Общие настройки» (Производительность — Общие настройки) и убедитесь, что функция «Minify» включена и установлена в ручной режим.

Теперь перейдите в «Performance — Minify».

В настройках минимизации JS в поле «Операции в областях» установите для параметра «Перед <head>» значение «Non-blocking using «defer».

Затем в разделе управления файлами JS щелкните «Добавить сценарий» и вставьте файлы Javascript из PageSpeed, которые вызывают проблемы, один за другим.

Затем прокрутите вниз до управления файлами CSS и нажмите «Добавить таблицу стилей».

Вставьте URL-адреса таблиц стилей, которые также вызывают проблемы.

После этого нажмите «Сохранить настройки и очистить кэш».

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

Избавьтесь от ресурсов, блокирующих отображение в WordPress навсегда

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

Но благодаря плагинам WordPress заблокировать проблемные скрипты очень просто.

Вам никогда не придется напрямую редактировать какой — либо код и рисковать сломать свой сайт.

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

Важно отложить несущественные Javascript и CSS, которые можно загрузить на потом.

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

Autoptimize и его родственный плагин AsyncJS — хорошие бесплатные варианты для начала.

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

W3 Total Cache труднее всего использовать, но определенно лучший выбор, если вы хотите индивидуально контролировать каждый файл, который хотите заблокировать.

Заключение

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

В этом посте я показал, как устранить ресурсы, блокирующие отображение — Javascript и CSS.

Кроме того, я продвинулся дальше, чтобы показать вам два плагина, которые вы можете использовать для решения этой проблемы: W3 Total Cache и Autoptimize.

Скорость загрузки — один из многих факторов, влияющих на СЕО сайта.

Таким образом, сосредоточение внимания исключительно на нем и игнорирование других факторов может не дать вам желаемых результатов.

Расскажите нам в комментариях, какой большой толчок вы получили!

А у меня на этом все — до скорых встреч и берегите себя!