Шаг 1. Определение задач

Структура проекта выглядит так:

Файловая структура проекта
Файловая структура проекта

Первое, что нам необходимо сделать — определить, куда подключены шрифты и изображения. Смотрим файлы проекта и видим, что шрифты подключены только в файле test.scss. Изображения используются на двух предпоследних страницах. Страница test доставляет больше всего проблем, связанных с медленной загрузкой и отображением контента.

Далее нужно определить производительность приложения после сборки. LightHouse показывает производительность 75 пунктов, а нам нужно 80.

Теперь мы можем оптимизировать приложение, что мы и сделаем в следующих шагах.

Производительность страницы приложения
Производительность страницы приложения