Что инструмент скачивает до того, как вы что-то нажали

Цифра, которую никто не публикует

Список функций публикуют все. Сколько весит страница до того, как вы ей воспользовались, — почти никто. А именно эта цифра решает, каким инструмент ощущается: на телефоне при обычной мобильной связи каждые примерно 400 КБ JavaScript — это ещё секунда взгляда на страницу, которая выглядит готовой, но ещё не работает.

Для нас это важнее, чем для большинства. nopa работает на вашем устройстве: склейка, сжатие, распознавание речи происходят в браузере, ничего никуда не загружается. Обратная сторона обещания в том, что код должен сначала приехать. Скачивание — это не накладные расходы вокруг продукта. Это и есть приезд продукта.

Как мы мерили

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

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

Что мы нашли в своём же коде

Колонка «было» — это то, что мы отгружали. Колонка «стало» — та же страница сегодня, и ни одна функция при этом не убрана.

Дело никогда не в функции. Дело в импорте.

Ни одна из этих страниц не была тяжёлой из-за того, что она делает. Каждый раз это была одна строчка в начале файла, которая тянула то, что страница никогда не запустит.

• Проверка «а модель уже скачана?» тянула за собой весь runtime машинного обучения — 539 КБ — на страницы, которые никаких моделей не запускают. Теперь она читает кэш браузера напрямую, девятью строчками.
• Zip-хелпер был импортирован в начале PDF-движка, поэтому любая страница, где что-то архивируется, скачивала ещё и 443 КБ кода для PDF. Загрузка хелпера в момент использования вдвое ужала четыре страницы инструментов.
• Эмодзи-пикер отгружал таблицу ключевых слов — половину датасета по весу — до первого нажатия клавиши. Теперь она приезжает с первым поиском, то есть тогда, когда её вообще кто-то читает.
• Целая библиотека анимаций грузилась ради одной шторки, которая выезжает на телефонах. В браузере есть встроенный API анимаций; библиотека уехала.
• Индекс каталога на 373 КБ грузился на каждой странице ради одной строки ссылок «похожие инструменты».

Почему здесь нет цифр конкурентов

Мы хотели поставить в эту таблицу другие сервисы. Честно не получилось. Первая попытка скачивала страницы конкурентов и считала скрипты в HTML; вышло, что известный PDF-сервис отгружает 2 КБ JavaScript — просто потому, что само приложение подгружается тем же JavaScript, а не лежит в разметке. Цифра, которую нельзя воспроизвести, хуже, чем её отсутствие, а сравнение, где мы сами себе ставим оценку, — не сравнение.

Поэтому в таблице выше только наши собственные страницы. А вместо цифр, которые пришлось бы принимать на веру, — метод.

Померить любой инструмент за тридцать секунд

Работает на любом сайте, включая наш. Если наши цифры врут, вот так вы нас на этом поймаете.

• Откройте инструмент в браузере на компьютере и откройте инструменты разработчика (F12), вкладка Network.
• Поставьте галочку «Disable cache», отфильтруйте по JS и перезагрузите страницу.
• Посмотрите на итог transferred внизу до того, как что-то нажали. Это и есть загрузка, за которую вы платите при каждом холодном заходе.
• Проверка на «работает локально»: после загрузки страницы выключите сеть и выполните свою задачу. Получилось — работа идёт на вашем устройстве. Не получилось — ваш файл куда-то уезжал.

Что мы теперь себе запретили

У каждого маршрута есть жёсткий потолок в 600 КБ JavaScript, и скрипт, который его меряет, громко падает при превышении. Именно это не даст истории повториться: четыре правки выше заняли день, а нужны они были месяцами только потому, что никто не считал.

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