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

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

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

Что такое рендеринг?

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

Что браузеры делают перед рендерингом

Ввод URL-адреса веб-сайта запускает следующий процесс:

1. Навигация завершается, когда пользователь запрашивает определенный URL-адрес.
   1. Происходит поиск DNS, при котором сервер предоставляет IP-адрес
   2. Браузер и сервер веб-сайта выполняют рукопожатие TCP для установления соединения.
   3. Запросы на безопасное соединение получают согласование TLS или второй обмен рукопожатием
2. Браузер получает ответ и получает код веб-сайта.
   1. Первый пакет данных получен в TCP Slow Start для регулирования сетевого трафика.
   2. Пользователь отправляет подтверждения (ACK) на сервер, чтобы установить ограничения соединения и скорость отправки.
3. Браузер анализирует информацию и преобразует данные в объектную модель CSS (CSSOM) и объектную модель документа (DOM).
   1. Строится DOM-дерево (структура сайта и страницы)
   2. Сканер предварительной загрузки собирает внешние ресурсы, такие как сценарии и изображения.
   3. Создается CSSOM (дерево стилей)
   4. JavaScript компилируется во время сборки CSSOM
   5. Объектная модель специальных возможностей (AOM) создана для вспомогательных устройств для интерпретации контента.
4. Рендеринг происходит с использованием ранее созданных деревьев CSSOM и DOM.

Что происходит при рендеринге страницы?

Веб- сайты визуализируются с помощью дизайна кода для завершения макета, стиля, рисования и иногда компоновки на веб-сайте. Объектная модель CSS (CSSOM) и объектная модель документа (DOM)

Стиль

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

Макет

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

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

Краска: первая краска и первая содержательная краска (FCP)

Момент, когда браузер веб-сайта выполняет рендеринг страницы, называется «первой отрисовкой». First Paint может быть сплошным цветом фона только в зависимости от кода страницы.

First Contentful Paint (FCP) относится к измеримому моменту, когда посетитель веб-сайта может просматривать контент на вашей странице (текст, изображения, видео и т. д.). FCP измеряет от начала загрузки вашей страницы до момента, когда любой контент отображается.

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

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

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

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

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

• CSS
• JavaScript в разделе <head>
• Шрифты, загруженные с сервера или из сети доставки контента
• Импорт HTML (устаревшие страницы)

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

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

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

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

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

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

Зачем устранять ресурсы, блокирующие рендеринг?

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

Более низкий рейтинг поисковой оптимизации (SEO) означает сокращение посетителей и потерю потенциального бизнеса. Потеря рейтинга снижает количество посетителей, а плохой сайт снижает удержание посетителей; Ресурсы, блокирующие рендеринг, могут быть огромной проблемой.

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

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

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

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

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

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

Методы устранения блокировки рендеринга JavaScript и CSS

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

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

Удалите блокирующий рендеринг Javascript с помощью кода

Три метода устранения ресурсов, блокирующих рендеринг, с помощью кода:

1. Переместите теги <script> и <link> в конец HTML-кода.
2. Добавьте атрибуты async или defer в тег для некритических скриптов.
3. Удалите неиспользуемый код JavaScript.

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

Избавьтесь от таблиц стилей, блокирующих визуализацию

Природа таблиц стилей делает их блокирующими рендеринг ресурсов по своей природе. Вы можете решить эту проблему на своем сайте следующими способами:

1. Разделите CSS по типу носителя (мобильный, планшет, рабочий стол и т. д.).
2. Оптимизируйте критический путь рендеринга
3. Объединение файлов CSS

Используя WordPress и визуальный конструктор, вы не можете напрямую контролировать построение страницы, но есть способы обойти любую проблему.

Устранение блокировки рендеринга с помощью плагина или расширения WordPress

Плагины и расширения WordPress используются для организации скриптов на странице. Плагины будут проходить через теги <script> и <link> вашей страницы и применять атрибуты отсрочки или асинхронности на основе определенных рекомендаций.

Попросите профессионала WordPress устранить ресурсы, блокирующие рендеринг, для вас

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

Лучшие практики для оптимизации рендеринга

1. Объедините ресурсы, блокирующие рендеринг, чтобы уменьшить их влияние на загрузку страницы.
2. Уменьшите размер ресурса, чтобы уменьшить количество загружаемых байтов.
3. Отложите загрузку ресурсов, не блокирующих рендеринг.
4. Не добавляйте CSS с помощью правила @import, так как это внешняя загрузка.
5. Используйте плагин WordPress, предназначенный для кэширования ваших скриптов и оптимизации JavaScript и CSS.
6. Загружайте пользовательские шрифты локально.
7. Определите критические и некритические CSS и JavaScript.
8. Помечайте некритичный код, блокирующий рендеринг, атрибутами async или defer.
9. Неиспользуемый код следует удалить.

Избавьтесь от головной боли и позвольте профессионалу WordPress помочь

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

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

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

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

Часто задаваемые вопросы