Как ускорить билд в сто раз
Пару месяцев назад открыл для себя бандлер ESBuild. ESBuild умеет бандлить JS и TS и написан на Go. Это помогает ему быть во 50-100 раз быстрее, чем webpack.
Сейчас я помогаю клиенту перевести сборку с webpack на ESBuild, чтобы ускорить билд. И просто сравните ↓
(В обоих случаях один и тот же код, несколько энтри-поинтов, минификация и соурс-мапы)
Пару месяцев назад открыл для себя бандлер ESBuild. ESBuild умеет бандлить JS и TS и написан на Go. Это помогает ему быть во 50-100 раз быстрее, чем webpack.
Сейчас я помогаю клиенту перевести сборку с webpack на ESBuild, чтобы ускорить билд. И просто сравните ↓
(В обоих случаях один и тот же код, несколько энтри-поинтов, минификация и соурс-мапы)
Другой клёвый тул из этой же сферы — это компилятор swc (написан на Rust).
В отличие от ESBuild, swc не умеет бандлить, поэтому это скорее замена для Babel, чем для webpack. Это и минус, и плюс:
— заменить им весь build pipeline и ускорить сборку в сто раз не выйдет
— но попробовать его гораздо проще — достаточно поменять babel-loader на swc-loader
В отличие от ESBuild, swc не умеет бандлить, поэтому это скорее замена для Babel, чем для webpack. Это и минус, и плюс:
— заменить им весь build pipeline и ускорить сборку в сто раз не выйдет
— но попробовать его гораздо проще — достаточно поменять babel-loader на swc-loader
Недостаток — оба тула пока что сыроваты.
— ESBuild всё ещё не поддерживает CSS loader (хотя работа над этим уже началась)
— Swc, когда я его пробовал в мае, иногда генерировал некорректный код (пример). Не знаю, как с этим сейчас
Но, учитывая скорость развития, месяца через три они могут быть вполне production-ready.
→ ESBuild: github.com/evanw/esbuild
→ Swc: github.com/swc-project/swc
— ESBuild всё ещё не поддерживает CSS loader (хотя работа над этим уже началась)
— Swc, когда я его пробовал в мае, иногда генерировал некорректный код (пример). Не знаю, как с этим сейчас
Но, учитывая скорость развития, месяца через три они могут быть вполне production-ready.
→ ESBuild: github.com/evanw/esbuild
→ Swc: github.com/swc-project/swc
В чатике добавляют ссылки:
1) Как ESBuild достигает ускорения в 50-100 раз (TL;DR: минимум проходов по AST-дереву, минимум ненужной работы, максимум параллелизации): Architecture.md
2) Оказывается, swc работает и над бандлингом: ишью · код · бенчмарки
(И поправляют, что swc развивается сильно медленнее, чем мне показалось, и production-ready через три месяца — это вряд ли. Спасибо за поправку! За ESBuild я следил больше.)
1) Как ESBuild достигает ускорения в 50-100 раз (TL;DR: минимум проходов по AST-дереву, минимум ненужной работы, максимум параллелизации): Architecture.md
2) Оказывается, swc работает и над бандлингом: ишью · код · бенчмарки
(И поправляют, что swc развивается сильно медленнее, чем мне показалось, и production-ready через три месяца — это вряд ли. Спасибо за поправку! За ESBuild я следил больше.)
Как растить JS-скиллы
В личке спросили, как вырастить свои навыки в JavaScript.
Мой любимый способ — это подписаться в GitHub на инструмент, который вы используете каждый день (типа Babel или webpack).
В ишьюсах и пулл-реквестах часто идут глубокие обсуждения: внутренностей библиотеки, редких фич, юзкейсов, которые вы бы сами никогда не попробовали, и т.д. Это помогает узнать инструмент гораздо глубже.
Года три назад я таким образом зафолловил репозитории React и Redux — и благодаря этому узнал кучу всего, чего не нашёл бы ни в документации, ни в статьях.
В личке спросили, как вырастить свои навыки в JavaScript.
Мой любимый способ — это подписаться в GitHub на инструмент, который вы используете каждый день (типа Babel или webpack).
В ишьюсах и пулл-реквестах часто идут глубокие обсуждения: внутренностей библиотеки, редких фич, юзкейсов, которые вы бы сами никогда не попробовали, и т.д. Это помогает узнать инструмент гораздо глубже.
Года три назад я таким образом зафолловил репозитории React и Redux — и благодаря этому узнал кучу всего, чего не нашёл бы ни в документации, ни в статьях.
Third parties
Одна из вещей, которая влияет на балл в Lighthouse — это third parties (аналитика и реклама).
Third parties часто выполняют много JS-а. Это блочит главный поток и ухудшает JS-метрики в Lighthouse (Time to Interactice, Total Blocking Time, First Input Delay).
Что делать, если у вас много third parties, и они мешают вам быть быстрыми👇
Одна из вещей, которая влияет на балл в Lighthouse — это third parties (аналитика и реклама).
Third parties часто выполняют много JS-а. Это блочит главный поток и ухудшает JS-метрики в Lighthouse (Time to Interactice, Total Blocking Time, First Input Delay).
Что делать, если у вас много third parties, и они мешают вам быть быстрыми👇
1️⃣ Проверьте, все ли third parties реально нужны (серьёзно)
Очень часто случается, что маркетинг добавляет какую-то аналитику, использует её неделю-месяц-полгода, а потом перестаёт. А аналитика остаётся.
Чтобы увидеть все third parties, пройдите в DevTools → Network, отфильтруйте по
Очень часто случается, что маркетинг добавляет какую-то аналитику, использует её неделю-месяц-полгода, а потом перестаёт. А аналитика остаётся.
Чтобы увидеть все third parties, пройдите в DevTools → Network, отфильтруйте по
-domain:ваш-домен и посмотрите, есть ли что-то ненужное в колонке Domain:
(А также посмотрите доклад Гарри Робертса про то, как обсуждать third parties с маркетинг-командой. Придётся вести переговоры!)
2️⃣ Оберните в таймер
Некоторые third parties можно спокойно загрузить позже — без потерь для бизнеса.
Например:
Маркетологам часто ок отложить загрузку Facebook Pixel на 10-20 секунд. (Facebook Pixel используется, чтобы показывать рекламу тем, кто побывал на сайте — и привести их на сайт снова.)
Посетители, которые закрыли сайт через 10 секунд, часто для такой рекламы неинтересны. Так что если Pixel не успеет их затрекать, бизнес ничего не потеряет.
Некоторые third parties можно спокойно загрузить позже — без потерь для бизнеса.
Например:
Маркетологам часто ок отложить загрузку Facebook Pixel на 10-20 секунд. (Facebook Pixel используется, чтобы показывать рекламу тем, кто побывал на сайте — и привести их на сайт снова.)
Посетители, которые закрыли сайт через 10 секунд, часто для такой рекламы неинтересны. Так что если Pixel не успеет их затрекать, бизнес ничего не потеряет.
3️⃣ Отложите до полной загрузки сайта
Бывает, что third-party-скрипт загружается раньше, чем приложение. Такой скрипт может начать выполнять много JS-а и забрать на себя главный поток страницы. Из-за этого приложению придётся дожидаться своей очереди.
Чтобы избежать этого, попробуйте загружать third parties после того, как приложение инициализируется. Например, если у вас Реакт, оберните их в
Бывает, что third-party-скрипт загружается раньше, чем приложение. Такой скрипт может начать выполнять много JS-а и забрать на себя главный поток страницы. Из-за этого приложению придётся дожидаться своей очереди.
Чтобы избежать этого, попробуйте загружать third parties после того, как приложение инициализируется. Например, если у вас Реакт, оберните их в
useEffect:
4️⃣ Отложите до клика на нужную кнопку
Если у вас на сайте есть какой-то чат-виджет (типа Intercom), это виджет часто не нужен, пока пользователь не кликнет на кнопку чата. При этом виджет всё равно загружается в фоне и забирает на себя CPU-ресурсы.
Если у вас такой случай, загружайте виджет, только когда пользователь нажмёт на кнопку чата:
Если у вас на сайте есть какой-то чат-виджет (типа Intercom), это виджет часто не нужен, пока пользователь не кликнет на кнопку чата. При этом виджет всё равно загружается в фоне и забирает на себя CPU-ресурсы.
Если у вас такой случай, загружайте виджет, только когда пользователь нажмёт на кнопку чата:
5️⃣ Замените сервер-сайд-тулом
У Cloudflare, Netlify и кучи других CDN-ов есть сервер-сайд-аналитика. В ней меньше данных, чем в Google Analytics — но если вам нужно просто считать просмотры страниц, её более чем достаточно.
Бонус: сервер-сайд-аналитика не блокируется adblock-ом.
У Cloudflare, Netlify и кучи других CDN-ов есть сервер-сайд-аналитика. В ней меньше данных, чем в Google Analytics — но если вам нужно просто считать просмотры страниц, её более чем достаточно.
Бонус: сервер-сайд-аналитика не блокируется adblock-ом.
6️⃣ Удалите с ненужных страниц
Если вы:
— показываете рекламу только на десктопе, а на мобильном прячете, или
— ретаргетите пользователей, которые зашли в корзину, а остальных не ретаргетите
то грузите скрипты рекламы/ретаргетинга только там, где они нужны.
Например, вот как можно настроить GTM, чтобы он загружал скрипт только в корзине:
Если вы:
— показываете рекламу только на десктопе, а на мобильном прячете, или
— ретаргетите пользователей, которые зашли в корзину, а остальных не ретаргетите
то грузите скрипты рекламы/ретаргетинга только там, где они нужны.
Например, вот как можно настроить GTM, чтобы он загружал скрипт только в корзине:
🙅 Не надо: откладывать third party до первого взамодействия
Некоторые сайты откладывают аналитику/рекламу до первого тапа или скролла страницы. Мне кажется, это плохая идея. (Дисклеймер: на реальном проекте я это не проверял.)
Если вы будете грузить рекламу только по первому тапу, то, конечно, это улучшит ваш Lighthouse-счёт. Lighthouse не тапает на страницу, поэтому рекламу он просто не загрузит.
Но:
1) это не улучшит ощущения реальных пользователей. Для реальных пользователей реклама всё равно будет грузиться — а значит, для них сайт всё равно будет тормозить
2) это, скорее всего, не улучшит и SEO. Насколько я знаю, SEO-ранжирование опирается не на Lighthouse, а на Chrome UX Report. А данные Chrome UX Report собираются с реальных пользователей — c тех, у кого реклама загружается.
Некоторые сайты откладывают аналитику/рекламу до первого тапа или скролла страницы. Мне кажется, это плохая идея. (Дисклеймер: на реальном проекте я это не проверял.)
Если вы будете грузить рекламу только по первому тапу, то, конечно, это улучшит ваш Lighthouse-счёт. Lighthouse не тапает на страницу, поэтому рекламу он просто не загрузит.
Но:
1) это не улучшит ощущения реальных пользователей. Для реальных пользователей реклама всё равно будет грузиться — а значит, для них сайт всё равно будет тормозить
2) это, скорее всего, не улучшит и SEO. Насколько я знаю, SEO-ранжирование опирается не на Lighthouse, а на Chrome UX Report. А данные Chrome UX Report собираются с реальных пользователей — c тех, у кого реклама загружается.
🙅 Не надо: использовать requestIdleCallback
requestIdleCallback() просит браузер выполнить какой-то код, когда браузер простаивает. Это может показаться идеальным инстументом, чтобы отложить загрузку аналитики. Но это не так.
requestIdleCallback срабатывает всего через 50-100 мс неактивности. 50-100 мс вполне могут выдаться свободными, пока приложение всё ещё инициализируется. В итоге third parties загрузятся слишком рано и заберут главный поток у приложения.
requestIdleCallback() просит браузер выполнить какой-то код, когда браузер простаивает. Это может показаться идеальным инстументом, чтобы отложить загрузку аналитики. Но это не так.
requestIdleCallback срабатывает всего через 50-100 мс неактивности. 50-100 мс вполне могут выдаться свободными, пока приложение всё ещё инициализируется. В итоге third parties загрузятся слишком рано и заберут главный поток у приложения.
Ищу ассистента 🏔
Привет! Нестандартный пост: я ищу себе классного парт-тайм-ассистента.
— 50% рабочих задач: менеджить документы, пинговать клиентов, контролировать платежи
— 50% личных: курьеры, поездки, покупки, заказы
— Буду рад поменторить — рассказать всё, что знаю про карьеру в айти, фриланс, ИП/налоги и то, как делать собственный бизнес. (Ну а вы как раз увидите это всё вживую)
— Парт-тайм (до 20 часов в неделю), ремоут, $650/месяц
👉 https://www.notion.so/iamakulov/960da52be3b145af91fd2d53bc31daa1
Привет! Нестандартный пост: я ищу себе классного парт-тайм-ассистента.
— 50% рабочих задач: менеджить документы, пинговать клиентов, контролировать платежи
— 50% личных: курьеры, поездки, покупки, заказы
— Буду рад поменторить — рассказать всё, что знаю про карьеру в айти, фриланс, ИП/налоги и то, как делать собственный бизнес. (Ну а вы как раз увидите это всё вживую)
— Парт-тайм (до 20 часов в неделю), ремоут, $650/месяц
👉 https://www.notion.so/iamakulov/960da52be3b145af91fd2d53bc31daa1
Перформанс-нюанс. Оказывается, браузеры не выполнят ни одного скрипта, пока не загрузят все стили страницы ↑
(Загрузка скриптов при этом не откладывается — только исполнение.)
(Источник — «CSS and Network Performance»)
(Загрузка скриптов при этом не откладывается — только исполнение.)
(Источник — «CSS and Network Performance»)
Теория и практика Core Web Vitals
26 ноября (чт) выступлю на HolyJS! Вместе с Элизабет Свини (Google) расскажу про Core Web Vitals:
— Теория: Элизабет покажет, как CWV связаны с Lighthouse-скором, как этот скор считается и какие у Google планы по развитию CWV
— Практика: Я на примере реального сайта покажу, какие штуки влияют на CWV и как их оптимизировать
Приходите :) https://holyjs-moscow.ru/2020/msk/talks/ymy2hqzhonwsav8slq7yx/
(А по ужасно длинному промокоду
26 ноября (чт) выступлю на HolyJS! Вместе с Элизабет Свини (Google) расскажу про Core Web Vitals:
— Теория: Элизабет покажет, как CWV связаны с Lighthouse-скором, как этот скор считается и какие у Google планы по развитию CWV
— Практика: Я на примере реального сайта покажу, какие штуки влияют на CWV и как их оптимизировать
Приходите :) https://holyjs-moscow.ru/2020/msk/talks/ymy2hqzhonwsav8slq7yx/
(А по ужасно длинному промокоду
PerfPerfPerf2020JRG ещё и скидка ~10%)Writing Less Damned Code
Клёвый лёгкий доклад на выходные — про то, как делать хорошие приложения, пиша меньше кода: https://vimeo.com/190834530
Доклад рассказывает:
— что ARIA-атрибуты вам не нужны (если нужны, то вы, скорее всего, делаете что-то неправильно)
— как правильно (и как неправильно) верстать отзывчивые сайты
— что галереи и социокнопки — зло
— и как сделать SPA-приложение с нулём строчек JavaScript
В докладе шутки и немного матов (в общем, всё, как надо)
→ https://vimeo.com/190834530
Клёвый лёгкий доклад на выходные — про то, как делать хорошие приложения, пиша меньше кода: https://vimeo.com/190834530
Доклад рассказывает:
— что ARIA-атрибуты вам не нужны (если нужны, то вы, скорее всего, делаете что-то неправильно)
— как правильно (и как неправильно) верстать отзывчивые сайты
— что галереи и социокнопки — зло
— и как сделать SPA-приложение с нулём строчек JavaScript
В докладе шутки и немного матов (в общем, всё, как надо)
→ https://vimeo.com/190834530
Любимый фрагмент в докладе — про галереи на сайтах:
This brings me to unprogressive non-enhancement.
You take some structured content, which follows the vertical flow of the document in a way that everyone understands. Which people traverse easily by either dragging their scroll bar with their mouse, or operating the keyboard using the up and down keys, or using the spacebar.
What you do is you take that, and you fucking well leave it alone.
This brings me to unprogressive non-enhancement.
You take some structured content, which follows the vertical flow of the document in a way that everyone understands. Which people traverse easily by either dragging their scroll bar with their mouse, or operating the keyboard using the up and down keys, or using the spacebar.
What you do is you take that, and you fucking well leave it alone.