СПОСОБЫ ОПТИМИЗАЦИИ КЛИЕНТСКОЙ ПРОИЗВОДИТЕЛЬНОСТИ ВЕБ-ПРИЛОЖЕНИЙ

АННОТАЦИЯ

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

Большинство посетителей покинут сайт, если он загружается больше трёх секунд, содержит множество рекламы, долго открывает полезную информацию и тому подобное [2]. Ценность оптимизации клиентской производительности в том, что клиенты сайта взаимодействуют именно с интерфейсом, а значит, в интернет среде веб-сайт и его интерфейс становится лицом компании. Если «лицо» компании будет тормозить, или плохо отзываться на действия посетителя, это будет равносильно тому что если в офисе менеджер по продажам будет пить кофе во время работы с клиентом, и отвечать на вопросы через раз. Поэтому качественная работа с сайта, его отзывчивость и производительность являются важным фактором.

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

Рисунок 1 Консоль разработчика с данными по загрузке сайта yandex.ru

На рисунке 1 изображена консоль разработчика в браузере Google Chrome, на которой видно как долго загружался сайт. А именно, нас может интересовать метрика Time to first byte (Время до первого байта). Зачастую, проблема не относится к клиентской производительности так как напрямую зависит от сервера, который отдает результат запроса. Но если тот запрос выполняется к API серверу, он может зависеть от параметров, которые были переданы на него с клиента. Таким образом, регресс от долгого ответа сервера может порождаться с клиентской стороны сайта, в результате которого для конечного пользователя может длительное время не отображаться результат, который он ожидает.

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

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

Рисунок 2. Последовательность появления кадра в браузере

На рисунке 2 изображена последовательность, по которой браузерным движком обрабатываются изменения в DOM дереве, или в стилях. Вся эта последовательность выполняется последовательно в одном потоке, а значит, при неаккуратном обращении с анимацией и блокирующими операциями javascript`a можно значительно ухудшить производительность и отзывчивость интерфейса [1]. Чтобы этого избежать, необходимо помнить о том, что все операции выполняются в одном потоке, стараться не выполнять тяжеловесные операции на клиентской части веб-приложения. При проектировании анимации, необходимо использовать такие стили CSS, которые по-минимуму влияют на представленную на рисунке выше последовательность, например, для трансформации элемента на странице необходимо использовать свойство «transform», которое для преобразования изменений задействует только процесс «Composite», минуя выполнения всех предшествующих операций.

Список литературы:

1. Не используйте большие сложные макеты и избегайте подтормаживания макетов [электронный ресурс], URL: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing (Дата обращения: 14.04.2020)
2. Отчет о скорости загрузки - Cправка [электронный ресурс] URL: https://support.google.com/webmasters/answer/9205520?hl=ru&ref_topic=9456557 (дата обращения 19.04.2020)