PageSpeed Insights ругается на оптимизацию, не могу найти причину такого показателя

В настоящее время, учитывая первый мобильный индекс Гугл, этот поисковик использует Googlebot для смартфонов. Для анализа производительности и скорости загрузки для мобильных вы можете использовать инструмент WebPagetest.

Например, тест главной страницы вашего веб-сайта показывает скорость загрузки = 5.884 секунд. Сравните это с рекомендацией Гугл для скорости загрузки мобильных Мобильный анализ в свойствах PageSpeed:

PageSpeed ​​Insights анализирует страницу, чтобы узнать, соответствует ли она нашим рекомендациям для того, чтобы сделать рендеринг страниц менее чем в секунду в мобильной сети. Исследования показали, что любая задержка дольше, чем секунда, заставит пользователя прервать их поток мысли, создавая плохой опыт.

Для анализа ресурсов веб-страницы, щелкните на Waterfall. Выберите наиболее критический ресурс - изображен как самый длинный горизонтальный бар - и щелкните на нем. Там будет указана информация о этом ресурсе.

Для примера можно проверить изображение img/products/p_preview/5.jpg - скорость загрузки = 835 миллисекунд. Об этом ресурсе сообщается следующая информация:

• URL: http://ibudakov.beget.tech/img/products/p_preview/5.jpg
• Loaded By: http://ibudakov.beget.tech/:14
• Host: ibudakov.beget.tech
• Error/Status Code: 200 Request ID: 0.14
• Request Start: 1.441 s Time to First Byte: 196 ms
• Content Download: 639 ms Bytes In (downloaded): 11.2 KB
• Uncompressed Size: 10.9 KB
• Bytes Out (uploaded): 0 B

Для оптимизации скорости загрузки изображения здесь интересен пункт Uncompressed Size: 10.9 KB - Несжатый размер. Это значит что это изображение не оптимизировано. Используя инструмент ImageOptim можно сжать это изображение до 6 КВ, практически без потери качества - выбирая фильтр Low.

Также можно проверить и производительность главной веб-страницы:

• URL: http://ibudakov.beget.tech/
• Host: ibudakov.beget.tech
• Error/Status Code: 200
• Request ID: 0.2
• Request Start: 0.326 s
• DNS Lookup: 61 ms
• Initial Connection: 252 ms
• Time to First Byte: 204 ms
• Content Download: 151 ms
• Bytes In (downloaded): 35.2 KB
• Uncompressed Size: 35.2 KB
• Bytes Out (uploaded): 0 B

Опять же обратите внимание на несжатый размер этой веб-страницы = 35.2 КВ. Используйте для сжатия исходного кода HTML Compressor. С этим инструментом возможно сжать код главной веб-страницы до, примерно 24 КВ.

Также для проверки производительности вы можете применить тестер Гугл для мобильной выдачи, который показывает, что в настоящее время не удалось загрузить 6 ресурсов главной веб-страницы. Все не загруженные ресурсы понижают скорость загрузки.

Основная проблема производительности вашего веб-сайта возникает при создании моделей DOM и CSSOM. Эти модели браузер создает перед выдачей веб-страницы на экран пользователя. Таким образом и HTML, и CSS замедляют вывод страницы. HTML-документ нужно обработать для создания модели DOM, без которой на странице не будет контента.

Когда браузер находит в документе ссылку на CSS-файл, он приостанавливает процесс визуализации и начинает формировать модель CSSOM. По умолчанию при обработке CSS визуализация страницы блокируется.

Дополнительно читайте Оптимизация CSS.

То же самое относиться к скриптам ваших веб-страниц:

• JavaScript может изменять DOM и CSSOM, а также получать данные из этих моделей.
• Выполнение JavaScript невозможно без модели CSSOM.
• JavaScript препятствует созданию DOM, если не использовать асинхронизацию - async.

Дополнительно читайте Оптимизация JavaScript для быстрой визуализации страницы.