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

Опубликовано: 2018-02-28

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

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

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

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

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

  • Браузер загружает веб-страницу, состоящую из HTML-файла, содержащего структуру веб-страницы.
  • Затем браузер читает HTML и замечает 3 дополнительных файла: файл css, файл javascript и изображение.
  • Браузер сначала загрузит изображение
  • Затем браузер понимает, что не может продолжать отображать страницу без использования CSS и JavaScript.
  • Браузер загружает файл CSS и читает его, чтобы убедиться, что больше ничего не вызывается.
  • Браузер загружает файл JavaScript и читает его, чтобы убедиться, что больше ничего не вызывается.
  • Браузер, наконец, может отображать веб-страницу

Пока браузер загружает и читает каждый из файлов CSS и JavaScript, ваши посетители смотрят на пустой экран, ожидая загрузки вашего сайта. Если вы используете CMS, такую ​​как WordPress, ваш браузер может быть занят довольно долго, потому что ему придется загружать не только файлы стилей и скриптов вашей темы, но и файлы скриптов и стилей, которые поставляются с самим WordPress, а также те, которые поставляются со всеми плагинами и виджетами, которые вы используете.

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

Как исправить проблемы с блокировкой рендеринга

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

Блокирующий рендеринг CSS

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

  • Правильно вызывайте свои CSS-файлы — ваш CSS-файл должен быть связан с вашим HTML-файлом следующим образом: <link rel="style.css" href=“style.css"> вместо того, чтобы полагаться на использование метода @import . Метод @import обычно будет находиться в верхней части вашей обычной таблицы стилей и заставит браузер вернуться и найти импортированный файл, прежде чем он сможет прочитать остальную часть файла CSS, что приведет к еще большей задержке, когда дело доходит до рендеринга вашей веб-страницы.
  • Уменьшите количество файлов CSS в критическом пути — если это вообще возможно, объедините все разные файлы CSS в один и удалите вызов этих файлов из вашего HTML.

Блокирующий рендеринг JavaScript

Чтобы удалить JavaScript, блокирующий рендеринг, вам нужно знать, сколько файлов JavaScript загружено и где они вызываются в вашем HTML. Хороший способ выяснить это — использовать инструмент Google PageSpeed ​​Insights. Когда австралийская клининговая компания This Is Neat Cleaning создавала свой веб-сайт, они использовали Google PageSpeed ​​Insights в качестве эталона, тестируя различные сценарии, чтобы выяснить, что именно им нужно как для мобильных устройств, так и для настольных компьютеров.

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

Использование плагина

Конечно, как и во всем, что связано с WordPress, вы можете использовать плагин для устранения проблем с блокировкой рендеринга. С более чем миллионом активных установок было несложно понять, что This is Neat Cleaning будет использовать W3 Total Cache для кэширования, минимизации и оптимизации производительности.

Вот как вы можете использовать W3 Total Cache для устранения проблем с блокировкой рендеринга.

На панели инструментов WordPress перейдите в «Производительность» > «Настройки» и прокрутите вниз до раздела « Минимизировать ». Установите флажок « Включить », а затем выберите « Вручную» в раскрывающемся меню рядом с режимом минимизации. Сохранить настройки . Затем вам нужно будет добавить все скрипты и стили, которые вы хотите минимизировать.

Чтобы узнать, где находятся скрипты и таблицы стилей, блокирующие рендеринг, перейдите в инструмент Google Page Speed ​​Insights и проанализируйте свой веб-сайт. Затем перейдите на вкладку «Предложения» и найдите раздел, который гласит: Удалите код JavaScript и CSS, блокирующий рендеринг, в содержимом верхней части страницы . Нажмите « Показать, как исправить», выберите и скопируйте URL-адрес файла.

Вернитесь на панель инструментов WordPress и перейдите к W3 Total Cache > Performance > Minify . Прокрутите вниз до раздела «JavaScript» и в разделе «Операции в областях » убедитесь, что тип встраивания установлен на « Неблокирующий» с использованием отсрочки для раздела <head> . Затем нажмите кнопку « Добавить скрипт » и вставьте URL-адрес, скопированный из инструмента Google PageSpeed.

После добавления всех файлов сценариев прокрутите вниз до раздела CSS , нажмите «Добавить таблицу стилей » и добавьте URL-адреса файлов таблиц стилей, скопированных из Google PageSpeed ​​Insights.

Когда вы закончите, нажмите кнопку Сохранить настройки и очистить кеш .

Последние мысли

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