Воркшоп. Новые приключения во фронтенде, версия 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 и другими почтовыми клиентами с шаблонами и тулингом;
• общие сложности и решения фронтенда, и важные новые задачи и возможности, о которых следует помнить.