Откуда берётся скорость

Почему статика открывается быстрее любого SPA, и что именно тут оптимизировано.

заметкитехника

Обычный сайт на фреймворке делает так: скачивает JS, выполняет его, ходит за данными, потом рисует. Три круга до первой буквы на экране.

Здесь по-другому — HTML уже собран заранее:

  1. Браузер получает готовый документ
  2. CSS вшит прямо в него, отдельного запроса нет
  3. Рисует

Что конкретно сделано

  • Шрифты системные. Ноль сетевых запросов, ноль скачков вёрстки при загрузке.
  • CSS инлайнится в <head> — на страницу приходится один запрос вместо двух.
  • JS почти нет. Только переключатель темы, около 400 байт.
  • Анимации на GPU. Мерцание трогает лишь opacity и transform, так что браузер не пересчитывает раскладку.
  • Префетч по наведению. Пока курсор едет к ссылке, страница уже качается.
// весь клиентский код темы — вот он
const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
root.dataset.theme = next;
localStorage.setItem('theme', next);

Итог — страница показывается за один сетевой круг.