SEO
Пиксель Тулс
8619

Ещё четыре нестандартных способа ускорить загрузку страниц сайта

Том Энтони из DistilledODN специально для MOZ поделился не самыми очевидными способами ускорить загрузку контента.

В закладки
Аудио

Изменения, которые рассмотрим, редко встречаются в качестве анализируемых параметров в аудитах, но могут существенно повлиять на скорость сайта. Это важно для поведенческих факторов и ранжирования.

Содержание

«Пиксель Тулс» перевели и дополнили эти советы. Давайте изучать!

Inline-изображения и SVG вместо PNG

Для иконок и пиктограмм всегда старайтесь использовать SVG. Векторные изображения могут сэкономить до 60% от размера файла. Почему важны такие мелочи, как подобные иконки?

Это SVG на сайте с продажей билетов. Если смоделировать, например, 3G-соединение и проверить скорость загрузки страницы, увидим следующее:

Сайт не использует HTTP/2, поэтому даже загрузка с сервера изображения размером всего 1,2 кб потребует почти 600 мс (параметр Waiting TTFB) и будет блокировать другие запросы. Отчасти проблему решает кэширование, но мы сражаемся за поисковый трафик, и важна скорость при первом посещении сайта, поэтому обратим внимание на встроенные изображения.

Inline-SVG

Вообще способов размещения векторных изображений как минимум четыре:

  1. Через тег <img>.
  2. В качестве фоновой картинки в CSS.
  3. Через тег <object>.
  4. Непосредственное встраивание (Inline) с помощью тега <svg>.

С точки зрения скорости именно последний вариант — самый эффективный и не требует сетевых запросов для каждой картинки (но и не поддерживает кэширования напрямую).

То есть векторное изображение размещается прямо в HTML-коде страницы. Это возможно благодаря тому, что в файле SVG хранится не само изображение, а инструкции к его построению, то есть он может быть отредактирован в текстовом виде и размещён в таком виде:

<svg width="24" height="24" viewBox="0 0 24 24" class="icon icon-alarm" xmlns="http://www.w3.org/2000/svg"> <path id="icon-alarm" d="M11.5,22C11.64,22 11.77,22 11.9,21.96C12.55,21.82 13.09,21.38 13.34,20.78C13.44,20.54 13.5,20.27 13.5,20H9.5A2,2 0 0,0 11.5,22M18,10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18L18,16M19.97,10H21.97C21.82,6.79 20.24,3.97 17.85,2.15L16.42,3.58C18.46,5 19.82,7.35 19.97,10M6.58,3.58L5.15,2.15C2.76,3.97 1.18,6.79 1,10H3C3.18,7.35 4.54,5 6.58,3.58Z"></path> </svg>

Можно заморочиться ещё больше и кодировать маленькие изображения (даже JPG или PNG) в base64 и размещать прямо в HTML-разметке или CSS.

.back { background:url("data:image/GIF;base64,R0lGODlhAQAGAIAAANXV1QAAACH5BAAAAAAALAAAAAABAAYAAAIChF8AOw==") 298px 0 repeat-y }

В сети есть несколько доступных конвертеров, выбирайте любой.

В сторонку JavaScript, HTML тоже может

JS-библиотеки безусловно удобны, но если говорить о скорости — чем меньше скриптов, тем выше производительность сайта. Более того, HTML5 способен справиться со многими задачами, которые традиционно решаются с помощью JavaScript.

Выпадающий список с поиском

Распространенный элемент в интерфейсе.

Одна из самых популярных библиотек, позволяющих реализовать такой блок, — Select2, она основана на JQuery и использует CSS, то есть для довольно простого элемента в интерфейсе нужно подгрузить:

  • JQuery — 101 Кб.
  • Select2 JavaScript – 24 Кб.
  • Select2 CSS — 3 Кб.

Но эта функциональность есть в HTML из коробки, и она пригодна для небольших списков. Добавляется с помощью тега <datalist>:

<input type="text" list="животное" placeholder="Введите название животного" /> <datalist id="animals"> <option>Аллигатор</option> <option>Альботрос</option> </datalist>

Выглядеть может так:

Рабочий шаблон можете посмотреть и скопировать с CodePen.

Кнопка «Подробнее»

Типичный пример реализации с помощью JS — кнопка «Read more», скрывающая часть текста:

В HTML также есть альтернатива, позволяющая сэкономить время загрузки страницы: теги <details> и <summary>. В разметке будет выглядеть так (для стрелочки на кнопке используется Inline-SVG иконка):

<p>Видимая часть текста</p> <details><p>Скрытая часть текста.</p> <summary>Далее <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <path d="M28.8 6.2l-12.8 12.8-12.8-12.8-3.2 3.2 16 16.4 16-16.4z"></path> </svg> </summary> </details>

Рабочий шаблон на CodePen.

Если хотите углубиться и попробовать сократить количество JS-кода на своих сайтах, вот целый ресурс с альтернативами на чистом HTML и CSS (слайдеры, модальные окна, формы и прочее): http://youmightnotneedjs.com/.

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

Сетевые настройки

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

TLS 1.3

TLS (и его предшественник SSL) — протокол, отвечающий за защищённую передачу данных с помощью шифрования.

Исторически сложилось так, что обмен данными между браузером и сервером проходит как бы в несколько заходов. Грубо говоря, если пользователь находится на «расстоянии» в 50 мс от сервера, то соединение занимает 200 мс. Помните, что Google рекомендует именно 200 мс в качестве оптимального времени соединения.

TLS 1.3 — последняя версия протокола, которая ускоряет процесс «рукопожатия» в полтора-два раза и вообще гораздо эффективнее предыдущей.

В сети есть несколько инструментов для проверки версии протокола, используемой для домена. Гуглится как [TLS Checker].

QUIC/HTTP 3

За последние два-три года наблюдается переход большинства сайтов с HTTP/1.1 к HTTP/2. Закулисное, казалось бы, обновление, которое существенно влияет на скорость загрузки сайта:

  • Несколько запросов теперь отправляются через одно TCP-соединение.
  • Размер HTTP-заголовков может сжиматься.
  • Приоритизация потоков, что позволяет разработчикам настраивать важность одних потоков относительно других и выстраивать порядок получения данных.
  • Server Push — технология, которая может отправить клиенту данные до того, как он их запросил. Например, файлы .CSS и .JS не поочередно, а в одном ответе.

Но и это не предел. Для сокращения числа циклов, то есть мультиплексирования запросов, начинают внедрять HTTP/3, работающий через протокол QUIC, разработанный Google в 2012 году на смену устаревающему TCP.

Поддержка QUIC пока только набирает обороты, но на некоторых серверах (CloudFlare, Verizon Digital Media Services) протокол уже поддерживается. Основное преимущества использование протокола — почти мгновенное соединение и минимальное время задержки между запросом и ответом.

Пусть CSS работает больше

Несколько советов по экономному использованию CSS для сокращения количества сетевых запросов.

Многократное использование изображений

На веб-странице целое множество повторяющихся элементов: логотипы в разных местах или в нескольких цветовых решениях, кнопки навигации, пиктограммы и прочие картинки, которые загружаются отдельно.

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

Это легко реализовано с помощью CSS-свойств:

​Шаблон на CodePen

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

​Шаблон на CodePen

Элементы взаимодействия и анимация

Большинство интерактивных или динамичных элементов в интерфейсе реализуется с помощью JavaScript, но даже подобную анимацию можно сделать на чистом CSS:

Что ещё умеет CSS без JS:

  • Индикаторы выполнения (Progress bar).
  • Выпадающие меню.
  • Модальные окна.
  • Редактирование текста на странице и прочее.

Примеров и готовых шаблонов в сети множество. Постарайтесь использовать минимально необходимое количество громоздких JS-библиотек и уменьшайте количество подгружаемых с серверов элементов с помощью реюзабельных картинок и пиктограмм.

Какие SEO-инструменты пригодятся?

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Пиксель Тулс", "author_type": "self", "tags": ["\u043f\u0435\u0440\u0435\u0432\u043e\u0434","\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f","seo"], "comments": 50, "likes": 42, "favorites": 200, "is_advertisement": false, "subsite_label": "seo", "id": 101151, "is_wide": false, "is_ugc": true, "date": "Wed, 15 Jan 2020 10:01:36 +0300", "is_special": false }
0
{ "id": 101151, "author_id": 313674, "diff_limit": 1000, "urls": {"diff":"\/comments\/101151\/get","add":"\/comments\/101151\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/101151"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199127, "last_count_and_date": null }
50 комментариев
Популярные
По порядку
Написать комментарий...
13

Оптимизируешь такой, оптимизируешь... тут сжал, там асинхроночка, здесь почистил зависимости...  а потом ХЕРАКС — приходит эффективный менеджер-аналитик, который впендюривает кучу трекеров и другого говна в GTM так, что твой сайт начинает лагать даже на мощной девелоперской машине...

Ответить
9

А теперь идем на caniuse и понимаем, что JS вариант не так уж плох.

Про details/summary - не понятно что вообще там экономить. Две строчки кода?

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

Ответить
3

строчка про jQuery немного обидная... почему в данное время я часто стал замечать информацию про избежание данной библиотеки ?

Ответить
6

Потому что проблема, которую решал jquery решена по-другому.

Раньше у нас была куча несовместимых необновляемых браузеров.
Сейчас у нас есть обновляемые браузеры и Babel, который позволяет не оглядываться на возможности браузеров, а писать единый код, который будет собран под поддерживаемую всеми версию es.

Ответить
2

потому что слишком толсто тянуть его целиком из-за пары функций(а чаще всего именно так), которые можно написать на нативном js в почти то же количество строк.

да, если юзать с cdn, то скорее всего у юзера он уже будет загружен, но "тянуть" не всегда допустимо(финсервисы например).

Ответить
2

Кэш — это миф. Быстро протухает, большой разброс версий. А если сторонний ресурс отвалится (что нередкость с ковровыми бомбардировками блокировок Роскомнадзора, скажем), то вообще всё сломается. Минимум половина запросов не попадают в кэш.

Ответить
0

Если у вас половина запросов не попадают в кеш, то проблема не во вне, уверяю.

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

Ответить
0

Вы забыли про контекст, тут SEO обсуждают, то есть заходы на сайт, а не хождение по нему.

Ответить
0

рассуждая подобным образом, можно купить свой сервер и разместить в шкафу. и такие клиенты были.

и когда узнавали, что нужен пару каналов по 100мбит(а то вдруг один провайдер упадет) = уже хорошие затраты на инет для юриков + нужно сервер обслуживать и рейд поставить(а то вдруг жесткий посыпется), нужно ИБП несколько и тп, отказывались и молча шли на hetzner, который при прочих равных стоил в десятки раз дешевле. учитывая, что купленное за шестизнаковые суммы оборудование превратится в тыкву через год-другой.

всё очень относительно даже про РКН.

если речь про ip, то проще взять ip и прокидывать запросы. если про домен - сами виноваты и никто вас не спасёт. CF банили оч давно и это был epic fail, зачем банить cdnjs.com или других - не понимаю. кеш их либ(например, jq) хранится гораздо дольше чем вы думаете и загружать его при заходе на каждый сайт было бы нелепо. кеш, к слову, один из ключевых помощников в highload - memcached, redis, тот же nginx, cf. так что, вы не очень правы с предрассудками и мыслями про РКН.

Ответить
0

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

Ответить
–1

Потому что современные браузеры довольно неплохо работают с DOM и в jQuery нет особого смысла, а весит оно немало.

Ответить
1

Непонятно. И чем же браузеры заменяют jquery? 

Кажется, вы путаете с фреймворками, которые строят виртуальный dom.

Ответить
1

API браузеров имеет практически те же возможности, что и jQuery с изобретения метода `querySelector`, который работает в браузерах со времен IE9.

Библиотека для кросс-браузерности не нужна, когда весь джентльменский набор методов и так работает в браузерах.

Ответить
0

Все-таки я думаю, что jquery - это не только супермедленный поиск элемента в DOM.

Ответить
1

А что еще? Интересно прям :)

Ответить
0

Вообще, виджеты (jquery ui). Но если чисто jquery, то создание/удаление элементов, перетасовка их, клонирование, вычисление размеров, манипуляции с классами и стилями, события, перемещение элементов через offset, анимации, фокусы-расфокусы разные.

Ответить
1

Это и есть работа с DOM. Откройте для себя удивительный мир 2020 года и отправьте jquery за правительством наконец

Ответить
0

Работа с DOM, но не только поиск.

Спасибо за совет, только непонятно, к чему, в современных проектах jquery нет

Ответить
0

И правда, а что ещё вам нужно в jQuery?

Ответить
0

а что вам мешает работать с dom в чистом js? на полторы строчки больше кода, на гигабайты меньше грузить вашим юзерам. если у вас от jq только работа с dom, то смысла нет от слова совсем. да, килобайты экономии, но если мы говорим про оптимизацию - это достаточно много.

Ответить
0

Так и я об этом)

jQuery не нужен

Ответить
0

Ниже уже ответили.

Ответить
4

Спасибо за статью. 

Я бы добавил еще:
1. JS виджеты лучше грузить по клику. Например многие виджет-чаты запускаются хоть и асинхронно, но это все равно попадает в load (бывает сервер чата отвечает долго или вообще может отдать 50Х ответ). Поэтому лучше отверстать иконку чата SVG и запускать JS чата только по клику или вообще после load.
2. Также мало кто об этом говорит, но мобильный трафик уже давно преобладает, а скорость интернета ниже, поэтому лучше изолировать версии. То есть если пользователь заходит на сайт с мобильного устройство, то можно отдать отдельную облегченную версию (не адаптировать и не бустрапить), а именно отдельный CSS и JS конкретно для мобильных устройств (они всегда будут меньше весить).
3. Статичные блоки лучше кешировать на сервере. В некоторых случаях можно даже держать в кеше на сервере готовую страницу, чтобы сразу ее отдать, что сильно уменьшает TTFB.
4. Ну и самое главное, все сторонние JS лучше не использовать асинхронно. Потому что асинхронность хоть и грузит файл JS не останавливая парсинг, но при отработке останавливает его. Поэтому лучше использовать либо пост загрузку, либо defer загрузку.

Мог бы добавить еще много чего, но каждый проект индивидуален и надо смотреть на точки роста. Возможно где-то нужен CDN, где-то отдельно догружать блок на который php (или другой язык программирования) тратит много времени тормозя генерацию страницы на сервере. А иногда вообще бывает тупо загвоздка в большом количестве запросов, если можно, то лучше уменьшать.

Ответить
2

JS виджеты лучше грузить по клику.

Мы так делаем с подгрузкой ютуб-видео. Блок с плеером накрывается картинкой-превьюшкой, код плеера начинает грузиться по клику на нее. Сразу же минус 1мб к весу страницы.

Ответить
1

Однозначно в закладки. Спасибо за статью!

Ответить
1

Экономия на спичках. Это нужно иметь ну ОЧЕНЬ неадекватное количество иконок, чтобы начать на них экономить. Или очень большео количество мелких запрограммированных элементов. 

А на деле, сколько бы вы не оптимизировали свои спички - два ролика с ютуба через фрейм - и страница уже загружает существенно дольше. Поможет вставка не фрейма, а загружать только превьюху в <img>. Ну и сделать их всех скриптов и css (а это 20-50 в современных сайтах) - 2-3 подключаемых файла. 

Ответить
0

Когда борешься за "каждое очко", то борьба за каждый кб не кажется такой уж плохой. 

Ответить
0

С картами встроенными что делать?

Ответить
2

lazy load. Либо загружать через 3-5 секунд после load.

Либо так https://sitehere.ru/optimizaciya-zagruzki-yandeks-karty-na-sajte

Ответить
0

Скорость загрузки моего сайта сильно тормозит яндекс метрика и что я только не пробовал - результат не особо отличается от предыдущего. При этом метрика обязательно нужна

Ответить
1

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

Ответить
0

спасибо, попробую

Ответить
0

Я поставил на отложенную загрузку и проблемы нет. Данные немного не точные, не попадают только те, где пользователь провел 3-5 секунд на сайте. Мне как бы эти данные и не нужны)

Ответить
0

ставил тоже, не сильно отличался результат если честно. Сейчас 4.2с время полной загрузки страницы десктоп версии. Я бы не парился насчет этого, но вроде бы скорость загрузки на выдачу влияет

Ответить
0

Скорость загрузки не влияет на позиции возьмите например авито

Ответить
0

И вы сидите и думаете, что на старом проекте либо переделывать всю верстку или сам проект

Ответить
0

Который не факт что будет быстрее^^

Ответить
0

По опыту, если вёрстка не сделана по хорошим практикам (а ля с БЭМом), то если это не какое-то сложное приложение, проще будет переписать.

Ответить
0

Лучше написали бы что с видео делать на сайте, а не такие килобайты. На современных сайтах в слайдере на главной заказчики  видео сейчас ставят, что тянет за собой ютуб и все сопутствующие проблемы со скоростью. Или если использовать mp4 файл то как минимум +10 Мб к загрузке.

Ответить
0

Иван, с видео на сайте (особенно на главной) нужно сделать следующее - У Д А Л И Т Ь.

Ответить
0

Ну вы это заказчику попробуйте объяснить. Тут выбор простой, либо вы отказываетесь от работы с данным заказчиком, поскольку у него своё мнение, либо надо просто разместить видео.

Ответить
0

Либо принять, что есть HTML5 с нормальной буферизацией. 

Вот вам пример https://sitehere.ru/kak-sdelat-video-fonom-sajta-videostoki

Ответить
0

Подскажите, где можно посмотреть готовые шаблоны выпадающих меню при помощи CSS?

Ответить
0

Ловите самый простой вариант: https://codepen.io/andornagy/pen/xhiJH

А здесь подборка разных: https://freefrontend.com/css-dropdown-menus/

Ответить
0

Реально столько нового узнал как из статьи, так и из комментариев. Тут хотелось спросить, а чем плох Select2 ?

Ответить
0

Особенно актуально для мобильного трафика. Плюс если используешь VPN, скорость может совсем упасть. На некоторых сайтах тот же JS используют, как защиту от копирования. Возможно ли совсем отказаться от JS?

Ответить
0

Не замечала, чтобы ролики Youtube тормозили загрузку. Столкнулась с замедленной загрузкой при использовании Opera. Есть какие-то рекомендации конкретно по поводу пользования этого браузера? 

Ответить
0

А как же объяснить, что слишком медленный вайлдберриз всегда на первой странице по любому шмоточному запросу. И вот сидишь ты, ищешь и страдаешь)

Ответить
0

Получается, что все браузеры одинаково реагируют на то, как наш сайт ссылается на svg  с набором иконок или все же нет?

Ответить
0

Отлично, перевел статью и подставил свои рекламные ссылки, красава!! 👍

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }