Это регулярно возникающий на форумах вопрос — каким образом до загрузки контента дать серверу понять, какой размер экрана у клиента и в зависимости от этого решить, что именно загружать? По моим наблюдениям, этот вопрос озвучивается начинающими разработчиками почти каждый день 🙂

Давайте разберемся, как это можно сделать.

Понятно, что вариант «грузим весь контент, а потом часть скрываем через display: none» мы здесь рассматривать не будем — это решение всем известное и очень плохое — ведь нагрузка на сеть (трафик, время загрузки) все равно присутствует, и при этом мы расходуем ресурсы сети в холостую — контент-то не показывается.

В принципе, вариантов решения задачи несколько — и все они сводятся примерно к следующей схеме:

  1. В разметке создается пустой элемент, в котором мы будем выводить (или не выводить) контент.
  2. При загрузке страницы скрипт определяет разрешение клиента, и если в наш элемент нужно что-то грузить — отправляет на сервер запрос на дополнительный контент (тут много вариантов: jQuery AJAX, fetch, axios…)
  3. Загруженный таким образом дополнительный контент тот же скрипт вставляет в пустой элемент.

Это, по сути, вся технология. И все это очень плохо.

Судите сами:

  1. У нас есть скрипт, который, по идее, надо исполнять чем раньше, тем лучше (как только будет понятен размер viewport) — и он будет блокировать остальную загрузку. Ну или он будет исполняться через несколько секунд после появления на экране остального контента — и внезапно ошарашивать пользователя появлением на странице новых элементов.
  2. Загруженный таким образом контент будет недоступен поисковым роботам.
  3. Все это довольно-таки неудобно в разработке и последующем администрировании — т.е. велика вероятность ошиок.

И тут возникает вопрос — почему же до сих пор этот функционал не встроен в http?

А потому, что он реально никому не нужен.

На самом деле, вопрос здесь ставится так: зачем вы хотите скрывать часть контента от большей и лучшей части ваших пользователей? Ведь скрывать контент стремятся на мобильных разрешениях — а это 70-80% аудитории почти в любом сегменте (а в коммерческих тематиках это еще и та часть пользователей, которая покупает, а не рассматривает). И если вы считаете, что на сайте есть контент, который не нужен мобильным пользователям — подумайте, возможно, этот контент просто не нужен?

 

 

Всего комментариев: 14