В течение последних нескольких лет веб-разработчикам говорили, что воспринимаемая производительность - это святой Грааль веб-оптимизации. И действительно, я сам проповедовал эту концепцию в течение многих лет, и она хорошо послужила мне и моим клиентам.
Что такое воспринимаемая производительность?
Воспринимаемая производительность - это показатель того, насколько быстрым, по мнению пользователя, является ваш сайт, а не на самом деле, насколько быстро он загружается согласно вашим измерениям. Основная идея состоит в том, чтобы заставить пользователей думать, что ваш сайт работает быстро, показывая им индикаторы выполнения, загружая изображения в спину, асинхронно получая данные и т. Д. Действительно, сосредоточение внимания на воспринимаемой производительности - это очень хорошая практика и во многих аспектах более важна, чем фактическая производительность.
Концепция воспринимаемой производительности используется уже некоторое время, и я действительно рекомендую посмотреть презентацию Эли Фитча Воспринимаемая производительность: единственный вид, который действительно имеет значение (Fluent Conf 2017).
Звучит безподобно! Так в чем проблема?
Иногда, независимо от того, сколько вы вкладываете в предполагаемую производительность, ваши пользователи устанут ждать вашего сайта. Причина этого - важный показатель под названием Время до взаимодействия. (TTI)
Согласно Google, «Время до интерактивности определяется как точка, в которой макет стабилизируется, ключевые веб-шрифты видны, а основной поток доступен достаточно для обработки пользовательского ввода».
Простой пример: вы переходите на главную страницу Google. Время, с которого вы щелкнули по ссылке, которая привела вас на www.google.com, до момента, когда вы смогли щелкнуть по основному поисковому запросу и начать вводить текст, называется TTI. Даже если в фоновом режиме происходит тысяча других вещей (например, получение вашего аватара, рекомендаций, уведомлений и т. Д.), 99% пользователей интересует возможность щелкнуть поле поиска и начать вводить текст. Можно сказать, что это воспринимаемая производительность, потому что пользователь измеряет вашу производительность по ней, однако это реальная производительность. Здесь нельзя использовать уловки. Вам нужно, чтобы это поле поиска появлялось как можно быстрее и как можно скорее было интерактивным.
Я вижу, что ты там делал ... Что мне делать?
Первое, что вам нужно сделать, чтобы улучшить свой TTI, - это сделать небольшую букву «R» (вы знаете, это первая буква в R&D?). Вам нужно попытаться проникнуть в головы ваших пользователей и попытаться «угадать», что их больше всего интересует / что они делают на каждой из ваших страниц в первую очередь.
Пример Google довольно очевиден. Что касается Facebook, вы, вероятно, захотите загрузить ленту как можно быстрее и сделать ее прокручиваемой, а затем получить все остальное. Важно оставить место для других вещей, чтобы ваша страница не «прыгала» и не казалась неровной.
Это простые примеры. Однако, поскольку ваш веб-сайт / веб-приложение более сложное, это может быть труднее понять. Здесь действительно важна регистрация событий бизнес-аналитики. Во многих случаях я был уверен, что знаю, что мои пользователи хотят сделать в первую очередь, но после изучения событий бизнес-аналитики я понял, что ошибался.
Хорошо, я думаю, что понял! Как мне это проверить?
Хорошие люди в Google поняли, что TTI очень важен, и предоставили очень хороший способ его измерения, встроенный прямо в Chrome - T вкладка аудита в инструментах разработчика.
Я не буду останавливаться на всех замечательных функциях, которые предлагаются в этом инструменте, однако я хотел бы сосредоточиться на TTI. Я решил провести тесты на этой фактической странице публикации Medium и посмотреть результаты. Чтобы запустить его, просто откройте Инструменты разработчика Chrome, щелкните вкладку «Аудит» и «Выполнить аудит». Вот мои результаты:
Итак, Medium неплохо справляется с «Доступностью» (такие вещи, как атрибуты ARIA, цветовой контраст, метатеги и т. Д.) И довольно хорошо с «Лучшими практиками» (с использованием https, позволяя пользователям вставлять пароли и т. Д.), Но не так много с » Производительность »и« Прогрессивное веб-приложение ».
Давайте посмотрим на результаты «Производительности»:
Как видите, TTI составляет около 8,5 секунд. Это много. Частично причиной такого большого числа является, вероятно, «первая значимая раскраска», на которую ушло около 5,5 секунд. Кто-то может возразить, что «Первая значимая краска» - это фактический TTI, потому что пользователь уже может читать текст, что является своего рода взаимодействием, однако между отметками 5,5–8,5 секунд вы не сможете прокручивать / нажимать на экран. Важным вопросом здесь является то, что ВЫ считаете TTI. Для главной страницы medium.com TTI можно рассматривать как время, необходимое для просмотра предложений историй, однако, если пользователь видит историю, которая ему нравится, и хочет ее прочитать, но не может щелкнуть / коснуться ее, это довольно мило. плохо, и тогда вы можете счесть «настоящий» ИВП более интересным.
Вот результаты для medium.com
Итак, если мы рассмотрим время, в течение которого пользователь может увидеть предложения, интересное время составит почти 6 секунд, но, если мы рассмотрим время, пока пользователь сможет взаимодействовать со страницей, вам потребуется примерно на 3,5 секунды больше.
Chrome дает вам несколько советов, которые обычно актуальны и помогут вам сократить время загрузки.
Резюме
В течение многих лет воспринимаемая производительность считалась одним из самых важных показателей в мире веб-разработки и до сих пор остается таковым. Время для интерактивности только начинает набирать обороты, и веб-разработчики должны знать об этом и соответствующим образом планировать свои веб-приложения с помощью своих команд бизнес-аналитики.
