В красной зоне у тебя "
Largest Contentful Paint" - это
время отрисовки самого большого элемента в области видимости при загрузке. То есть, к примеру я открыл сайт с телефона и вижу шапку, и в этой шапке самое большое место занимает картинка, которая долго грузится, значит, чтобы ускорить этот параметр надо работать конкретно с этой картинкой, например уменьшить вес, чтобы быстрее загрузилась, задать значения по умолчанию, чтобы не было сдвига после отрисовки и так далее. бывает, что кусок новости виден на первом экране и сместив его вниз на 20 пикселей можно решить проблему для пейдж спид, ну потому что он не увидит эту новость больше..
Далее
"time to interactive" - это время через которое пользователь сможет совершить
первое взаимодействие с сайтом, то есть пока сайт грузится, затем подтягивает различные метрики, виджеты, пользователь разве что мышкой может шевелить, поэтому этот параметр один из самых важных. И тут уже много деталей, первое как выше и сказали надо отдавать ответ максимально быстро, то есть нужна оптимизация запросов к базе данных, быстрый хостинг, кеширование, в общем все, что ускорит этот процесс. Кроме того для первого взаимодействия надо определится какие скрипты тормозят сайт и почему. Вот тут то как раз
Jet Cache хорошо сыграет свою роль. Я не согласен с
@CAPAXA , у меня был опыт работы с этим модулем он отлично работает, я настраивал его сам без помощи автора и да, если не разбираться в том что тебе надо, то вероятность успеха близка к нулю, так как парой кликов не обойтись. Хотя
кеширование и оптимизацию запросов сможет наклатцать и ребенок.
"используйте современные форматы изображений" - это как раз хорошо реализовано в Jet Cache, но есть и более менее адекватный
бесплатный вариант
"устраните ресурсы блокирующие отображение", "уменьшите размер кода css" - Тоже решается при помощи Jet Cache. У него есть возможность сделать отложенную загрузку скриптов, то есть
скрипты подгрузятся после первого взаимодействия, а не до. Можно конечно это и руками сделать, но в контексте opencart это не так просто. Так же в Jet Cache
объединяются и минифицируются css/js, при чем можно выбрать, что можно объединить, а что не надо трогать и так далее. В общем отличный инструмент для оптимизации мне он очень помог, бесплатные аналоги не дотягивали, а платных хороших практически нет.
"Настройте подходящий размер изображений" - тут без контекста не разобраться, возможно у вас изображение превью генерируется например 100х200пикселей, а в разметке оно 50х100, тогда надо либо поменять настройки генерации озображений либо задать тегу img четко размеры width и height
В целом волшебной пилюли нет,
надо открыть в хроме "lighthous" и решать проблемы по пунктам, не обобщать, а реально делать то что рекомендуют, насколько это возможно. в "lighthous" более подробно расписано, что и где является проблемой.
