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

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

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

Продолжение. Первая часть, посвященная работе с изображениями.

Необходимый минимализм

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

Другой и менее надежный вариант: положиться на сообразительность своего сервера, который будет подставлять нужный стиль на основе данных об устройстве пользователя (такой метод использует адаптивный WordPress.com).

Избегайте Inline Frames

Еще одним важным фактором, влияющим на загрузку страницы, являются iframes. Каждый такой фрейм — это дополнительный HTTP-запрос, и если единичным случаем можно пренебречь, то большое количество фреймов на странице может иметь плачевные последствия. Для иллюстрации — результат небольшого эксперимента Smashing Magazine. Iframes против чистого текста (iPhone 4, iOS 5.0):

01

Только самая полезная информация

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

Минимум скроллинга (разбивка контента на разные страницы)

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

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

02

Такое решение

— снижает кол-во HTTP-запросов,

— существенно снижает размер и вес страницы, следовательно — ускоряет ее загрузку.

Но и это еще не все: уделите особое внимание призыву к действию на мобильной версии сайта. Для этого нужно ответить на единственный важный: заметен ли он при просмотре с устройств различного типа?

Мобильное SEO

По существу, принципы работы мобильного SEO мало чем отличаются от принципов поисковой оптимизации обычных сайтов. Естественные внешние ссылки, перелинковка, грамотные Title и Description, правильное семантическое ядро — это абсолют для любого сайта, однако есть и ряд «но»:

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

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

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

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

По умолчанию изображение не подгружается, но появляется только на больших экранах (с помощью того же Media Queries).

Избегайте использования виджетов

Виджеты имеют воистину роковое влияние на скорость загрузки сайта. Чтобы это доказать, команда Smashing Magazine сделала серию HTML-файлов со встроенными виджетами, вооружилась четвертым iPhone 4 с iOS 5.0 на борту и получила следующий график:

03

Несчастные шесть кнопок загружаются более четырех секунд — вывод очевиден, не правда ли?

Работа с серверной стороной и тестирования

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

  • кэширование HTTP-редиректов для пользователей, который уже были на вашем сайте.
  • объединения цепочек редиректов;
  • сжатие данных (Gzip or DEFLATE), которое уменьшает фактический объем передаваемой информации.

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

По материалам: smashingmagazine.com, searchenginejournal.com
Источник заглавного изображения: whirlidoo.com

  • Network Panel а где там тест для мобильных?
    Mobitest выбор очень скромны.. и т.д.. Есть ли какие-то более «глобальные» сервисы?

  • Лучше обзор нового сервиса от Гугл — Page Speed Service на англ. уже есть на русском не видел :)
    И
    может опишите там один ньюанс, сервис работает только для доменов с
    www, что делать домнам без www. (делать редирект — возможные минуса)

  • Так он как бы только вышел (и еще «по инвайтам»). И про www напишите, а то даже Авеб и тот без http://www…. и о нагрузочном тестировании.

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