Art Quest · Horror Cinema · MORPHEUS
Три сайта легче и удобнее.За одну смену.
Мы взяли сайты квестов, хоррор-кинотеатра и театра так, как их видит гость с телефона. Картинки весили мегабайты, карточка cookie закрывала пятую часть экрана, у виджета записи подписи не проходили проверку контраста. За один день мы сжали картинки и шрифты, заменили карточку cookie узкой полосой, исправили контраст виджета и экраны после оплаты. Каждый слой выложили на работающие сайты с бэкапом и откатом.
Работает · выложено 28 октября 2026 · контрольный замер 29 октября
Вес загрузки
- 59 тяжелых картинок −75%
- Страница квеста «Пиковая дама» −49%
- Главная Art Quest −29%
Картинки: сумма размеров 59 файлов по истории репозитория. Страницы: вес загрузки по Lighthouse до выкладки и 29 октября 2026.
- −75%вес 59 тяжелых картинок20,46 → 5,02 МБ
- 1 565 → 794 КБвес страницы квеста «Пиковая дама»минус 49%
- 134 → 0нарушений контраста в виджете записи
- 141 → 55 pxвысота полосы cookie на телефонебыла карточка в пятую часть экрана
Что видел гость на телефоне
Гость открывает главную Art Quest с телефона. Поверх страницы встает карточка cookie. На экране 375 на 667 пикселей она занимала 141 пиксель, то есть 21% высоты, и закрывала кнопки.
Дальше шли картинки. Самый тяжелый файл весил 1,94 МБ. Страница квеста «Пиковая дама» тянула 1 565 КБ. Для гостя с телефона это лишний вес на каждой странице.
Мы выбрали слои, которые дают больше всего, и выкладывали их по отдельности: серверная часть вышла семью выкладками. Вес страниц мы мерили Lighthouse на публичных адресах до выкладки и повторно 29 октября 2026.
Картинка в 1,94 МБ стала 24 КБ
На сайтах Art Quest и Horror Cinema мы перевели в формат webp 59 тяжелых картинок. Файлы стали примерно в четыре раза легче.
Эти 59 файлов весили 20,46 МБ, теперь весят 5,02 МБ. Это минус 75%. Оригиналы остались на месте, прежние ссылки можно вернуть в любой момент.
- 1,94 МБ → 24 КБсамая тяжелая картинка
- 1,75 МБ → 74 КБвторая по весу
- 1,20 МБ → 19 КБтретья по весу
Картинки для превью в соцсетях и разметки поиска мы не трогали: так ссылки на сайты выглядят в мессенджерах как раньше.
Шрифты вдвое легче
Art Quest рисует страницы шрифтом Nunito, пять начертаний. Каждое весило 85–91 КБ в старом формате woff. Мы собрали из них подмножества с латиницей и кириллицей в формате woff2: по 38–40 КБ, то есть меньше более чем вдвое.
Два шрифта теперь загружаются заранее, а старый формат остался запасным. На страницах сертификатов шрифты больше не задерживают показ текста.
Вместе с картинками это дало страницу «Пиковая дама» в 794 КБ вместо 1 565 КБ: минус 49%. Контрольный замер 29 октября показал 792 КБ. Главная Art Quest стала легче с 572 до 404 КБ, минус 29%.
Было
- Шрифт: 85–91 КБ на начертание
- Страница квеста: 1 565 КБ
- Главная Art Quest: 572 КБ
- Картинки: 20,46 МБ на 59 файлов
Стало
- Шрифт: 38–40 КБ на начертание
- Страница квеста: 794 КБ
- Главная Art Quest: 404 КБ
- Картинки: 5,02 МБ на 59 файлов
Одна узкая полоса вместо карточки
У уведомления о cookie были дубли и разные тексты. Мы оставили одно: узкую полосу внизу экрана с одним коротким текстом и кнопкой «Понятно».
Дубли убрали с 18 страниц Art Quest. Полоса прячется, пока гость печатает в поле формы, и не закрывает клавиатуру. В день выкладки она занимала 63 пикселя, 9% экрана. После единого текста для трех сайтов контрольный замер 29 октября на телефоне 375 на 667 показал 55 пикселей, 8%.
Виджет записи: 134 нарушения контраста, ноль
На страницах «Проклятие монахини» и «Проклятие монахини 2.0» Art Quest встроен виджет записи «Мир квестов». Гость выбирает день и время в сетке слотов. Занятое время сливалось с фоном, а подписи под слотами были бледными.
Автоматическая проверка доступности (axe) насчитала 134 нарушения контраста на экранах 375 и 1440 пикселей. Мы добавили один файл стилей поверх виджета. Теперь подписи читаются, а занятые слоты зачеркнуты. Нарушений ноль, слоты остались видимыми и кликабельными.
Экраны оплаты без тупиков
Гость мог открыть ссылку на подарочный сертификат и увидеть «Сертификат не найден» без единой кнопки. Теперь на экране есть кнопка возврата на сайт.
Отдельно разобрали возврат на страницу оплаты без данных заказа. Вместо пустой формы гость получает понятный текст. MORPHEUS получил общий стиль страницы оплаты: раньше этот файл на сайте отдавал ошибку 404.
- Сертификат
Сертификат не найден
Экран с брендом сайта и кнопкой «На сайт».
- Оплата
Возврат без заказа
Короткая подсказка вместо пустой формы.
- MORPHEUS
Страница оплаты
Общий стиль подключен, страница выглядит как сайт.
Слои, а не одна большая выкладка
Серверная часть этой волны вышла в семь выкладок 28 октября. Перед каждой мы сохраняли заменяемые файлы. Сверка рабочего дерева сервера с репозиторием до и после выкладок прошла без расхождений.
Картинки с полосой cookie и контрастом виджета, экраны оплаты, шрифты, правки для iPhone и пиксели выходили отдельными слоями, у каждого свой бэкап. Слой можно откатить, не трогая остальные.
- Картинки и cookiewebp для 59 картинок, одна полоса cookie, контраст виджетаОткат: копия заменяемых файлов, один архив
- Сервер сайтовобщий стиль оплаты MORPHEUS (раньше отдавал 404)Откат: копия конфигурации до правки
- Экраны оплатыкнопка возврата на сайт, подсказки при пустом заказеОткат: копия заменяемых файлов, один архив
- Шрифтыwoff2 с запасным woff, предзагрузка двух шрифтов первого экранаОткат: копия заменяемых файлов, один архив
- Правки для iPhoneполя форм, зоны нажатия, читаемость первого экранаОткат: копия заменяемых файлов, один архив
- Скрипт cookie, обновлениеединый текст полосы на трех сайтах, новый порядок загрузки счетчиковОткат: копия заменяемых файлов, один архив
Сверка рабочего дерева сервера с репозиторием до и после выкладок прошла без расхождений.
Как проверяли результат
- Вес страниц: Lighthouse на публичных адресах до выкладки и контрольный замер 29 октября (страница квеста 792 КБ, главная Art Quest 404 КБ).
- Контраст виджета: автоматическая проверка axe на экранах 375 и 1440 пикселей.
- Кадры до и после сняты на публичных страницах Art Quest и Horror Cinema.
Как это делалось
Как это делалось
Мы начали с замера, потом снимали самое тяжелое. Каждый слой выкладывали отдельно, с бэкапом перед выкладкой.
- ЗамерВес страниц по Lighthouse, размеры файлов по истории репозитория, axe для контраста, кадры до и после.
- ВыкладкаСлой за слоем на работающие сайты, бэкап перед каждым, сверка сервера с репозиторием до и после.
- ПроверкаКонтрольный замер на следующий день по публичным адресам.
Для технических читателей
Для технических читателей
- Картинки
- webp рядом с оригиналами, ссылки в HTML заменены; og:image и разметка поиска остались прежними.
- Шрифты
- Nunito в woff2 с подмножеством латиницы и кириллицы, woff запасной, preload двух шрифтов, версия css в адресе.
- Cookie
- Один скрипт на трех сайтах, фиксированная нижняя полоса, скрытие при фокусе в поле ввода.
- Доступность
- Отдельный css-слой контраста поверх встроенного виджета, проверка axe color-contrast.
- Сервер
- Docker-сборка серверной части, Caddy для MORPHEUS, архив заменяемых файлов и скрипты отката.
Откуда цифры
Откуда сведения
- Журнал выкладок за 28 октября 2026 и история изменений репозитория сайтов: размеры файлов до и после.
- Карточка работы и отчет о выкладке с замерами веса страниц до выкладки.
- Контрольный замер Lighthouse 29 октября 2026 по публичным адресам (вес страниц) и измерение высоты полосы cookie.
- Кадры до и после с публичных страниц Art Quest и Horror Cinema.
Следующая система
Подарочные сертификаты с оплатой и личной ссылкой →