Быстродействие сайта или веб‑приложения — это комплексная метрика, которая характеризует скорость обработки запроса пользователя от инициации этого запроса до момента предоставления результата. Этот параметр напрямую влияет на пользовательский опыт, конверсию и 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 позволяет улучшить клиентский опыт даже в тех случаях, когда пользователям приходится немного подождать.
Тематические статьи
Выбор правильного формата изображения — ключевой аспект оптимизации веб‑страниц. От него зависят скорость загрузки, качество контента и пользовательский опыт. Рассмотрим популярные форматы, поддерживаемые современными браузерами, их особенности и сферы применения.
Если простым языком, то серверное кеширование — это ряд технологий, которые позволяют «запоминать» один раз полученные или созданные данные, а затем многократно использовать их повторно, что способствует увеличению скорости отклика и снижает нагрузку на серверное оборудование.
Redis — сетевое журналируемое хранилище данных типа «ключ — значение», которое обрабатывает данные в оперативной памяти и обладает механизмами снимков и журналирования для обеспечения постоянного хранения. Хранилище поддерживает работу с пятью типами данных: со строками, списками, хешами, обычными и сортируемыми множествами.
Сайт может работать быстрее, если выполнены следующие рекомендации по оптимизации JS‑кода. Если же этого не сделать, то сайт будет недостаточно быстро отображаться на стороне клиента.
Время загрузки и отрисовки сайта в браузере можно заметно снизить, если воспользоваться следующими советами.
Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML‑разметки, а без этого скорость загрузки и отрисовки будет ниже.
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG. Неверный выбор формата обычно приводит к кратному возрастанию размера изображения и, следовательно, к долгой загрузке изображений на медленном интернет-канале (мобильный интернет, например).
Кеширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или при посещении просматривает несколько страниц, которые используют одинаковые ресурсы.
Бывает так, что некоторое содержание страницы нужно не всем или не всегда, но на генерацию этого материала или для его передачи тратится много ресурсов. В этом случае имеет смысл сделать загрузку «ленивой», то есть не генерировать и не загружать в браузер информацию до тех пор, пока она не понадобится.