Здравствуйте, уважаемые читатели блога сайт. Уже не первый раз в статьях я упоминаю о том, что в рунете наблюдается существенный рост мобильного трафика . И это довольно сильно начинает влиять на жизнь вебмастеров и SEO-шников.
Во-первых, многие владельцы сайтов начинают задумываться о способах заработка на мобильном трафике, которого становится в избытке (даже такой монстр как уже предлагает свои варианты монетизации посетителей, заходящих на ваш сайт с мобильных устройств).
Но самое главное — это то, что у нас идет «во-вторых». Дело в том, что сайт, не адаптированный для приема этого самого мобильного трафика, может серьезно потерять позиции в выдаче за счет ухудшающихся поведенческих характеристик. На мобильном телефоне очень неудобно пользоваться горизонтальной прокруткой при чтении текста или поиска меню, поэтому с таких ресурсов быстро уходят и не переходят, как правило, на другие страницы.
Естественно, что все это я знал уже довольно давно, но постоянно находилось что-то более важное и первостепенное, да и полной концепции адаптации сайта для просмотра на мобильных устройствах у меня никак не складывалось в голове. Однако Гугл меня очень жестко подстегнул вчера утром, прислав сообщение о том, что с 21 апреля при определении поискового рейтинга сайта, Google будет учитывать, удобно ли просматривать веб-страницы на мобильных устройствах .
Что называется, приплыли. Пришлось взять голову в руки и за полдня разработать и воплотить концепцию мобилизации сайта в жизнь. Конечно же, спешка и не полное понимание всех вариантов решения данной проблемы повлияли на изящность решения проблемы, но «что выросло, то выросло», а допиливать можно будет уже по ходу дела. Главная задача выполнена — . А уж как это было сделано читайте в продолжении данной публикации.
Актуальность мобильной оптимизации сайта и стоящие задачи
Итак, сначала опишу сложившуюся ситуацию, а потом уже те варианты ее решения, которые я выбрал. Как уже упоминалось чуть выше, думать об оптимизации страниц сайта под мобильные устройства я начал давно, но иногда для того, чтобы сделать шаг вперед, нужно, чтобы кто-то отвесил хорошего пинка под зад. Таким пинком оказалось письмо от Гугл Адсенса о том, что пора уже наконец решить эту проблему.
Собственно, подобные письма от этого адресата приходили регулярно (там обычно приводили примеры, как хорошо стало тем сайтам, кто оптимизировался под мобильный трафик), но тут был прямо-таки ультиматум:
17 процентов мобильного трафика — это, на мой взгляд, довольно прилично, но если честно, то без упоминания о возможном изменении алгоритма ранжирования Google и учета при этом фактора оптимизированности сайта под мобильные устройства я вряд ли бы пошевелился (всегда найдется более важное занятие, особливо когда у тебя нет в голове конкретного плана решения проблемы).
Кстати, 17 процентов посетителей, заходящих на сайт с мобильных устройств, и там видно, что показатель отказов у таких пользователей значительно выше, чем у тех, кто заходил на сайт с компьютера или ноутбука (т.е. проблема на лицо):
Приведенная в письме ссылка вела на сервис Гугла , где можно было оценить качество мобильной оптимизации вашего сайта по принципу: все нормально, либо полный ужас. Изначально для сайт был конечно печальный вердикт красного цвета (тревоги):
На скриншоте я использовал блог уважаемого Деваки для иллюстрации, ибо сейчас у меня несколько иная картина. В моем случае, как мне кажется, указывалось даже три причины, мешающие просмотру сайта на мобильниках, но этот сервис, по сути, лишь выносит вердикт.
А вот чтобы узнать детали я советую использовать другой сервис от того же Гугла под названием . Тут все будет более-менее детализировано и хотя бы понятно «в какую сторону копать»:
У них еще появился один похожий сервис , но он только дается оценку, а вот рекомендаций по улучшению, к сожалению, нет. Зато можно подписаться на изменения:
В нашем случае обращать внимание стоит на оценку «Удобство для пользователей» на вкладке «Для мобильных». Понятно, что скорость загрузки тоже важна, но лично у меня все уперлось в настройки сервера, которые я сам поменять не в силах (ибо нуб в администрации серверов), а договориться с техподдержкой Инфобокса все никак руки не доходят (опять же, очевидно, нужен пинок под зад, чтобы начать шевелиться). Но это уже, наверное, тема для отдельной статьи.
Стоящая же передо мной задача к вечеру вчерашнего дня была решена и сайт получил 95 и 100 возможных баллов за удобство для мобильных пользователей. Соответственно, и тот сервис Гугла, ссылка на который была приведена в письме, говорит, что теперича все в порядке (спасибо зарядке):
Похвалился, теперь можно приступать к описанию предпринятых шагов и намеченных стратегий. Итак, имелось несколько проблем, которые надо было решить :
Цифрами в пикселах обозначены точки слома. Если вы это окно (с открытым в нем сайтом https://сайт) начнете уменьшать по ширине (в верхнем правом углу браузера есть кнопочка с двумя наложенными друг на друга квадратами — сказал «капитан очевидность»), то именно при прохождении ширины 1025px и 760px будут происходить изменения в дизайне.
Сначала отвалится сайдбар (упадет в самый низ) и чуток поменяется верхнее меню (хочу его в будущем сделать для мобильных выпадающим, но пока еще руки, как обычно, не дошли).
А на второй точке слома вы заметите, что при дальнейшем уменьшении ширины области просмотра текст, картинки и видеоролики начинают подстраиваться под новый размер (адаптироваться к нему), и расположенный внизу сайдбар тоже претерпит изменения. Собственно, я даже шрифт увеличил для экранов по ширине меньших 760px (так, на всякий случай).
Поэтому я решил использовать второй вариант создания адаптивного дизайна для сайта для оптимизации его под мобильные устройства. Заключается он в . В этом случае не нужно будет создавать три копии файла стилей, а достаточно будет внизу основного файла дописать что-то вроде этого:
@media screen and (max-width: 1025px) { CSS свойства, которые поменяют дизайн при ширине экрана меньше 1025px } @media screen and (max-width: 760px) { CSS свойства, которые поменяют дизайн при ширине экрана меньше 760px }
Ну, а в ограниченные фигурными скобочками области достаточно будет прописать те CSS свойства, которые претерпят изменения для адаптации шаблона вашего сайта под мобильные устройства.
Правда, я так до конца и не понял нюансы подключения браузером этих директив, ибо просто так они не работали. Пришлось в файл header.php добавить такие вот строки (подключение одного и того же файла стилей, но при разных разрешениях экрана):
Именно в таком виде все это и работает на данном блоге в данный момент времени.
В общем выбрал я второй вариант, но не сразу, поэтому сравнивать содержимое файлов small-device-min.css и small-device.css с оригинальным style.css, чтобы выявить те строки, куда я вносил изменения. Потом уже эти стоки я вставил внутри фигурных скобок показанных выше директив @media (в конце основного файла стилей style.css). Но это уже не суть важно.
Адаптируем шаблон для удобства мобильных пользователей
Итак, вы выкачали свой сайт из интернета, запихнули его в локальный сервер, ознакомились с принципами, которые мы будет использовать. Теперь пора начинать экспериментировать. По понятным причинам я не могу вам дать однозначных советов (ибо все шаблоны разные, даже у одного движка), что именно нужно менять в вашем случае и какие точки слома выбирать.
Для простоты, вы можете вообще выбрать только одну точку слова, например, равную стандартной ширине основной части (центральной, где статьи выводятся), а до этого ничего не менять. Но мне мой вариант показался предпочтительнее, хотя особо над ним подумать у меня времени не было.
Что увидят пользователи с экранами по ширине меньшими первой точки слома
Смотрите. Для реализации многоколоночного дизайна в современной верстке используются . Например, сайдбар у меня плавает правее основной области благодаря:
#sidebar{float:right;}
Поэтому, чтобы сломать двухколоночный макет и сделать из него одноколоночный, мне нужно будет заменить значение для правила float в нужных местах. Я правда тыкал во все подряд, ибо структуру своего шаблона немного подзабыл и потому мог зацепить что-то не обязательное, но такова специфика «сборки дизайна на коленке» без наличия соответствующего опыта. Но так как эксперимент шел на локальном сервере, то уже через час-полтора я нащупал все нужные моменты (методом проб и ошибок), результат чего вы сейчас и можете наблюдать.
Соответственно, для начала нужно было отучить шаблон верстаться в две колонки, что потребовало прописать внутри директивы @media (с первой и второй точкой слома):
#sidebar{float:none;} #sidebar{float:none !important;}
Осталась проблема с верхним меню , которое ломается не очень красиво и занимает много места на маленьком экране, но в планах есть мысля сделать его для мобильной версии сайта выпадающим (если сделаю, то отпишусь об этом). Да, еще счетчики в самом низу у меня построились домиком (только сейчас внимание обратил), но поправить это сложно (главное не забыть).
Вот, будем считать, что вы на локальном сервере поколдуете, поэксперементируете и получите в результате удобоваримый вариант адаптации вашего сайта под мобильные устройства посетителей. Останется только это дело перенести на работающий сайт. Естетственно, что копировать все файлы (а уж тем более базу данных) вы не будете, ибо достаточно будет добавить (скопировать) несколько строчек в файл header.php и чуть больше строчек перенести в основной файл стилей (те, что внутри директив @media).
После этого уже можно будет проверять внесенные изменения (может потребоваться сбросить кеш в движке или в браузере) на экране компьютера при уменьшении ширины окна браузера и на ваших мобильных гаджетах (телефоне, планшете). Если что-то «вылезет», то можно будет это дело оперативно подправить.
Главное, чтобы после внесенных изменений ваш сайт прошел тест Гугла на пригодность для просмотра на мобильных устройствах (кеш сбросить не забудьте перед этим). Ну, а детали уже допилите со временем.
Использование на сайте кода адаптивных блоков от Google AdSense при адаптивном (отзывчивом) дизайне
Теперь давайте поговорим за Гугл Адсенс. Если вы не работаете с этой системой контекстной рекламы, то и читать вам дальше не потребуется. Если же работаете и используете на сайте код рекламных блоков фиксированных размеров, то придется его поменять на код адаптивных блоков (Гугл на этом, как я понял, настаивает), чтобы на устройствах с разной шириной экрана подгружались объявления подходящего размера.
По сути, сделать это совсем несложно, но лично у меня возник затык, который потребовал напряжения ума для его разрешения. Итак, с завидной регулярностью (не сказать, что становится хуже, скорее лучше, но когда долго не заходишь, то слегка подвисаешь). Из-за этого приведенную по ссылке статью мне уже пару раз приходилось переписывать, но она опять устарела, а значит скоро появится уже четвертая ее инкарнация (однако, утомляет это).
Ладно, не суть. Для создания нового рекламного блока нужно будет в интерфейсе Адсенса кликнуть по шестеренке в правом верхнем углу и выбрать вариант «Настройка». На открывшейся странице нам нужен верхний пункт меню «Мои объявления», где для создания нового блока будет достаточно нажать на одноименную кнопочку:
На открывшейся странице адаптивный блок как раз и будет предложен вам по умолчанию. Тут следует выбрать тип объявлений, которые будут показываться (в большинстве случаев выгоднее показывать все), а так укажите для этого блока тот же клиентский канал , что у вас был задан для старого блока (который вы будет заменять). Дело в том, что какие-то рекламодатели могут таргетировать свою рекламу на ваш сайт именно по этому клиентскому каналу, и чтобы их не потерять нужно для нового рекламного блока выбрать тот же самый канал.
У меня такой метод не сработал (фигня какая-то получилась), поэтому я полез в хелп Гугл Адсенса искать вариант решения и нашел-таки его на этой странице .
Именно такой вариант кода я использовал (на разных устройствах будут показывать блоки подходящих размеров). Вроде бы все стало выводиться как надо, но не совсем. Во-первых, я заметил, что после смены кода перестала изменяться статистика показов рекламных объявлений на главной странице Адсенса. При просмотре статистики именно по новому блоку я заметил, что показы практически не идут.
Во-вторых, я решил сделать вид объявлений (цвет, шрифт) в новом адаптивном блоке такими же, какими они были в старых объявлениях. После внесения изменений непоняток стало еще больше. Объявления выводимые в статье не поменяли дизайн. Стал сравнивать код исходных страниц (в браузере можно это сделать, выбрав соответствующий пункт из меню правой кнопки мыши) и обнаружил, что каким-то образом после некоторых строк кода добавился тег переноса строки BR.
Поэтому я там убрал все пробелы и переносы строк в проблемных местах, после чего объявления мгновенно поменяли дизайн и начала отсчитываться статистика. Вот такая вот заковыка возможна.
До этого у меня стоял синхронный код Адсенса (еще в 2012 ставил) и по идее он мог снижать скорость загрузки сайта. Современный код весь асинхронный, что полностью снимает вероятность того, что он может вызвать задержку в загрузке страницы. Думаю, что это есть гуд, но, как говорится, будем посмотреть.
P.S. Тут небольшой отчет по тому, что доделал уже после написания статьи.
Ktonanovenkogo.ru="">
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Как сделать оглавление (содержание, меню) для статьи на сайте
В апреле 2015 года вышло обновление поискового алгоритма Google под неофициальным названием «Mobilegeddon», а в феврале 2016 Яндекс объявил о работе похожего алгоритма под названием «Владивосток». Их суть похожа - в мобильном поиске предпочтение отдается тем сайтам, которые адаптированы для просмотра на мобильных устройствах. Это означает, что игнорировать мобильную адаптацию больше нельзя.
И дело не только в требованиях поисковых систем. Глобальный мобильный трафик догнал десктопный еще в начале 2014 года. А сегодня уже около 67% трафика в Рунете приходится именно на мобильные устройства. Учитывая потребности наших читателей, мы проводим работу по мобилизации блога. Совсем скоро вы увидите наш обновленный ресурс, который будет очень удобно читать на различных устройствах.
1. Проанализируйте целевую аудиторию
Прежде чем приступать к мобильной оптимизации, проанализируйте свою целевую аудиторию по следующим направлениям (например, с помощью стандартных отчетов Метрики):
- демография (пол и возраст);
- география (из каких регионов больше всего переходов);
- устройства (какие устройства наиболее популярны среди ваших посетителей - десктопы, мобильные телефоны или планшеты);
- операционная система (Android, iOS, Windows Phone, Windows 7 и т. д.);
- поведение на сайте (глубина просмотра, время на сайте, отказы и т. п.).
Зная профиль целевой аудитории, вы сможете адаптировать дизайн и контент под потребности посетителей.
2. Адаптируйте шаблон для просмотра на мобильных устройствах
Есть 3 принципиально разных подхода к мобильной адаптации — все они описаны в документации Google для разработчиков. Каждый из них имеет свои преимущества и недостатки.
Мобильная версия
В этом случае будет 2 сайта: десктопный и мобильный. Версия для мобильных размещается на новом домене (типа m.site.ru ).
Преимущества :
- дизайн сайта полностью заточен для мобильных устройств, нет нужды искать компромисс;
- вебмастера имеют возможность оптимизировать контент в соответствии со спецификой просмотра на мобильных;
- дорабатывать сайты можно независимо друг от друга;
- проще добиться высокой скорости загрузки.
Недостатки :
- необходимость полноценного администрирования нового сайта;
- из-за раздельного обслуживания растут затраты при внесении изменений.
Мобильную версию на отдельном домене имеет магазин trial-sport.ru
Динамический показ
В этом случае дизайн адаптирован для конкретных разрешений экранов. Линии сетки и расположение элементов имеют фиксированные размеры для разных устройств.
Преимущества :
- простота разработки;
- нет необходимости отдельно вносить изменения в мобильную версию;
- вебмастерам проще контролировать то, как будет выглядеть дизайн и контент на разных устройствах.
Недостаток - возможны проблемы при отображении на устройствах, размеры экранов которых не совпадают с указанными разработчиками.
Сайт decathlon.ru использует один URL с разным набором HTML-кода
Адаптивный дизайн
В этом случае макет сайта точно подгоняется под любой размер дисплея.
Преимущества :
- корректное отображение на всех устройствах;
- нет необходимости отдельно вносить изменения в мобильную версию.
Недостатки :
- сложность разработки, особенно для уже существующих проектов;
- могут возникнуть проблемы с адаптацией блоков на сайтах со сложным дизайном.
Сайт компании Восток-Сервис использует адаптивный дизайн, который подстраивается под любые экраны устройств
Помимо указанных способов адаптации можно использовать плагины для популярных CMS. Например, для WordPress есть WPtouch и WP Mobile Edition. Это дешевое решение, но корректность работы сайтов оставляет желать лучшего. И если для блогов это выход, то для сложных проектов такое решение неприемлемо.
3. Упростите дизайн
Дизайн адаптивной версии сайта должен быть простым и лаконичным. Сегодня популярен так называемый “плоский дизайн”, для которого свойственны минимализм, упрощающий использование. Экспрессия достигается за счет игры цветов, а не градиентов, теней, текстур и сложных интерактивных форм и элементов.
Пример минимализма в дизайне
Также при разработке мобильного сайта стоит забыть о flash-плеерах, виджетах и всплывающих окнах. Любимый многими эффект параллакс тоже стоит оставить в стороне, так как он воспроизводится далеко не на всех мобильных ОС и замедляет прорисовку страниц.
4. Поработайте над улучшением юзабилити
При разработке навигации, прежде всего, думайте о пользователе и его удобстве. Любая страница должна быть доступна в пару шагов — без сложных фильтров и списков. Для совершения звонка в одно нажатие правильно прописывайте формат номера с кодом страны и города +7 495 … . Предусмотрите авторизацию в один клик через соцсети. Одним словом — старайтесь минимизировать любые действия посетителей до цели.
Вместо курсора мышки на смартфоне используется палец, так что все элементы должны быть достаточного размера. Человек не должен увеличивать изображение, чтобы кликнуть по какому-либо элементу. Не используйте шрифты с засечками, завитушками, курсив. Оптимальный размер шрифта - 16 пикселей, высота строки - 1,2 em.
5. Ускорьте загрузку страниц
Ускорение загрузки, с одной стороны, улучшает поведенческие факторы, а с другой, позитивно влияет на ранжирование. Используйте различные сервисы сжатия:
- HTML и скриптов (HTML compressor или Gzip);
- кода CSS (CSS minifier или CSS compressor);
- JS кода (Javascriptcompressor , jscompress и др.);
- изображений (Optimizilla , Resizepiconline , EWWW Image Optimizer и др.);
- используйте кеш браузера.
Проверить скорость загрузки страниц и увидеть возможные проблемы можно с помощью сервиса PageSpeed Insights по этой ссылке.
6. Используйте социальные кнопки
Пользователи мобильных активно репостят контент. Не лишайте их такой возможности. Так вы обеспечите себе дополнительный трафик и улучшите социальные сигналы. Добавьте кнопки-ссылки на самые популярные соцсети, но не более 4-5 в видимой части экрана, в противном случае кнопки будут или слишком маленькими, или займут много места.
7. Оптимизируйте контент
Контент нужно создавать не только с учетом удобства его просмотра на небольших экранах, но и поведения мобильных пользователей.
Следуйте таким правилам:
- линейность контента (самое важное — на первом экране и далее по убыванию);
- используйте короткие заголовки (их можно быстро прочесть);
- разбейте текст на короткие, но содержательные абзацы (область экрана мобильного намного меньше, чем ПК, и если пользователя с первых строк не увлечь, то он быстро потеряет интерес; избегайте воды в тексте и пустых рассуждений);
- добавьте элементы навигации по статье (содержание и якоря, кнопки «вверх», «вниз», «читать»);
- предусмотрите возможность отправить статью на почту (далеко не у всех есть время дочитать до конца - такая полезная функция даст возможность позже почитать заинтересовавший материал);
- адаптируйте таблицы для просмотра на мобильных (используйте специальные плагины, скрипты или элемент горизонтальной прокрутки только для таблицы).
8. Не ограничивайте доступ к контенту
Некоторые дизайнеры, вместо того чтобы адаптировать весь контент для мобильных, частично скрывают его. Обычно это делают по причине сложности шаблона, но это неверный подход. Предлагать «облегченную» версию - это несправедливо по отношению к мобильным пользователям. Работать нужно в направлении упрощения и оптимизации дизайна, а не урезания контента.
9. Оставайтесь в тренде
Отслеживайте актуальные тренды в сфере дизайна и юзабилити и вносите оперативно изменения, чтобы не остаться «позади паровоза». Например, сегодня актуальны такие тренды:
- модульный дизайн (контент группируется в блоки, которые выстраиваются в одну ленту или несколько лент в зависимости от размера экрана);
- плоский дизайн (тени, полутени, объем - это все осталось в прошлом);
- подход mobile first (раньше сайты делали для ПК, а потом в силу необходимости адаптировали для мобильных - сегодня все наоборот).
10. Не забывайте анализировать сайт на мобилопригодность
Проводите периодически проверку сайта на соответствие требованиям поисковиков к мобильной адаптации. В Google это можно сделать по ссылке . Просто вводите адрес страницы и ждете результата проверки. Все обнаруженные ошибки нужно поскорее исправить.
Для проверки мобилопригодности в Яндексе добавьте сайт в Яндекс.Вебмастер , а потом перейдите в раздел «Инструменты» / «Проверка мобильных страниц» и введите адрес сайта. Если есть ошибки, тоже их исправляем.
Если нет времени самостоятельно разбираться с проверкой и ошибками в мобильном отображении сайта, вы можете заказать услугу аудита и получить рекомендации в службе “Персональный менеджер” .
Итак, адаптация для мобильных - это не только фактор ранжирования, но и способ увеличить трафик и улучшить поведение пользователей на сайте. Если вы сфокусируете внимание на облегчении взаимодействия пользователя с сайтом, то повысите свою конкурентоспособность и конверсии.
Технологии XXI века развиваются все быстрее и быстрее. Сегодня смартфоны, планшеты и другие гаджеты становятся все популярнее и трафик с мобильных устройств стает все больше.
Сегодняшняя статья расскажет об основных правилах проведения оптимизации сайта для корректной работы на мобильных устройствах. Это даст дополнительный трафик на сайт с мобильных устройств.
Viewport
Тег meta viewport – это обыкновенный HTML-код, который отвечает за отображение сайта на экране мобильного устройства и изменении масштаба страницы. Этот тег позволяет прописать масштаб страницы при первой загрузке сайта, а также указать максимальное значение масштабирования страницы или полностью отключить увеличение страницы.
meta viewport выглядит примерно так:
Meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;">
initial-scale указывает масштаб сайта при первом посещении сайта в окне мобильного браузера,
maximum-scale указывает максимальное значение увеличения страницы сайта.
Для разработки адаптивного шаблона этот тег просто незаменимый, однако его можно применять и в неадаптивных шаблонах. Этот мета тег необходимо использовать в паре с спецификацией Media Queries.
Технология Media Queries позволяет оптимизировать стиль сайта с помощью точек преломления. Традиционный шаблон сайта не будет корректно отображаться на мобильных устройствах. С технологией Media Queries можно определить стили шаблона для экранов любых размеров. Технология также позволяет добавлять стили шаблона в зависимости от расположения устройства (вертикально или горизонтально) и количества точек на экране смартфона или планшета.
Встроить Media Queries можно прямо в шаблон страницы:
Технология Javascript, которая позволяет определить способности гаджета или используемого браузера. Браузеры мобильных устройств имеют различные характеристики в отображении информации.
Владельцы старых версий браузеров с помощью инструмента Modernizr получат вариант отображения сайта, лишенного современных возможностей. В ином случае сайт может отображаться некорректно.
– это специальный плагин jQuery, с помощью которого можно организовать управление сайтом на сенсорных экранах мобильных устройств или планшетов.
Плагин поддерживает основные жесты сенсорного управления такие как: увеличение страницы, проведение по экрану, мультитач и многие другие. Поскольку сенсорных телефонов сегодня очень много, оптимизировать сайт под сенсорное управление точно не навредит.
Владельцы продукции компании Apple – IPhone или IPad могут добавлять иконки сайтов на главный экран. Добавить иконку сайта для продукции Apple не составит труда.
Реализовать отображение иконки с помощью следующего кода:
Данный код необходимо вставить в раздел head. При этом необходимо добавить изображение иконки в корень сайта. Название файла должно начинаться с фразы apple-touch-icon-.
Экран заставки
Экран заставки – это изображение, которое видит пользователь после запуска приложения. Экран заставки показывает пользователям состояние загрузки приложения. Заставка в идеале не должна содержать рекламы бренда сайта.
Добавить заставку можно путем вставки следующего кода в шапку сайта:
Эволюция мобильных устройств заставляет владельцев сайта применять радикальные меры в работе над оптимизацией сайта под мобильные устройства. Трафик с мобильных устройств достаточно большой и вероятнее всего продолжит возрастать с бешеными темпами. Поэтому не откладывайте оптимизацию под мобильные устройства для получения дополнительного трафика.