Question

Большое время LCP в Google Lightspeed, что можно сделать?

Answer 1

LCP - это как быстро пользователь увидел самый большой элемент на первом экране устройства. Обратите внимание, на разных устройствах это может быть разный элемент!

LCP - агрегирующий показатель, в него входят скорость сервера и CMS, БД и кеширование, используемые протоколы (http, https, http/2), TTFB - Time To First Byte - время получения первого байта браузером в ответ на запрос, размер и размещение файлов скриптов и стилей в теле страницы, использование CDN и оптимизация формата фото.

План оптимизации для Битрикс выглядит так:

1. Убедитесь, что у вас включён и правильно работает композитный сайт. Это действительно в разы уменьшает время TTFB, кешируя всю страницу целиком. НО! это не убирает задачи оптимизации кода компонентов и шаблона - ajax запрос за актуальными данными для композита идёт сразу же после загрузки html кода страницы и ощутимо влияет на LCP и общее время загрузки страницы.

2. В настройках главного модуля галочки "объединять скрипты", "объединять стили" и "переносить скрипты в конец страницы" должны быть включены. Перенос скриптов откладывает их разбор и исполнение - а значит ускоряет отрисовку страницы и LCP.

3. В большинстве шаблонов стили очень большие. Эффективная стратегия их оптимизации - хранить их отдельно по компонентам, но это только часть решения. Выделения стилей "критически важный CSS" - и вставка их отдельно в header.php позволяет отрисовать шапку шаблона и основные элементы до разбора большого основного файла стилей.

4. GTM, скрипты аналитики и яндекс.метрики, вставленные в head и начало body задерживают обработку страницы. Решение - предварительно скомандовать браузеру загрузить внешние скрипты до того, как они встретятся дальше по ходу разбора страницы. Это делается с помощью тега preload - <link rel="preload" as="script" href='https://mc.yandex.ru/metrika/tag.js'>

5. Аналогично можно подгрузить заранее шрифты и важные картинки типа логотипа (без которого первый экран не отрисовать). <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href='<?=SITE_TEMPLATE_PATH?>/fonts/open-sans.woff2'>

6. Используйте современные версии серверных программ. PHP 7.3 сильно быстрее PHP 7.1 и очень сильно быстрее PHP 5.6. Актуальный Nginx поддерживает http/2 что быстрее http 1.1.

7. Времена IE прошли, и картинки в формате "webp" уже можно использовать.  Они, между прочим, почти в 2 раза легче jpeg на фото или баннерах.

8. Не используйте Google Fonts. Он медленный, скачайте шрифт и используйте со своего сервера - сэкономите кучу времени!