Модель и алгоритмы обработки информации и поддержки принятия решений для оптимизации загрузки веб-страниц тема диссертации и автореферата по ВАК РФ 00.00.00, кандидат наук Жуков Станислав Владимирович

• Жуков Станислав Владимирович
• кандидат наук
• 2026

Оглавление диссертации кандидат наук Жуков Станислав Владимирович

ВВЕДЕНИЕ

ГЛАВА 1. СОВРЕМЕННОЕ СОСТОЯНИЕ ВОПРОСА ОПТИМИЗАЦИИ СКОРОСТИ ЗАГРУЗКИ ВЕБ-СТРАНИЦ

1.1 Роль поисковой оптимизации и её влияние на эффективность сайтов

1.2 Значение скорости загрузки страниц в контексте SEO

1.3 Способы измерения скорости загрузки веб-страницы

1.4 Способы обработки информации для оптимизации скорости загрузки веб-страниц

Выводы по главе

ГЛАВА 2. МОДЕЛЬ И СИСТЕМА КРИТЕРИЕВ ДЛЯ ОЦЕНКИ ЭФЕКТИВНОСТИ ОПТИМИЗАЦИИ ВЕБ-СТРАНИЦ

2.1 Концептуальная модель загрузки веб-страницы

2.2 Постановка задачи многокритериального анализа влияния способов оптимизации на скорость загрузки веб-страницы и алгоритм её решения

2.3 Формирование иерархии критериев скорости загрузки веб-страницы

Выводы по главе

ГЛАВА 3. РАЗРАЗРАБОТКА АЛГОРИТМОВ ОБРАБОТКИ ИНФОРМАЦИИ ДЛЯ ОПТИМИЗАЦИИ СКОРОСТИ ЗАГРУЗКИ ВЕБСТРАНИЦ

3.1 Разработка эвристических правил поиска способов оптимизации скорости загрузки веб-страниц

3.2 Алгоритмы автоматической перекомпоновки данных

3.2.1 Алгоритм управления процессом загрузки скриптов веб-страницы

3.2.2 Алгоритм управления процессом загрузки CSS-ресурсов вебстраницы

3.2.3 Алгоритм оптимизации размера подключаемых файлов

3.2.4 Алгоритм ускорения подключения к сторонним ресурсам

3.2.5 Алгоритм отложенной загрузки iframe

3.2.6 Алгоритм отложенной загрузки изображений

3.3 Способы ручной оптимизации веб-страниц

3.3.1 Оптимизация времени исполнения задач JavaScript в браузерах

3.3.2 Сокращение количества dom-элементов html страницы

3.3.3 Оптимизация размера CSS файла посредством удаления дублирующихся стилей

3.3.4 Управляемый индикатор загрузки страницы

3.4 Способы контроля и поддержки работы веб-страниц

3.4.1 Оптимизация передачи данных электронной коммерции в Яндекс Метрику на JavaScript

3.4.2 Модуль анализа логов сайта

3.4.3 Модуль резервного копирования

Выводы по главе

ГЛАВА 4. ПРАКТИЧЕСКАЯ РЕАЛИЗАЦИЯ ПРОБЛЕМНО-ОРИЕНТИРОВАННОЙ СИСТЕМЫ ПОДДЕРЖКИ ПРИНЯТИЯ РЕШЕНИЙ ДЛЯ ОПТИМИЗАЦИИ ВЕБ-РЕСУРСОВ

4.1 Реализация проблемно-ориентированной СППР для выбора оптимизационных мероприятий повышения скорости загрузки вебстраницы

4.2 Организация и планирование эксперимента для оценки эффективности способов оптимизации веб-страниц

4.3 Формирование набора способов оптимизации веб-страниц на основе концептуальной модели загрузки страницы

4.4 Выбор способов оптимизации скорости загрузки веб-страниц с использованием иерархии критериев и оценка эффективности их применения

4.5 Экспериментальная оценка влияния оптимизационных мероприятий

на поведенческие метрики веб-ресурсов

Выводы по главе

ЗАКЛЮЧЕНИЕ

СПИСОК СОКРАЩЕНИЙ И УСЛОВНЫХ ОБОЗНАЧЕНИЙ

СПИСОК ЛИТЕРАТУРЫ

ПРИЛОЖЕНИЕ А (справочное). Детализация расчётов влияния методов оптимизации на скорость загрузки веб-страницы

ПРИЛОЖЕНИЕ Б (справочное). Статистика посещаемости сайтов chef4you.ru и chef2you.ru за 4 квартал 2024 года

ПРИЛОЖЕНИЕ В (справочное). Копия свидетельства о государственной регистрации программы для ЭВМ «Управляемый индикатор загрузки страницы»

ПРИЛОЖЕНИЕ Г (справочное). Копия свидетельства о государственной регистрации программы для ЭВМ «Модуль анализа логов доступа вебсервера Apache»

ПРИЛОЖЕНИЕ Д (справочное). Копия свидетельства о государственной регистрации программы для ЭВМ «Система генерации графического пользовательского интерфейса панели администратора web-приложения»

ПРИЛОЖЕНИЕ Е (справочное). Копия свидетельства о государственной регистрации программы для ЭВМ «Модуль автоматического резервного копирования файлов на Яндекс.Диск»

ПРИЛОЖЕНИЕ Ж (справочное). Копия свидетельства о государственной регистрации программы для ЭВМ «Система поддержки принятия решений по оптимизации скорости загрузки веб-страницы»

ПРИЛОЖЕНИЕ И (справочное). Копия акта о внедрении результатов научного исследования в образовательный процесс ФГБОУ ВО «ТГУ имени Г. Р. Державина»

ПРИЛОЖЕНИЕ К (справочное). Копия акта о внедрении результатов научного исследования в работу ООО «Скобеев и Партнеры»

Введение диссертации (часть автореферата) на тему «Модель и алгоритмы обработки информации и поддержки принятия решений для оптимизации загрузки веб-страниц»

ВВЕДЕНИЕ

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

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

Степень разработанности темы исследования. Значительный вклад в развитие методов и алгоритмов, используемых для оптимизации скорости загрузки веб-страниц, внесли как отечественные, так и зарубежные исследователи: М. А. Бирюков, Б. С. Горячкин, А. М. Воронова, L. Vogel, Р. А. Торопкин, J. Kloos, R. Majumdar, F. McCabe., M.D. Priya, B. Sabarinathan, M. Surya, A. Bai, M. Nygren, W. Liu, X. Yang, H. Lin, Z. Li, F. Qian и др.

Поиск эффективных способов оптимизации скорости загрузки веб-страниц рассматривался в работах И. И. Чернецкого, A. Ghaffar, C. Xilogianni, Р. А. Бакирова, В. А. Иванова и др. Однако результатом исследования либо становился список способов, актуальных только для групп сайтов, на которых проводились расчёты, либо предлагался ресурсоёмкий и плохо масштабируемый способ оптимизации.

В ходе проведённого анализа литературных данных установлено, что в настоящее время нет формализованного подхода к выбору способа оптимизации скорости загрузки, учитывающего все этапы формирования веб-страницы. На

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

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

Объектом исследования является сетевая информационная система для представления веб-ресурсов.

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

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

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

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

Для достижения цели и решения научной задачи были сформулированы частные задачи исследования:

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

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

3. Разработать иерархию критериев для оценки скорости загрузки вебстраницы от инициализации запроса до финальной визуализации контента пользователю.

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

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

Научная новизна.

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

2. Разработана иерархия критериев оценки скорости загрузки веб-страницы, отличающаяся интеграцией разнородных критериев (серверных, сетевых,

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

3. Разработан алгоритм обработки информации, составляющей веб-страницу и передаваемой при ее загрузке, отличающийся контекстно-зависимым сравнением конструкций каскадных таблиц стилей с учётом составных селекторов и медиавыражений.

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

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

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

устройств, что привело к увеличению средние значения метрик посещаемости и вовлечённости примерно на 20 %.

На защиту выносятся следующие положения:

1. Концептуальная модель загрузки веб-страницы обеспечивает системное представление этапов загрузки веб-страницы и диагностику причин замедления процесса её отображения (п. 3 паспорта специальности 2.3.1).

2. Иерархия критериев скорости загрузки веб-страницы позволяет комплексно оценить скорость загрузки с момента пользовательского запроса до финальной визуализации контента пользователю (п. 3 паспорта специальности 2.3.1).

3. Алгоритм обработки информации для контекстно-зависимого вычитания стилей из общего файла каскадных таблиц стилей проводит сопоставление свойств на основе синтаксического дерева и позволяет корректно удалять дублирующиеся правила без нарушения структуры файла (п. 4 паспорта специальности 2.3.1).

4. Разработана проблемно-ориентированная система поддержки принятия решений по выбору способа оптимизации веб-страницы для повышения её скорости загрузки за счёт обоснованного выбора и целенаправленного применения оптимизационных мероприятий (п. 9 паспорта специальности 2.3.1).

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

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

Апробация результатов. Основные результаты диссертации докладывались и обсуждались на международных и всероссийских научных конференциях, включая Международную научно-практическую конференцию «Современные

тенденции в науке и образовании: новый взгляд» (Нефтекамск, 2021 г.), Всероссийскую научно-практическую конференцию «Управление в современных системах» (Челябинск, 2022 г.), Международную научную конференцию «Модернизация, Инновации, Прогресс (МИП-У-2023)» (Красноярск, 2023 г.), Всероссийскую научную конференцию «Информационные технологии, системный анализ и управление (ИТСАУ-2023)» (Таганрог, 2023 г.), III Национальную научную конференцию «Наука XXI века: технологии, управление, безопасность» (Курган,

2024 г.), Международную научно-практическую конференцию «Цифровые системы и модели: теория и практика проектирования, разработки и использования» (Казань, 2025 г.), IV Всероссийскую научно-практическую конференцию «Кибернетика, информатика, аналитика: модели, инструменты, методы» (Донецк,

2025 г.), XI Международную научно-практическую конференцию «Виртуальное моделирование, прототипирование и промышленный дизайн - 2025» (Тамбов, 2025 г.).

Публикации. Основные результаты диссертации достаточно полно опубликованы в 18 работах, из которых: 4 статьи - в журналах, рекомендованных ВАК РФ, имеющих категорию K1 и входящих в RSCI; 1 статья - в научном издании, индексируемом в Scopus; получено 5 свидетельств о государственной регистрации программ для ЭВМ; 8 статей - в сборниках трудов конференций, индексируемых в РИНЦ.

Выносимые на защиту результаты получены лично соискателем. В публикациях, выполненных лично и в соавторстве, личный вклад автора заключается в: разработке концептуальной модели загрузки веб-страницы [82]; построении иерархии критериев для оценки скорости загрузки веб-страниц [87, 112]; реализации проблемно-ориентированной системы поддержки принятия решений для выбора способа оптимизации скорости загрузки веб-страниц [104]; разработке алгоритмов для повышения скорости загрузки веб-страниц [88, 89, 91, 93, 92, 94], мониторинга внесенных изменений [95, 99], резервирования внесенных изменений [102, 103]; анализе существующих решений для разработки веб-сайтов

[107, 106]; проведении эксперимента по применению разработанных алгоритмов на реальном веб-сайте и оценке их влияния на критерии производительности и посещаемости [100, 101, 87].

Структура и объём диссертации. Диссертация изложена на 167 страницах основного текста, включая 46 рисунков и 12 таблиц. Состоит из введения, четырех глав, заключения, списка литературы (112 наименований) и 9 приложений.

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

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

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

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

набора корректирующих воздействий на основе диагностики реальных «узких мест» производительности веб-ресурса. Представлены способы оптимизации и алгоритмы, направленные как на оптимизацию НТМЬ-документа, так и на поддержание стабильной работы веб-ресурса после внесённых изменений.

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

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

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

ГЛАВА 1. СОВРЕМЕННОЕ СОСТОЯНИЕ ВОПРОСА ОПТИМИЗАЦИИ СКОРОСТИ ЗАГРУЗКИ ВЕБ-СТРАНИЦ

1.1 Роль поисковой оптимизации и её влияние на эффективность сайтов

Интернет прошёл глубокую трансформацию с момента своего появления, превратившись из средства передачи данных в развитую инфраструктуру цифровой экономики. Как указывается в статье [1], развитие Интернета сопровождалось сменой парадигм: от статических страниц Web 1.0 к интерактивному Web 2.0 и далее к децентрализованным структурам Web3.

С начала XXI века наблюдается стремительный рост количества пользователей и объёмов интернет-трафика. К 2021 году количество подключённых к интернету людей превысило 4,6 миллиарда, при этом уровень проникновения составил более 59 % от мирового населения. Современный пользователь проводит в интернете несколько часов ежедневно, преимущественно используя мобильные устройства. Одновременно с ростом пользователей развивалась и инфраструктура, что привело к формированию интернет-экономики, в которой информационно-коммуникационные технологии стали неотъемлемой основой экономических отношений. Повсеместное использование цифровых сервисов, электронной коммерции и дистанционных форм взаимодействия ускоряет модернизацию национальных экономик [2].

По данным из статьи [3], объёмы интернет-торговли в России за последние годы растут экспоненциально. Так, только за 2022 год рынок онлайн-продаж вырос на 50 %, достигнув 4,4 трлн рублей. Это стало возможным благодаря увеличению числа маркетплейсов, повышению доверия к онлайн-платежам и появлению новых цифровых платформ. Развитие интернет-экономики сопровождается активными инвестициями в цифровую инфраструктуру. Как отмечается в статье [4], вложения в ИКТ становятся фактором ускорения цифровой трансформации, особенно в условиях глобальной конкуренции. Однако в настоящее время в реальном секторе

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

Особое место в интернет-экономике занимает реклама. По информации из статьи [5], цифровой рекламный сегмент уже обогнал телевидение по объёму доходов и демонстрирует устойчивый рост. Ведущие позиции занимают контекстная реклама, видеоформаты и продвижение в социальных сетях. Это объясняется не только высоким вовлечением пользователей, но и широкими возможностями персонализации.

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

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

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

Одним из главных инструментов достижения этой цели выступает поисковая оптимизация (SEO). Она представляет собой комплекс мероприятий, направленных на повышение позиций сайта в результатах поисковых систем по определённым запросам. SEO позволяет не только увеличить видимость сайта, но и привлечь на него целевой трафик, повысить доверие пользователей и укрепить конкурентные позиции компании. По сути, поисковая оптимизация помогает поисковым системам понять, о чём сайт, кому он может быть полезен и насколько он соответствует запросам пользователей [8].

В рамках SEO одним из подходов к улучшению позиций сайта является оптимизация контента и HTML-кода, например, использование микроразметок. Как отмечают авторы статьи [9], такие разметки позволяют включать в контент страницы данные внешних ресурсов. Однако при внедрении мета тегов и микроразметки необходимо учитывать их актуальность и возможное влияние на SEO, чтобы избежать непреднамеренного ухудшения позиций сайта. В статье [10] рассмотрены теоретические аспекты развития алгоритмов ранжирования Google. Учёт представленных в ней положений способствует формированию более обоснованных решений в области поисковой оптимизации. Это, в свою очередь, позволяет избегать некоторых ошибок. Например, в работе [11] показано, что использование мета тега keywords может привести к ухудшению видимости вебстраницы в результатах поисковой выдачи.

Среди множества факторов, влияющих на эффективность SEO, различают внутренние (структура сайта, наличие мета-тегов, качество контента, логика навигации) и внешние (ссылочная масса, упоминания на сторонних ресурсах) [12]. Также существенное значение имеет техническое состояние сайта, включая корректность кода, содержимое карты сайта и файла robots.txt. Поисковые алгоритмы анализируют и поведенческие метрики: длительность визита, глубину просмотра страниц, частоту возвратов. Эти параметры служат индикаторами

качества и релевантности ресурса. Продвижение возможно с использованием как легальных («белых»), так и сомнительных методов («серых» и «чёрных»), однако только соблюдение рекомендаций поисковых систем гарантирует устойчивый результат без риска санкций [13].

1.2 Значение скорости загрузки страниц в контексте SEO

В рамках поисковой оптимизации внимание также уделяется скорости загрузки веб-страницы, поскольку данный параметр влияет на поведенческие характеристики пользователей и, как следствие, на ранжирование ресурса. Быстро загружающийся сайт снижает показатель отказов, повышает вовлечённость и способствует формированию положительного имиджа [14]. Исследования [15]-[16] показывают прямую зависимость между временем загрузки и коммерческими метриками: каждая дополнительная секунда задержки может приводить к снижению конверсии и выручки. Таким образом, скорость загрузки страницы становится одним из факторов, напрямую влияющих на эффективность поисковой оптимизации.

В статье [17] подчёркивается, что высокая скорость загрузки положительно сказывается на позициях сайта в поисковой выдаче, так как поисковые системы, включая Google, учитывают этот параметр при ранжировании. Работа [18] акцентирует внимание на том, что оптимизация времени загрузки страниц входит в число важных мероприятий по внутренней оптимизации сайта. Улучшение этого показателя способствует повышению его конкурентоспособности, поскольку ускоряет доступ к контенту и снижает показатель отказов.

Особое внимание уделяется скорости загрузки в контексте мобильных устройств. В статьях [19] и [20] авторы указывают на то, что мобильные пользователи особенно чувствительны к задержкам, и даже незначительное замедление может привести к потере аудитории. В связи с этим скорость загрузки страницы становится критическим параметром при продвижении мобильных

версий сайтов. Быстрые страницы улучшают поведенческие показатели: увеличивается длительность сеанса, снижается уровень отказов, возрастает вовлечённость.

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

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

1.3 Способы измерения скорости загрузки веб-страницы

Вопрос определения наиболее эффективных способов оптимизации вебстраниц активно исследуется в научной среде. Так, в работе [22] авторы ставят задачу определить, какие именно рекомендации Google PageSpeed дают наибольший прирост производительности. Они отмечают, что не все рекомендации из аудита Google PageSpeed одинаково полезны: часть из них трудно реализуема, часть влияет на производительность лишь косвенно. Поэтому был проведён эксперимент по выявлению реально эффективных способов, основанный на расчёте взвешенного прироста производительности (Weighted Performance Benefit Score) для каждого способа оптимизации страницы.

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

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

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

SI (Speed Index) — показывает, насколько быстро загружается видимая часть страницы. Чем ниже значение, тем быстрее контент становится виден пользователю.

LCP (Largest Contentful Paint) — фиксирует момент загрузки самого крупного по размеру элемента в области видимости (например, основного изображения или заголовка).

TTI (Time To Interactive) — момент, когда страница полностью реагирует на действия пользователя (клики, ввод текста). До этого могут быть видимы элементы на странице, но взаимодействие с ними не работает. Критерий был исключён из Lighthouse версий выше десятой.

Список литературы диссертационного исследования кандидат наук Жуков Станислав Владимирович, 2026 год

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

современных Требуется

форматов и возможность

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

Убрать Такие зависимости

каскадные import, должны

объединить стили существовать, есть

Удаление зависимостей или скрипты в один файл или несколько логичных бандлов. 3.1, 3.2, 3.4, 3.5 возможность корректировать файлы для устранения зависимостей.

Название способа В чем заключается На измерения каких критериев влияет положительно Ограничения в применении

Серверное сжатие контента Сервер сжимает текстовые файлы перед отправкой клиенту. 1.5, 2.4, 3.1 Требует поддержки сервером.

Использование CDN для статических ресурсов Статические файлы передаются через CDN. 2.1, 2.2, 2.3, 2.4 Неэффективно для сайтов с локальной аудиторией.

Кэширование Настройка заголовков и систем кэширования для хранения и повторного использования ресурсов. 1.1, 1.2, 1.3, 1.4, 1.5, 3.1, 3.2, 3.5 Не подходит для часто обновляемого контента.

На измерения

Название способа В чем заключается каких критериев влияет положительно Ограничения в применении

Современные

протоколы

позволяют

Использование современных протоколов HTTP одновременно загружать несколько ресурсов и уменьшают время соединения. 2.3, 2.4, 3.1, 3.2 Требует поддержки сервером и браузером.

Требует доступа к

Оптимизация работы с базой данных Сокращение количества и сложности SQL-запросов 1.2, 1.3 конструктору запросов. Не реализуемо на платформах без доступа к БД.

Название способа В чем заключается На измерения каких критериев влияет положительно Ограничения в применении

Добавление индексов к таблицам реляционных баз данных Создание индексов по полям, часто участвующим в фильтрации и соединениях. 1.3 Требует доступа к структуре базы. Неэффективно при малых объемах данных. Не реализуемо на платформах без доступа к БД.

Предварительная установка соединений Предварительно устанавливаются соединения и разрешаются доменные имена внешних ресурсов 2.1, 2.2, 2.3 Нужно заранее знать адреса, к которым нужно подключиться.

Асинхронная декодировка изображений Изображения декодируются в фоновом режиме, не блокируя главный поток рендеринга 3.1, 3.2, 3.3 Не поддерживается во всех браузерах.

Название способа В чем заключается На измерения каких критериев влияет положительно Ограничения в применении

Использование SSR или SSG в SPA Применение серверного рендеринга или статической генерации в одностраничных приложениях 1.1, 3.1, 3.2, 3.4 Только для SPA приложений

Оптимизация параллельных процессов (Web Workers, асинхронная обработка) Трудоёмкие операции выполняются в отдельных потоках или фоновых процессах 1.1, 1.3 Подходит только для задач с интенсивными вычислениями.

Виртуализация DOM Отрисовываются только видимые элементы больших списков, что снижает нагрузку на браузер 3.1, 3.2, 3.3 Эффективно только при большом количестве однотипных элементов.

Название способа В чем заключается На измерения каких критериев влияет положительно Ограничения в применении

Оптимизация серверной конфигурации Настройка вебсервера 1.1, 1.4, 2.3, 2.4 Требует административного доступа к конфигурации сервера

Оптимизация серверного кода и логики Профилирование приложения, упрощение алгоритмов, удаление лишней обработки 1.1, 1.2, 1.6 Требуется доступ к исходному коду серверного кода сайта

Масштабирование серверных ресурсов Вертикальное или горизонтальное масштабирование инфраструктуры. 1.1, 1.3, 1.6, 2.3 Сайт должен быть построен на архитектуре, поддерживающей выбранный тип масштабирования, также имеются финансовые ограничения.

Название способа В чем заключается На измерения каких критериев влияет положительно Ограничения в применении

Оптимизация DNS Использование быстрых DNS-провайдеров (смена провайдера) 2.1 Требует доступа к настройкам домена.

Оптимизация TLS Включение современных протоколов TLS 2.2 Требует доступа к настройкам сервера

Оптимизация TCP-настроек Изменение конфигурации, использование keep-alive 2.3 Требует доступа к низкоуровневым настройкам сервера

Обработка ошибок и мониторинг Выявление и устранение серверных ошибок, мониторинг и тестирование 1.6 Требует доступа к серверным логам и подходящих инструментов мониторинга

На измерения

Название способа В чем заключается каких критериев влияет положительно Ограничения в применении

Анализировать

код генерации

Исключение внешних блокирующих запросов страницы и убирать обращения к сторонним API, которые выполняются синхронно. 1.1, 1.6 Нельзя применить, если внешние данные обязательны для генерации страницы.

Размещение

сайта на SSD-

Использование SSD-дисков на сервере дисках ускоряет операции чтения и записи по сравнению с HDD. 1.1, 1.3 Финансовые ограничения

Название способа В чем заключается На измерения каких критериев влияет положительно Ограничения в применении

Требует настройки

Хранение часто серверной

запрашиваемых инфраструктуры и

данных в поддержки в коде

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

Memcached оперативной 1.1, 1.4 сайта.

памяти для Неэффективно при

ускорения малом количестве

доступа. повторяющихся

запросов.

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

3.2 Алгоритмы автоматической перекомпоновки данных

Для обеспечения быстрой отрисовки контента необходимо устранить ресурсы, блокирующие этот процесс. Чаще всего такими ресурсами являются js- и css-файлы, подключённые в области тега <head>. Чтобы устранить блокировку, достаточно переместить загрузку этих ресурсов после основных блоков с контентом страницы. В случае с JavaScript-файлами возможно также использовать

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

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

Влияние алгоритмов, описанных в этом разделе, рассматривалось в статье [88], где на примере сайта по продаже автомобилей и сайта приюта домашних животных были проведены экспериментальные сравнения скорости загрузки страниц (измеренных через Lighthouse v9) до применения алгоритмов оптимизации (изначальная скорость загрузки страниц) и после применения алгоритмов, описанных в этом разделе (3.2.1-3.2.6). Результаты одного из таких сравнений приведены в таблице 8. Эксперимент показал, что внедрённые алгоритмы оптимизации положительно влияют на скорость загрузки веб-страниц. Таблица 8 - Скорость полной отрисовки страницы каталога товаров по Lighthouse

v9

Состояние тестируемого ресурса № теста Платформа Критерий Итог (балл)

FPC (сек.) TTI (сек.) SI (сек.) TBT (MC.) LCP (сек.) CLS (балл)

До оптимизации 1 Mobile 8.4 24,7 16,1 990 25 0,003 23

PC 1,9 4,2 3,5 40 2,3 0,11 67

2 Mobile 8.4 24,5 15 1510 25 0,003 19

PC 1,9 4,5 3,2 90 3,2 0,022 63

3 Mobile 8.4 24,4 14,2 1070 24,1 0,005 23

PC 1,8 4 3,2 170 2,3 0,019 66

Состояние тестируемого ресурса № теста Платформа Критерий Итог (балл)

FPC (сек.) TTI (сек.) SI (сек.) твт (мс.) LCP (сек.) CLS (балл)

После оптимизации 1 Mobile 1 17,9 ▼ 6,8 ▼ 2650 А 2,1 ▼ 0 ▼ 54 А

PC 0,3 ▼ 4,1 ▼ 1,5 ▼ 210 А 0,6 ▼ 0.009 ▼ 87 А

2 Mobile 1 18,1 ▼ 5,7 ▼ 3130А 1 0 ▼ 56 А

PC 0,3 ▼ 3,8 ▼ 1,5 ▼ 290 А 0,6 ▼ 0.013 ▼ 82 А

3 Mobile 1 18 ▼ 6 ▼ 3040 А 1 0 ▼ 56 А

PC 0,3 ▼ 3,8 ▼ 1)7 ▼ 240 А 0,6 ▼ 0 ▼ 85 А

3.2.1 Алгоритм управления процессом загрузки скриптов веб-страницы

Для автоматизации типовых задач оптимизации скорости загрузки вебстраниц на языке PHP были разработаны алгоритмы, модифицирующие структуру HTML-документа. Первый из них устраняет блокировку рендеринга, вызванную скриптами. Пример реализации приведён на рисунке 4, а принцип работы

алгоритма пояснён на блок-схеме (рисунок 5).

1 <?php

2 îhtml = getHtml();

3 îmarker = '<!-- scripts -->';

4 if (strpos(Shtml, îmarker))

5 {

if (preg_match('/<head([Л>]*)>(. *)<\/head>/s', îhtml, îmatch)) {

îhead = $match[2]; îscripts = '';

îregExp = '/<script( [A>]*)src = ( [A>] + )x\/script>/' ;

if (preg_match_aLL($regExp, îhead, îmatches, PREO_SET_ORDEЯ)>0) {

foreach (îmatches as îitem) {

Shtml = str_repi.ace($item[0], îhtml); $scripts .= $item[3];

}

}

îhtml = str_reptoce(îmarker, îscripts, îhtml);

6

7

8 9

10 11 12

13

14

15

16

17

18

19

20 } 21 }

22 setHtml(îhtnl);

23 ?>

Рисунок 4 - Автоматический перенос скриптов из раздела head - алгоритм на

языке программирования php

Рисунок 5 - Автоматический перенос скриптов из раздела head - блок-схема

алгоритма

Разработанный алгоритм позволяет извлечь теги со скриптами из тега <head> и вставить их в заданное место HTML-документа, определяемое специальной строкой (размещается ближе к концу документа). Это обеспечивает гибкость в управлении порядком загрузки ресурсов. Вместо переноса также возможно добавление атрибутов, обеспечивающих асинхронную или отложенную загрузку, что особенно важно для ускорения первоначального отображения содержимого страницы. Алгоритм оптимизации скриптов автоматически находит соответствующие элементы, размещённые в HTML-коде, и добавляет к ним атрибуты для асинхронной загрузки, такие как defer или async, в зависимости от выбранной стратегии. Это минимизирует влияние загрузки и выполнения скриптов на критический путь рендеринга страницы. Принцип работы алгоритма приведён на рисунке 6.

3.2.2 Алгоритм управления процессом загрузки CSS-ресурсов веб-страницы

Следующий алгоритм направлен на устранение блокировки, связанной с внешними стилями. Пример его реализации представлен на рисунке 7, а логика работы - на рисунке 8.

1 <?рИр

2 $1тЬт1 = ее±Н±т1(); В $1агу5±у1е5 = '1;

4

5 $ге@Ехр = '/<1з.пк( [Л>]*)ге1=[" \1 ] stylesheet["\ ']([л>]*)>/';

6 if (pгeg_motc/7_o¡,¡,C$гegExpJ ístylesJ РПЕС_ЗЕТ_0П0Е1$))

7 {

foreach {$styles as $style)

9 {

IS $html = str_rep Lace ($sty le [ ], ' ', $html);

11 $lazyStyles .= str_repLace(

12 'clink',

13 '<link onload="window.lazyStylesQuantity--;"

14 jstyle[ ]

15 );

16 }

17 }

18

19 $lazyStyles =

20 4script type="text/javascript">

21 window.lazyStylesQuantity = '.count(îstyles).'j

22 document. addEventListerierC'DOMContentLoaded", function() {

23 var lazyStylesInterval = setInterval(function( )■(

24 if (window.lazyStylesQuantity==0) {

25 clearlnterval(lazyStylesInterval);

26 var criticalCss = document.getElementById("js--critical-css");

27 criticalCss.parentNode.removeChild{criticalCss);

28 };

29 Ь 1000);

30 });

31 </script>',$lazyStyles;

32

33 $criticalCss = '<style id="js--critical-css" type="text/css">';

34 $criticalCss .= fiLe_get_ccntents('style.css');

35 $criticalCss .= '</stylex/head>' ;

36

37 $html = str_repLace('</body>', $lazyStyles ,</body>'J îhtrrl);

38 $html = str_repLace('</head>', $criticaicssj Shtml);

39

40 setHtml($html);

41 ?>

Рисунок 7 - Автоматический перенос стилей из head в body, подключение временных критических стилей - алгоритм на языке программирования PHP и

JavaScript

Рисунок 8 - Автоматический перенос стилей из head в body, подключение временных критических стилей - блок-схема алгоритма

Этот алгоритм переносит все стили из области тега <head> в область <body>, а также добавляет временные критические стили в раздел <head>. После полной загрузки страницы временные стили заменяются оригинальными. Такая замена предотвращает сильное смещение макета на начальных этапах рендеринга. Добавленный JavaScript-код отслеживает загрузку стилей: каждую секунду он проверяет количество незагруженных файлов и, когда они все будут загружены, удаляет тег с критическими стилями.

3.2.3 Алгоритм оптимизации размера подключаемых файлов

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

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

Получить ссылку на оптимизированную версию С88-файла

Получить ссылку на оптимизированную версию ^-файла

Вывод: Мш1-документ

^ Конец

43

42)

41)

Рисунок 9 - Принцип работы алгоритма по оптимизации подключаемых файлов

Для оптимизации используются три внешних обработчика, каждый из которых отвечает за определённый тип файлов. Обработчики могут быть встроены в окружение (например, MinifyX в MODX — для JS и CSS) или собственные. Пример собственного обработчика для изображений, написанного на PHP, показан на рисунке 10. Метод generateWebp создаёт копию PNG или JPEG-файла в формате WebP и возвращает путь к новому файлу, если конвертация прошла успешно.

if (set/: :checkFormat{$arImage['CONTENT_TYPE']) && sei/: :availablePath(ifullPath)) {

$arImage['WEBP_SRC'] = $arlmage['ЫЕВР_РАТН'] . DIRECTORY_SEPARATOR . $arlmage['WEBP_FILE_NAME'];

Рисунок 10 - Метод конвертации изображения в формат WebP (на языке

программирования PHP)

3.2.4 Алгоритм ускорения подключения к сторонним ресурсам

Алгоритм ускорения подключения к сторонним ресурсам добавляет в HTML специальные теги link с атрибутами rel-'preconnect" и rel-'dns-prefetch" для внешних доменов. Это позволяет заранее установить соединение и разрешить DNS-

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

Рисунок 11 - Принцип работы алгоритма уменьшения времени подключения к

сторонним ресурсам

3.2.5 Алгоритм отложенной загрузки iframe

Алгоритм отложенной загрузки iframe ищет в HTML все элементы <iframe>, удаляет из них ссылки на ресурсы и добавляет JavaScript, который подгружает эти ссылки, когда элемент попадает в зону видимости пользователя. Принцип показан на рисунке 12.

Рисунок 12 - Принцип работы алгоритма отложенной загрузки iframe элементов

3.2.6 Алгоритм отложенной загрузки изображений

Алгоритм оптимизации изображений проверяет, как подключены картинки, и при необходимости добавляет атрибуты для отложенной загрузки (loadmg="lazy") и управления декодированием. Принцип работы изображён на рисунке 13.

Начало J

Да

Вывод: html-документ

^ Конец^

0

Нет^{ 1

®

0

Да

В теге есть атрибут ^есоё^?

Да

Нет

Добавить атрибут loading со значением lazy

Нет^

Добавить атрибут decoding со значением async

Нет^

Добавить атрибут height со значением высоты

Нет^

Добавить атрибут width со значением ширины

Да

Рисунок 13 - Принцип работы алгоритма оптимизации изображений

2

4

5

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

опыт от взаимодействия с веб-сайтом. Описанные алгоритмы были представлены и апробированы ранее в работах [88], [89].

3.3 Способы ручной оптимизации веб-страниц

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

3.3.1 Оптимизация времени исполнения задач JavaScript в браузерах

Данный способ оптимизации обработки информации связан с уменьшением длительности выполнения задач в основном потоке веб-браузера и был упомянут в работе [90], и реализован в статье [91]. Основной поток браузера выполняет отдельные единицы работы, называемые задачами, к которым относятся синтаксический анализ HTML и CSS, рендеринг страницы и выполнение JavaScript-кода. Последний вид задач особенно важен, так как, согласно инструменту Lighthouse, он часто является причиной снижения скорости загрузки страницы.

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

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

Эффективным способом борьбы с длительными задачами является их разделение на несколько коротких. Это позволяет браузеру своевременно реагировать на действия пользователя и другие приоритетные процессы, сокращая задержки и повышая интерактивность страницы. Данный подход улучшает значения измерения критерия Total Blocking Time (TBT), что благоприятно отражается на ранжировании страницы в поисковых системах. Она представляет собой суммарное время всех блокирующих частей задач, выполняющихся в основном потоке браузера между первой значимой отрисовкой (FCP) и моментом достижения интерактивности страницы (TTI). Блокирующая часть задачи — это время, превышающее установленный порог в 50 миллисекунд для каждой отдельной задачи.

Рассмотрим измерение критерия TBT на примере страницы «demo_1.html». Код страницы представлен на рисунке 14, а схема выполнения задач в основном потоке браузера показана на рисунке 15.

1 <\DOCTYPE html>

2 chtml larig="en">

3 <headx/head>

4▼ <body>

5t <script type="text/javascript"> 6* function sleep(duration){

Let now = new Date(),getTimef);

while (new Date().getTime() < now + duration) { };

9 }

10 function fn_l() { sleep(35); }

11 function fn_2() { sleep(40); }

12 function f n_3() { sleep(45); }

13

14* document.addEventLi5tener("D0MContentLoaded"j function() {

15 fn_l(); fn_2(); fn_3();

})J

17 </script>

18 </body>

19 </html>

Рисунок 14 - Код страницы «demo_1.html»

Начало РСР

загрузки

Рисунок 15 - Схематичное изображение основного потока браузера при отображении страницы «demo_1.html»

После построения DOM-дерева браузер последовательно вызывает три функции: fn_1, fn_2 и fn_3, длительностью соответственно 35, 40 и 45 миллисекунд. Эти функции, вызванные одна за другой, образуют общую задачу длительностью 120 миллисекунд. Значение TBT в данном случае составит 70 миллисекунд, поскольку продолжительность общей задачи превышает порог на эту величину. Хотя каждая из функций в отдельности не превышает лимита в 50 миллисекунд, объединение их в одну задачу создаёт проблему. Разделение данных функций на отдельные задачи позволит полностью устранить задержку TBT.

Для разделения функций на отдельные задачи применяется подход с использованием функции setTimeout. Стратегия оптимизации TBT заключается в создании очереди из задач, каждая из которых занимает менее 50 миллисекунд и освобождает основной поток после выполнения благодаря вызову setTimeout. Данный подход был реализован в виде объекта TaskQueue, исходный код которого представлен на рисунке 16.

Этот объект имеет одно свойство и три метода. Свойство tasks хранит задачи, сгруппированные по именам. Метод addTask предназначен для добавления функций в именованную очередь. Метод runTasks обеспечивает последовательный запуск задач из очереди с указанным именем. Третий метод, yieldToMain, отвечает за освобождение основного потока, возвращая Promise, разрешающийся после

вызова setTimeout. Метод mnTasks асинхронно ожидает завершения yieldToMain. Для применения данного объекта необходимо сначала добавить задачи в очередь с помощью addTask, указывая имя очереди и функцию, затем вызвать метод runTasks при наступлении нужного события, инициирующего обработку очереди задач.

1 var Та5к(3иеие = {

2 tasks: {},

addTask: function(group, callback) {

if (typeof this.tasks[group] == 'undefined ) { this.tasks[group] :[];

}

this tasks[group] push(callback);

b

yieldToMain: function() {

return new Promise^resolve => {

11 setTimeout(resolve., 0);

12 }); L

14 runTasks: async function(group) {

if (typeof this.tasks[group] == 'undefined') return false; 16 while (this tasks[group].length > 0) {

Let task = this.tasks[group] shift();

18 if (typeof task == 'function' ) {

19 try{ task(); > catch(e) {

20 console.error('TaskQueue error runTasks: e);

21 }J

22 >

23 await this.yieldToMainQ;

24 }

25 >

26 };

Рисунок 16 - Исходный код объекта TaskQueue

Рассмотрим пример применения объекта TaskQueue. Для анализа производительности страницы на рисунке 17 используется браузер Google Chrome версии 123.0.6312.107. Результаты подтверждают, что задачи выполняются одной группой, превышающей порог в 50 миллисекунд.

Далее создаётся файл «demo_2.html», куда копируется код исходной страницы с небольшими изменениями. Строки с 14 по 16 заменяются на код TaskQueue, и функции fn_1, fn_2, fn_3 добавляются в очередь задач, инициируемую событием DOMContentLoaded. Изменённый код приведён на рисунке 18.

49 мс

► Фреймы

Временнь е мет™ ▼ Основной - file:///R;/demo_1 html

99 мс

149 мс

зз.;

Задача Ш 1

Событие: DOMContentLoaded

Вызов функции

(анонимная) 1 1

fn_1 1 n_2 fn_3

sleep s... sleep sleep sleep

Рисунок 17 - Производительность страницы «demo_1.html»

1 <\DOCTYPE html>

2 <html lang="en">

3 <head></head> 4▼ <body>

5* <scnipt type="text/javascnipt">

6► function sleep(duration){ -

9 }

10 function fn_l() { sleep(35); }

11 function fn_2() { sleep(40); }

12 function fn_3() { sleep(45); }

13

14 ► var TaskQueue { ■■•

39 };

40

41 Let run = TaskQueue.runTasks.bind(TaskQueue, 'DOMContentLoaded');

42 document,addEventListener( DOMContentLoaded", run);

43 TaskQueue.addTaskf1DOMContentLoaded', fn_l)j

44 TasfeQueue.addTaskf1DOMContentLoaded'j fn_2);

45 TaskQueue.addTaskf1DOMContentLoaded1, fn_3);

46 </script>

47 </body>

48 </html>

Рисунок 18 - Код страницы «demo_2.html»

Повторный замер производительности страницы после указанных изменений демонстрирует, что функции £п_1, йп_2 и £п_3 теперь выполняются отдельными задачами, каждая из которых не превышает 50 миллисекунд. Таким образом, задержка, влияющая на критерий ТВТ, была устранена (рисунок 19).

43 мс

98 мс

148 мс

► Фреймы

Временнь 9 метки

16.7 мс

83.3 мс

▼ Основной - fiIe:///Rydfem o_2.html

Задача

Задача Задача

Задача

Таймер загущен

Запуск микрозадач

runTasks

fn_3

sleep

Со 6

Событи...Loaded

Вызов функции

runTasks

fn_1

sleep

Таймер запущен Запуск микрозадач

runTasks fn 2

Рисунок 19 - Производительность страницы «demo_2.html»

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

Ещё одной распространённой причиной высокого значения измерения критерия Total Blocking Time (TBT) является чрезмерное количество DOM-элементов на странице. При загрузке браузер выполняет несколько ресурсоёмких операций: разбирает HTML, формирует DOM-дерево, строит CSSOM, объединяет их в дерево рендера. Увеличение числа DOM-узлов удлиняет каждый из этих этапов: замедляется анализ структуры, расчёт стилей, построение layout и финальная отрисовка. Это особенно ощутимо на устройствах с ограниченными вычислительными ресурсами, где избыточная DOM-структура напрямую снижает отзывчивость интерфейса.

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

3.3.2 Сокращение количества dom-элементов html страницы

узлов содержит текущий документ. Для этого был написан JavaScript-код, состоящий из двух функций (см. рисунок 20).

function analyzeDOM(rootNode, minChildren = maxDepth = 0, currentDepth = Э, index = "3") { analyzeDOM(child, minChildren, maxDepth, currentDepth + 1, ${index} ${i} )

Рисунок 20 - JavaScript-код подсчёта количества DOM-элементов

Функция countTotalChildren вычисляет общее количество дочерних узлов у заданного элемента. Функция analyzeDOM выводит результаты в консоль в виде таблицы. Она принимает три параметра: целевой элемент, порог минимального числа дочерних элементов для отображения в отчёте и максимальную глубину вложенности. Пример использования - analyzeDOM(document.body, 60, 3) — анализирует содержимое body до трёх уровней вложенности и выводит только те элементы, у которых более 60 дочерних узлов.

Рекомендации Lighthouse указывают, что количество дочерних узлов в body не должно превышать 800. Чтобы этого достичь, следует удалить лишние обёртки, объединить контейнеры, заменить декоративные HTML-элементы на CSS,

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

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

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

Сокращение количества узлов позволяет ускорить этапы рендеринга, повысить отзывчивость и снизить значение TBT. Простые меры, такие как удаление лишних обёрток, упрощение вложенности, устранение дублирования и грамотная работа с SVG, позволяют достичь заметного эффекта без ущерба для дизайна и функциональности. Данные способы оптимизации были представлены в статье [92].

3.3.3 Оптимизация размера CSS файла посредством удаления дублирующихся

стилей

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

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

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

Другим популярным инструментом является UnCSS, основной задачей которого является удаление неиспользуемых CSS-стилей. UnCSS осуществляет анализ HTML-структуры страницы и выявляет только реально используемые стили. Особым преимуществом UnCSS является поддержка динамического контента, создаваемого посредством JavaScript, что обеспечивает точность в определении неиспользуемых стилей. Аналогичными возможностями обладают и другие инструменты, например, PurifyCSS и PurgeCSS.

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

Для решения подобной задачи можно попробовать использовать пакет CSS Diff, предназначенный для сравнения двух CSS-файлов и извлечения различий. Однако практическое применение показало, что скрипт некорректно обрабатывает ситуации, когда правила из общего файла отсутствуют в файле блока. Также этот пакет не поддерживает работу с правилами at-rule, а аналогичные по функционалу пакеты для Node.js отсутствуют. В связи с этим был разработан собственный алгоритм на основе пакета PostCSS, позволяющего манипулировать CSS-кодом через абстрактное синтаксическое дерево (АСД). Общий вид алгоритма

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

Рисунок 21 - Общий вид алгоритма вычитания стилей

Разработанный алгоритм принимает через консоль пути к трём файлам: файлу с общими стилями («тат.сзэ»), файлу со стилями отдельного блока («Ыоск.сзэ») и результирующему файлу («output.css»). Содержимое файлов представлено на рисунке 22.

Затем из файлов «main.css» и «block.css» извлекаются таблицы стилей и преобразуются в абстрактные синтаксические деревья (АСД) (см. рисунок 23).

< ►

« ►

bloc к. ess

« ►

output. CSS

1 .linkj .button {

2 font-size: 12px;

3 }

4

5 .link {

color: red;

text-decoration: underline;

8 } 9

10 .button {

color: black;

border: 1 px solid black;

13 padding: lBpjc;

14 }

15

16 (fflmecHa (min-width: 43Qpx) {

17 .linkj .button {

IS font-size: 1Apx;

19 }

20 } 21

1 .button {

font-size: 12px; color: black; border: Ipx solid black; padding: 1Qpx;

6 }

7

S @media (min-width: 48Opx) { 9 .button {

10 font-size: 1Apxj

11 } 12 }

13

1

2

3

4

5

6 7 S 9

10 11 12