Дебаг производительности страницы средствами браузера

Читал на Tbilisi JS Meetup #3 доклад про то, как пользоваться вкладкой Performance в девтулзах Chrome. Уже после доклада понял, что я показал некоторые фишки раньше, чем был их официальный релиз в Chrome, потому что привык пользоваться «канареечной» версией браузера. Теперь делюсь и с вами.

https://www.youtube.com/watch?v=CBi-ycq3tuo

Многослойный подход к Speculation Rules

Гарри Робертс делится интересным способом добавления эффекта «мгновенности» при переходе по ссылкам.

Сразу покажу его сниппет:

<noscript type=speculationrules>
  {
    "prefetch": [
      {
        "where": {
          "selector_matches": "[data-prefetch]"
        },
        "eagerness": "immediate"
      },
      {
        "where": {
          "href_matches": "/*"
        },
        "eagerness": "moderate"
      }
    ],
    "prerender": [
      {
        "where": {
          "selector_matches": "[data-prefetch=prerender]"
        },
        "eagerness": "immediate"
      },
      {
        "where": {
          "selector_matches": "[data-prefetch]"
        },
        "eagerness": "moderate"
      }
    ]
  }
</noscript>

Итак, что здесь происходит.

- <noscript type=speculationrules> — это подсказка браузеру, что на странице нужно применять Speculation Rules. Если ещё не сталкивались с такими, можете почитать про них тут: https://developer.chrome.com/docs/web-platform/prerender-pages.
- Вместо того, чтобы размечать конкретные ссылки, Гарри предлагает использовать атрибут [data-prefetch]. Если он есть у ссылки, тогда сработает оптимизация.
- Для всех внутренних ссылок без атрибута всё равно включается оптимизация, ресурсы начнут скачиваться по задержке курсора на ссылке или в начале нажатия на ссылку.
- Если атрибут выставлен как [data-prefetch=prerender], то это просьба браузеру отрендерить контент по ссылке заранее, как только он найдёт это правило.

Таким образом можно разметить супер-важные для быстрого отображения страницы, чтобы они рендерились ещё до того, как пользователь подумал о том, что он туда перейдёт. Для всяких лендингов с единственной кнопкой-переходом — отлично.

Разумеется, помните, что такие оптимизации не бесплатны. Пререндеринг и префетчинг — это запросы на сервер. Можно неаккуратно задудосить самих себя, если настроить правила криво. Но если вы всё-таки понимаете, как разменять серверное время на прибыль бизнесу и удобство пользователей — дерзайте, подход интересный.

https://csswizardry.com/2024/12/a-layered-approach-to-speculation-rules/

Отдельный канал про работу, продуктовое и менеджерское

<оффтоп>

Когда я заводил этот канал, то хотел просто делиться мыслями о всяком, не только о фронтенде. Но как-то само собой получилось, что он превратился в эдакий филиал «Веб-стандартов», где я несколько раз в неделю делюсь своими мыслями по поводу прочитанных статей или просмотренных видео около фронтенда. Иногда проскакивают менеджерские или популярно-научные видео в рубрике «Видео выходного дня».

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

Можно было бы забить и просто постить что угодно — это ж мой канал, что хочу, то и делаю. Но совесть не позволяет. Самого бесит, когда классные блогеры начинают сезон шаринга «очень полезными папками», не очень релевантный каналу.

Поэтому завёл отдельный канал @mefody_work, куда буду постить всякое интересное про свою работу и про то, как я обучаюсь продуктовому менеджменту.

- Это что, канал @mefody_dev всё?
- Нет, не всё. Фронтенд — это то, что мне супер-интересно. И не смогу я просто взять и бросить изучать то, чем занимаюсь больше 15 лет. Так что новости про фронтенд сюда буду продолжать постить.

- И что ты там будешь в новом канале постить?
- Я сейчас активно погружаюсь в роль руководителя продуктов, читаю умные книжки, смотрю полезные видео. Плюс мы с большой классной командой делаем всякое полезное для мира олимпиадного программирования и обучения. Буду рассказывать про это.

- А времени на всё хватит?
- Я пока не планирую в новом канале публиковать новое так же часто, как здесь. К тому же у меня мозг так работает, что мне проще чему-то научиться, пересказав это своими словами. Оказывается, есть люди, готовые читать такие пересказы — вас только в этом канале больше 4.5 тысяч 🙂 Так что посмотрим, но должно хватить.

- А почему у тебя и в новом канале обсуждения выключены?
- Потому что мне лень модерировать неконтролируемый флуд, а он точно будет. Если вас что-то задевает настолько, что хочется обсудить — можно писать мне в личные сообщения, как и было в этом канале.

В общем, присоединяйтесь, если вам интересно читать не только про фронтенд. Всем буду рад.

</оффтоп>

https://news.1rj.ru/str/mefody_work

UPD. Естественно, первое, что мне написали в личку про новый канал, «Включи комментарии, ну ты чего!». Ладно, включил, проверим, хватит ли меня 🙂

Релиз Node.js 22.12.0

Чего это я вдруг решил написать про минорный релиз ноды? Тем более до этого я как-то про релизы ноды вообще не писал.

А случилось важное. С этой версии можно подгружать ES-модули при помощи require(). Раньше для этого надо было запускать ноду с флагом --experimental-require-module, если уж очень надо было. А теперь флаг не нужен, работает по умолчанию.

Если вам наоборот надо выключить от греха подальше приятную новинку, то можно использовать флаг --no-experimental-require-module.

Давно жду этой маленькой, но приятной мелочи. Страдать из-за модулей-немодулей мы в Node.js, кажется, будем вечно, но теперь хоть поприятнее будет совмещать два мира и не бояться получить ошибку при очередном обновлении зависимостей.

https://nodejs.org/en/blog/release/v22.12.0

Эффект матового стекла с backfrop-filter

Джош Камю по шагам показывает, как сделать эффект матового стекла для каких-то поверхностей, накладывающихся на контент. Как обычно, с большим количеством демок и крутилок-переключалок, чтобы попробовать код в действии.

Раньше такие эффекты очень любили, спасибо Apple за популяризацию глассморфизма. И сейчас у них будто бы очередное возрождение, всё чаще вижу в интернетах на новых сайтах.

Джош показывает демки на примере стики-шапки — не делайте так, пожалуйста, очень сильно мешает читать пункты меню в самой шапке. К тому же яркий белый элемент под шапкой вообще вам всё сломает. Но для всяких визуальных частей сайта, где надо красивенькое стёклышко — то, что надо.

https://www.joshwcomeau.com/css/backdrop-filter/

Эффект полутонов в 3 строчки CSS

Ана Тюдор показывает, как совместить всего три свойства — background, background-blend-mode, filter — чтобы получить красивый эффект рисования однотонными точками (и не только). Вся магия в том, что filter: contrast превращает полутона в превалирующий цвет. Было разблюренное чёрное пятно на белом фоне — получится яркий чёрный кружок с чёткими белыми краями.

Если соединить два фона внутри background, поиграться с режимами смешивания и бахнуть поверх контрастом, то получается красивое.

В статье очень много демок, которыми можно вдохновиться на создание своих паттернов для интерфейсов.

https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

Иконочные шрифты — это плохо?

Олли Уильямс пробует разобраться, действительно ли в 2024 году плохо использовать иконочные шрифты.

- Говорят, иконки в шрифтах невозможно перекрасить. Но вообще-то браузеры уже умеют в COLRv1, то есть в цветные шрифты, которые вполне себе можно перекрашивать.

- Говорят, что если нужно сделать чуть более жирную иконку, то шрифт развалится без значительных доработок. Ну, вообще-то мы уже давно умеем в вариативные шрифты, а там можно на различные параметры завязать жирность — вот и решение.

- Говорят, иконочные шрифты негативно влияют на производительность страницы. Но ведь woff2 очень даже компактный, а если сверху добавить unicode-range вместе с каким-нибудь glyphhanger, то ничего лишнего на страницу и не попадёт.

- Говорят, если шрифт не загрузится, пользователь увидит страшное. Ну, вообще-то если ваши иконки не встроены SVG-спрайтом или инлайном на страницу, то всё тоже может сломаться.

- Говорят, иконочные шрифты ломают доступность. Да, символы в том же Font Awesome явно не те, которые будет адекватно озвучивать скринридер. Но у нас уже есть в браузерах как ARIA-атрибуты, так и content: 'text' / 'alt-text'; для псевдоэлементов.

В статье есть ещё пара аргументов в пользу того, что на самом деле иконочные шрифты не так уж и вредны. Хотя в конце Олли советует всё-таки использовать SVG для таких задач, потому что там проблем в разы меньше, а накопленного опыта — больше.

Я же хочу добавить, что добавляя иконочный шрифт на сайт вы сами себя делаете заложниками этого шрифта. Не знаю, как вы, а я вот довольно плохо понимаю, как сделать качественный шрифт, который не содержит внутри кучу мусора, правильно обрабатывается всеми инструментами, умеет в вариативность, цветные глифы, ещё и с текстом выравнивается адекватно, если вставить его в строку. Почитайте хотя бы Романа Шамина в твиттере, как он подходил к разработке шрифта Злых Марсиан — я о таких нюансах даже не задумывался раньше. А с SVG, мне кажется, веб-разработчик всё-таки как-нибудь справится, если ему нужно будет что-то даже радикально поменять.

https://fullystacked.net/icon-fonts/

Опыт использования CSS Container Queries командой Netflix

На web.dev периодически появляются «истории успеха», когда большие компании делятся тем, как они использовали современные технологии (часто — доступные только в Chrome) и им это сильно помогло. И вот, чем поделилась команда Netflix (очень популярный стриминговый сервис с фильмами и сериалами, если вдруг не знали).

1. Пришлось сменить мышление, чтобы проектировать интерфейсы не сверху вниз, а снизу вверх. Раньше нужно было думать сначала о странице, потом уже сообщать компонентам, как они должны на странице себя вести, а потом всё это собирать воедино. Теперь можно сразу продумать гибкость компоненту, потому что он завязан не на вьюпорт, а на контейнер, в который он будет встраиваться. И из компонентов собирать страницу, как из кубиков Лего.

2. Проще работать с медиавыражениями. Раньше нужно было опираться одновременно и на размеры вьюпорта, и на какие-то классы или стили, устанавливаемые через JavaScript. Теперь достаточно смотреть только на размеры контейнера.

3. В принципе стало нужно писать меньше кода. JavaScript почти стал не нужен для выставления размеров элементам. А чем меньше кода, тем проще избавиться от багов.

4. Лучший Developer Experience. Судя по цитатам, некоторые разработчики считают, что так и должен был работать CSS изначально.

5. Ко всему этому можно привязать полифил, если надо работать в браузерах, где Container Queries нет.

Вообще радует, конечно, что наконец-то появилась компания, которая рискнула попробовать классную фичу в большом продакшене. Справедливости ради, внедрили они её не главной Нетфликса, а на страничках проекта Tudum, но говорят, что планируют и в других частях сервиса попробовать. Для меня это сигнал, что с полифилом я вполне себе могу и сам попробовать такое внедрять в своих проектах, если это реально поможет команде эффективнее работать с переиспользуемыми компонентами.

https://web.dev/case-studies/netflix-cq

Как звучит загрузка страницы

Пока многие решают задачки в Advent of Code, Advent of TypeScript или просто открывают классические адвент-календари с подарочками, я дополнительно читаю Web Performance Calendar, который в декабре каждого года тоже раз в день выкладывает по одной интересной статье.

Брайан Луис Рамирес в рамках одной из таких статей поделился забавным инструментом, который озвучивает загрузку страницы по HAR-файлу. Вам нужно открыть DevTools, во вкладке Network поставить тротлинг сети (чтобы звук был подольше), загрузить нужную вам страницу, экспортировать HAR-файл и загрузить его в утилиту Soundtrace.

Я уже сайтов 10 послушал. Есть ли от этого какая-то практическая польза лично для меня? Скорее нет, это просто забавно. К тому же параллельная загрузка чанков, предупреждаю сразу, звучит крайне неприятно для уха. Но вообще появилась идея, что если на разные форматы ассетов и на разные события загрузки навесить разные узнаваемые звуки, то в принципе можно научиться отлавливать проблемы перфоманса ухом, особенно если вы аудиал с абсолютным слухом. Ну или можно навесить разные аниме-звуки, чтобы просто было ещё веселее.

https://calendar.perfplanet.com/2024/how-does-web-performance-sound/

Переходы страниц как в Internet Explorer

Когда я читал доклад про View Transitions API, то шутил, что современные браузеры наконец-то научились делать то, что Internet Explorer умел ещё в версии 4.0. Можно было написать что-то вроде <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=3)" />, и страница появлялась через 3 секунды со спецэффектами жалюзи. Олды помнят.

А Брамус взял и собрал библиотеку, которая реально обрабатывает такие метатеги и при помощи View Transitions API воссоздаёт те самые милые сердцу спецэффекты. Пока игрался с демкой, олдскулы порвало.

https://page-transitions.style/

Про local-first подход, движки синхронизации и архитектуру приложений

Видео выходного дня. Кирилл Мокевнин и Андрей Ситник хорошо обсудили то, как современные возможности браузеров позволяют делать полноценные приложения без нужды в запросах к бекенду на каждое нажатие кнопки. И хоть local-first подход не применить вообще для любого приложения, но знать и уметь работать с «умной» синхронизацией — полезный навык.

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

https://youtu.be/-57r5AARRgY

Собственный инструмент замеров скорости сайта на основе Puppeteer

Генри Прайс показывает, как можно при помощи Puppeteer собирать нужные именно вам метрики с сайта.

В статье есть примеры, как искусственно замедлить сеть, эмулировать устройства, собрать Core Web Vitals и выгрузить это всё в табличку Excel. Но на самом деле, так как вы по сути запускаете почти полноценный браузер в CI, то делать на странице можно почти что угодно и замерять можно почти какие угодно синтетические метрики. Важно только не забывать, что это синтетические замеры, а не RUM.

https://calendar.perfplanet.com/2024/build-your-own-site-speed-testing-tool-with-puppeteer/

А вот и доклады с Субботника https://www.youtube.com/playlist?list=PLKaafC45L_STvTWPrSF_m5hV9LMj0uFi0

Собрал в свой доклад примерно год копаний в теме сендбоксинга JS. Понимаю, что тема очень узкая, но и информации по ней очень мало, тем ценней каждый доклад.

Going Offline

У Джереми Кейта в 2018 году вышла хорошая книга по тому, как сделать offline first приложение. Он объясняет возможности сервис-воркеров, как работать с запросами, какие стратегии существуют и как это связано с PWA. И хоть прошло уже 6 лет, книга всё ещё хороша, чтобы научиться основам работы с сетью через сервис-воркеры, рекомендую.

А сейчас она ещё и бесплатная. В PDF, ePub и Mobi.

https://goingoffline.adactio.com/

Новогодний выпуск №455. Вадим, Алексей, Юля, Полина, Никита, Андрей кормят белок, играют колмимейби, красят плитку, ждут группу, спрашивают шляпу и атакуют титанов.

— Видео на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

Чиним год в футере

В начале каждого года в проектах приходится идти и менять год в футере сервиса. У меня буквально в первый год работы в Поиске была задача переснять все тесты с футером, потому что они начинают падать 1 января.

А тут вот поделились готовым решением всех проблем. Есть как npm-пакет, так и API, которое позволит вам больше не думать о проблеме.

Надеюсь, вы понимаете, что это шутка. Но сайт прекрасен.

https://getfullyear.com/

Запуск TypeScript на Node.js

Начиная с Node.js v23.6.0 можно запускать TypeScript-файлы в Node.js без всяких флагов. Это всё ещё экспериментальная фича, но вот, как она работает:
- Нода выпиливает TS-фичи из кода и просто выполняет, что получилось. Убирает типы, то есть.
- Если в коде есть enum, namespace и прочие улучшалки из мира TS, которых на самом деле нет в JS, то магия не случится, код сломается.
- Расширение файла .mts — это модульный JS, .cts — CommonJS, .tsx — не поддерживается.
- Просто .ts файлы обрабатываются как .js, то есть модульность берётся из package.json.

Таким образом, рано или поздно для серверных штук мы вполне можем прийти к сценарию, когда для разработки активно используется TypeScript со всеми проверками, строгими и нестрогими, чтобы писать более-менее качественный код, а запускаются на выполнение в проде те же самые файлы, без транспиляции. Для всяких CI/CD — обалденная экономия. А то сейчас надо сначала установить TypeScript или достать его из кэша, запустить на транспиляцию, и только потом можно что-то запускать. Для мелких скриптов — расточительнейшая трата времени и железа.

Больше подробностей про фичу — у доктора Акселя Раушмайера.

https://2ality.com/2025/01/nodejs-strip-type.html

CPU-хак для CSS

Рубрика «Ненормальное программирование».

Задача: сделать так, чтобы значение CSS-переменной самостоятельно увеличивалось от собственного значения по какому-то сигналу. Что-то вроде --my-var: calc(var(--my-var) + 1);. В императивных языках же есть i++, подавайте-ка его сюда и в декларативные языки, будьте любезны.

Разумеется, прямо так сделать нельзя, иначе бы получались циклические зависимости, из-за которых невозможно отрисовать кадр. CSS-движок в том числе проверит, чтобы у вас не было обращения переменной к самой себе через другие переменные. Так в спеке написано.

Но... Джейн Ори делится интересным хаком, который позволяет всё-таки обойти это ограничение. Для хака нужно знать три вещи:
1. Анимация имеет высокий приоритет в каскаде. Свойство, которое меняется анимацией, никакой специфичностью не перебить.
2. У анимаций есть кэш. Чтобы не считать значения свойств внутри анимаций по кругу, они жёстко кэшируются, даже если внутри идёт обращение к var(--my-var), которая где-то снаружи меняется.
3. Кэш анимации сбрасывается, если изменить сами свойства, касающиеся настроек анимации, вроде animation-play-state или animation-duration.

А дальше нужно хитрым образом переключать «кадры» так, чтобы кэш то сбрасывался, то включался. Коротко объяснить не смогу, смотрите демки в статье, с ними становится понятнее. Работает вся магия по ховеру, потому что для запуска заклинания без JavaScript всё-таки нужно из мира HTML прокинуть каким-то образом сигнал для старта в CSS.

Почему это называется CPU-хаком? Потому что по сути у вас появляется простой вычислительный юнит в CSS, настоящий счётчик, который можно менять под свои нужды. Так Джейн Ори делится демками, где она на чистом CSS подбирает позицию курсора во вьюпорте (причём бинарным поиском, чтобы быстрее было), запускает игру «Жизнь» Конвея, а потом всё это комбинирует в полноценный Арканоид.

Зачем это уметь? Ведь на JS объективно понятнее, производительнее и правильнее такое делать.
- Во-первых, я пока разбирался в демках, сломал мозг, но немного прозрел. Мне просто нравится разбираться в таких нюансах. Знание — сила.
- Во-вторых, знание про особенности кэширования значений в CSS может спасти вам часы дебага хитроумных ошибок в проде. У меня буквально такой кейс был в одном из проектов, где надо было сбросить кэш, а до этого в принципе понять, что ошибка в кэше.
- В-третьих, скажите потом ещё, что CSS — не язык программирования.

https://dev.to/janeori/expert-css-the-cpu-hack-4ddj

Рефакторинг на максималках

В 2022 году Саша Беспоясов так сильно не поместился в 40-минутный слот доклада на конференции со всем материалом, который ему хотелось рассказать, что собрал сборник материалов в виде книги.

В книге Саша делится своим опытом по рефакторингу, но сразу предупреждает, что не претендует на единственно истинные подходы. Тем не менее от себя скажу, что много интересных мыслей почерпнул, когда читал её пару лет назад. И вот сегодня обнаружил, что с вами ссылкой не делился. Исправляюсь.

https://refactor-like-a-superhero.vercel.app/ru