Portfolio: Extreme Performance Engineering

Этот проект — демонстрация инженерного превосходства. Я доказал, что сайт со сложной 3D-графикой, шумом и эффектами стекла может загружаться мгновенно.

Для бизнеса (Почему это круто)

Обычно красивые сайты тормозят, а быстрые выглядят скучно. Я решил эту проблему.

Факты:

• 100 из 100 баллов в Google PageSpeed Insights.
• 0.5 секунды — время полной отрисовки контента (LCP). Это быстрее, чем вы успеете моргнуть.
• Работает везде: Сайт летает даже в метро с плохим 3G и на старых Андроидах.

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

---

Технический разбор (Deep Dive)

1. Преодоление физического предела (Network Latency) LCP 0.5 секунды. Давайте разберем, откуда берется эта цифра. Для установки HTTPS-соединения браузеру нужно сделать 3-4 цикла “запрос-ответ” (TCP Handshake + TLS Key Exchange) еще до того, как пойдет первый байт данных.

Даже при отличном интернете это занимает ~300-400мс. Вывод: Если LCP равен 0.5с, а сеть занимает 0.4с, значит сам рендеринг моего кода занимает ~100мс. Это физический предел. Быстрее сделать невозможно — нас ограничивает скорость света и протоколы интернета, а не JavaScript.

2. Математика 3G и Low-End устройств При имитации 3G сети пинг возрастает. Если базовый RTT (Round Trip Time) ~150мс, то только на “рукопожатия” уйдет: 4 прохода * 150мс = 600мс (0.6 секунды простоев).

Добавляем сюда CPU Throttling 10.3x (симуляция дешевого смартфона): процессор обрабатывает скрипты в 10 раз медленнее. В таких адских условиях мой сайт загружается за 10 секунд. Многие сайты конкурентов в таких условиях просто падают по таймауту или грузятся 60+ seconds. Я добился работы тяжелых анимаций там, где другие показывают белый экран.

3. Архитектура решений Как это сделано под капотом:

• Zero Layout Thrashing: Полностью переписана логика 3D-наклона карточек. Расчеты матриц вынесены из Event Loop в requestAnimationFrame.
• GPU Composition: Принудительный will-change: transform создает отдельные слои для анимаций, разгружая Main Thread.
• SPA Memory Management: В Astro ClientRouter реализован механизм переиспользования DOM-нод частиц фона. Мы не удаляем и не создаем объекты заново при навигации, спасая CPU от сборки мусора (GC).
• Content Visibility: Браузер пропускает расчет Layout для блоков вне экрана.