1. Оптимизация изображений

Разница в использовании между <img> и стилизацией css через background-image
⁃ доступность (img - да)
⁃ сео( img - да)
⁃ производительность (img - да)

Оптимизации:

1.Ленивая загрузка
Как делали раньше.
Подписывались на scroll, resize, orientationchange и проверяли если ли изображение во viewport

Теперь
IntersectionObserver + атрибут img loading="lazy"


2. Вес изображений
Подбираем для разных устройств разные картинки по качеству используя атрибут

srcset = '1x 2x 3x'

и как фолбек src=''

Для css аналогично есть background-image: image-set(url)

Оптимизированные форматы изображений:
- webp,
- avif (плохо поддерживается)

Чтобы сделать универсально можно заюзать такую конструкцию

<picture>
 <source avif> // сначала avif
 <source srcset webp> // если не сработало, то webp
 <img loading='lazy'> // фолбек - img
</picture>

Gif лучше конвертить в mp4 и использовать video

<video>
 <source ...>
</video>

3. Оптимизация на уровне сборщиков
- imagemin-webpack-plugin
- image-webpack-loader
- flexis/srcset-loader

imgproxy для динамических изображений

С чего начать оптимизацию перфоманса? (часть 1)

1. HTML:
- минификация
- потоковая отрисовка (помогает уменьшить TTFB (time to first byte))

Статья про обработку html сервис воркерами: https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/

2. CSS:
- минификация
- критический css:
заинлайнить в html
<head> <style /> </head>
потому что пока не пришел ответ со стилями, браузер не начнет отрисовывать render tree
- загрузка не блокирующая рендер (хак: использовать
<link href... media="print" onload="this.media='all'" - будет грузить стили, но т к медиа - print, не будет блокироваться рендер, а как загрузится, проставляем ему медиа - all (стили начинают применяться к рендеру))

Посмотреть размер неиспользуемого 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.

С чего начать оптимизацию перфоманса? (часть 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 (не маяться с гидрацией и тп)

9. Сжатие
brotli, gzip
Подробнее: https://tech.oyorooms.com/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4

10. Кеширование
Http-cache + инвалидация кеша

11. Не забывать про алгоритмы и структуры данных 🙂

Большая статья про оптимизацию 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

5 способов предотвратить внедрение кода в JavaScript и Node.js

https://snyk.io/blog/5-ways-to-prevent-code-injection-in-javascript-and-node-js/

Полезные консольные Linux утилиты

https://habr.com/ru/post/553000/

Полное руководство по созданию шаблонов HTML-писем

https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/

https://webformyself.com/polnoe-rukovodstvo-po-elektronnym-pismam-v-formate-html/

Разбираем, что такое Shadow dom (теневой dom) в JavaScript.

https://webfanat.com/js/shadow-dom-javascript/

Какие преимущества дает использование const в JavaScript.

https://webformyself.com/zamena-let-na-const/

Возможности JavaScript, о которых я не знал

https://medium.com/webbdev/js-40d1c8881333

Магия вне Хогвартса: NJS. Игорь Коровченко рассказывает о том, как писать конфиги для веб-сервера Nginx на JavaScript, почему это работает быстро и приводит пример реализации шифра Цезаря.

https://web-standards.ru/articles/magic-njs/

Как Vim стал таким популярным

https://habr.com/ru/company/vdsina/blog/565320/

Критерии качества вёрстки 2021

https://habr.com/ru/company/htmlacademy/blog/566244/

Рейтинг со звездочками: решение на SVG

https://ishadeed.com/article/star-rating-svg/

Эффективный поиск XSS-уязвимостей

https://habr.com/ru/company/jugru/blog/569270/

Используйте фавиконки правильно

https://habr.com/ru/company/htmlacademy/blog/578224/

35 вопросов с собеседования JavaScript-разработчика

https://habr.com/ru/post/578370/

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

https://cloudfour.com/thinks/svg-icon-stress-test/

Событие изменения размера окна

Чтобы реагировать на изменения экрана в реальном времени в JS существует событие "resize"

➡️ Пример кода:
function reportWindowSize() {
console.log(window.innerHeight)
// Выводит высоту окна;
console.log(window.innerWidth)
// Выводит ширину окна;
}

window.addEventListener("resize", reportWindowSize);

➡️ Аналог через свойство window
window.onresize = reportWindowSize;

#js

Дорожные карты 2021 для изучения Angular, Vue, Ember, NodeJS и React

https://www.theinsaneapp.com/2021/10/angular-vue-nodejs-emberjs-react-roadmap.html

Интерактивные курсы по горячим клавишам в популярных редакторах кода:

VS Code → https://keycombiner.com/courses/master-vscode/
IntelliJ IDEA → https://keycombiner.com/courses/master-intellij-idea/

Что нового в Node.js? Обзор малоизвестных, но полезных возможностей, появившихся в свежих версиях Node.js: генерация UUID, AbortController, протокол node: для импортов, новые основанные на промисах API → https://simonplend.com/whats-new-in-node-js-core/