XVII Международная студенческая научная конференция Студенческий научный форум - 2025

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

Анализ последних исследований. Адаптивный веб-дизайн — это дизайн страниц в интернете, который позволяет получить правильное отображение веб-ресурса на любых устройствах, подключенных к сети. [2]

Оптимизировать производительность веб-приложения — значит, улучшить его работу, сделать его быстрее и эффективнее. [1]

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

Высокая производительность сайта — критически важна для успеха любого веб-проекта. Низкая производительность напрямую влияет на прибыль, трафик, конверсию и удовлетворенность пользователей. Многочисленные примеры показывают, что даже незначительная оптимизация производительности приводит к значительному улучшению показателей. Это особенно актуально для мобильных сайтов, где 71% пользователей ожидают скорости загрузки, сравнимой или даже большей, чем на компьютерах. [7]

В исследовании, проведённом Александром Миранковым, после оптимизации веб-приложения с использованием феймфорков, подхода «lazy loading» и оптимизации загрузки ресурсов, было получено заметные результаты: размер загружаемого приложения сократился с 7 до 1,4 МБ, а время Largest Contentful Paint (LCP) сократилось с 3,3 до 1,9 секунды. Улучшенная производительность сайта привлекает и удерживает посетителей, повышая конверсию и улучшая SEO-показатели. [6]

Максимилиано Фиртман (Maximiliano Firtman), опытный мобильный и веб-разработчик, а также автор книг по программированию, опубликовал статью для сайта Smashing Magazine о важности не ставить единственной целью при разработке веб-приложения адаптивный дизайн. Фронтэнд-разработчику важно помнить о том, что его конечная цель – это удовлетворение нужд пользователей, а именно быстродействие и удобство в использовании сайта. Это важно помнить, чтобы достичь высокой конверсии. [8]

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

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

Несмотря на значительные достижения, разработчики сталкиваются с рядом трудностей:

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

• Баланс между скоростью и качеством: Минимизация загрузки иногда приводит к ухудшению визуального или функционального восприятия.

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

• Минификация ресурсов: Удаление лишних символов и объединение файлов CSS и JS, это помогает снизить размер файлов и ускоряет их загрузку. [5]

• Кэширование данных: Эффективное использование кэша браузера и, при необходимости, серверного кэша позволяет повторно использовать статические ресурсы (CSS, JS, изображения), избегая повторной загрузки. Правильная настройка кэширования критична для производительности. [1]

• Оптимизация изображений: Использование современных форматов изображений (WebP, AVIF) обеспечивает лучшее соотношение качества и размера файла. Необходимо также применять сжатие без потерь или с потерями (при допустимом снижении качества) для уменьшения веса изображений. ленивая загрузка (lazy loading) изображений, загрузка только видимых изображений на экране, существенно ускоряет первоначальную загрузку страницы. [5]

• Отложенная загрузка (content-visibility): Загрузка ресурсов только по мере необходимости, что существенно ускоряет загрузку страницы и улучшает производительность без потери доступности контента. [4]

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

На серверной стороне также используются:

• Горизонтальное масштабирование. Распределение нагрузки между несколькими серверами позволяет обрабатывать больше запросов одновременно, улучшая время отклика. [5]

• Content Delivery Network (CDN). CDN распределяет контент на серверы по всему миру, обеспечивая быстрый доступ к статическим ресурсам для пользователей из разных географических регионов. [1]

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

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

Литература

1. Логинова Н.В. Методы оптимизации производительности web-приложений.
   https://publikacija.ru/images/PDF/2024/78/metody-optimizatsii.pdf

2. Кожевникова Е.А. Особенности создания адаптивного дизайна для веб-страницы.
   https://cyberleninka.ru/article/n/osobennosti-sozdaniya-adaptivnogo-dizayna-dlya-veb-stranitsy/viewer

3. Бондарева В.В., Сомов И.И. Сравнительный анализ методов разработки мобильных приложений.
   http://lib.ibteu.by/bitstream/handle/22092014/2043/%20%20%20%20%20%20%20%20%20%20%20.%20._%20%20%20%20%20%20%20.%20.pdf?sequence=1

4. Кравцов Е.П. Современные методы верстки веб приложений
   https://scienceproblems.ru/images/PDF/2024/84/pn-3-84-.pdf#page=12 ст 11.

5. Лутаев Д.О. Исследование и анализ методов оптимизации производительност веб-приложений https://web.snauka.ru/issues/2023/10/100843

6. Александр Миранков. Работающие методы оптимизации веб-приложения: мой опыт https://vaiti.io/rabotayushhie-metody-optimizaczii-veb-prilozheniya-moj-opyt/

7. Тим Кедлек. Быстродействующий адаптивный дизайн

https://cmsmagazine.ru/journal/items-responsive-responsive-design/

8. Maximiliano Firtman. You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy
   https://www.smashingmagazine.com/2014/07/responsive-web-design-should-not-be-your-only-mobile-strategy/