​Быстродействие сайта и веб‑приложения — подскажите ключевые аспекты и современные подходы

Быстродействие сайта и веб‑приложения — подскажите ключевые аспекты и современные подходы, нужно значительно ускорить работу сайта

Быстродействие сайта или веб‑приложения — это комплексная метрика, которая характеризует скорость обработки запроса пользователя от инициации этого запроса до момента предоставления результата. Этот параметр напрямую влияет на пользовательский опыт, конверсию и SEO‑позиции ресурса.

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

Быстродействие бэкенда и хостинга

Основной показатель производительности бэкенда и хостинга — это время генерации страницы: интервал времени, который необходим, чтобы сервер принял запрос, обработал его и сформировал ответ. Ключевой метрикой тут является Time to First Byte (TTFB) — время от запроса до получения первого байта данных.

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

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

Для повышения быстродействия на уровне бэкенда и хостинга производится оптимизация программного кода (ускорение и упрощение обработки данных, оптимизация алгоритмов), настройка кеширования («запоминание» результатов вычислений и их многократное использование) и смена серверного оборудования на более производительное.

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

Быстродействие фронтенда

Основные метрики — объём передаваемых данных и среднее требуемое время до возможности взаимодействия с интерфейсом.

На уровне фронтенда определяется необходимый объём данных, который требуется загрузить в браузер, чтобы приложением можно было полноценно пользоваться. Здесь важна целесообразность загрузки ресурсов, их минификация и оптимизация, а также настройка клиентского кеширования. Положительно на скорость загрузки влияет использование современных форматов изображений (WebP, AVIF), декомпозиция приложений с помощью модулей JS и применение tree-shaking для JavaScript-бандлов. Также полезен переход на серверный рендеринг (SSR) для приложений, которые используют клиентский рендеринг (CSR) — SSR + регидрация на клиенте обеспечивает более быструю отрисовку, а также сокращает время до интерактивности (Time To Interactive, TTI).

На время до интерактивности влияет как требуемый объём загрузки ресурсов, описанный выше, так и сложность DOM‑дерева для отрисовки и ресурсоёмкость клиентских подпрограмм на JavaScript. Упрощение процесса отрисовки и оптимизация JS‑скриптов в сочетании с возможностями ленивой загрузки компонентов (или загрузки по требованию) позволяет сократить время, требуемое для готовности клиентской части веб‑приложения к взаимодействию с пользователем.

Рекомендации по быстродействию

Относительно нормальным показателем времени генерации сложной страницы сайта является 0.1-0.5 секунд — это показатель вполне достижим на любой коробочной CMS. Если страницы сайта генерируются более 0.5 секунды, то это может вызывать дискомфорт пользователей и вам стоит рассмотреть варианты оптимизации производительности серверной части.

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

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

Оптимальное время полной загрузки страницы на сегодняшний день — 2-3 секунды. Для сложных веб‑приложений допустимо ≤ 5 секунд, но только при условии визуальной индикации процесса загрузки. Помните, что воспринимаемое быстродействие — это субъективный показатель: если пользователь получает обратную связь от интерфейса в процессе обновления, то он значительно позитивнее воспринимет даже относительно длительные интервалы загрузки.

Быстродействие — это важно

Воспринимаемая пользователями скорость работы — это всегда сумма скоростей работы бэкенда и фронтенда. Необходимо работать как над повышением скорости генерации страниц, так и над сокращением объёма загружаемых данных и над ускорением отрисовки интерфейса. А работа над UI/UX позволяет улучшить клиентский опыт даже в тех случаях, когда пользователям приходится немного подождать. 

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

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

Афанасий Никольцев

Все верно Афанасий, чаще всего на стороне браузера кешируются файлы изображений, JS и CSS файлы. Чуть реже имеет смысл кешировать страницы и бинарные файлы (медиа-файлы, PDF, скачиваемые документы и архивы и т.д.).

Статические ресурсы должны иметь хотя бы недельное время жизни кеша, а лучше кешировать их сразу на год. Таким образом, эти ресурсы будут только один раз скачиваться с сервера, а затем браузер будет либо сразу использовать локальную копию (если указан заголовок Expires или Cache-Control), либо после проверки на неизменность (если указан заголовок Last-Modifed или ETag).

Заголовки Expires и Cache-Control: max-age

В качестве значения у этих заголовков используется дата. До тех пор, пока она не настала, браузер будет без каких‑либо дополнительных проверок использовать закешированную версию ресурса. Expires поддерживается чуть шире, чем Cache-Control: max-age, поэтому лучше использовать именно его.

Заголовки Last-Modifed и ETag

В качестве значения заголовка Last-Modifed используется дата, а для заголовка ETag — произвольная строка. Если используются эти заголовки, то браузер, прежде чем использовать закешированный ресурс, получит с сервера текущее значение заголовка и сравнит его с заголовком закешированной версии — если данные совпадут, то будет использоваться локальная версия, а если нет — произойдёт повторная загрузка. Запросы проверки происходят быстрее, чем полная загрузка ресурсов, что даёт прирост производительности сайта при повторном использовании ресурсов.

Оптимальная стратегия клиентского кеширования

Для редко меняющихся файлов стоит поставить Expires на дату, которая наступит через год, а в момент изменения этих ресурсов использовать метод «отпечатков пальцев» (fingerprinting) — добавлять к имени файла небольшую часть хеша, которая фомируется на основе его содержания. Таким образом, вся статика всегда закеширована на клиенте, а при изменении этой самой статики меняются имена файлов и они автоматически перезагружаются браузером.

Собственно техника fingerprinting активно используется для статичных ресурсов (стилей и скриптов) во многих фреймворках (в частности, в Ruby on Rails). А массовую простановку для всех типов статичных файлов заголовка Expires можно реализовать на стороне веб‑сервера (в nginx, например). 

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

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

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

Разновидности ленивой загрузки:

— Загрузка «по клику» — например, раскрывающийся текст по ссылке «показать больше» или «подробнее», справочная информация в модальных окнах или загрузка большого изображения при нажатии на миниатюру. Это наиболее распространённый способ для представления контента, который с не очень высокой вероятностью заинтересует пользователя. В случае, если контент скорее всего заинтересует или текст важен для поисковых систем, а цель скрытия — экономия пространства, то лучше реализовывать функциональность не на AJAX, а на простом JS — загружать сразу, но отображать по требованию.

— Загрузка «при скроллинге» — загрузка следующей партии материалов в тот момент, когда пользователь уже почти ознакомился с изначально загруженным содержанием. Этот способ ленивой загрузки используется в социальных сетях («бесконечные» ленты новостей), но также применим для интернет-магазинов, каталогов и сайтов СМИ. В случае «бесконечных» лент стоит помнить о доступности навигации: нужна либо фиксированная панель меню, либо кнопка «наверх».

— Фоновая загрузка «по времени» — если страница уже загружена, а пользователь остаётся на открытой странице сайта, то можно в фоновом режиме загрузить какие‑либо ресурсы (большие изображения, например), которые понадобятся ему при дальнейшей работе с сайтом. Метод может ускорить сайт, если загружать действительно необходимые при дальнейшей работе материалы, но требует осторожного применения — необходимо знать, что именно загружать (это можно определить на основании статистики посещений, например), а также учитывать скорость доступа посетителя к сети интернет (пользователь медленного мобильного интернета не будет вам благодарен за такую «заботу»).