Возможности Тильды, посчитанные по её файлам: 21 скрипт, 1,04 МБ

Короткий ответ

Возможности Тильды считаются по файлам, которые она кладёт на страницу. На снятой странице магазина их 21, вместе 1 090 156 байт на разбор и около 293 килобайт по сети. Ещё пятнадцать возможностей приезжают отдельным файлом — по галочке в настройках или при аварии. Проверки тарифа в браузерном коде нет ни одной.

Откуда числа

Все числа ниже сняты с одной настоящей опубликованной страницы магазина на Тильде и с 53 файлов её рантайма, лежащих рядом. Это важная оговорка: набор файлов на странице определяется набором блоков, которые на неё поставили. У страницы с одной обложкой и формой файлов будет вдвое меньше, у страницы с квизом и галереей — другой набор. «Возможности Тильды вообще» посчитать нечем; посчитать можно конкретную страницу, и дальше видно, из чего платформа их собирает.

В HTML этой страницы 24 статических тега <script src>. Двадцать один ведёт на tildacdn.com — это Тильда. Остальные три ведут на другие домены: виджет Jivo и дважды один и тот же init.js сторонней интеграции доставки, которую подключил владелец сайта. Уже в браузере тегов становится 25: ещё один вписывает себя inline-код Calltouch.

Внутри двадцати одного файла Тильды две библиотеки тоже чужие — jQuery и Hammer. Они лежат на её CDN и приезжают вместе с остальным, поэтому в наборе считаются.

Двадцать один файл и участок каждого

Порядок — как в разметке. Байты — размер минифицированного файла, то есть объём, который браузер разбирает.

Итого 1 275 797 байт. Самый крупный участок — торговля: каталог, корзина и доставка вместе дают 631 124 байта, почти половину всего набора и 58% того, что скачает современный браузер.

Полифилл, который современный браузер не скачивает

У второго тега в списке стоит атрибут nomodule. Это единственный такой тег на странице. Браузер, понимающий модули — то есть любой с 2018 года, — тег с nomodule игнорирует и файл не запрашивает.

Значит из 1 275 797 байт современный браузер получает 1 090 156: полифилл на 185 641 байт мимо. В gzip те же наборы весят 369 980 и 300 325 байт — по сети приезжает около 293 килобайт.

Дальше в статье все числа — для современного браузера, без полифилла.

Пятнадцать возможностей, которых на странице нет

Внутри этих файлов лежат имена пятнадцати других файлов. Их нет ни на странице, ни в корпусе рядом — они подставляются в <head> во время работы, когда включена соответствующая настройка или случилось нужное событие.

Последние две строки — не настройки, а аварийные ветки: файл приезжает, только когда что-то уже сломалось. Остальные тринадцать включаются галочкой.

Отсюда практическое следствие: фильтры, поиск и сортировка каталога — один файл на три возможности. В самом tilda-catalog-1.1 от фильтров всего два упоминания, и оба про то, куда переставить уже нарисованную панель:

r.querySelector(".t-store__filter__search-and-sort")
r.querySelector(".t-store__filter__controls-wrapper")

Это все два вхождения t-store__filter в файле. Остальное, что там есть про фильтры, — загрузчик и условие: t_store_loadFilters и имя tilda-catalog-filters-1.0, по четыре упоминания каждое. Самой фильтрации в файле нет — включение любой из трёх настроек тянет отдельный файл целиком, а вместе с ним ещё и tilda-tooltip-1.0 с tooltipster.min.css.

Формы: десять типов проверки и четыре служебных

Проверка поля — это одна конструкция switch по значению атрибута data-tilda-rule. У неё ровно 14 ветвей:

email  url  phone  number  date  time
name  nameeng  namerus  string
chosevalue  promocode  deliveryreq  unauthorized_order

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

Ветки default у этого switch нет. Незнакомое значение в data-tilda-rule не вызывает ошибки и не мешает отправке: поле просто не проверяется, и форма уходит. То есть опечатка в правиле выглядит на странице ровно как работающая проверка.

Чего в этих 100 892 байтах нет: ни одного числа, ограничивающего размер загружаемого файла, и ни одного списка разрешённых расширений. Проверка загружаемого — не на стороне браузера.

Отдельно стоит проверка телефона: она есть в списке правил, но проверяет не то, что от неё ждут — разбор в «Тильда не проверяет длину телефона».

Корзина живёт тридцать дней в браузере

Корзина хранится в localStorage под ключом tcart. Срок жизни задаёт одна функция:

function t_cart__isCartExpired(t) {
  if ("y" === window.tcart_dontstore) return !0;
  var e = function e(r) { return t_cart__createTimestamp() - t.updated > 86400 * r };
  if (void 0 !== window.tcart_maxstoredays) {
    var r = parseInt(window.tcart_maxstoredays);
    if (0 === r) return !0;
    if (r > 0 && t.updated > 0) return e(r)
  } else if (t.updated > 0) return e(30);
  return !1
}

По умолчанию — 30 дней, 86400 * 30 секунд от последнего изменения. Переменная window.tcart_maxstoredays этот срок меняет, 0 означает «не хранить вовсе», а window.tcart_dontstore = "y" — то же самое другим способом. Обе переменные ставятся из кода на странице.

Что из этого следует для возможностей: корзина посетителя живёт в его браузере, а не в аккаунте. Очистил браузер — корзины нет. Открыл с другого устройства — там пусто. Места, где данные посетителя переживают браузер, в этих файлах не объявлено ни одного.

Корзина и доставка объявляют одни и те же 32 функции

tilda-cart-1.1 (193 794 байта) и tilda-delivery-1.0 (194 868) на этой странице оба. Замер в Chromium: подгружаем корзину, снимаем список глобальных функций, подгружаем доставку сверху — как в разметке — и снимаем снова.

Все 32 функции корзины файл доставки объявляет заново. У 29 из них тело той же длины, но другими символами — минификатор по-своему переименовал локальные переменные, а исходник тот же. Три совпали посимвольно.

Отдельная деталь: внутри tilda-delivery-1.0 лежит константа DELIVERY_FILE_NAME = "tilda-delivery-1.0" — файл доставки носит в себе загрузчик самого себя. Тот же блок констант есть и в корзине; это самый длинный байт-в-байт совпадающий кусок двух файлов, 574 байта.

При этом перекрытие двух файлов по байтам — всего 1,0% окон по 64 байта. Общий у них не текст, а ядро: одинаковый набор имён на входе, дважды скомпилированный. Порядок загрузки поведения не меняет — проверено загрузкой в обратном порядке, итоговый набор из 40 функций тот же.

tilda-events-1.0 — не события, а мост в аналитику

Название читается как «события», и от файла ждут возможности подписаться на происходящее. В его 13 439 байтах:

• dispatchEvent — 0 вхождений;
• new CustomEvent — 0;
• addEventListener — 3.

Зато есть семь получателей: gtag, ga, fbq, VK, ym, _tmr, dataLayer. Это односторонний мост в счётчики, а не событийный интерфейс: подписаться на него нечем, потому что он ничего не публикует.

События Тильда всё-таки рассылает — но из других файлов. Разбор того, что именно и кто это слушает, — в «Два скрипта на одной странице».

Слов про тариф в браузерном коде нет ни одного

Поиск по всем 53 файлам рантайма:

Проверки тарифа в браузере не происходит. Что попало в опубликованную страницу, то и работает: различие решается раньше, когда Тильда собирает страницу на своей стороне. Поэтому вопрос «возможности бесплатной Тильды» по коду страницы не решается — по нему видно только то, что на этой странице уже стоит.

Чего в рантайме нет ни одного вхождения

По тем же 53 файлам:

Оговорка обязательная: ноль означает «нет в общих файлах рантайма», а не «нет в Тильде». Код блока, который на странице стоит, приезжает в tilda-blocks-page… — своём файле на страницу. Так что вывод узкий и всё-таки полезный: аккордеон и бегущая строка не входят в общий набор, который грузится всегда, и в Zero Block их нет — значит если они нужны внутри Zero Block, делать их придётся кодом.

Как посчитать то же на своей странице

Три команды в консоли на своей опубликованной странице:

// сколько файлов Тильды на этой странице
[...document.querySelectorAll('script[src]')]
  .filter(s => /tildacdn\.com/.test(s.src)).length

// сколько байт приехало и сколько распаковалось
performance.getEntriesByType('resource')
  .filter(r => /tildacdn\.com.*\.js/.test(r.name))
  .reduce((a, r) => (a.net += r.transferSize, a.parse += r.decodedBodySize, a),
          { net: 0, parse: 0 })

// что лежит в корзине и когда обновлялось
JSON.parse(localStorage.getItem('tcart') || '{}')

Первая команда даёт набор возможностей этой страницы. Вторая — цену набора: два числа, по сети и на разбор. Третья показывает, что корзина — это запись в браузере с полем updated, от которого считаются те самые 30 дней.

Что из этого следует

Набор файлов — это и есть список возможностей, и он честнее словесного: видно не только что есть, но и чего нет. Торговля закрыта своим кодом плотно, 631 124 байта из 1 090 156. Формы проверяют десять типов поля и молчат на одиннадцатом. Корзина живёт в браузере посетителя тридцать дней и не переживает его очистку. Ничего, что считалось бы на сервере между посещениями, в этих файлах не объявлено — и это не пробел платформы, а её граница: что делается дописыванием.