⬆️ Победители в номинации Search Innovation
Google Partner

Оптимизация сайтов для мобильных устройств. Часть первая — графика

Автор:
Рецензент: Олег Гаврилюк
Руководитель оптимизаторов
5,00 1 оценка
1 комментарий
Оптимизация сайтов для мобильных устройств. Часть первая — графика

Прошлогоднее исследование компании Keynote (PDF) показывает, что порядка 80% пользователей не удовлетворены скоростью работы мобильных сайтов. Тем временем прогноз, согласно которому к 2014 году в половине всех случаев пользователи будут входить в Интернет посредством мобильных устройств, действительно сбывается. Потому запуск мобильной версии для сайта (или создание адаптивного дизайна) — задача приоритетная для любого ресурса, особенно если речь идет о коммерческих сайтах.

Предпочтения Google

Компания Google поддерживает три варианта оптимизации сайта под мобильные устройства.

  1. Сайты с адаптивным веб-дизайном. Адаптивный веб-дизайн означает, что на всех устройствах открываются одни и те же URL. Код HTML при этом не меняется, а адаптация страницы к определенной платформе обеспечивается за счет разметки CSS. Google рекомендует использовать эту конфигурацию.
  2. Сайты, которые на любых платформах задействуют один и тот же набор URL, но при этом обычным компьютерам и мобильным устройствам динамически предоставляется разный код HTML (и CSS).
  3. Сайты, которые предоставляют разные URL обычным компьютерам и мобильным устройствам.

Итого, вы можете приобрести уже готовую адаптивную тему для своей CRM, поставить задачу для своего веб-дизайнера переработать уже существующую тему или создать отдельный веб-сайт, рассчитанный на мобильные устройства.

Чего хотят пользователи

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

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

Скорость и латентность сети

К сожалению, даже 3G-интернет в Украине оставляет желать лучшего, не говоря уж о более прогрессивных технологиях. Впрочем, не только скорость подключения играет ключевую роль во время загрузки страниц. Так, гугловский инженер из команды Make The Web Faster уверяет, что скорость сети не столь важна, как ее латентность (определяющая, сколько времени требуется пакету данных для прохождения от точки А до точки Б, а также как это время соотносится с ожидаемой нормой). Нюансов масса, и умение учесть их все — сродни искусству.

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

Работа с изображениями

Загрузка изображений через CSS

Один из самых действенных способов ускорения сайта — это оптимизация мультимедийного контента. Автор тематической статьи в Smashing Magazine подчеркивает, что полагаться на display: none или visibility: hidden не стоит, т.к. в этом случае изображения все равно подгружаются. Взамен можно использовать код, который успешно работает на многих сайтах компании Amazon:

Таким образом, мы загружаем картинки в качестве фонового изображения в CSS, а также используем media queries для того, чтобы, при необходимости, их скрыть.

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

Схема data: URI

Data: URI — это схема, которая позволяет включать небольшие элементы данных в строку URL, как если бы они были ссылкой на внешний ресурс. Таким образом, можно работать только с HTML и CSS, не используя ни единой ссылки на внешние файлы. Наиболее распространенное применение данной схемы — замена изображений и файлов веб-шрифтов на несложный код, заметно уменьшающий кол-во HTTP-обращений.

Используется следующий формат:

Например, вот логотип Smashing Magazine, созданный таким методом:

И сам код:

code03

WordPress.com

Такой способ используется на многих ресурсах, включая адаптивные сайты WordPress.com или Boston Globe, которые в среднем загружаются за 4 секунды. Практически вся графика и веб-шрифты «Водрпресса» — это data: URI.

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

SVG вместо изображений

Работа с масштабируемой векторной графикой проходит по аналогии с предыдущим методом. SVG точно так же можно включить в HTML-код, чтобы сократить количество запросов. Такую графику следует делать в специализированных программах типа Adobe Illustrator. Создав изображение, копируем код в текстовом формате (удалив все ненужные мета-данные), затем конвертируем в data: URI — и вставляем в шаблон вашего сайта.

Например, такое изображение:

code06

Его исходный код:

И конечный результат:

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

CSS-спрайты для оптимизации логотипов и иконок

Идея спрайтов заключается в «сращивании» нескольких изображений в один файл, что влечет за собой сокращение количества HTTP-запросов. В теории, сделав из четырех изображений один спрайт, вы сократите количество запросов в четыре раза. Далее спрайт отображается с помощью свойства CSS background-position, которое устанавливает местоположение нашей картинки. При этом свойству обычно присваивается пара значений — для определения горизонтального и вертикального положений.

Вот пример таких иконок от Amazon:

code04

Иконические веб-шрифты

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

Суть этого метода схожа с использованием спрайтов. Связав все иконки в один шрифт, вы уменьшаете количество HTTP-запросов до одного. Если же этот веб-шрифт встроен с помощью data: URI, то запросы сводятся к нулю. Именно так работает WordPress, который может послужить примером во многих аспектах веб-разработки.

code05

WordPress.com

Продолжение

По материалам: smashingmagazine.com, searchenginejournal.com

Do something to stop this war! Russians are killing our children and civilians!