Если вы запускаете свой веб-сайт через Lighthouse, вы, возможно, заметили предложение удалить ресурсы, блокирующие рендеринг.
Задерживая JavaScript и встраивая важные стили CSS, вы можете избавиться от ресурсов в WordPress, которые замедляют рендеринг. Это поддерживается большинством плагинов кеша, Autoptimize и Async JavaScript. И Elementor , и Divi имеют встроенные способы избавиться от ресурсов, которые мешают отображению страницы, используя отложенный и встроенный CSS. Удаление ненужного кода CSS, JavaScript и стороннего кода также может помочь в разрешении проблемы.
В этой статье мы дадим определение ресурсам, блокирующим рендеринг, и рассмотрим преимущества избавления от них на вашем веб-сайте. Затем мы покажем вам пять альтернативных способов избавиться от них.
Что такое блокирующие рендер ресурсы?
Понимание типичного процесса загрузки веб-сайта имеет решающее значение, прежде чем мы более подробно рассмотрим ресурсы, блокирующие рендеринг. Все содержимое вашего веб-сайта должно быть отображено (или загружено) браузером посетителя после того, как он нажмет на него ссылку. Он читает все HTML, CSS и JavaScript на вашем сайте сверху вниз. Ваш сайт не будет виден посетителям, пока браузер не завершит чтение этой очереди скриптов. Им, возможно, придется долго ждать, если есть ресурсы, блокирующие рендеринг. По сути, файл CSS или JavaScript, который не позволяет браузеру загружать другой контент во время его обработки, является ресурсом, блокирующим рендеринг. Это может остановить процесс рендеринга и сделать страницу незавершенной или пустой.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчасКогда на вашем веб-сайте есть ресурсы, блокирующие рендеринг, в начало кода загружаются дополнительные файлы. Перед просмотром веб-сайта пользователи должны подождать, пока эти файлы будут обработаны. Ресурсы, блокирующие рендеринг, могут повлиять на несколько показателей производительности веб-сайта. Например, самая большая содержательная отрисовка измеряет, сколько времени требуется для загрузки основного контента страницы. Первый раз, когда материал из объектной модели документа (DOM) вашего сайта визуализируется браузером, называется первой отрисовкой содержимого. Totalblockingtime — это время между первой содержательной отрисовкой и временем взаимодействия (сколько времени требуется странице, чтобы стать полностью интерактивной).
Хотя они не являются необходимыми для загрузки, ресурсы, блокирующие рендеринг, могут препятствовать рендерингу. В результате может пострадать пользовательский опыт вашего сайта (UX). Поэтому очень важно избавиться от них, чтобы посетители не покидали ваши страницы.
Преимущества устранения ресурсов, блокирующих рендеринг
Интернет-пользователи обычно не любят ждать загрузки веб-сайтов. Быстрый веб-сайт может побудить пользователей изучить ваш материал и удержать их от посещения конкурента. Удаляя элементы, блокирующие рендеринг, вы эффективно делаете код своего веб-сайта максимально легким, что может быть секретом повышения скорости страницы. Поскольку производительность сайта и вовлеченность пользователей — это два фактора, которые гиганты поисковых систем, такие как Google, учитывают при оценке веб-сайтов, удаление файлов, блокирующих отображение, может помочь повысить рейтинг вашего сайта в поисковых системах.
Как устранить ресурсы, блокирующие рендеринг, в WordPress
Вам может быть интересно, как удалить элементы, блокирующие рендеринг, с вашего сайта, теперь, когда вы знаете, как их обнаружить в WordPress. К счастью, мы составили список многих подходов, которые вы можете использовать для достижения этой цели, начиная с самых простых.
Оптимизировать загрузку CSS
Увеличение скорости загрузки CSS на вашем веб-сайте — один из способов избавиться от ресурсов, блокирующих рендеринг. Браузер загружает вашу веб-страницу сверху вниз, как было сказано ранее. Это может привести к тому, что процесс загрузки займет больше времени, когда необходимо обработать определенные файлы. Важно помнить, что для отображения страницы необходимо загрузить лишь некоторые файлы CSS. Таким образом, вы можете отображать наиболее важные файлы в первую очередь при оптимизации загрузки CSS. CSS, блокирующий рендеринг, можно удалить вручную, но вы также можете установить плагин, чтобы упростить задачу. Вы можете оптимизировать свой веб-сайт прямо с панели управления WordPress с помощью Jetpack Boost. Этот плагин упрощает реализацию отложенной загрузки, откладывает ненужный JavaScript и улучшает загрузку CSS. Один из самых простых способов избавиться от ресурсов, блокирующих рендеринг, в WordPress — сделать это.
Начните с поиска Jetpack Boost в разделе «Плагины Добавить новый» на панели управления WordPress. Установите, а затем включите плагин на своем сайте.
Вы можете перейти к Jetpack My Jetpack, если у вас уже загружен Jetpack. Найдите Boost и выберите «Активировать» в списке товаров Jetpack.
После активации плагина перейдите на вкладку Jetpack Boost и выберите «Начать».
Ваш сайт мгновенно получит рейтинг производительности от Jetpack. Вы увидите буквенную оценку вместе с информацией о баллах на компьютере и мобильных устройствах.
Затем активируйте эту функцию, прокрутив вниз до «Оптимизировать загрузку CSS». При активации Jetpack Boost поднимет важнейший CSS для вашего сайта, чтобы он загружался быстрее.
Отложите несущественный JavaScript
Вы можете принять дополнительные меры, чтобы избавиться от ресурсов, блокирующих рендеринг, в WordPress, помимо оптимизации загрузки CSS. Необязательный JavaScript также можно отложить, чтобы еще больше ускорить загрузку вашего сайта. Необязательный JavaScript может быть отложен, чтобы задержать некоторые процессы до тех пор, пока ваш контент не загрузится. Вы можете запретить браузеру выполнять файлы JavaScript, если они не требуются для загрузки страницы. К счастью, с помощью плагина Jetpack Boost это легко сделать. Вы можете легко отложить несущественный JavaScript после оптимизации процесса загрузки CSS. Включите тумблер области Defer Non-Essential JavaScript. Этот раздел находится в разделе «Оптимизация загрузки CSS».
Плагин будет обновлять свою оценку общей производительности вашей страницы после того, как вы включите этот параметр. Будет отображаться ваш счет как до, так и после использования Jetpack Boost.
Взгляните на оценки на скриншотах, сделанных до и после того, как мы завершили этот процесс. Вы заметите, что увеличение скорости страницы было достигнуто за счет задержки ненужного JavaScript и более эффективной загрузки CSS. Браузеры могут загружать ваш контент быстрее, потому что им не нужно выполнять большие сценарии.
Отложить закадровые изображения
Хотя изображения не являются ресурсом, препятствующим отображению страниц, вы можете подумать об ускорении их загрузки. На веб-сайтах часто есть закадровые изображения, которые не отображаются до тех пор, пока пользователь не взаимодействует со страницей, например, прокручивая ее. Вы можете отложить их с отложенной загрузкой, потому что они не нужны для загрузки веб-страницы. Только изображения, которые могут видеть посетители, загружаются лениво. Эти фотографии будут загружаться непосредственно перед их отображением на странице после прокрутки пользователем. Браузер попытается загрузить каждое изображение на странице одновременно, если отложенная загрузка не включена. Чем дольше загружается ваш материал, тем больше вероятность того, что посетители покинут ваш сайт.
Регулярная загрузка может не быть проблемой, если посетитель использует настольный компьютер. Смартфоны и планшеты, с другой стороны, имеют меньшие экраны и меньшую пропускную способность. Ваш веб-сайт может потреблять больше трафика и дольше загружаться для пользователей мобильных телефонов, если он полностью загружает все свои фотографии одновременно. Эта проблема решается отложенной загрузкой.
Чтобы включить ленивую загрузку на вашем сайте, используйте Jetpack Boost. Просто найдите параметр «Отложенная загрузка изображений» и включите его.
Зритель увидит, что изображения загружаются на ваш сайт только тогда, когда они прокручивают страницу вниз, если вы сделаете это. Несмотря на то, что фотографии не являются ресурсом, отображающим блоки, включение ленивой загрузки может ускорить вашу страницу.
Устраните ресурсы, блокирующие рендеринг, с помощью Elementor/Divi
И Elementor , и Divi включают опции для удаления ресурсов, препятствующих рендерингу.
Включите улучшенную загрузку CSS и встроенный шрифт Font-Awesome в настройках экспериментов Elementor , чтобы загружать CSS и шрифты встроенные, что делает их не блокирующими рендеринг. Улучшенная загрузка активов устраняет ненужный CSS/JavaScript, что улучшает основные веб-жизненные показатели различными способами.
Применяя важные CSS, откладывая CSS/JavaScript и загружая ваши шрифты в процессе, параметры производительности Divi также могут уменьшить ресурсы, блокирующие рендеринг.
Вручную удалить JavaScript, блокирующий рендеринг
Вы также можете вручную удалить ресурсы, блокирующие рендеринг, хотя установка плагина оптимизации — гораздо более простой вариант. В идеале, вы должны думать об этом выборе только в том случае, если вы опытный кодер. Если вы хотите сократить количество плагинов на своем веб-сайте, эта процедура также может быть полезна. Вы можете присвоить своим файлам свойство async или defer, чтобы повысить эффективность работы JavaScript. Браузер получит указание отображать некритические сценарии отдельно, помечая их как таковые. Обе характеристики можно использовать для ускорения загрузки HTML-информации.
Файл HTML анализируется обычным образом до тех пор, пока не встретится с файлом сценария. Затем синтаксический анализ остановится, пока он находит скрипт. После загрузки и запуска парсинг продолжается.
При обработке оставшегося HTML браузер может загружать JavaScript благодаря функции асинхронности. После загрузки он может остановить обработку HTML и запустить скрипт.
Атрибут defer работает аналогичным образом, позволяя браузеру загружать скрипт во время анализа HTML. Отличие состоит в том, что он также откладывает запуск скрипта до тех пор, пока не завершится синтаксический анализ HTML.
Вы должны включить фрагмент кода в свой файл functions.php, чтобы реализовать любое из этих свойств. Сначала необходимо найти тег script> ресурса, блокирующего рендеринг. следующее в качестве асинхронного атрибута:
<script src="resource.js" async></script>В качестве альтернативы рассмотрим, как может выглядеть скрипт при использовании свойства defer:
http://resource.jsХотя плагин может позаботиться об этих атрибутах за вас, самостоятельное выполнение может лучше соответствовать вашим предпочтениям. Если это так, очень важно понять, когда применять каждый атрибут. Вы должны использовать свойство defer для второстепенных сценариев, которые зависят от другого сценария. Параметр async подходит для любых других скриптов.
Применение асинхронных или отложенных атрибутов с помощью плагина
Используйте плагин, такой как Async JavaScript, если у вас есть проблемы с ручным редактированием скриптов. Благодаря этому инструменту у вас есть полный контроль над тем, какие скрипты имеют свойство async или defer.
После установки плагина выберите «Включить асинхронный JavaScript» в разделе «Настройки асинхронного JavaScript».
Затем перейдите к разделу «Асинхронный метод JavaScript». Здесь вы можете выбрать, следует ли включить асинхронные или отложенные атрибуты.
Рекомендуется исключить эти скрипты, потому что многие плагины зависят от jQuery. Применение асинхронных свойств к jQuery может привести к поломке вашего сайта.
Если вы сомневаетесь, вы можете использовать атрибут defer, но лучше всего полностью исключить jQuery.
Теперь вы можете указать, какие сценарии вы хотите запускать в асинхронном или отложенном режиме. Вы должны быть осторожны, чтобы поместить каждый скрипт в соответствующий раздел.
Вы можете перечислить любые сценарии, которые хотите исключить из этой процедуры, в разделе «Исключение сценариев».
Внизу страницы также есть варианты исключения плагинов и тем. Скрипты для любых тем или плагинов, которые вы здесь упомянули, не будут применимы к характеристикам асинхронности или отсрочки.
После внесения необходимых изменений можно нажать Сохранить настройки. Этот подход может быть полезным компромиссом между ручным изменением сценариев и использованием плагина, который справится с этой задачей за вас. В качестве альтернативы вы можете устранить эти дополнительные шаги, используя универсальное приложение, такое как Jetpack Boost.
Подведение итогов
Заставляя браузеры посетителей откладывать рендеринг содержимого верхней части страницы при загрузке ресурсов, которые не нужны немедленно, ресурсы, блокирующие рендеринг, увеличивают воспринимаемое время загрузки страницы вашего сайта WordPress. Вы должны отложить загрузку ресурсов, которые не нужны немедленно, чтобы помочь посетителям быстрее загрузить просматриваемую область вашей страницы. Используйте готовые плагины, чтобы избавиться от блокирующих рендеринг ресурсов в WordPress. Вы можете комбинировать Autoptimize и Async JavaScript, два плагина, созданные одним и тем же разработчиком, для получения бесплатного решения. Вы можете использовать WP Rocket, который предлагает особое взаимодействие с Kinsta и может помочь со многими дополнительными настройками производительности WordPress, если вы готовы за это платить.
