Более быстрые сайты работают лучше по целому ряду показателей . Ускорение веб-сайтов улучшает SEO и, следовательно , повышает рейтинг кликов, поэтому более быстрые веб-сайты получают более высокий рейтинг и повышают конверсию, что, безусловно, также улучшает пользовательский опыт .
Как веб-дизайнеру, вы захотите сделать все, что возможно, чтобы сделать ваш сайт быстрее, включая реализацию CDN (Content Delivery Network), предварительную выборку ресурсов , сжатие изображений , использование кэширования в браузере и кучу других внутренних оптимизаций. Тем не менее, есть способ, которым мы можем заставить сайты чувствовать себя быстрее, даже если сайт уже загружается с молниеносной скоростью. Это метод, называемый улучшением воспринимаемой производительности .
«Воспринимаемая производительность» — это скорость, с которой рендерится контент, размещенный выше сгиба — это контент, который пользователи сначала переваривают, а остальная часть контента (контент ниже сгиба) загружается.
Оптимизируя веб-сайты для лучшей воспринимаемой производительности, вы все равно получите те же преимущества, что и действительно быстрый веб-сайт, который включает посещение сайта дольше, увеличение конверсий и улучшение пользовательского опыта в целом, однако прирост показателей еще больше , Давайте рассмотрим основные стратегии, которые необходимо реализовать при работе с нетерпеливыми пользователями. Многие из этих стратегий основаны на человеческой психологии и на том, как пользователи интерпретируют / оценивают контент.
Занято против незанятого времени
Занятое время — это когда вы на самом деле что-то делаете, а незанятое время означает, что вы ждете, чтобы что-то сделать. Например, если вы ожидаете получения багажа в аэропорту, чтобы забрать свой багаж, он будет казаться очень длинным и, возможно, даже мучительным. Однако разница между ожиданием багажа и ожиданием загрузки веб-сайта заключается в том, что вы должны забрать свой багаж, тогда как посетители веб-сайта могут (и захотят) попробовать другой веб-сайт.
Да, пользователи нетерпеливы. По данным исследования Kissmetrics, каждая 1-секундная задержка приводит к снижению конверсии на 7% .
—
Примечание редактора:
Интересные идеи о занятом времени. Видите ли, я становлюсь довольно напряженным, когда идеи и задачи накапливаются, поэтому я почти полностью трачу свободное время. Если я иду по улице, я сознательно мозговой штурм. Если я жду, пока микроволновая печь не подаст три звуковых сигнала, я стою там и реорганизую свой Wunderlist. Я думал, что я сумасшедший, но это подтверждает, что пользователи просто ненавидят незанятое время.
—
Скелет экраны
Индикаторы выполнения и счетчики полезны для информирования пользователя о том, что что-то происходит, но только в меньшем масштабе (например, при загрузке файла). В более широком масштабе, например, при загрузке всего экрана, спиннер является не более чем неловким напоминанием о том, что вы заставляете пользователя ждать, и, поскольку большинство браузеров в любом случае отображают счетчик на вкладке, это относительно бесполезно.
Эффективный способ заставить сайт чувствовать себя быстрее — использовать скелетный экран . Скелетный экран постепенно наполняет веб-страницу контентом — это показывает пользователю, что на самом деле что-то происходит, а также дает пользователю возможность сосредоточиться ( что-то лучше, чем ничего).
Люк Вроблевски, дизайнер по продуктам в Google, провел исследование, в котором сравнивали радость пользователя с использованием и без использования счетчика загрузки. Вскоре после внедрения спиннера команда получила жалобы на то, что загрузка спиннер-версии приложения занимала больше времени, чем версия без спиннера, в которой использовалась технология скелетного экрана (кстати, это поведение браузера по умолчанию). В действительности обе версии загружались одинаково, но воспринимаемое время загрузки было выше, когда контент не отображался сразу.
Поскольку новый контент отображается на экране побитно, это создает ощущение непрерывного прогресса, и у пользователя есть контент, который нужно переварить, пока остальная часть рендеринга / загрузки. Как реализовать, спросите вы? Только не используйте значок загрузки / счетчик.
Жизненно важный контент нуждается в приоритетной загрузке
Когда вы сосредотачиваетесь на том, чтобы сначала загрузить самый важный контент на веб-странице, у пользователя есть чем заняться, и больше не имеет значения, загружается ли остальная часть веб-страницы. Если пользователь хочет прочитать статью в блоге, но в первую очередь появляются такие необязательные материалы, как реклама, фоновые видеоролики и разделы «другой контент, который вам может понравиться», легко понять, почему такой сценарий может создать впечатление медленного сайта. , поскольку существует огромная разница между доставкой раздела контента и доставкой раздела, который хочет видеть пользователь.
Исследование Nielsen Norman Group подтвердило, что загрузка жизненно важного контента в первую очередь (и быстро) приводит к более высокой степени вовлеченности пользователей, когда пользователь, увидевший то, что он хотел, сразу же провел с ним 20% своего времени , тогда как пользователь с 8- вторая задержка потратила 1% своего времени на это. Если жизненно важный контент ограничен задержкой загрузки, вовлеченность значительно снизится.
Тяжелые особенности выше сгиба
Воспринимаемая производительность в конечном итоге сводится к сокращению контента, необходимого для загрузки вашего превосходного контента. Вот худшие преступники:
- Анимации и модные переходы
- JavaScript, который добавляет небольшую ценность / ненужную функциональность
- Тяжелые носители (большие изображения и видео, особенно в высоком разрешении / без сжатия)
- Абстрактные растровые изображения, которые можно легко реализовать с помощью SVG / CSS
Нельзя сказать, что что-то из этого плохое, но если вы не можете придумать реальную причину для их включения, вам, вероятно, они не нужны, и в этом случае они, вероятно, наносят вред вашему сайту.
Вставка Критического CSS
Предупреждение: dev-говорить. Хотя. так как многие дизайнеры также являются разработчиками в наши дни, и так как это всегда полезно, когда дизайнеры немного знают о процессе разработки, вам также следует прочитать этот раздел. Немного больше знаний никогда никому не вредит.
Итак, мы уже знаем, что тяжелые функции, или, по крайней мере, слишком много тяжелых функций выше, не делают чудеса для воспринимаемой производительности . Действительно, приоритет должен быть на (CSS) стилях, которые отображают жизненно важный контент.
Но даже тогда внешние файлы CSS должны быть полностью загружены, прежде чем веб-браузер сможет начать применять стили к веб-странице, поэтому полезно отображать эти стили между тегами <style><head> Таким образом, те важные стили, которые создают жизненно важный контент, загружаются сразу. Мы называем эти стили критическими CSS .
Это будет выглядеть примерно так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- critical CSS here -->
<style>
html { /* styles here */ }
</style>
<!-- below the fold CSS here -->
<link rel="stylesheet" href="//cdn.example.com/stylesheet.css">
</head>
<body></body>
</html>
,
Итог: почему воспринимаемые показатели важны
Итог: более быстрые сайты повышают конверсию . В Интернете, где контент легко доступен, а пользователи привередливы и нетерпеливы, более медленные сайты будут терять доход . Психология чрезвычайно важна в веб-дизайне, поэтому все, что вы можете сделать, чтобы повысить восприятие скорости вашего сайта, будет способствовать достижению этих более высоких показателей, и в сочетании с методами, используемыми для фактической ускорения загрузки сайтов, вы можете выделить свои сайты из толпа.
Любопытно, как измерить веб-производительность в целом?
Инструменты Pingdom сообщат вам, сколько времени потребуется для загрузки вашего сайта, а также предложат ряд настроек для улучшения TTFB ( время до первого байта ), хотя вы также можете использовать собственный инструмент Google PageSpeed . Оба вычисляют время, которое требуется браузеру для загрузки самого первого байта ответа с сервера, и неудивительно, что это важно для SEO . Это также объясняет, какие изображения могут быть дополнительно сжаты, какие ресурсы должны быть из CDN, и, как упоминалось выше, какой критический CSS может быть вставлен в <head>