Способы ускорения отзывчивых сайтов.

Перевод статьи:  How to speed up responsive websites.
Автор:  Kerry Butters.

За последнее десятилетие выражение «отзывчивый веб-дизайн» прочно закрепилось в качестве профессионального термина сообщества веб-разработчиков. Это объясняется тем, что концепция, которую он представляет, идеально вписывается в сегодняшний мир разнообразия устройств отображения информации, в котором мы живем. Однако за удобство пользователя нам приходится платить ценой производительности, что связано с увеличением объема создаваемых нами файлов. Это обстоятельство подтолкнуло некоторых экспертов к высказываниям, в которых они придерживаются мнения, что особых причин для радости, связанных с отзывчивым дизайном, пока нет. Все это отчасти напоминает времена становления Flash технологии. Чего греха таить, на данный момент в этой области действительно существуют некоторые трудности, касающиеся производительности, однако, они в определенной степени могут быть преодолены путем несложных настроек, компрессии и использования адаптивного подхода в представлении изображений.

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

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

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

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

Способы улучшения производительности.

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

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

В первую очередь нужно быть полностью уверенным в том, что на целевое устройство отправляются только те ресурсы, которые действительно необходимы. Это может быть достигнуто путем минимизации количества HTTP запросов, благодаря чему пользователю понадобится значительно меньше времени на ожидание загрузки DOM структуры документа. Одним из эффективных шагов в этом направлении является сжатие CSS и JavaScript ресурсов, которое можно реализовать с помощью средств, подобных CSS фреймворку с открытым кодом Compass. Такой подход позволяет разработчикам формировать более чистую разметку, а также создавать спрайты и расширения без лишних затрат.

Что касается JavaScript, то для сжатия этого кода можно использовать инструменты типа UglifyJS.

Условная загрузка.

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

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

Изображения.

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

Если сайт к тому же содержит массу накопленного ранее контента, не предусмотренного для альтернативных способов отображения, то это может привести к еще большему ухудшению производительности и в этом случае без принятия мер по предотвращению загрузки такого контента просто не обойтись. Несмотря на то, что способ решения данной проблемы очевиден — внесение определенных изменений в разметку, а именно, модификация значений таких ее компонентов как src атрибуты элементов изображений или форматирование самих элементов, все же более простым решением будет использование PHP инструментария Adaptive Images. Он определяет размер экрана целевого устройства и автоматически создает, кэширует и доставляет соответствующим образом пропорционально уменьшенное, встраиваемое HTML изображение, позволяя избежать сложного процесса редактирования разметки. При использовании этого средства в связке с технологией Fluid Image, оно превращается в максимально доступное решение данной проблемы, позволяющее сэкономить массу времени. Для работы Adaptive Images требуется минимум ресурсов — один htaccess файл, один php файл и единственная строка JavaScript кода, необходимая для определения размера экрана устройства посетителя сайта.

Текст.

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

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

Так почему мы всё-таки выбираем отзывчивый дизайн?

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

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

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

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

Статистика.

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

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

Такое заключение сделано с учетом среднего прироста мобильных посетителей на 23%, снижением показателя случаев отказов на 26% и увеличением среднего времени пребывания на ранее посещаемых сайтах приблизительно на 7,5%.

Как сообщает гигант розничной торговли ультрамодной одежды "O'Neill", в результате развития отзывчивого дизайна своего сайта им удалось повысить приходящуюся на пользователей iPadов и iPhoneов долю целевого трафика на 65,7%. Что объясняет 101,2% рост прибыли от продаж благодаря пользователям только этих устройств.

Что касается устройств, функционирующих на платформе Android, то показатель эффективности в этом случае превзошел все ожидания, достигнув уровня 407,3%, что привело к росту доходов на 591,4%. Более скромные результаты прогресса приходятся на немобильные устройства, хотя здесь тоже можно увидеть некоторый прирост.

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

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

Статистика говорит сама за себя — 67% пользователей сказали, что они производили покупки непосредственно на мобильных сайтах. К тому же существует мнение, что уже в следующем году часть Интернет трафика, приходящаяся на мобильные устройства превысит долю стационарных ПК. Теперь причина роста заинтересованности бизнес структур в самых эффективных из всех мобильных веб-решений вполне очевидна.

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

Обзор комментариев

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

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

Я всё-таки соглашусь с мнением, выраженным в одном из комментариев к статье, что «нормальный» сайт будет выглядеть достойно на любом конечном устройстве. Что имеется в виду под нормальным сайтом? Это обычный статический (в плане стиля) сайт, который создан таким образом, что не создает никаких препятствий для изменения его визуальных параметров непосредственно пользовательским устройством. Дело в том, что каждое мобильное устройство типа iPhone, iPad и их аналоги на других платформах самостоятельно адаптирует внешний вид сайта в соответствии с возможностями своих аппаратных ресурсов (в данном случае дисплея), если разработчик этого сайта не использовал запрещающие такое преобразование средства форматирования. Просто необходимо создавать разметку и стилевое оформление таким образом, чтобы оставлять пользовательскому агенту пространство для конечной, локальной оптимизации. И здесь нет ничего кардинально нового, все, что от вас требуется — следовать ключевым, давно установившимся практическим принципам веб-разработки, а именно: с осторожностью и лишь при необходимости использовать абсолютные размеры, предоставлять несколько альтернативных вариантов шрифта и им подобные вещи. Широкий выбор подходящих для этого средств представлен в CSS3. Соответствующая обработка изображений и других загружаемых ресурсов, все это само собой разумеется. Вот что имеется в виду под «нормальным» сайтом. Все дело в корректности, адекватности и оптимальности (в данном контексте выражаемых одним словом «нормальности») вашего стиля разработки.

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *