Разработка с упором на производительность

От автора: подумайте о том, как вы ведете поиск в интернете. Насколько быстро вы закрываете вкладку и переходите к следующему результату запроса, если сайт слишком долго загружается? Какова вероятность того, что вы вернетесь на сайт, который до бесконечности грузит нужную вам информацию на экран: погода в вашем регионе или новости? Если вы заняты, хватит ли вашего терпения, чтобы дождаться загрузки при проверке почты, сравнении цен или поиске нужного направления? Чем меньше времени у вас есть, тем выше ожидания в отношении быстрой загрузки сайтов.

Скорость загрузки страниц становится все более важной составляющей веб-сайтов. Если вы ищете тесты на скорость загрузки страниц, это то, что вам нужно: пользователи ожидают, что страница загрузится в среднем за две секунды, и уже после третьей секунды до 40% пользователей закрывают вкладку. Более 85% пользователей мобильных устройств предполагают, что с мобильного устройства сайт, как минимум, должен грузиться так же или быстрее. Если вы проектируете и пишите веб-сайт или тестируете уже существующий, сможете ли вы подстроиться под такие требования?

Производительность связана с опытом использования веб-сайта. Во время проектирования и разработки нового сайта вы столкнетесь со многими компонентами, влияющими на пользовательский опыт от использования: макет, верстка, интуитивность, простота в использовании и т.д. От полученного опыта зависит, поверят ли посетители вашему бренду, вернутся ли они на ваш сайт и расскажут ли о нем своим друзьям. Скорость и ощущение от загрузки страниц являются большой составляющей этого пользовательского опыта и должны быть в равной степени уравновешены с удобством интерфейса на вашем сайте.

Давайте проведем пару исследований и рассмотрим некоторые данные о том, как в конечном итоге производительность влияет на пользовательский опыт.

Влияние на ваш бренд

Общий пользовательский опыт влияет на впечатление аудитории сайта на ваш бренд. Akamai сообщает о том, что 75% пользователей, делающих покупки онлайн и столкнувшихся с такими проблемами, как зависание, падение сайта, слишком долгая загрузка или запутанный процесс оплаты товара, не будут покупать товары на таком сайте. Gomez изучил поведение онлайн-покупателей и выяснил, что 88% из них с наименьшей вероятностью вернутся на сайт после неудачного опыта покупки. Похожее исследование показало, что «в часы пик трафика более 75% онлайн-покупателей, чтобы не ждать, уходят на сайты конкурентов». Ваши пользователи уходят к конкурентам, пока вы пытаетесь соревноваться в скорости загрузки страниц и других аспектах? Вы уверены, что ваш сайт быстрее, чем у конкурентов?

Вернувшиеся пользователи

Производительность влияет не только на продажи интернет-магазинов; улучшения и оптимизация загрузки страниц подходят к любому сайту. Пользователи возвращаются на более быстрые сайты, о чем говорит . Они отметили снижение аудитории на медленных сайтах. Пользователи, испытывающие задержку в 400 миллисекунд, в течение первых трех недель задали на 0.44% меньше поисковых запросов. На протяжении еще трех недель спад запросов увеличился до 0.76%.

Более того, даже когда пользователей исключали из эксперимента, и они снова могли пользоваться быстрым поиском, требовалось время, чтобы пользователи смогли снова выйти на прежний уровень поисковых запросов. Влияние времени загрузки страниц на пользователя это больше, чем первоначальный неудачный опыт использования сайта. Посетитель инстинктивно помнит ощущения от медленного сайта и решает, как часто он будет посещать данный ресурс в дальнейшем, основываясь на предыдущем опыте.

Ранжирование поисковых систем

Кроме всего перечисленного, время загрузки страницы учитывается в результатах поиска, поднимая быстрые сайты выше в списке результатов поискового запроса. Google включает скорость сайтов в свой алгоритм ранжирования результатов запроса. Хотя Google и заявляет, что релевантность контента имеет больший вес при ранжировании результатов, время загрузки страниц по-прежнему вносит свой вклад в общий пользовательский опыт на вашем сайте. Google хочет отображать только лучшие результаты поискового запроса с точки зрения опыта использования.

Игнорирование скорости загрузки страниц вашего сайта это больше, чем просто упущенная возможность оптимизации; пользователи могут просто не запомнить ваш бренд. Microsoft провела исследование, чтобы оценить, смогут ли пользователи вспомнить результаты поискового запроса. Через полчаса после того, как участники исследования вбили в строку поиска свой собственный запрос, каждому на почту пришел опрос. В опросе их просили вспомнить список результатов, не подглядывая в поисковике. Результаты опроса показали, что одним из двух основных факторов, влияющих на запоминание, является то, где в списке результатов расположенсайт. Улучшение времени загрузки страниц может повысить шансы вашего сайта в ранжировании результатов поисковых запросов.

Naomi Atkinson, дизайнер брендов и цифровых продуктов, блестяще описывает, как дизайнерские агентства могут эффективно использовать производительность, говоря «большой процент агентств отсеиваются на ключевой стадии продаж. Представив, как быстро они планируют создать сайт или сервис заказчика (и каким образом) вместе с маркетинговыми и визуальными идеями, дизайнерские агентства могут изменить мир. И сделают успешными и себя и клиентов.» Производительность является частью общего опыта использования и может оказать огромное влияние на бренд компании.

Влияние на пользователей мобильных устройств

Чем больше пользователей переходят на мобильные устройства, и чем больше задач переходят в интернет, общий опыт использования вашего сайта становится все важнее. Если посмотреть на данные StatCounterGlobalStats, мы можем увидеть, что доля мобильных устройств от общего процентного соотношения интернет-трафика неуклонно растет (График 1.1).

Некоторые компании уже заметили это существенное увеличение трафика с мобильных устройств; согласно докладу «интернет-тенденции» от MaryMeeker, 45% сделок на сайте Groupon произведены с мобильных устройств за первые месяцы 2013 года. Двумя годами ранее это значение равнялось 15%. На сайте Etsy, где я запустил команду по обеспечению эффективности, 50% пользовательского трафика приходит с мобильных устройств. Данные за начало 2014 года.

График 1-1. По данным графика можно заметить, что общий процент интернет-трафика с мобильных устройств неуклонно растет. Если продлить проекцию развития, можно заметить, что в ближайшее время, скорее всего, замедления роста мобильных устройств не предвидится.

Процент мобильного трафика растет практически на всех сайтах, что, в свою очередь, приведет к росту значимости времени загрузки страниц, в частности, и для мобильных пользователей. Одно исследование показало, что мобильные телефоны являются приоритетным способом выхода в интернет для огромного числа пользователей по всему миру. Около 50% пользователей интернета в Африке и Азии для доступа в сеть используют только мобильные устройства, в отличие от 25% в США. В данном исследовании принимали участие «только мобильные пользователи», те, которые никогда или редко используют настольный компьютер для доступа в интернет (планшеты в исследовании приравнивались к настольным устройствам). В итоге: большое количество людей для доступа в интернет используют мобильные устройства в первую очередь, и эти устройства открывают свой собственный уникальный набор проблем.

Мобильные сети

Одной из причин долгой загрузки веб-страниц на мобильных устройствах является способ передачи информации. Перед тем, как отправить или получить данные, мобильное устройство должно установить радиоканал с сетью (смотрите Рисунок 1-2). При 3G соединении это может занять несколько секунд. После установления соединения с радиовышкой устройство сообщает, что оно может передать информацию. Оператор сотовой связи должен передать информацию с вышки во внутреннюю сеть, а затем в глобальную сеть интернет. Сочетание этих шагов может с легкостью добавить десятки тысяч миллисекунд дополнительной задержки. Более того, если никакие данные не передаются и не принимаются, то после паузы канал становится неактивным. Для новой передачи требуется заново открывать канал и повторять весь процесс, что, потенциально, хаотически влияет на скорость загрузки страниц.

Рисунок 1-2. Перед тем, как мобильное устройство получит все необходимые данные для загрузки сайта, должен быть создан радиоканал с сетью. Этот процесс может занять некоторое время и может крайне отрицательно сказаться на скорости загрузки страницы.

Как «когда дело доходит до вашего опыта использования, задержки, а не пропускная способность, являются сдерживающим фактором на сегодняшний момент». Чем больше время ожидания требуемой информации, тем необходимо больше времени, чтобы получить необходимую информацию на устройство, и еще больше для отображения ее на экране. Подробнее основы скорости загрузки страниц разбираются в главе 2.

Что такое Задержка и Пропускная Способность?

Задержка это количество времени, необходимого для передачи пакета данных от одной точки к другой. К примеру, есть задержка между тем, как сервер хостинга получит и обработает запрос, а также задержка между посылкой сервером данных обратно браузеру и их получением. Задержка это фундаментальное физическое свойство (как скорость света). Она часто оценивается в миллисекундах (миллисекунда равна одной тысячной секунды).

Пропускная способность – максимальная пропускная способность канала. То, как много можно одновременно передать информации по оптоволоконному кабелю или вашему оператору сотовой связи. Как аналогия – такси и автобус на общем маршруте имеют одинаковые задержки, но у автобуса пропускная способность больше.

Хотя это и правда, что сети постепенно становятся быстрее, ваша мобильная аудитория в настоящий момент может испытывать трудности с загрузкой. У среднестатистического настольного компьютера в США с WiFi подключением запрос туда-обратно занимает 50 миллисекунд. Это время, необходимое для посылки браузером запроса на сервер и получения от него ответа. Однако, в мобильных сетях запрос туда-обратно может занимать больше 300 миллисекунд. Чтобы понять, что это значит: это то же самое, что старое dial-up соединение.

Сложите время каждого запроса туда-обратно, необходимых для загрузки сайта,со временем, необходимым для установления радиоканала с сетью (примерно от 1000 до 2000 миллисекунд), и вы увидите, как производительность мобильных сетей напрямую влияет на пользовательский опыт на вашем сайте. Кроме того, трудно предсказать, в каких случаях беспроводные сети могут быть ненадежны. К примеру, когда пользователь находится на концерте в огромной толпе или в зоне с плохим покрытием.

Это означает, что вам действительно необходимо уделять первостепенное внимание производительности при оптимизации дизайна вашего сайта под мобильные устройства, так как скорость загрузки страниц значительно влияет на пользовательский опыт и на то, какой сайт предпочтут пользователи. Это подтверждается рядом исследований различных компаний. Моя команда на сайте Etsy обнаружила рост показателя ухода мобильных пользователей с сайта при добавлении 160 кб скрытых изображений на страницу. DoubleClick, рекламный продукт Google, удалил один редирект на клиентской стороне и заметил 12% увеличение кликабельности на мобильных устройствах. Одним из важнейших плюсов от оптимизации производительности на мобильных устройствах является то, что эта оптимизация так же положительно влияет на ваш сайт при его посещении с других типов устройств.

Шаблоны мобильного применения

Скорость загрузки страниц влияет на пользовательский опыт от вашего сайта не зависимо от типа устройства. Тем не менее, негативный опыт от долгой загрузки будет только усиливаться при использовании мобильных устройств. Все это из-за снижения скорости сети.

Во время исследования в Google выяснили, что люди используют смартфоны в следующих случаях:

Планшеты так же используются для развлечения и серфинга в интернете. В то же время настольные компьютеры используются для более серьезных или наукоемких задач. По данным исследования смартфоны наиболее распространены в следующих видах онлайн активности:

Если вы проектируете сайт, подумайте о том, насколько легко пользователи смогут решать данные задачи, подумайте о времени, которое они готовы потратить на сеанс с мобильного устройства и о том, позволит ли мобильная сеть сделать им это. Также помните о том, что у пользователей, имеющих только мобильные устройства, не остается выбора, и они используют их для всех перечисленных выше задач. Пользователи не любят тратить время впустую, даже если они используют мобильное устройство. Ваш сайт должен быть интуитивно понятным и простым в использовании, а также он должен как можно быстрее стать интерактивным в независимости от платформы.

Мобильное оборудование

Кроме того, даже, если использовать WiFi на мобильном устройстве, опыт использования сайта вероятнее всего все равно не будет такой же, как от настольного браузера, из-за длины антенны и выходной мощности. WiFi может задействовать более одной антенны одновременно для передачи и приема сигналов; однако, большинство смартфонов не располагают технологией многолучевого распространения. Кроме того, WiFi антенны в ноутбуках и настольных компьютерах значительно больше, чем в мобильных устройствах.

Телефоны также предпринимают попытки в увеличении эффективности аккумуляторов (что является большой частью пользовательского опыта на смартфонах), и одни из способов это ограничение доступа к сети. Настольные компьютеры не работают от батареи, так что они могут использовать WiFi без манипуляций с ограничением доступа к сети. И наконец, большинство смартфонов, находящихся в обращении в настоящее время, используют старые более медленные стандарты WiFi. Самый современный стандарт, 802.11 ac поддерживается только новейшими смартфонами.

Многие меры по оптимизации, улучшающие скорость загрузки страниц, также снижают потребление батареи устройством, что приводит к положительному опыты использования. Такие вещи, как уровень сигнала WiFi, JavaScript рендеринг и рендеринг изображений, все это влияет на разрядку батареи на мобильных устройствах. В очередном исследовании ученые выяснили, что, если Amazon конвертирует все свои изображения в JPEGс качеством в 92%, это позволит сохранить 20% энергии, необходимой на загрузку домашней страницы на устройствах под управлением операционной системы Android. На устройствах под управлением FacebookОС то же самое позволит сохранить до 30%. Такие изменения положительно скажутся на пользовательском опыте, уменьшив потребление батареи без видимой потери качества изображений. Другое исследование показало, что до 35% времени загрузки страницы в критических ситуациях тратится на такие вычисления, как HTML парсинг и выполнение JavaScript на мобильных устройствах.

Итогом служит то, что усилия, направленные на оптимизацию вашего сайта, влияют на весь пользовательский опыт, включая время жизни батареи.

Влияние дизайнеров на производительность

Задержка между тем, как пользователь введет URL, кликнет на кнопку или выберет элемент из выпадающего списка, и тем, через какое время страница ответит, все это повлияет на восприятие сайта. Задержка менее 100 миллисекунд практически не ощущается пользователем, в то же самое время задержка от 100 до 300 миллисекунд уже ощутима. Задержка от 300 до 1000 миллисекунд создает у пользователя ощущение, будто он чувствует, как все эти механизмы обрабатывают его запрос. При задержке более 1000 миллисекунд пользователь мысленно уже переключается с данного сайта.

Данные цифры очень важны, так как все вместе мы создаем все более функциональные сайты: множество динамических элементов, все больший объем файлов JavaScript, красивые анимации, сложная графика и т.д. Вы можете сделать упор на оптимизации дизайна и макета сайта, но это в свою очередь скажется на скорости загрузки страниц. Некоторые «адаптивные сайты», далеко не так адаптивны и используют излишне громоздкую разметку и большое количество изображений, которые применяются для отрисовки сайта на маленьких экранах; разработчики могут неосознанно заставлять своих пользователей загружать ненужные им ресурсы.

Дизайнеры, использующие адаптивный веб-дизайн, уже решили, каким образом контент должен отображаться на экранах; такие решения значительно влияют на скорость загрузки страниц, и адаптивный веб-дизайн предоставляет огромные возможности по увеличению производительности в будущих дизайнерских проектах.

Подумайте о вашем последнем дизайне. Сколько разных оттенков насыщенности шрифта вы использовали? Сколько изображений было? Сколько весят эти изображения, и какой у них формат? Как ваш дизайн повлиял на планирование разметки и CSS кода?

Решения, принятые дизайнерами, обычно сводятся к тому, как построить веб-сайт. Первоначальная фаза проектирования включает:

Все эти решения, как правило, определяются в начале разработки, так как они имеют огромное значение на конечной скорости загрузки страницы. Дабы проиллюстрировать это возьмем, к примеру, логотип. Мы планируем поместить его в DIVс ярко голубым фоном, как показано на рисунке 1-3.

Рисунок 1-3. Пример логотипа с прозрачным фоном, который будет наложен на DIV с ярко голубым фоном.

Прозрачность и наложение влияют на требуемый формат изображения, а также на его размер. Дизайнеры, учитывающие время загрузки страниц могут задаться вопросом «А что если я использую JPEG или PNG-8 без прозрачности? Что если я использую ярко голубой фон прямо на PNG-8? Как это повлияет на производительность?». Протестируем и сохраним логотип в форматах JPEG и PNG-8, чтобы узнать вес файлов (Рисунки 1-4 – 1-7).

Рисунок 1-4. Оригинал PNG-24 с прозрачным фоном: 7.6 Кб

Рисунок 1-5. PNG-8 с однотонным фоном: 5.0 Кб

Рисунок 1-6. PNG-8 без фона: 2.7 Кб

Рисунок 1-7. JPEG 75% качество с однотонным фоном: 20.2 Кб

По результатам тестирований видно, что на вес файла в разных форматах сильно влияет фон и прозрачность. Более подробно оптимизацию и вес изображений мы рассмотрим в Главе 3.

Нам предоставляются огромные возможности в манипуляции, а также мы можем оценить влияние различных дизайнерских подходов. В Главе 3 мы рассмотрим, как выбирать и сжимать различные форматы изображений, а в Главе 6 мы научимся измерять время загрузки страниц.

Данные решения влияют на производительность, как новых дизайнов, так и редизайнов сайтов. Каждый существующий сайт может быть очищен от лишнего мусора и протестирован на производительность. На одном сайте мне удалось сократить время загрузки страниц на 50%, почистив CSSфайлы, оптимизировав изображения, приведя в норму цветовую палитру сайта, а также при помощи реорганизации контента в шаблоне. Вместо того, чтобы заняться полным редизайном сайта, я сосредоточился на упрощении громоздкого HTML и CSS кода и в результате получил маленький HTML с CSS, а также уменьшенный вес файлов.

В Главе 4 вы можете подробнее прочитать о том, как очистить HTML и CSS с прицелом на производительность.

Даже если в вашей должности нет слова дизайнер, но вы решаете, как сайт будет выглядеть, и как он должен ощущаться, то ваши решения напрямую повлияют на производительность. Производительность это общая ответственность, все члены вашей команды ответственны за нее. Учитывая производительность в проектировании, в будущем вы только привлечете новых пользователей. Баланс между удобством и производительностью должен иметь первостепенное значение в дизайнерских проектах, подробнее это будет рассмотрено в Главе 7. Это также огромная возможность для кооперации между различными отделами в организациях; дизайнеры могут работать вместе с разработчиками, чтобы создать неповторимый пользовательский опыт.

В следующей главе мы рассмотрим основы времени загрузки страницы, включая то, как браузер получает и отрисовывает контент. Понимание того, как браузеры ваших пользователей взаимодействуют с файлами на сервере, как вес файлов влияет на скорость загрузки и то, как пользователи воспринимают производительность вашего сайта, существенно поможет вам, как дизайнеру, найти баланс между удобством интерфейса и производительностью.

Источник: //designingforperformance.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: