Остановите складку, ожидающую гидратации, и очистите окно нагрузки

Performancekamo-marketing
Порезанный
19 августа 2026 г. в 17:29 UTC
Автор
Kamo
Обещать
917ad87

Домашняя страница отгрузила всю свою складку невидимой. Framer Motion представляет собой «Первоначальный» реквизит в предзаказываемый HTML как встроенный стиль, поэтому разметка прибыл с <h1>, колонкой копии, диафрагмой барабана и полным кровотечением «Непрозрачность: 0» — и оставался таковым до тех пор, пока React не Загружается, разбирается и увлажняется и запускает свой первый анимационный кадр. Первый и Таким образом, самая большая содержательная краска измеряла четверть мегабайт JavaScript. Пакет, а не страница: сервер уже отобразил заголовок Сценарий сдерживал его. Ничто не видит этого - не сборка, тип Check, the lint run или навигационная защита — и на настольной ссылке это невидимым. "завернуть" страницу и посчитать "непрозрачность:0": 102 из них, каждый элемент Среди них есть и те, которые выше. Те же самые входы, с той же продолжительностью и ослаблением, теперь являются CSS-клавиатурами. Стильная таблица анализируется до того, как был получен один сценарий. LCP - это фон использует переход, а не кейфрейм, потому что переход не работает на начальном рендере - поэтому кадр, который находится по прибытии, просто Нечего ждать, пока LCP не выживет. Остальная часть окна загрузки, в порядке убывания чего стоит: • катушка начала платить с первого байта — «preload=»metadata», a плакат на элементе и адаптивная лестница, открывающаяся на ступеньке 540p 1.17 Мбит/с — для диафрагмы, которая на узком смотровом поле находится ниже складки, Под колонкой копий. Теперь он ждет события нагрузки, затем главного нить, чтобы идти без дела, затем для диафрагмы, чтобы войти в видоискатель. Уровень Он ограничен размером игрока и начинается на нижней ступеньке телефона. Считыватели Save-Data и 2G/3G сохраняют рамку плаката и кнопку перезапуска. Сам плакат был 93 KB JPEG на однодневном заголовке кэша. Через Оптимизатор изображения - это AVIF 26 КБ на неизменяемом URL, и это не так. До тех пор, пока катушка не разыскивается. • Логотип бренда составляет 132 КБ от восьмидесятичной потрации, предварительно загруженной в виде Изображение, чтобы нарисовать отметку 140 px в ширину. Округленная до одной десятичной от 3503 единицы Пространство с повторяющимся наполнителем поднято, оно составляет 59 КБ — геометрически идентичные 0,0023 CSS px при самом большом размере, на котором он когда-либо отображался. скрипты/ Optim-logo-svg.mjs идемпотентен, в следующий раз логотип экспортируется. GSAP был в списке сценариев каждой страницы сайта четыре раза. over: a tween on the progress bar's glow, 'gsap.set()' writing two static Свойства стиля, «от To», дублирующий рябь таблицы стилей уже оживляющий и глобальный звонок, который работает только для читателей которые просили о сокращении Все четверо ушли из критического Путь; последний загружает библиотеку в свою ветку. TouchOptimized измеряет каждую кнопку, ссылку и ввод на странице во время гидратация, перемешивая каждое прочитанное с записями предыдущего элемента — форсированный синхронный контур длиной в несколько сотен элементов, приземляющийся в Тотальная блокировка Время на телефоне есть, чтобы помочь. Теперь он сдает Читает и ждет бездействия. <<Script strategy="AfterInteractive">> издает <<link rel="preload" as="script">>, который попросил браузер принести аналитический трекер Высокие приоритеты на фоне героя. LazyOnload продолжает записывать Посещение, мгновение спустя и вне критического пути. • Герой смонтировал три полноэкранных фоновых слоя. Вращение является Только для настольных компьютеров, поэтому на телефоне два из них были постоянно «непрозрачными: 0». «ClearCookieConsent» — две линии локального хранилища — был экспортирован из страны. баннер согласия, так что управление «управляем печеньем» футера перетянуло 250 строк Framer Motion в фрагмент, который отображается в исходном HTML. Он движется к app/lib/cookie-consent.ts, баннер и стек тостов теперь монтируются на Не работает: ничего не рисует по прибытии. «experimental.optimizeCss» напечатала «✓ optimizationCss» в каждой сборке и сделала это. Ничего. Он отображает критический CSS путем постобработки готового HTML, который Маршрутизатор приложения никогда не передает его. Проверено на построенный продукт с помощью бэкэнд «beeasties» фактически установлен: ноль блоков <style> в <head>, Стиль лист по-прежнему простой блокировки <link>. Removed — флаг, который сообщает Успех, в то время как инертность читается как уже принятая оптимизация. 36 селекторов классов и 24 кейфрейма в globals.css без ссылки в любом месте в репозитории, поставщике и документах. Критические байты, gzip, развернутые против чистой сборки: html 38 101 → 36 277 js 281 700 → 245 707 css 18 629 → 17 398 логотип 57 390 → 22 902 Всего 395 820 → 322 284 (-19%) жадных сценариев 15 → 13 Из окна загрузки полностью сверху: плакат 93 КБ, HLS манифест и его сегменты 1,17 Мбит/с, два фоновых изображения и трекер. Не адресовано здесь: '/' отвечает 307 на '/en', который является URL-адресом для запуска скорости страницы Тесты, которые Маяк считает перенаправлением. Единственным реальным решением является «localePrefix: asneed» — переписывает канонические, hreflang, sitemaps и каждый внутренний href через ~ 250 маршрутов в 22 местах, в то время как 301 в каждом Индексированный /en/* URL. Это решение SEO, а не производительность, и Прыжок стоит около 60 мс на уже открытом соединении.

Все изменения

Как вы видите судоходство?

Каждое из этих обновлений автоматически попадает в ваше рабочее пространство. Начните бесплатно и смотрите, как он растет неделю за неделей.

Начните бесплатно навсегдаПосмотреть цены