Недавно Иван Акулов в своём блоге рассказал про все современные подходы добавления полифиллов для JS — "How to load polyfills only when needed".

На данный момент есть три актуальных подхода:
1) С помощью Polyfill.io. Это сторонний сервис, который определяет браузер по UA string и возвращает скрипт только с теми полифиллами, которые, действительно, нужны. Есть недостаток — добавляет 50-300мс к TTI.
2) Используя паттерн "module/nomodule". Если скрипт содержит type="module", он не будет выполняться в тех браузерах, которые не поддерживают ECMAScript Modules, то есть в старых браузерах. Если скрипт содержит аттрибут nomodule, то этот скрипт не будет выполняться в новых браузерах. Благодаря этим атрибутам новые и старые браузеры могут загружать необходимый набор полифиллов. Этот паттерн нельзя использовать, если требуется определение фич выше ES2015.
3) Используя опцию useBuiltins в @babel/preset-env, babel может подключать полфиллы только для тех браузеров, которые были указаны в конфиге. useBuiltins не самое лучшее решение, если необходима поддержка старых браузеров.

Серебряной пули нет, но при необходимости эти подходы можно комбинировать друг с другом.

Статья хорошая, очень рекомендую почитать, если занимаетесь оптимизациями.

#perfromance #polyfill

https://3perf.com/blog/polyfills/

Тим Кадлек в статье "When CSS Blocks" рассказал, как паттерн оптимизации загрузки CSS нарушает оптимальный порядок загрузки ресурсов и блокирует парсинг HTML.

Когда браузер парсит страницу и видит, что нужно загрузить css, он останавливает процесс рендеринга страницы и ждёт загрузки CSS. Для загрузки некритичного CSS такое поведение нежелательно, поэтому появился паттерн "preload/polyfill", в котором CSS загружается с помощью <link rel="preload" ...> в неблокирующем режиме. Если preload не поддерживается браузером то в работу вступает небольшой полифилл.

Тут возникает две проблемы: 1) использование preload откладывает загрузку важных ресурсов и некритичный CSS загружается в первую очередь, 2) когда полифилл инициирует загрузку CSS, парсинг html останавливается полностью, таким образом сайт рендерится с задержкой. Тим пишет, что авторы паттерна "preload/polyfill" больше не рекомендуют его использовать, а предлагают использовать трюк с медиа:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Но устаревший паттерн продолжают использовать по инерции, создавая проблемы с производительностью.

Тим написал ещё одну очень хорошую статью. Рекомендую почитать.

#perfromance #browser #css

https://timkadlec.com/remembers/2020-02-13-when-css-blocks/