Разбор: как мы ускорили собственный сайт с 3D-планетой

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

Коротко

• При первом входе на главную браузер почти 6 секунд не мог перерисовать страницу — готовил графику для видеокарты. Теперь такие ожидания за всю загрузку занимают 0,17–0,19 с.
• Текст первого экрана больше не ждёт JavaScript. В нашем замере на телефонном профиле главная показывала заголовок через 4 с, теперь — через 1,6 с.
• На статьях и документах больше не грузится 3D-робот: JavaScript на статье — 510 КБ → 261 КБ.

Как мы мерили

Три показателя:

• LCP — момент, когда на экране появился самый крупный блок, обычно заголовок или первый абзац. Для посетителя это «страница открылась». Google считает хорошим LCP до 2,5 с.
• TBT — сколько в сумме страница была занята и не отвечала на нажатия, пока загружалась. Lighthouse считает хорошим TBT до 200 мс.
• Объём JavaScript — сколько кода браузер скачивает (в сжатом виде) и потом разбирает.

Телефонный профиль: экран 390×844, медленный 4G (задержка 150 мс, 1,6 Мбит/с), процессор замедлен в 4 раза — это близко к мобильному режиму Lighthouse. Кэш выключен, так что каждый замер — как первый визит. Заставку, которую сайт показывает новичкам, в замер не включали.

1. Планета замирала при первом входе

Главная открывается 3D-сценой: планета, туманность, комета. Чтобы её нарисовать, браузер готовит программы для видеокарты — шейдеры — и загружает в видеопамять снимки Земли.

Что было. Всё это происходило в момент первой отрисовки, в основном потоке страницы. Сборка шейдеров занимала около 4,5 с, загрузка четырёх снимков в 4K — ещё 1,2 с. Самый долгий кадр, на котором страница стояла, длился почти 6 секунд. При повторном визите было быстрее — браузер запоминает собранные шейдеры, — но каждый новый посетитель видел зависание.

Что сделали.

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

Условия: Edge, компьютер с видеокартой AMD Radeon, первый визит, главная на экране 1440×900, три прогона, 1 октября 2026 года — до запуска сайта. Для такого экрана сайт теперь выбирает снимки 2K, поэтому вторая строка сравнивает не только способ загрузки, но и размер снимков.

Остались 1–2 кадра по 0,2–0,35 с: драйвер видеокарты дособирает шейдер при первой отрисовке. Страница в это время отвечает на действия.

2. Текст первого экрана ждал JavaScript

Что было. Заголовок, вводный абзац и кнопки первого экрана плавно проявлялись. Анимацию запускал JavaScript, поэтому до загрузки скриптов текст оставался невидимым, хотя сервер уже прислал его в HTML. На медленном телефоне это до 4 секунд пустого экрана.

Что сделали. Перенесли появление на CSS: оно начинается с первой отрисовки и скриптов не ждёт. Если JavaScript не загрузился вовсе, текст просто виден. Попутно ускорили само проявление: в наших замерах браузер засчитывал LCP только по окончании анимации.

LCP на телефонном профиле, секунды, два прогона на каждую страницу. Сайт был запущен на том же компьютере, где шёл замер; 5–6 октября 2026 года.

Статья в таблице — для контроля. Анимации первого экрана на ней нет, и её цифры почти не изменились. Значит, разница на остальных страницах — от правки, а не от случайных колебаний сети.

Чем заплатили.

• На компьютере «Контакты» стали открываться позже: 0,58 → 0,91 с. Раньше форма заявки появлялась сразу после быстрой загрузки скриптов, теперь — вместе с соседней колонкой. Остальные страницы на компьютере открываются не дольше 0,94 с.
• Форма на «Контактах» теперь видна сразу, но, пока скрипты не загрузились, в неё нельзя печатать. Иначе при загрузке скриптов набранный текст пропал бы.

3. 3D-робот грузился там, где его никто не ждал

На большинстве страниц в правом нижнем углу живёт робот-ассистент — тоже 3D. Его библиотека весит около 230 КБ в сжатом виде, а разбирать браузеру приходится около 900 КБ кода.

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

Что сделали. Если визит начинается со статьи или документа, вместо робота показывается круглая кнопка чата — 3D не загружается. Если посетитель уже видел робота на другой странице, библиотека загружена, и робот остаётся с ним.

Что не стали делать. В нашем же аудите был пункт: вынести окно чата в отдельный лёгкий загрузчик. Мы проверили: код окна весит около 13 КБ в сжатом виде. Выигрыш был бы почти незаметен, поэтому эту правку делать не стали.

Боевой сайт, телефонный профиль, 22 октября 2026 года: замер утром до правки и вечером после.

LCP не изменился: текст статьи и раньше приходил готовым в HTML.

TBT от прогона к прогону сильно скачет. В парных прогонах на нашем компьютере вышло 251–426 → 98–222 мс: направление то же, но разница в 2–3 раза, а не в 6.

Что можно взять для своего сайта

1. Мерьте на медленном телефоне, а не только на рабочем ноутбуке. На компьютере наши страницы открываются меньше чем за секунду, а на телефонном профиле те же страницы — до 2,4 с.
2. Не прячьте первый экран за анимацией на JavaScript. Текст, который сервер уже прислал, должен быть виден сразу.
3. Грузите тяжёлое там, где оно нужно. Робот уместен на главной, но на статье его никто не ждёт.
4. Сначала замер, потом правка. Пункт аудита про чат выглядел разумно, а замер показал, что выигрыш — 13 КБ.
5. Держите контрольную страницу. Статья без анимации в таблице показала, что разница — от правки, а не от случайности.

Если ваш сайт медленно открывается на телефоне, напишите нам — можем разобрать его так же. Как мы делаем сайты — на странице «Создание сайтов».