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

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

Ваш веб-сайт будет видоизменяться, адаптируясь к особенностям работы на персональных компьютерах, планшетах и смартфонах, сможет работать практически на любых устройствах и в любом случае сайт будет загружается быстрее. Трудно переоценить важность этого метода, но если вам нужен хороший пример, то можно прочитать о том, что случилось с YouTube когда Google решил уменьшить вес его страниц (спойлер: перед ним открылись новые возможности).

Следующие три скриншота показывают результаты выполнения RESS оптимизации и полученные габариты страниц:

Оригинальное изображение: 1027 килобайт (Увеличенная версия).

Частичная оптимизация: 253 килобайт (Увеличенная версия).

Полная оптимизация: 153 килобайта (Увеличенная версия).

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

Если отбросить языковую проблему, то веб-сайт на самом деле будет доступен по всему миру. Но есть две проблемы, которые будут оказывать влияние на быстродействие независимо от качества оптимизации:

• Разнообразие устройств. Помните ли вы, что означают две первые буквы «W» в аббревиатуре WWW? По-настоящему глобальный веб-сайт должен работать на любых устройствах, которые используются клиентами, с различными стандартами подключения к всемирной паутине.
• Ограниченная возможность подключения. Во многих местах ограничена или вовсе отсутствует возможность подключения к интернету, будь то в плане мощности, передачи данных и так далее. Эта проблема затрагивает не столько людей, живущих в городах с хорошо развитыми коммуникациями, сколько людей проживающих в менее развитых сельских районах.

Рекомендации, описанные в этой статье, помогут вашему веб-сайту выйти за рамки существующих ограничений и позволят всем и везде с одинаковой легкостью просматривать представленный на сайте контент. Обратите внимание, что для достижения поставленных целей мы будем использовать открытое программное обеспечение в сочетании с устройством обнаружения библиотек. Существует достаточно много устройств обнаружения (например, WURFL, OpenDDR и DeviceAtlas – к слову, в разработке последнего я принимал непосредственное участие).

Мы покажем три уровня оптимизации, каждый из которых основан на предыдущем, но каждый из которых также может быть реализован и отдельно. Такая оптимизация предполагает выполнение следующих действий:

1. Уменьшение полезной нагрузки изображения (максимальный эффект),
2. Уменьшение полезной нагрузки JavaScript и CSS,
3. Дальнейшая оптимизация на основе определения пропускной способности.

Прежде чем мы начнем, давайте выясним, почему процесс оптимизации является таким необходимым.

Использование фоновых изображений в адаптивном веб-дизайне и RESS.

Использование адаптивного веб-дизайна быстро становится предпочтительным подходом при создании веб-сайтов для мобильных устройств, и это происходит не без оснований. На многих веб-сайтах адаптивный дизайн позволяет достигнуть разумного баланса между удобством использования на мобильных устройствах и простотой реализации.

Но дизайн – это не только внешний вид. Главная проблема, которую все хотят решить с помощью адаптивного веб-дизайна, заключается в невозможности устройств «по умолчанию» (при использовании простого способа отображения и скрытия контейнеров с display: none;) в одинаковой степени распределять полезную нагрузку. Это означает, что на устройства с экранами низкого разрешения будут отправляться те же изображения, что и на устройства с высоким разрешением, хотя и очевидно, что эти изображения не могут быть показаны в своём родном разрешении. Это в лучшем случае неэффективно, а в худшем случае может ограничить рыночные возможности. Результатом станет страница, которая хорошо работает на высокофункциональных устройствах с хорошим подключением.

Чтобы решить эту проблему были предприняты многие попытки с различной степенью эффективности. Вероятно, наиболее перспективный подход – заставить браузер определять наиболее подходящую версию изображение для выборки. W3C (Консорциум World-Wide Web) проявил инициативу в создании стандартизированного подхода, который в ближайшее время вряд ли станет обычной функциональной возможностью в браузерах. Все возможные варианты решения – новый <picture> элемент и новый srcset атрибут для <img> — имеют свои недостатки и преимущества. В этой статье я не буду заниматься их обсуждением и вместо этого рекомендую прочитать публикацию Джейсона Григсби под названием «Реальный конфликт <picture> и @ srcset». В то же время, polyfills такие как srcset-polyfill, созданный Борисом Смусом будет имитировать поведение некоторых из предложенных атрибутов.

Мы опишем относительно простой подход к минимизации веса страницы в RWD с помощью возможностей серверных элементов. На сервере мы будем использовать устройства обнаружения для оптимизации изображений. Они необходимы для удовлетворения запросов браузеров по уменьшению размеров изображений до оптимального состояния.

Некоторые люди используют Sencha.io Src (TinySRC) и другие библиотеки для изменения параметров изображения, но вы так же легко сможете сделать это самостоятельно, к тому же будете иметь полный контроль над результатом. Да, это обмен одной внешней зависимости на другую, но в этом случае вы можете оптимизировать гораздо больше, чем только лишь изображения. Для этой цели мы будем использовать PageSpeed, проект с открытым исходным кодом от Google.

PageSpeed представляет собой веб-серверный модуль, который позволяет использовать на сайте несколько лучших подходов, при этом разработчику не нужно прерывать свой рабочий процесс. Такая оптимизация включает комбинирование и уменьшение JavaScript и CSS файлов, встраивание небольших ресурсов, удаление из каждого файла неиспользуемых метаданных и повторное кодирование изображения для получения наиболее эффективного формата доступного для пользователя. PageSpeed доступен как для Apache, так и для NGINX. Мы будем пользоваться преимуществами малоиспользуемых функциональных возможностей PageSpeed, предназначенных для изменения размера изображений.

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

Эта статья предполагает, что вы используете веб-сервер Apache и довольно удобный язык программирования PHP, но данный метод будет работать и при использовании сервера NGINX и любых языков программирования.

Веб-сайт.

Используемый нами в качестве образца веб-сайт, основан на веб-фреймворке с открытым исходным кодом от Twitter под названием Bootstrap. Он поможет спасти мир от моих навыков дизайна. Я создал одностраничный «веб-сайт» для вымышленного магазина по продаже мобильных телефонов. Страница имеет визуально богатое оформление, со среднеотраслевой организацией на основе HTML, изображений и JavaScript. Эта страница основана на слегка модифицированной версии карусельного шаблона от Bootstrap. На картинке ниже вы можете увидеть данную страницу в полном объеме, именно так, как она будет представлена в браузере персонального компьютера:

Веб-сайт имеет среднеотраслевую полезную нагрузку, которая распределяется следующим образом:

Компонент	Размер на диске
HTML	12 килобайт
Изображения	941 килобайт (73%)
JavaScript (в основном минимизированный)	159 килобайт
CSS	170 килобайт
Общий размер	1281 килобайт

Инструкции.

Шаг 1.

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

Далее необходимо перезагрузить веб-сервер.

Шаг 2.

Установить библиотеку обнаружения устройств. В нашем случае, если вы используете DeviceAtlas (который мы будем использовать и в этом примере), то вам нужно будет ввести лицензионный ключ в DeviceAtlasCloud/Client.php файл после распаковки архива. Затем можно будет использовать DeviceAtlas для определения оптимального размера изображений.

Шаг 3.

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

<?php
  include 'DeviceAtlasCloud/Client.php'; // instantiate client
  $results = DeviceAtlasCloudClient::getDeviceData(); // fetch props 
  $props = $results['properties']; // store result
  // set $width to correct width or "" if unknown 
  $width = (isset($props['displayWidth'])) ? $props['displayWidth'] :""; 
?>

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

Шаг 4

Последним шагом будет присвоение width атрибут всем изображениям, которые могут потребовать изменения размера и установка на использование $width переменной:

<img src="http://media.smashingmagazine.com/wp-content/uploads/2013/07slide-01.jpg" width="<?php echo $width; ?>" alt="image description" />

Таким образом, теперь изображения будут иметь свой набор width атрибутов, зависящих от $width переменной, которая для каждого устройства автоматически устанавливается на максимальную ширину дисплея. Затем PageSpeed заметят width="…" тег для каждого изображения и уменьшает его в случае необходимости, заменяя атрибут источника изображения на такое же изображение нового размера. Нет необходимости для установки height атрибута, поскольку PageSpeed автоматически сохраняет соотношение сторон. Изменение размеров изображения кэшируются, так что на самом деле весь этот процесс не оказывает существенного влияния на сервер. Ознакомьтесь с PageSpeed конфигурацией ниже для более точного управления кэшированием.

Используйте переменную width только для тех изображений, размеры которых нужно уменьшать для корректного отображения на определённых устройствах, то есть, не следует добавлять её к изображениям, которые уже и так достаточно малы (например, буллиты и иконки). В некоторых ситуациях наиболее мудрым решением будет ручное изменение размера изображения, которое требует особого внимания. Кроме того, следует отметить, что width атрибут для каждого изображения будет хорошо работать с CSS, используемой для стилизации изображения. Любое использование системы управления контентом (CMS) скорее всего, приведёт к необходимости использования другого подхода, в зависимости от того, насколько широкий доступ предоставляется к базовому HTML.

Использование фоновых изображений может требовать другого подхода, в зависимости от того, как они реализуются на сайте. Тем не менее, PageSpeed будет читать встроенные style="…" теги.

Результат.

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

До внесения изменений общий размер страницы был 1027 килобайт, независимо от используемого устройства (т.е. динамический диапазон равен 1.0). Распределение памяти стало выглядеть следующим образом:

Компонент	Размер на диске	Размер передачи по сети
HTML	12 килобайт	3 килобайта
Изображения	941 килобайт	941 килобайт (73%)
JavaScript	159 килобайт	55 килобайт
CSS	170 килобайт	27 килобайт
Общий размер	1281 килобайт	1027 килобайт

Данные результаты относительно размеров страницы были получены благодаря gzip сжатию от Apache. RWD позволяет создать визуально привлекательную страницу для маленьких экранов, но это не самое эффективное использование сетевых ресурсов, поскольку оригинальные изображения примерно в пять раз больше (в пикселях), чем среднестатистический экран телефона, а значит невозможно выполнить отображение изображения при полном разрешении без панорамирования. На самом деле такой размер страницы означает, что на некоторых устройствах она даже не догрузится.

После выполнения перечисленных выше действий, разбивка полезной нагрузка для iPhone будет выглядеть следующим образ� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров