От автора: как вы оцениваете производительность сети? Если вам больше нужна скорость или качество изображения, вы должны всегда учитывать несколько показателей при оптимизации своих веб-приложений. К счастью, модель RAIL обеспечивает точный и всесторонний способ оценки пользовательского опыта, чтобы вы могли внести существенные улучшения.
Что такое модель RAIL?
Хотя получение начального времени загрузки страницы крайне важно для снижения частоты отказов, это только половина битвы. Пользователи тратят гораздо больше времени на ожидание ответов на входные данные, поэтому, если вы хотите, чтобы посетители придерживались, ваш веб-сайт должен быть постоянно быстрым. Модель RAIL учитывает все возможные действия пользователя, чтобы гарантировать, что каждый аспект страницы соответствует быстродействию.
RAIL — это аббревиатура «Response, Animation, Idle и Load». Модель классифицирует взаимодействия пользователей в этих четырех доменах. У пользователей разные ожидания, когда они нажимают пальцем, кликают или просматривают различные элементы страницы. Поэтому модель RAIL измеряет взаимодействие каждого пользователя с различными контекстными целями.
Модель RAIL была предложена разработчиком Paul Irish в 2015 году, и Google с тех пор кодифицировал этот метод. Давайте раскроем четыре аспекта модели RAIL и рекомендуемые нами тесты:
Время отклика отражает то, как быстро ваш сайт реагирует на входные данные. Время отклика менее 100 мс ощущается мгновенным; что-то более медленное заметно для пользователя.
Скорость анимации распространяется на любую визуальную анимацию, которую вы просматриваете на странице, а также на прокрутку и перетаскивание. Идеальная цель — 60 кадров в секунду или один кадр каждые 16 мс.
Работа в режиме ожидания относится к тому, что происходит на заднем плане вашего веб-сайта после его первоначальной загрузки. Работа в режиме ожидания должна быть разделена на блоки 50 мс, чтобы не перетащить время отклика.
Загрузка в контексте модели RAIL означает первую значимую отрисовку, которая должна появиться менее чем через одну секунду после того, как пользователь запросит вашу страницу.
Изменение восприятия веб-пользователями времени
Часто говорят, что Интернет сокращает внимание людей, но люди всегда были довольно нетерпеливы по своей природе. Мы подключены, чтобы получить мгновенное удовлетворение, поэтому мозг может регистрировать задержки на одну десятую секунды. Тем не менее, сегодняшние веб-пользователи привыкли ждать около секунды ответа, когда они нажимают на ссылку. Если задача занимает больше времени, пользователи становятся более склонными сдаваться и отворачиваться. Например, BBC News лихо заметила, что их веб-сайт терял 10 процентов посетителей за каждую дополнительную секунду, которую загружалась их домашняя страница.
Тем не менее, терпение каждого пользователя зависит от их ожиданий. Еще в 1990-х годах люди ждали более минуты, чтобы подключиться к Интернету. Сегодня некоторые пользователи настольных компьютеров с быстрыми подключениями не будут ждать секунды для загрузки изображения. Мобильные пользователи, привыкшие к 3G-соединениям, больше прощают, чем пользователи настольных компьютеров; они, как правило, ждут около трех секунд, прежде чем отказаться от задачи в соответствии с DoubleClick от Google.
Вы никогда не сможете удовлетворить всех, но использование модели RAIL улучшит ваши шансы сохранить новых посетителей. Google и другие поисковые системы считают скорость сайта в своем рейтинге, поэтому более быстрые страницы также могут получить более уникальные представления.
Определение ваших целей эффективности
Как только вы узнаете, какие показатели вы хотите измерить, вы должны решить некоторые достижимые цели. Мы рассмотрели то, что ожидают пользователи, но вы всегда должны стремиться превзойти ожидания пользователей. Если ресурсы ограничены, то ваша цель должна состоять в том, чтобы максимально использовать то, что доступно вам. Если ограничения ресурсов не являются проблемой, вот некоторые цели, предлагаемые Google:
1. Ответ на пользовательские входы в течение 50 мс
Руководство разработчика Google рекомендует предоставить некоторую форму обратной связи для любого действия пользователя, которое занимает больше 50 мс. Это может показаться излишним, но стремление к такой цели гарантирует, что связь между действием и ответом всегда мгновенно становится для пользователя.
Допустим, у вас есть кнопка на вашем веб-сайте, которая генерирует случайное изображение на странице. Если для изображения потребуется 100 мс, тогда вы должны включить что-то, чтобы пользователь знал, что их вход был получен. Например, кнопка может изменять цвета, или может отображаться графическая заставка, когда изображение заканчивается загрузкой.
2. Создавайте анимационные рамки за 10 мс
Индикаторы загрузки, прокрутки, перетаскивания и масштабирования считаются анимациями под моделью RAIL. Если вы пытаетесь достичь 60 кадров в секунду, то ваш бюджет за кадр теоретически составляет 16 мс; однако браузеру обычно требуется около 6 мс только для рендеринга кадра, поэтому вы должны стрелять на 10 мс или меньше. Пользователи могут обнаруживать малейшие изменения, поэтому скорость анимации должна быть последовательной, чтобы поддерживать ощущение визуальной бесшовности.
3. Выжимайте максимум из времени ожидания
Чтобы улучшить ваши шансы всегда достигать 50 мс времени отклика, вы должны хорошо использовать время простоя. Попробуйте загружать только самые важные элементы вашей страницы во время начальной загрузки страницы, а затем загружать все остальное, когда пользователь находится в режиме ожидания. Тем не менее, вы должны убедиться, что работа, выполняемая во время простоя, не мешает реагированию, поскольку это приведет к поражению вашей цели. Дайте пользовательским взаимодействиям наивысший приоритет, чтобы они прерывали работу бездействия, а не наоборот.
4. Сделайте свою страницу интерактивной в течение пяти секунд
В идеале пользователи могут начать взаимодействие с вашей страницей в течение пяти секунд (самое большее) запроса вашего URL-адреса в первый раз. Основываясь на исследованиях, проведенных Google, веб-сайты, которые становятся функциональными всего за пять секунд, достигают в среднем 70 процентов более длительной продолжительности сеанса, на 35 процентов меньше отказов и на 25 процентов выше рекламных просмотров по сравнению с более медленными веб-сайтами. Кроме того, мобильные сайты, которые загружаются в течение пяти секунд, зарабатывают вдвое больше рекламных доходов более медленных конкурентов.
По состоянию на 2018 год «правило пять секунд» является хорошей мишенью для мобильных устройств среднего уровня по 3G-соединению. Для возвращающихся посетителей используйте кеширование для достижения двухсекундного времени загрузки. Однако имейте в виду, что по мере того, как технология продолжает развиваться, так будут ожидания людей. Действительно, люди будут продолжать становиться все более нетерпеливыми, поскольку интернет становится быстрее.
Инструменты для использования с моделью RAIL
Вы можете использовать свой любимый инструмент веб-тестирования для автоматизации отслеживания ваших показателей RAIL. Google Lighthouse полезен, так как он может рассказать вам, как ваш сайт работает на среднем устройстве через 3G-соединение, а также предлагает предложения сделать ваши страницы быстрее, доступнее и проще в обслуживании. Он доступен как расширение для Chrome DevTools, и его можно комбинировать с WebPageTest, чтобы дать вам полное представление о том, как ваш сайт выглядит для пользователей.
Дополнительные советы по использованию модели RAIL
1. Знай свою аудиторию
При настройке своих собственных целей подумайте о сетевых возможностях ваших пользователей. Если ваше приложение или веб-сайт ориентированы на местную аудиторию, тогда у вас будут разные технические соображения, чем если бы вы пытались связаться с международными пользователями.
Проверяйте производительность своего сайта на типах устройств и сетевых подключениях, которые использует ваша аудитория. Вы можете использовать программное обеспечение мониторинга трафика, чтобы узнать больше о своих посетителях.
2. Следите за тенденциями в области веб-разработки
Веб-оптимизация — это бесконечная гонка, чтобы опережать конкуренцию, а это значит, что ваши проекты должны идти в ногу с последними технологическими тенденциями, чтобы оставаться актуальными. Аналогичным образом появятся новые модели для измерения производительности. Регулярно проводите собственные исследования, следите за блогами веб-разработки и проверяйте свои тесты каждые несколько месяцев, чтобы убедиться, что ваши приложения всегда в курсе.
3. Знайте, когда обновлять
Имейте в виду, что для новых технологий обычно требуется несколько лет. Например, недавно представленное пятое поколение инфраструктуры беспроводного Интернета может в конечном итоге привести к тому, что 3G и 4G устареют, но этот день, вероятно, далек, поскольку 5G недоступен в большинстве мест по состоянию на 2018 год. Поэтому нет никакой спешки, чтобы оптимизировать ваши приложения для 5G пока еще.
4. Приоритет вашего критического пути рендеринга
Достижение времени на взаимодействие в пять секунд или менее не требует загрузки всей страницы. Вы можете реализовать прогрессивный рендеринг, отложив несущественную работу на задний план. Позаботьтесь обо всем, что сначала блокирует рендеринг, а затем загружает все остальное во время простоя.
5. Определите решения, а не только проблемы
Мы обсудили показатели, используемые для количественной оценки производительности, но оценка вашего сайта — это только первая часть процесса оптимизации. После того как вы определили области для улучшения, вы должны быть в состоянии диагностировать источник своих проблем. Например, многие факторы, которые могут потенциально влиять на загрузку страницы, включают в себя задержку сети, выселение кеша и аппаратные ограничения. Все эти факторы должны быть рассмотрены до того, как вы начнете вносить изменения.
Заключение
Модель RAIL в конечном счете является лишь одним из способов мышления о производительности веб-сайта, но это метод, с которым должны быть знакомы все работающие веб-разработчики. Приоритеты производительности могут меняться в зависимости от типа проекта, над которым вы работаете, но модель RAIL полезна в большинстве случаев, поскольку она учитывает ряд показателей, которые наиболее важны для пользователей.
Источник: https://www.keycdn.com/
Редакция: Команда webformyself.