Организация адаптивности.
Андрей Ставропольский

Как лучше организовывать построение контента на странице адаптивных макетов с точки зрения производительности и уменьшения запросов?
Существует 3 метода адаптации страниц:

1. адаптивность заключается посредством использования CSS media query. В этом случае пользователю отдается весь контент, а контент может быть очень и очень емким.... следствие увеличение времени загрузки, однако поисковые роботы, а в частности Googlebot предпочитают именно этот способ, обуславливая количеством сканируемых страниц.
К этому же пункту можно отнести и использование Window.matchMedia() в JS, вот неплохая библиотека для работы с этим методом. С этим подходом можно грузить необходимый контент аяксом. Однако появляются дополнительные запросы к серверу и нагрузка на клиент.

2. Динамическое формирование шаблона на сервере. Снижается нагрузка на клиент, при этом увеличивается на сервер (в зависимости от сложности реализации построения логики формирования шаблона). Опять же поисковики от такого метода скажем так не пляшут от радости (им приходиться сканировать разные варианты контента одной и той же страницы), но и не воротят нос. Подводные камни заключаются в правильном определения с какого же устройства к нам зашли. И вот ту проблемы... Используя информацию из строки userAgent, можно мягко говоря ошибиться в определении устройства. Отправлять при первом посещении JS скрипт который пробежится по объектам window и navigator и на основе этих данных строить на сервере шаблон для данного устройства...

3. Вариант это отдельный сайт для мобильных устройств, со своими адресами и страницами.... Но в эту сторону не смотрю, соответственно и писать по этому поводу нечего.

Так вот, как бы так взять из первых двух все лучшее, объединить и заставить браузер и сервер работать сообща в этих целях, распределяя нагрузку, сокращая количество запросов... и т.д.

2 чел.