Виталий Фридман — Воркшоп (часть 1). Новые приключения во фронтенде, версия 2021

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

В этом воркшопе мы рассмотрим устойчивую и действенную стратегию по созданию быстрого и адаптивного опыта. Также обратим внимание на доступность, сжатие текста, оптимизацию изображений, доставку веб-шрифтов, CSS, CSS-верстку, доставку JavaScript и улучшение Core Web Vitals вместе с узкими местами производительности. Также рассмотрим тулинг, как разобраться в сетевых водопадах DevTools и диаграммах flame charts, WebPageTest и нескольких небольших утилитах.

В течение этого воркшопа затронем такие темы, как:

— компонентный воркфлоу и тулинг с полезными инструментами и ресурсами для улучшения среды разработки;
— погружение в DevTools и WebPageTest, разберемся с производительностью flame charts, сетевой панелью и водопадами WebPagetest для выявления узких мест в производительности;
— сжатие текста с Brotli, локализация/i18n-техники и практические советы;
— оптимизация изображений и видео (AVIF, AV1, форматы, способы доставки и тулинг);
— стратегии загрузки веб-шрифтов и рецепты;
— организация CSS и Critical CSS для оптимизации доставки и минимизации пересчета положения элементов;
— CSS Custom Properties — как их использовать;
— продвинутые методы CSS-вестки, такие как CSS Grid + CSS Custom Properties + Subgrid;
— HTML-почта в 2020, как быть с Gmail, Apple Mail, Outlook и другими почтовыми клиентами с шаблонами и тулингом;
— общие сложности и решения фронтенда, и важные новые задачи и возможности, о которых следует помнить.

Видео Виталий Фридман — Воркшоп (часть 1). Новые приключения во фронтенде, версия 2021 канала HolyJS