От автора: как разработчик, вы можете знать, что производительность является решающим фактором, который определяет, охотно ли пользователь использует ваше приложение. Никто не хочет иметь дело с медленным приложением, ни вы, ни пользователь.
Возможно, вы думаете, что повышение производительности приложения — это только сжатие ресурсов и оптимизация кода. Что ж, существует огромная область производительности, которая часто игнорируется — воспринимаемая производительность.
Воспринимаемая производительность описывает, насколько быстро ваше приложение по мнению пользователя. Другими словами, производительность измеряется не какими-то объективными показателями, а чувствами и впечатлением пользователя.
К счастью, есть несколько полезных инструментов и методов, которые могут помочь вам улучшить общее восприятие пользователя. Вот мой короткий список советов и приемов для повышения воспринимаемой производительности.
Загрузка скелета
Помните ли вы этот момент, когда вы впервые открыли Facebook и увидели какой-то неполный макет с какими-то серыми линиями? Этот конкретный экран называется скелетным экраном.
Скелетный экран — это что-то вроде предварительного просмотра следующего представления, которое будет отображаться, обычно с текстовым содержимым, отмеченным в виде длинных серых линий, и прямоугольниками вместо фотографий. Этот тип экрана очень похож на макеты, используемые в wireframe, которые показывают упрощенную версию макета.
Загрузка скелета может визуально ускорить приложение, по сравнению с пустым экраном с одним счетчиком или индикатором выполнения. Это достигается за счет постоянной интерактивности приложения и предварительного просмотра следующего экрана.
Эту концепцию можно объединить с концепцией оболочки приложения PWA (Progressive Web Applications), чтобы обеспечить наилучшее взаимодействие с пользователем и ощущение, похожее на нативное.
Оптимистичный макет
Эффективное приложение — это приложение, которое не только быстрое, но и которое реагирует на действия пользователя в критическое время. Реакция приложения должна быть быстрой, предпочтительно от 100 до 300 миллисекунд. Верхний предел составляет 1 секунду (1000 миллисекунд), поэтому, если по истечении этого времени пользователь не увидит никаких изменений состояния, он, скорее всего, откажется от своего действия. К сожалению, некоторые действия настолько сложны, что вы не можете гарантировать отклик быстрее чем за 1 секунду.
К счастью, есть простой способ сообщить пользователю, что его запрос выполняется, поэтому он не должен покидать приложение. Вы можете использовать Оптимистическую идею интерфейса.
Если вы определили макет как оптимистичный, это означает, что ваше приложение не блокируется во время ожидания решения действия. Самый первый шаг к тому, чтобы сделать приложение оптимистичным — добавить спиннер или индикатор выполнения в важные части приложения.
Возьмите, например, кнопку. Это элемент, обычно используемый, чтобы запустить действие. Он либо изменяет маршрут текущей страницы, либо отправляет всю форму на сервер, поэтому следует информировать пользователя о том, что что-то происходит. Вот простой пример того, как вы можете это сделать:
Отправка данных — не единственное блокирующее действие в веб-приложениях. Также есть извлечение, во время которого ваше приложение загружает некоторые данные. Для этого действия также необходимо состояние загрузки, особенно если приложение получает некоторые важные данные.
Предварительная загрузка изображений
Я считаю изображение самым тяжелым ресурсом, который необходим браузеру. Теперь мы привыкли к экранам с высоким разрешением, и изображения высокого качества приятны для наших глаз. Плохо то, что больше пикселей означает больше килобайт. Лучшее сжатие изображений может сократить время загрузки, но, тем не менее, часто мы можем достичь предела, ниже которого изображения выглядят ужасно.
Medium представила захватывающий способ обработки предварительной загрузки изображения, который сейчас широко используется в отрасли. Он называется прогрессивной загрузкой изображений. Это впечатляющая и простая методика, которая позволяет легко просматривать исходное изображение во время его загрузки.
Если не вдаваться в подробности, этот метод использует крошечное изображение, обычно до нескольких килобайт, в качестве заполнителя для исходного изображения. Затем, когда заполнитель находится в области просмотра, загружается исходное изображение. Благодаря использованию компактного заполнителя браузеру не нужно загружать тяжелые ресурсы, так как они загружаются по требованию.
Быстрая анимация
Это может быть неочевидно, но способ определения анимации может повлиять на конечный пользовательский опыт. Анимация определяет не только представление контента, но и то, насколько ваше приложение выглядит качественно. Она отлично подходит для скрытия слишком длинных действий, иммитируя мгновенный ответ.
Удивительно, но продолжительность анимации легко переоценить. Помните об одном единственном правиле — простая анимация должна работать от 0,2 до 0,5 секунд. Все, что меньше 0,1, кажется мгновенным, и не стоит его анимировать. Больше половины секунды — это слишком много для простого перехода из одного состояния в другое. Для сложных анимаций старайтесь не превышать 6 секунд. Выше этого предела лучше разделить анимацию на более мелкие.
Заключение
Я надеюсь, что советы и рекомендации, приведенные в этой статье, помогут вам исправить воспринимаемую производительность ваших приложений. К счастью, современная веб-разработка дает нам много отличных инструментов и концепции, которые мы можем свободно использовать для улучшения приложения. Хотя использование каких-либо специфических приемов для визуального улучшения производительности может быть хорошей стратегией в определенный момент, вы не можете забывать об основах — правильной загрузке ресурсов и устранении любых узких мест производительности.
Автор: Mirek Ciastek
Источник: https://calendar.perfplanet.com/
Редакция: Команда webformyself.
