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

Все источники важны, все источники нужны!

Мобильный трафик набирает мега-обороты в мире. If you are not mobile, you are death! Этот слоган компания Google использует уже пару лет. Пренебрегать мобильным трафиком – значит терять 10-30% своей целевой аудитории.

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

При этом, прогрессивные алгоритмы уже умеют определять пригодность любого сайта на отображение в мобилке. Чтобы быть в тренде, нужно, в идеале, создавать новый сайт на адаптивной вёрстке. Конечно, не всегда такое возможно. Поэтому для тех, чей сайт долгожитель с дизайном из девяностых, гугловчане выкатили ряд простых (это они так думают) правил. Если все эти правила свести в один мануал, получится большой портянка-документ с объёмом 30000 символов. Дабы не заставлять вас читать весь мануал от первоисточника, позволю себе его сократить до умопонятного размера.

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

Включить сжатие на сервере. Где-то в настройках вашего сервера можно задать сжатие документов перед оправкой в формат GZIP. Если не в ваших руках администрирование серверов, то обращаться нужно прямо к администратору или к хостеру. Они обязаны это знать и, скорее всего помогут вам.
Для каждого статичного документа, фрагмента, рисунка, который грузится на вашей страничке нужно прописать время хранения в кэше браузера. Делается в настройках сервера. Обращаться опять же к хостеру или админу. Гугл рекомендует ставить время хранения от недели до года.
Если в заголовке страницы сайта используются внешние скрипты, их нужно грузить асинхронно. Если есть возможность вставить скрипт целиком в заголовок (учитывая, что скрипт не должен быть больше всего остального кода страницы), его нужно туда вставить живьём.
Время ответа сервера не должно превышать 200мс. Если больше, вопросы к админам и хостерам.
Размер шрифтов – от 16px.
Размер активных элементов (кнопочки там, ссылочки, ползунки и т.п.) – не менее 48px по любой из сторон.
Расстояние между активными элементами – не менее 32px.
В CSS минимизировать использование фиксированных размеров элементов, указывайте всё в процентах.
Не использовать flash нигде. Flash теперь зло!
Не более одного редиректа на странице. Например, при обращении к www.site перенаправляемся на site. Выходит, один редирект. Приемлемо.
Весь наиболее важный контент должен загружаться первым. Например, у вас в шапке сайта умопомрачительная картинка, которую вы любите, но которая весит три метра. Сделайте так, чтобы эта картинка загружалась после всего остального, дабы юзверь с 3g интернетом не заскучал.
Все изображения обрезаем до полезного содержания и храним в PNG c минимально-приемлемой глубиной цвета.
Все лишние пробелы, пустые строки, комментарии, в HTML, JS и CSS удаляем.
В HTML, CSS и JS не используем названия идентификаторов длиной более 4х символов.
В тег HEAD вставляем строчку "meta name=viewport content="width=device-width, initial-scale=1"