Оптимизация производительности фронтенда. Часть 1. Critical Render Path

Здравствуйте. Меня зовут Ник, я фронтенд разработчик (жидкие аплодисменты). Кроме того, что я пишу код, я преподаю в Школе программистов hh.ru.

Записи наших лекций от 2018-2019 учебного года можно посмотреть на youtube

В этом году у меня была лекция про оптимизацию производительности фронтенда, и я решил превратить ее в текстовый формат. Материал получился большим, так как лекция была длительностью 3 часа. Поэтому получился текстовый альманах.

Вот презентация для тех, кому неохота читать лонгрид, но при этом хочется иметь базовое представление о контенте.

Лонгридом можно пользоваться как справочником, чтобы не читать за один присест. Вот список тем, которые мы затронем:

Зачем думать о производительности

FMP, TTI + подробнее в докладе

Critical render path, DOM, CSSOM, RenderTree

Шаги по улучшению производительности первой загрузки + подробнее в докладе

Читать дальше →

Источник: Уроки CSS на Хабрахабре