Проверьте ваш веб-сайт с аудитом Lighthouse.
Проверьте критические ресурсы вашего веб-сайта с использованием инструмента WebPageTest (рекомендован Гугл).
Для оптимизации ваших критических ресурсов используйте руководство Гугл Оптимизация процесса визуализации.
Для оптимизации ваших изображений используйте рекомендации из Отзывчивые изображения Google Web Fundamentals. Здесь может быть полезным обратить внимание на тот факт, что назначать разные файлы изображений для разных медиа запросов или форматов изображений с использованием элемента picture. Например:
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
Также вы можете использовать следующий код, который позволит браузеру автоматически вычислить оптимальную плотность пикселей и выбрать корректное изображение для загрузки используя элемент srcset:
<img src="lighthouse-200.jpg" srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,lighthouse-400.jpg 400w, lighthouse-800.jpg 800w, lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w, lighthouse-1800.jpg 1800w" alt="a lighthouse">
Обратите внимание что в настоящее время самые "легкие" изображения являются изображения имеющие формат JPG (JPEG). Для изменения формата изображений и для изменения величины изображений вы можете использовать инструмент Photo Editor PIXLR.
Для сжатия изображений может быть полезен инструмент ImageOptim.