Need Of The Hour — это не адаптивный дизайн, а адаптивная производительность
В последнее время адаптивный дизайн продемонстрировал несколько проблем с производительностью. Ирония в том, что адаптивный дизайн довольно хорошо работает на новейших смартфонах, но не более того.
Вы можете быть сбиты с толку, поскольку у большинства пользователей сети есть смартфоны высокого класса. Тем не менее, большая часть населения по-прежнему использует мобильные устройства с небольшим размером экрана под управлением старой версии Android или iOS и, возможно, просто обычный телефон с небольшим набором функций. В результате адаптивный дизайн не обслуживает более широкую аудиторию, как предполагалось.
Давнее мнение о том, что адаптивный дизайн предназначен для мобильных устройств с любым размером экрана, во многом связано с этой проблемой. Поскольку производительность падает, а неудовлетворенность растет, необходимо выйти за рамки адаптивного дизайна. Вместо этого следует сосредоточиться на обеспечении быстродействия. Этот пост о том же.
Итак, большой вопрос, что делать?
Откажитесь от концепции дизайна, ориентированной на настольные компьютеры
Существенным фактором этой постоянной проблемы является то, что основное внимание по-прежнему уделяется подходу к проектированию, ориентированному на настольные компьютеры. Акцент делается на разработке веб-сайта для настольных компьютеров, а затем на других устройствах, таких как смартфоны и планшеты. Для любой недостающей функциональности разработчики щедро используют прокладки и полифиллы. Конечно, есть обширные библиотеки для обеспечения быстрой разработки. Однако это не решает проблему несовместимости браузера. Оправданно ли заниматься концепцией дизайна, которая не дает желаемых результатов?
Не очень сложно реализовать подход к дизайну, ориентированному на мобильные устройства, цель которого будет заключаться в том, чтобы предлагать мобильному пользователю только нужную информацию на его или ее экране, а не все то, что убивает устройство. Люк Вроблевски впервые концептуализировал этот подход к проектированию в 2011 году, и с тех пор многие отраслевые эксперты высоко оценили его новаторский подход к проектированию.
Больше данных, даже если это занимает доли секунды, может оказать заметное влияние на общее время загрузки. Однако также верно и то, что веб-сайты становятся все более насыщенными графическим контентом, и все больше людей используют свои мобильные устройства для доступа к ним. Когда пользователь вводит URL-адрес веб-сайта на мобильном телефоне с экраном с низким разрешением, его цель всегда состоит в том, чтобы получить доступ к содержимому веб-сайта, но то, что он испытывает, — это кошмар. Это из-за сложности навигации по бесконечной ненужной рекламе. Удалите такие элементы контента, которых можно избежать, чтобы позволить вашему пользователю получить доступ к основному контенту. Это увеличивает посещаемость сайта, так как помимо пользователей с высокопроизводительными смартфонами многие будут заходить на ваш сайт через мобильные устройства с низким разрешением. Предоставление текстовой версии имеет смысл, если мобильные устройства имеют ограниченные возможности. но опять же, вы можете сказать, что пользовательский опыт скомпрометирован. Что ж, это так, но это все же лучше, чем вообще не получать контента. По крайней мере, в таком случае пользователям будет доступна основная информация о вашем сайте. Есть ли смысл разрабатывать веб-сайт таким образом, чтобы уменьшить его потенциальный охват?
Вы наверняка согласитесь с тем, что бесконечное ожидание только проверки сайта никого не волнует. Согласно некоторым опросам, проведенным Akamai и Gomez.com, примерно 50% веб-пользователей ожидают, что веб-сайт загрузится в течение 2 секунд или даже меньше. Вероятность отказа от сайта выше, если сайт не загружается в браузере всего за 3 секунды! Более того, большинство веб-сайтов электронной коммерции в настоящее время имеют большое количество кнопок социальных сетей, таких как Facebook, Google Plus, Twitter, LinkedIn и т. д. Знаете ли вы, что эти кнопки добавляют более 500 КБ к вашему адаптивному сайту и влияют на его производительность? Одна только кнопка «Мне нравится» в Facebook требует сжатого кода размером 270 КБ! Это также требует нескольких HTTP-запросов. Вместо,
Производительность веб-сайта напрямую влияет на эффективность бизнеса, а медленно реагирующий веб-сайт никогда не приносит пользы бизнесу. Хотите верьте, хотите нет, но большинство мобильных пользователей не заинтересованы в проведении исследований или чтении длинных статей. Большинство из них используют свои мобильные устройства для быстрого доступа к Facebook, WhatsApp, Twitter и для удовольствия от покупок в Интернете. Более того, мобильные — это уже не тренд, за ними будущее.
Согласно прошлогодней статистике Comscore, количество пользователей Интернета только с мобильных устройств в США резко возросло, в то время как количество пользователей только с настольных компьютеров сократилось до 10,6%.
Нужно еще что-то сказать, чтобы убедить?
Обеспечьте изящную деградацию
За последние несколько лет вы, возможно, столкнулись с новым модным словечком в мире адаптивного дизайна, и это «изящная деградация». Да, изящная деградация подразумевает, что даже если функция не работает успешно, она должна дать сбой таким образом, чтобы обеспечить приемлемое удобство использования. Это означает создание дизайна веб-сайта для настольных компьютеров, а затем постепенное перемещение на планшеты, смартфоны и обычные телефоны. Производительность адаптивного дизайна, в котором веб-сайт изящно деградирует, обязательно будет высокой, поскольку пользовательский опыт здесь всегда на высшем уровне. Веб-сайт будет оставаться функциональным, несмотря на любые недостатки, и посетитель, несомненно, будет впечатлен общим качеством.
Теперь у вас может возникнуть вопрос: что же такого захватывающего в изящной деградации? Ответ прост. Это потому, что он делает ваш контент видимым и читаемым независимо от браузера, что является замечательным достижением! К счастью, если вы используете CSS3, изящная деградация становится легкой задачей, так как большинство свойств CSS3 автоматически ухудшаются, например, закругленные углы становятся квадратными, текст обтекается вместо одной строки, градиенты становятся плоскими цветами и многое другое.
Приведем пример изящной деградации. Предположим, вы разработали адаптивный веб-сайт с функциями JavaScript, и эти функции не поддерживаются вашим браузером или могут быть отключены на стороне вашего клиента. Итак, что вы можете сделать, чтобы получить контент? Что ж, в таком случае изящная деградация позволяет вашему браузеру отображать содержимое внутри тега «noscript».
Это вы можете лучше понять с кодировкой, приведенной ниже:
<noscript>
<h1>Dear John, you have encountered a problem!</h1>
<p>Your browser lacks support for JavaScript or is temporarily disabled.
Visit our <a href="/support/browsers/">browser support</a> for help.</p>
</noscript>Есть еще один пример изящной деградации, которым я хотел бы поделиться, и это использование HTML5 YouTube для воспроизведения видео. Предположим, ваш браузер не поддерживает HTML5, видео будет отображаться с использованием Flash, а если даже Flash не установлен, вы получите сообщение о необходимости установить его на свое мобильное устройство. В любом случае вы сможете посмотреть видео. Однако у этой изящной деградации есть один недостаток: несмотря на хорошую производительность, вам придется идти на компромисс с некоторыми элементами дизайна, если вы используете устаревшие браузеры. Я предполагаю, что определение основных визуальных элементов вашего веб-сайта заранее может помочь.
Нет необходимости хранить неиспользуемые библиотеки
Лучшей практикой может быть отказ от хранения неиспользуемых библиотек. Да, это правда, что отслеживание используемых и неиспользуемых библиотек требует очень много времени, но оно действительно того стоит. Иногда вы могли заметить, что после включения библиотеки вы используете только одну функциональность. Иногда их может быть два или даже три. Наиболее часто я использую инструмент для создания адаптивного дизайна — jQuery. На самом деле существует множество библиотек jQuery, помогающих разработчикам создавать адаптивные веб-сайты. Включение нескольких библиотек, таких как библиотеки JavaScript, только потому, что вам понравились некоторые виджеты, значительно увеличит время загрузки вашей страницы. Тем не менее, было бы неплохо проанализировать, какие библиотеки используются и в какой степени.
Проверить наличие функций
Вы можете проверить, поддерживает ли ваше устройство определенную функцию, прежде чем активировать ее. Например, бывает так, что хотя вы установили последнюю версию Google Chrome на свой устаревший телефон Android, он все равно не отображает ваш сайт. Иногда при попытке загрузить такой веб-сайт браузер зависает настолько сильно, что все мобильное устройство перестает отвечать на запросы. Вам нужно перезагрузить устройство, и это последнее, чего вы хотели, не так ли? Многие пользователи некоторых веб-приложений уже страдают из-за этой проблемы.
Недоступность функций на устройствах и, тем не менее, разработка веб-сайтов или приложений привели к некоторым заметным проблемам, таким как мгновенный сбой приложений Google Hangout на устройствах Android по всему миру, независимо от типа браузера. И это несмотря на то, что приложение было легким. Вы можете возразить, что пользователи использовали более старые версии Android-смартфонов, но также верно и то, что такие устройства все еще доступны с полки как совершенно новые в любом из мобильных магазинов. Многие мобильные пользователи сталкиваются с той же проблемой производительности в приложениях YouTube и Twitter. Даже обновление службы Google Android System Webview через Google Play приводит к зависанию многих смартфонов, превращая их в настоящий кошмар для пользователей.
Оптимизация изображений
Включение визуально привлекательных больших изображений всегда заманчиво для дизайнеров. Проблема возникает, когда они не сжимают эти изображения перед загрузкой в CMS. Это особенно верно для нескольких веб-сайтов электронной коммерции в Интернете. Согласно недавнему исследованию Radware, страницы становятся больше, и примерно 45 процентов из 100 лучших розничных сайтов не используют сжатие изображений. Это делает такие сайты более громоздкими и, как следствие, увеличивает время загрузки, но как дизайнер вы можете избежать этой проблемы.
Сделайте изображения меньшего размера с помощью подходящего инструмента оптимизации изображения. На самом деле недостатка в таких инструментах в Интернете нет. Некоторые из примечательных из них, которые вы можете использовать, — это Dynamic Drive, Smush it и Riot. Если вы профессионал в Photoshop, вы также можете самостоятельно оптимизировать размер изображения. Используйте интеллектуальную технику сжатия и удалите все лишние метаданные. Преобразование графики в PNG, цветных изображений в JPEG и анимированных в GIF также помогает.
Приспособлен для экстремальных случаев
Когда вы начинаете разрабатывать дизайн, вы, должно быть, замечали, что у вас возникает соблазн создавать более простые страницы. По крайней мере, это позволяет вам что-то показать заинтересованным сторонам. На первый взгляд это может показаться приятным, но если вы сосредоточите свои усилия на самых сложных сценариях, в начале вы получите хороший результат.
Например, веб-страница с некоторыми статьями, блогами и пресс-релизами. У него тоже должно быть название. Теперь, что произойдет, если в заголовке, который вы думали показать «Советы по адаптивному веб-дизайну», будет отображаться заголовок «10 основных советов и методов для успешного дизайна адаптивного веб-сайта»? А вот это крайний случай.
Усилия, подобные описанным выше, по оптимизации производительности вашего адаптивного веб-сайта кажутся невидимыми. Тем не менее, эти усилия приносят хорошую отдачу от счастливых и довольных пользователей. Вы можете воспользоваться различными инструментами, такими как инструменты Pingdom, которые позволят вам легко отслеживать время загрузки вашего адаптивного веб-сайта. Не пропускайте жизненно важный аспект тестирования, чтобы убедиться, что ваш адаптивный веб-сайт работает так, как задумано. Протестируйте его на как можно большем количестве реальных устройств.
Вы также можете использовать такие ресурсы, как Screenfly, которые позволяют протестировать ваш сайт на разных разрешениях экрана. Вы можете утверждать, что все эти стратегии требуют значительного количества времени, но опять же, нужно сильно попотеть, чтобы пожинать плоды. В настоящее время создание адаптивного веб-сайта с адаптивной производительностью имеет важное значение, тем более что Google оценивает сайты на основе их производительности. Если вы дизайнер или разработчик, не ограничивайте себя какой-либо из приведенных выше рекомендаций. Вам следует искать другие решения и прилагать все усилия, чтобы создать веб-сайт с отзывчивой производительностью.