Блуждая по социальным сетям, я наткнулся на пост Алекса Рассела и не смог пройти мимо. Контекст: OpenAI поделилась лэндингом, на котором сообщила о приобретении и поглощении технологической компании io.
На лэндинге несколько абзацев текста, логотип, изображение и видео. Далее привожу адаптацию поста Алекса:
Узрите мощь полностью функциональной страницы на Next.js и Tailwind! 3мб (11.4мб без сжатия) JS на критическом пути рендеринга, чтобы отобразить 1.4кб (2.8кб без сжатия) текста, изображение и видео «ниже сгиба»:
https://www.webpagetest.org/video/compare.php?tests=250523_BiDc3Y_JJ0-r:1-c:0
Больше всего я хочу, чтобы инженеры перестали восторгаться что они использовали, а задавались вопросом «насколько это хорошо?».
«Почему основной поток заблокирован на несколько секунд перед отображением текста?» — спросите вы. Это чертовски хороший вопрос. Наряду с вопросами «как это вообще отправили в релиз?» и «почему Vercel не предложила помощь по ручной настройке, чтобы избежать дальнейшего позора?».
В этот список можно добавить вопросы «почему для hero-изображения в верхней части страницы установлено loading="lazy"?» и «как тут оказался рендерер markdown?» или «что делает JS-движок LaTeX на критическом пути?».
Вы также можете задаться вопросом, что это за чертовщина (на скриншоте), и, возможно, вам придётся разобраться. Это диапазоны IP-адресов стран в бинарном формате, размером 338кб (1.3мб без сжатия). И всё это на критическом пути рендеринга.
Эти и другие загадки ожидают в бандлах OpenAI, если заглянуть и изучить их. Воистину, вершина технологий в 2025 году!
В одной из ведущих технологических компаний, с огромными ресурсами и доступом к лучшим разработчикам мира не смогли нормально сделать лэндинг с парой картинок и текстом.
Описание изображения:
Фрагмент модуля JavaScript, сгенерированного с помощью Webpack. Модуль содержит буфер из строки в шестнадцатеричном формате. По миникарте видно, что большая часть файла занята этой строкой, что заметно увеличивает его размер.
#performance