DIY, web, coffee Автоматизирую все и вся, ремонтирую что сломалось, трачу время на just-for-fun проекты. Пишу про хардвар и софтвар и не только. http://jem-space.ru Связь со мной: @jem_jem Донаты на припой и хостинги: https://bit.ly/2MKcRoJ
Оценить канал five_a_m и оставить отзыв — могут только зарегестрированные пользователи. Все отзывы проходят модерацию.
5 звезд
0
4 звезд
1
3 звезд
0
2 звезд
0
1 звезд
1
Последние сообщения 5
2021-04-14 17:35:01С чего начать оптимизацию перфоманса? (часть 2)
6. Runtime Выполнение скриптов (особенно в начале работы приложения) может занимать много времени (типа 200мс это много), при этом браузер висит и не может обрабатывать пользовательский ввод. Как вариант, обмазать некоторые вещи setTimeout, сделав их асинхронным и дать возможность браузеру прорендерить и тп. Как минус - суммарное время выполнения будет больше Как плюс - UX будет значительно лучше Подробнее - https://philipwalton.com/articles/idle-until-urgent/
7. Render Рендерим только то, что видит юзер (Lazy Rendering)
8. Data Fetching Flow По url понимать какие данные нужны и при загрузке js делать сразу загрузку данных и класть куда-нибудь в window (миллениалы изобрели SSR). Отличие от SSR - не нужно полностью вкореживать в архитектуру приложения SSR (не маяться с гидрацией и тп)
Большая статья про оптимизацию https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/#top
Статья про runtime https://habr.com/ru/company/hh/blog/517594/
Цена абстракций и фреймворков: https://javascript.plainenglish.io/javascript-frameworks-performance-comparison-2020-cd881ac21fce
Для мониторинга runtime можно использовать https://speedcurve.com/ Либо кастомно через https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark
2021-04-14 17:31:27С чего начать оптимизацию перфоманса? (часть 1)
1. HTML: - минификация - потоковая отрисовка (помогает уменьшить TTFB (time to first byte))
Статья про обработку html сервис воркерами: https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/
2. CSS: - минификация - критический css: заинлайнить в html
потому что пока не пришел ответ со стилями, браузер не начнет отрисовывать render tree - загрузка не блокирующая рендер (хак: использовать
Посмотреть размер неиспользуемого css можно в devtools -> coverage
Полезные плагины для webpack: - html-critical-webpack-plugin - critters-webpack-plugin
Статья про блокирующий CSS https://timkadlec.com/remembers/2020-02-13-when-css-blocks/
3. Шрифты
- предзагружаем через link rel=preload - указываем системный fallback шрифт - кеширование - используем font-display (swap или fallback)
4. Картинки Статья https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques
5. JS загрузка и исполнение js может блокировать парсинг html долгое исполнение js делает сайт не отзывчивым
- использовать async или defer аттрибуты Теперь кстати парсинг html не блокируется при загрузке скриптов https://v8.dev/blog/v8-release-78
Уменьшаем размер - минификация - удаление ненужного: dead-code elimination при помощи terser и env vars - code splitting devtools -> coverage посмотреть что нужно сразу после загрузки https://webpack.js.org/guides/code-splitting/ обратить внимание на дудепликацию зависимостей
После code splitting возможно, что какой то функционал будет подгружаться динамически и где-то это может быть неприемлемо. Для этого нужно делать предзагрузку с preload/prefetch/preconnect/prerender/modulepreload.
В настройка babelrc (настраивает преобразование модулей) может быть косяк modules: "cjs" - приводит все к commonJS - сложно оптимизровать - не делай так modules : false - оставить как есть export и import
Webpack не анализирует модули без доп настроек.
Убираем неиспользуемые импорты (что есть в коде, но по факту не используется) optimizations: innerGraph: true
Под капотом webpack использует доп экспорты/импорты в бандле, это можно оптимизировать и сделать чтобы твой импорт указывал напрямую на функцию (без посреднических экспорт/импорт) optimizations: providedExport: true
Настройка sideEffects. optimizations: sideEffects: true / по дефолту
Позволяет убирать модули без сайд эффектов (которые не изменяют global и тп). Как негласный стандарт многие библиотеки в package.json указывают, есть ли там функции с сайд эффектами через sideEffects: true/false/regex
2. Минимизация доп кода
У webpack 3 вида модулей: - js/dynamic - commonjs - js/auto - - js/esm - импорт экспорт
Это указывается в pakage.json библиотек (поле type): - commonJS - auto - module
Для commonJS treeShaking работать не будет, для auto как то сработает, для module - будет
Можно слепить вообще все в один модуль через concatinateModules optimizations: concatinateModules: true
Классная мысль - сначала юзать простой Zero config для parcel, если нужно что то сложнее - то webpack.
На этой неделе стартанула Podlodka Crew по фронтенду. Если кто не слышал, это двухнедельный марафон с лекциями от разных спикеров (одна с утра, одна вечером), где довольно много интерактива (можно вызваться добровольцем на всяких активностях, поспрашивать мучающие тебя вопросы и т.п.). Это первый поток по фронту и он посвящен оптимизации фронта.
Сюда буду скидывать краткие заметки, чтобы не забыть (а может и еще кому полезно будет)
S
