Саймон Уиллисон — автор Datasette и один из наиболее читаемых технических блогеров в мире LLM-разработки — опубликовал небольшой Web Component под названием <click-to-play>. Работает прямолинейно: браузер показывает статичный первый кадр GIF и кнопку воспроизведения. Сам файл загружается только после клика. Компонент написан без фреймворков и зависимостей, работает поверх обычного <img>-тега. Уиллисон сделал его для конкретного поста о новых инструментах редактирования строк в Datasette — там несколько тяжёлых анимаций, и грузить их все при открытии страницы не было смысла.
Контекст
GIF — формат старше 35 лет, но он никуда не делся. В мире технической документации, продуктовых лендингов и демонстраций AI-инструментов GIF остаётся стандартом для «покажи, как это работает». Каждый раз, когда открывается страница документации — Datasette, n8n, любого SaaS — браузер начинает тянуть все анимации сразу. Даже те, до которых пользователь не доскроллит.
Web Components — стандарт W3C, поддерживается всеми современными браузерами без полифиллов. Паттерн progressive enhancement здесь применён классически: разметка остаётся обычным <img>, JavaScript добавляет поведение поверх. Если скрипт не загрузился — GIF всё равно отобразится штатно. Надёжно и без рисков деградации.
Показательно, что Уиллисон не публикует это как npm-пакет. Это фрагмент кода, который вы берёте и используете напрямую. Ноль точек отказа через цепочку зависимостей — в эпоху supply chain атак это само по себе аргумент.
Аналитика
За микрорешением стоит более широкий паттерн: управление вниманием и ресурсами пользователя. Страницы документации AI-инструментов за последние годы стали значительно тяжелее — потому что количество «покажи на анимации» выросло кратно. Агентные воркфлоу, agentic RAG-пайплайны, MCP-интеграции — всё это нагляднее в движении, чем в тексте. Продукты лепят GIF на каждый шаг онбординга.
Результат предсказуем: страницы весят сотни мегабайт, Core Web Vitals падают, мобильные пользователи уходят до того, как страница доотрисовалась. Атрибут loading="lazy" помогает для изображений ниже fold, но GIF — особый случай: они начинают воспроизводиться сразу после загрузки, создавая нагрузку и на сеть, и на CPU одновременно. Решение Уиллисона устраняет именно этот паттерн без конвертации в WebM и без CDN-магии.
Важен и сигнал о направлении: не добавлять ещё один пакет, а воспользоваться тем, что уже есть в браузере. В мире, где любой UI-компонент тянет за собой три транзитивные зависимости, атомарный Web Component без npm — это архитектурное высказывание.
Кейсы применения в бизнесе
B2B-SaaS стартап с AI-функциями. Если лендинг содержит демонстрации AI-агента в виде GIF по 8–20 МБ каждый, страница грузится 10+ секунд на мобильном. Внедрение <click-to-play> на страницу фич или документации ускоряет первый экран без редизайна и пересъёмки материала. Конверсия из визита в «начал онбординг» напрямую зависит от того, увидел ли пользователь хоть что-то за первые три секунды.
Корпорация с внутренней базой знаний. Внутренние wiki часто содержат анимированные инструкции — как работать в CRM, шаги онбординга, обучающие видео в GIF. Если база знаний на Confluence, Notion или собственном портале — при открытии страницы грузятся все анимации сразу. Встраивание компонента в шаблон страницы снижает нагрузку на корпоративную сеть и ускоряет работу на медленных VPN-подключениях, которые типичны для распределённых команд.
SMB и локальный бизнес в КР и СНГ. Средняя скорость мобильного интернета в регионе остаётся ниже, чем в Западной Европе. Если landing page содержит GIF-демонстрацию продукта — вы теряете пользователей на этапе загрузки ещё до того, как они увидели оффер. Замена autoplay GIF на click-to-play — бесплатная оптимизация, не требующая редизайна или нового подрядчика.
Кейсы в личной жизни
Разработчик, ведущий технический блог. Туториалы с GIF-демонстрациями терминала или UI-взаимодействий — классика. Добавьте компонент: читатели смогут воспроизводить анимации в нужный момент, а не ждать, пока пять тяжёлых GIF загрузятся одновременно при скролле.
Контент-мейкер с портфолио или курсами. Страницы с примерами работ или уроки с экранными записями в GIF — частый сценарий. Превью вместо автоплея позволяет посетителю сначала прочитать контекст, а потом запустить анимацию осознанно. Это улучшает и восприятие, и время на странице.
Студент или фрилансер с демо-проектом. Если прототип AI-инструмента демонстрируется через GIF на GitHub README или на деплое в Vercel — ленивая загрузка делает страницу пригодной для просмотра на смартфоне. Особенно актуально для демо с несколькими последовательными шагами, где каждый шаг — отдельная анимация.
Как применить сегодня
- Найдите пост Саймона Уиллисона от 17 июня 2026 в его блоге — там исходный код компонента и живой пример с Datasette.
- Подключите скрипт через
<script type="module">в<head>страницы — без npm, без сборщика, без конфигурации. - Оберните тег
<img src="animation.gif">в<click-to-play>...</click-to-play>— компонент сам заберёт src и подставит превью с кнопкой. - Проверьте PageSpeed Insights до и после — изменение в LCP и Total Blocking Time будет заметным, если на странице несколько тяжёлых анимаций.
- На Next.js или Astro — используйте компонент как клиентский island или подключайте через
useEffectпосле монтирования, чтобы избежать конфликтов с SSR.