6 советов, как свести к минимуму работу с основным потоком в WordPress

Следующая статья поможет вам: 6 советов, как свести к минимуму работу с основным потоком в WordPress

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

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

Какова работа основного потока?

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

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

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

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

Сначала браузер отправляет запрос на сервер. Как только сервер возвращает запрошенный контент, браузер может приступить к анализу (разбору) HTML-кода и созданию дерева DOM — структуры HTML. Теперь браузер может обрабатывать и отображать информацию.

Источник изображения

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

Основной причиной занятости основного потока является JavaScript; Файлы CSS также вносят свой вклад. Поскольку эти файлы блокируют рендеринг JS и CSS и должны быть удалены, браузер не должен сталкиваться с ними при анализе кода и отображении страницы.

Глядя на отчет PageSpeed ​​Insights, вы можете четко увидеть, как это влияет на работу основного потока:

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

Как прочитать отчет Google PageSpeed ​​Insights о работе основного потока?

Google PageSpeed ​​Insights (PSI) — отличный инструмент для отладки веб-страниц. Доступны различные аудиты в отношении основного потока и JavaScript.

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

• Оценка сценария: Эта категория измеряет время, необходимое браузеру для оценки любого кода JavaScript, используемого на странице. Это могут быть функции, переменные или другой код, размещенный на странице.
• Другой: В эту категорию входит любое другое время, затраченное на основной поток, не относящееся к другим категориям.
• Стиль и макет: Эта категория измеряет время, затрачиваемое на расчет макета страницы на основе используемых элементов HTML и стилей CSS.
• Рендеринг: Это относится к тому, сколько времени требуется браузеру, чтобы отрисовать страницу после применения всех инструкций макета.
• Разбор и компиляция скрипта: Эта категория измеряет время, затрачиваемое браузером на анализ и компиляцию любого кода JavaScript, используемого на странице.
• Разобрать HTML и CSS: Эта категория измеряет время, затрачиваемое браузером на анализ кода HTML и CSS на странице.
• Вывоз мусора: Эта категория измеряет время, затраченное на сборку мусора. Сборка мусора — это процесс освобождения браузером памяти, которая больше не используется страницей.

Другими категориями, связанными с основными потоками, являются «Избегайте длинных задач основного потока», которые позволяют вам быть более конкретными, показывая, сколько времени требуется для выполнения определенных задач JavaScript. яЕсли длительные задачи занимают слишком много времени, браузер может зависать, давать сбои и отображать сообщения типа «Ой, Snap!»

Помимо этих аудитов, метрики интерактивности PSI также выявляют страницы с проблемами основного потока. Время до взаимодействия (TTI) и общее время блокировки (TBT) измеряют влияние длительных задач и неоптимизированного JavaScript.

Что касается реальных пользовательских данных (то есть полевых данных), вам следует сосредоточиться на метрике «Задержка первого ввода».

Все три показателя относятся к интерактивности, поэтому, если они все красные, у вас, вероятно, проблема с основным потоком.

С помощью Chrome DevTools вы можете еще больше проанализировать проблемы. Выберите «Проверить» в контекстном меню при открытии веб-страницы. Нажмите «Производительность» и обратите внимание, сколько времени требуется для загрузки страницы. Вы также можете использовать панель «Покрытие» в этой ситуации:

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

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

Теперь давайте посмотрим, как минимизировать работу основного потока.

Как исправить проблему «Свернуть работу основного потока» в WordPress?

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

1. Ручной метод
2. Метод плагина

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

Давайте обсудим каждый из них здесь.

Исправить вручную

Следующие шаги помогут вам свести к минимуму работу основного потока вручную на вашем сайте WordPress.

1. Отложить JS
2. Минимизируйте JS и CSS
3. Удалить неиспользуемый JS и отложить JS
4. Отложить некритичный CSS
5. Другие оптимизации производительности

1. Отложите JS

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

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

Прежде чем вы сможете вручную отложить JS, вы должны идентифицировать скрипты с помощью отчета PageSpeed ​​Insights. Затем вам нужно добавить атрибут defer к каждому файлу JavaScript, чтобы он не выполнялся до тех пор, пока страница не завершит рендеринг.

Ниже демонстрируется атрибут defer:

<скрипт отложить src="https://Wix.io/example-js-script">

2. Сократите JS и CSS

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

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

3. Удалить неиспользуемый JS + JS с задержкой

Файлами JS также можно эффективно управлять, удаляя ненужные файлы JS и задерживая ресурсы JS. Эти две операции относятся к разделам оценки сценария, анализа и компиляции отчета PSI.

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

4. Отложите некритический CSS и встроенный критический CSS

Если вы хотите свести к минимуму работу основного потока и пройти проверку PSI в категории Parse HTML & CSS, вам следует отложить некритические CSS-файлы — CSS-файлы, которые находятся ниже сгиба и не нужны для отображения страницы.

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

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

Поэтому вам следует найти и встроить необходимый CSS в HTML-код. Использование генератора CSS Critical Path — это вариант, который стоит рассмотреть. Используя следующий метод, вы можете асинхронно загрузить некритический файл CSS.

5. Другие оптимизации производительности

Существуют и другие категории, которые вы также должны оптимизировать в дополнение к рекомендации «Свести к минимуму работу основного потока»:

• Стиль и планировка
• Рендеринг
• Вывоз мусора.

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

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

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

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

Исправить с помощью плагина WordPress

Еще один способ свести к минимуму работу основного потока в WordPress — использовать метод плагина. Одним из самых известных плагинов является 10Веб-бустер.

10 Web Booster разработан, чтобы помочь свести к минимуму работу основного потока на веб-сайтах WordPress, используя различные методы, такие как отсрочка JavaScript, минимизация JavaScript и CSS, удаление неиспользуемого JavaScript и отсрочка его загрузки, отсрочка некритического CSS и другие оптимизации производительности.

• Минимизация и сжатие JS и CSS также является эффективным вариантом для сокращения работы основного потока. Этот процесс включает удаление пробелов, комментариев и избыточного кода из исходных файлов. 10Web Booster использует передовые алгоритмы для определения файлов, которые можно безопасно минимизировать без ущерба для их функциональности; это гарантирует, что любые внесенные изменения не сделают ваш сайт непригодным для использования.
• Плагин также позволяет удалить неиспользуемый JS и отложить его загрузку; это означает, что такие элементы, как трекеры, которые не нужны сразу, не могут замедлять другие процессы, пока они не будут вызваны конкретно. Это происходит без нарушения веб-страниц.
• Кроме того, 10Web Booster может отложить некритические CSS и ресурсы, такие как шрифты, поэтому они не загружаются на более позднем этапе жизненного цикла страницы; это помогает ускорить начальное время рендеринга, разрешая только основные элементы в визуальной иерархии страницы, прежде чем ее содержимое будет полностью размещено. Все это происходит без ущерба для исходного макета страницы и стилей, то есть без их нарушения и без ущерба для метрики CLS.
• Наконец, в дополнение к оптимизациям, упомянутым для минимизации работы основного потока, 10Web Booster предлагает множество других функций чтобы помочь улучшить работу веб-сайта. К ним относятся кеширование браузера, отложенная загрузка изображений, уменьшение размера изображения, оптимизация базы данных и многое другое.

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

Стандарт

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

Сбалансированный

Сбалансированный уровень включает в себя все возможности оптимизации стандартного уровня и создание критического CSS. Это позволяет критически важному CSS или видимой части страницы, которая будет доставлена ​​первой, загружаться перед любым другим содержимым. Любые дополнительные стили CSS загружаются после основных стилей.

Сильный

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

Экстрим

Экстремальная оптимизация веб-сайта включает в себя все три уровня: Standard + Critical CSS и Delay JS.

Заключение

Вам следует следить за своим сайтом WordPress и минимизировать работу основного потока, если вы хотите повысить скорость своего сайта. Плагин 10Web Booster, который может автоматизировать многие методы оптимизации, описанные в этой статье, доступен в виде Скачать бесплатно из официального репозитория плагинов WordPress.

Бесплатная версия 10Web Booster предлагает ряд функций оптимизации, в том числе критическая задержка CSS, JS и замена шрифтови может использоваться на шести страницах веб-сайта. Для пользователей, которым требуется оптимизация для дополнительных страниц, доступна Pro-версия 10Web Booster, которая предлагает все те же функции оптимизации, что и бесплатная версия, но с неограниченным использованием. Pro-версия 10Web Booster также включает Интеграция корпоративной CDN с Cloudflare, что обеспечит быструю загрузку не только ресурсов (CSS, JavaScript, шрифты) с ближайших серверов, но и раздачу полностью кэшированных веб-страниц через сеть Cloudflare. 10Web Booster упрощает процесс оптимизации, позволяя владельцам веб-сайтов и разработчикам легко применять передовые методы оптимизации без необходимости наличия обширных технических знаний или опыта. Используя 10Web Booster, пользователи могут обеспечить бесперебойную работу своего веб-сайта и его максимальную производительность, что приведет к лучшему взаимодействию с посетителями.

Это ускорит загрузку вашего сайта и улучшит ваш показатель Google PageSpeed ​​Insights. Сокращение работы основного потока может быть связано с некоторыми техническими трудностями и затратами времени, но оно того стоит в плане повышения производительности.

Хотите мгновенно ускорить свой сайт?

Получите 90+ баллов PageSpeed ​​автоматически с помощью 10Web Booster ⚡
На любом хостинге!

Получите 10Web Booster, это бесплатно
Кредитная карта не требуется

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