После обновления Google PageSpeed показатели сайтов, которые были 95-100% стали 20-30 на мобильном (а бывает и того меньше) и 50-60 на компьютере.

Ссылка на предыдущую инструкцию по старому алгоритму: modx.ru/novosti-i-stati/article/375/ (пригодится для работы).

Оптимизация

Устраните ресурсы, блокирующие отображение
Это про перенос скриптов и стилей вниз сайта, было в предыдущей инструкции.

Сократите время ответа сервера (время до получения первого байта)
Проверить и отключить неиспользуемые чанки, сниппеты и плагины с ошибками, которые замедляют работу.

Настройте подходящий размер изображений
1. Нужно проверить, какие изображения стоят слишком крупного размера и подключить к ним phpThumb для масштабирования и обрезки, либо просто уменьшить их через imagecompressor.com/ru/
2. Установить Adaptive Images: habr.com/ru/company/kelnik/blog/214071/

Настройте эффективную кодировку изображений
Аналогично предыдущему пункту.

Отложите загрузку скрытых изображений
Здесь нужно использовать Lazy Load для изображений, особенно интересно будет подружить его со слайдерами и параллаксами.

Отложите загрузку неиспользуемого контента CSS
Это Load CSS, было в предыдущей инструкции.

Используйте современные форматы изображений
Здесь поможет Лехин плагин: modx.ru/novosti-i-stati/article/442/, большое спасибо тебе за него, без этого паззл не складывался!

Используйте видеоформаты для анимированного контента
Использовать видео в формате webm.

Уменьшите размер кода CSS
Это также было в предыдущей инструкции.

Уменьшите размер кода JavaScript
Это также было в предыдущей инструкции.

Диагностика

Настройте показ всего текста во время загрузки веб-шрифтов
Тут все просто – дописать font-display: swap; в каждый @font-face { … }

Минимизируйте работу в основном потоке
Убираем по возможности лишние шрифты, скрипты, стили.

Задайте правила эффективного использования кеша для статических объектов
Это уже было в предыдущей инструкции.

Сократите размер структуры DOM
Это количество блоков и количество вложенных друг в друга div'ов, уменьшаем по возможности их количество.

Сократите время выполнения JavaScript
Это про минификацию и отложенную загрузку скриптов, уже было в предыдущей инструкции.

Предотвратите чрезмерную нагрузку на сеть
Здесь поможет сокращение подключаемых виджетов (счетчики, онлайн-консультанты, карты, лишние счетчики).

Сократите глубину вложенности критических запросов
Аналогично предыдущему пункту.

Успешные аудиты (для большинства сайтов эти пункты уже сразу будут пройдены)

Включите сжатие текста
Это про gzip, было в предыдущей инструкции.

Используйте предварительное подключение к необходимым доменам
Если используете несколько доменов, то нужно прописывать в head следующее:
<link rel="preconnect" href="https://example.com">

Избегайте большого количества переадресаций
Здесь нужно использовать переадресацию с www на без www (или наоборот, если главное зеркало уже с www, также здесь требуется учитывать https, если оно есть).

Настройте предварительную загрузку ключевых запросов
Здесь использовать следующее:
<head>
  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="ui.js" as="script">
  ...
</head>


Понравилась статья — ставьте лайк)