Design Travel Photography Nature Pink

Оптимизация производительности на уровне фронтенда

Алексей Борисов
23.03.2026 05:57
Иллюстрация оптимизации фронтенда с браузером, HTML, CSS, JavaScript, кэшированием, оптимизированными изображениями и графиком роста производительности

Навигация

4.1 Общие положения оптимизации на уровне фронтенда

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

По мнению Стива Соудерса, основная цель веб-производительности заключается в том, чтобы сократить время, которое пользователь ждет загрузку и отображение веб-страницы. Автор предлагает «Золотое правило производительности», согласно которому 80–90 % времени отклика страницы у пользователя занимает загрузка и обработка фронтенд-компонентов, а не на серверную часть. Сосредоточив усилия на оптимизации фронтенда (HTTP-запросы, кэширование, структура CSS/JavaScript и др.), можно значительно ускорить сайт1.

Оптимизация фронтенда направлена на сокращение времени загрузки страницы, уменьшение объема передаваемых данных, снижение нагрузки на браузер пользователя и повышение плавности интерфейса. В приложениях, разработанных с использованием фреймворка Yii2, фронтенд-оптимизация тесно связана с механизмами управления ресурсами (Asset Bundle) и поддержкой технологий частичной загрузки страниц.

В научной литературе отмечается, что классические методы оптимизации (сжатие изображений, применение Lazy Loading, минификация кода, оптимизация шрифтов) в совокупности способны улучшить ключевые метрики производительности до 2.5 раз2. В данной главе ВКР рассматриваются основные методы оптимизации клиентской части: минификация и объединение файлов, отложенная загрузка мультимедиа, использование CDN, асинхронная подгрузка данных и оптимизация рендеринга.

4.2 Отложенная загрузка изображений и видео

Ресурсы веб-приложения составляют значительную часть веса страницы. В данной главе под ресурсом будет пониматься ресурс в соответствии со стандартом RFC 3986. Согласно указанному стандарту, термин «ресурс» используется в общем смысле для всего, что может быть идентифицировано URI3. Загрузка всех ресурсов сразу может привести к длительному ожиданию отображения контента. По этой причине может применяться технология, так называемой отложенной загрузки (Lazy Loading) ресурсов.

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

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

4.3 Использование CDN для статических ресурсов

CDN (Content Delivery Network) – географически распределенная сеть серверов, которая доставляет пользователю статические ресурсы веб-приложения с того сервера, который находится ближе всего к пользователю. Через CDN может предоставляться доступ к изображениям, стилям CSS, JavaScript-библиотекам; шрифтам, видео. Преимущества использования CDN заключаются в уменьшении задержек передачи данных, снижении нагрузки на основной сервер, повышении доступности системы, возможности кэширования на уровне сети, а также ускорении загрузки статических ресурсов пользователями из разных регионов. Например, популярные библиотеки часто подключаются через глобальные CDN:

4.4 Асинхронная загрузка данных через AJAX и Pjax

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

AJAX (Asynchronous JavaScript and XML) позволяет отправлять запросы к серверу в фоновом режиме без перезагрузки страницы.

Пример запроса:

fetch('/api/data')

.then(response => response.json())

.then(data => {

document.getElementById('result').innerText = data.value;

});

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

Pjax объединяет AJAX и механизм управления историей браузера. Эта технология поддерживается в Yii2 и позволяет обновлять часть страницы, сохраняя корректный URL. Основные преимущества: обновление контента без полной перезагрузки; сохранение состояния страницы; уменьшение времени ожидания; улучшение навигации. Pjax особенно полезен для: таблиц данных; постраничной навигации; фильтрации; динамических списков.

4.5 Оптимизация рендеринга и уменьшение количества DOM-операций

Производительность фронтенда зависит не только от загрузки ресурсов, но и от эффективности работы браузера при отображении страницы. DOM (Document Object Model) представляет структуру HTML-документа. Чем сложнее дерево DOM, тем больше ресурсов требуется для его обработки. Рекомендуется: избегать избыточной вложенности элементов; использовать семантическую разметку; удалять неиспользуемые элементы; минимизировать количество узлов.

Любое изменение структуры страницы может вызвать перерасчет расположения элементов. Наиболее затратные операции: изменение размеров элементов; изменение позиции; массовое добавление узлов; частые обращения к стилям. Оптимизационные меры: группировать изменения DOM; использовать CSS-классы вместо поэлементных изменений; применять скрытие элементов перед массовыми обновлениями; использовать виртуализацию списков при больших объемах данных.

Неэффективный JavaScript может блокировать основной поток браузера. Рекомендуется: избегать тяжелых вычислений на клиенте; использовать дебаунс и троттлинг для обработчиков событий; переносить сложные операции на сервер; применять Web Workers при необходимости. Web Workers представляют собой отдельные фоновые потоки выполнения JavaScript, которые работают независимо от главного потока. С помощью них можно вынести тяжелые вычисления или обработку данных в фоновый поток, чтобы не блокировать интерфейс пользователя. Web Workers не имеют прямого доступа к DOM, но могут обмениваться данными с главным потоком через механизм сообщений.

  1. Souders S. High Performance Web Sites: Essential Knowledge for Front-End Engineers 1st Edition. – Sebastopol: O’Reilly Media, 2007. ↩

  2. Рахмани Д., Баранов М.Д., Кузьмин Д.А. Разработка метода оптимизации веб-приложений с целью повышения производительности // Международный журнал гуманитарных и естественных наук. 2025. 3-1 (102). ↩

  3. Uniform Resource Identifier (URI): Generic Syntax (RFC 3986). [Электронный ресурс]. – URL: https://www.rfc-editor.org/rfc/rfc3986 (дата обращения: 10.03.2026). ↩

  4. Wagner J. Web Performance in Action: Building Fast Web Pages. – Manning Publications, 2016. ↩

Tag: