Пользователей ужасно бесит, когда страница сайта долго грузится. Большинство людей не дожидаются полной загрузки и покидают сайт. Либо все же остаются на сайте, но переходя на другую его страницу видят, что и тут такая же картина. Потом они уходят. Это значительно сказывается на показателе отказов и времени просмотра сайта. Все это приводит к снижению позиций в поисковых системах. Что же делать? Я дам несколько советов, как убедить пользователей, что твой сайт быстрее, чем есть на самом деле.
Что такое веб-производительность? Для большинства frontend-разработчиков ответ будет охватывать такие моменты, как время отклика страницы, скорость анимации, время загрузки.
Восприятие времени у людей
Восприятие времени людьми - сложный процесс. Человек может ощущать поток времени, но точный характер механизма, с помощью которого это достигается, остается неясным. Отсутствие выделенной области мозга для временной обработки затрудняет понимание процесса. Такого знания достаточно, чтоб понимать, что нужно для оптимизации производительности.
Типичными особенностями пассивного ожидания пользователя являются:
• трата времени: чем ценнее время клиентов, тем более негативное их восприятие к тому, что его тратит;
• скука: это результат состояния «холостого хода» мозга - скука возникает, когда человек не получает достаточно интересной информации;
• отсутствие контроля: пользователям нужно либо дождаться завершения события, либо отменить его (закрыть вкладку). Отсутствие воспринимаемого контроля оказывает значительное негативное влияние на физическое и психологическое благополучие человека.
Сначала это может показаться необычным взглядом на производительность. Следующий список включает некоторые методы по сокращению времени ожидания отклика страницы сайта, но ими не ограничивается.
1. Критическая оптимизация пути рендеринга: как можно скорый рендеринг первых битов информации на экране. Если говорить о событиях, это нужно для загрузки сайта или новой страницы.
2. Оптимистичный интерфейс: оптимизировать интерфейс в ответ на действия пользователя, нарушая его работу только если что-то пойдет не так. Оптимистичный пользовательский интерфейс полезен для любого типа некритического действия.
3. Рекомендации по ресурсам: довольно новая спецификация <link> инструкций для браузера, которые ускоряют связь и подключение к внешним хостам или активам на твоем собственном сайте. Очень широкая область применения, когда дело доходит до событий: от более быстрой загрузки последующих страниц на одном сайте до более быстрой загрузки внешних страниц, если это вам нужно.
4. PRPL: шаблон в целом и его отдельные части. Опять же, когда дело доходит до событий, шаблон PRPL выгодно загружает весь сайт или вновь запрошенную страницу.
5. Анимация: возможно, самый соблазнительный инструмент, доступный для использования. Анимации, устраняющие скуку пассивного ожидания, действительно могут значительно улучшить восприятие коротких событий, связанных с одной страницей: вывод результатов поиска, перенос элемента в корзину, запрос дополнительной информации. Но анимация, сделанная плохо, может значительно навредить не только производительности, но также доступности и общему восприятию проекта.
Не пропусти: Как заработать на своем сайте
Вывод
Лучшее понимание того, как люди устроены, может дать тебе новые возможности в твоей работе.
Как убедить пользователей, что твой сайт быстрее, чем есть на самом деле
Что такое веб-производительность? Для большинства frontend-разработчиков ответ будет охватывать такие моменты, как время отклика страницы, скорость анимации, время загрузки.
Восприятие времени у людей
Восприятие времени людьми - сложный процесс. Человек может ощущать поток времени, но точный характер механизма, с помощью которого это достигается, остается неясным. Отсутствие выделенной области мозга для временной обработки затрудняет понимание процесса. Такого знания достаточно, чтоб понимать, что нужно для оптимизации производительности.
Типичными особенностями пассивного ожидания пользователя являются:
• трата времени: чем ценнее время клиентов, тем более негативное их восприятие к тому, что его тратит;
• скука: это результат состояния «холостого хода» мозга - скука возникает, когда человек не получает достаточно интересной информации;
• отсутствие контроля: пользователям нужно либо дождаться завершения события, либо отменить его (закрыть вкладку). Отсутствие воспринимаемого контроля оказывает значительное негативное влияние на физическое и психологическое благополучие человека.
Сокращение времени ожидания
Сначала это может показаться необычным взглядом на производительность. Следующий список включает некоторые методы по сокращению времени ожидания отклика страницы сайта, но ими не ограничивается.
1. Критическая оптимизация пути рендеринга: как можно скорый рендеринг первых битов информации на экране. Если говорить о событиях, это нужно для загрузки сайта или новой страницы.
2. Оптимистичный интерфейс: оптимизировать интерфейс в ответ на действия пользователя, нарушая его работу только если что-то пойдет не так. Оптимистичный пользовательский интерфейс полезен для любого типа некритического действия.
3. Рекомендации по ресурсам: довольно новая спецификация <link> инструкций для браузера, которые ускоряют связь и подключение к внешним хостам или активам на твоем собственном сайте. Очень широкая область применения, когда дело доходит до событий: от более быстрой загрузки последующих страниц на одном сайте до более быстрой загрузки внешних страниц, если это вам нужно.
4. PRPL: шаблон в целом и его отдельные части. Опять же, когда дело доходит до событий, шаблон PRPL выгодно загружает весь сайт или вновь запрошенную страницу.
5. Анимация: возможно, самый соблазнительный инструмент, доступный для использования. Анимации, устраняющие скуку пассивного ожидания, действительно могут значительно улучшить восприятие коротких событий, связанных с одной страницей: вывод результатов поиска, перенос элемента в корзину, запрос дополнительной информации. Но анимация, сделанная плохо, может значительно навредить не только производительности, но также доступности и общему восприятию проекта.
Не пропусти: Как заработать на своем сайтеВывод
Лучшее понимание того, как люди устроены, может дать тебе новые возможности в твоей работе.
Комментариев нет:
Отправить комментарий