Какие параметры влияют на производительность Lighthouse в настольных и мобильных приложениях?

Question

Я создаю личный блог с помощью Hugo и развертываю его в Netlify, и из любопытства запустил его через Chrome Lighthouse. К моему удивлению, результаты для ПК и мобильных устройств сильно различаются.

Блог не оптимизирован (пока) для мобильных устройств, но в нем используются в основном относительные размеры, поэтому на мобильном устройстве вид будет таким, какой вы увидите, выбрав «просмотреть настольную версию» в мобильном Chrome.

Есть три результата, которые особенно важны: первая отрисовка по содержанию (FCP), самая большая отрисовка по содержанию (LCP) и время до взаимодействия (TI). Ниже приведены результаты (в секундах), число за настольным компьютером или мобильным устройством является индексом производительности. В итоге:

• результаты localhostи развернутый сайт незначителен (так что это не вопрос задержки, производительности обслуживания,...)
• И LCP, и TI вредны для мобильных устройств на одном уровне «плохости» (что подкрепляет вышеизложенное).

---

http://localhost:1313

Рабочий стол → 99

• Первая содержательная отрисовка (FCP): 0,2 → ОК
• Наибольшая содержательная краска (LCP): 1,0 → ОК
• Время до взаимодействия (TI): 0,9 → ОК

Мобильный → 77

• Первая содержательная отрисовка (FCP): 1.7 → ОК
• Наибольшая содержательная краска (LCP): 5,5 → НЕ ОК
• Время до взаимодействия (TI): 5,0 → НЕ ОК

https://mysite.example.com

Рабочий стол → 99

• Первая содержательная отрисовка (FCP): 0,4 → ОК
• Наибольшая содержательная краска (LCP): 1,0 → ОК
• Время до взаимодействия (TI): 0,9 → ОК

Мобильный → 77

• Первая содержательная отрисовка (FCP): 2.0 → ~OK
• Наибольшая содержательная краска (LCP): 5,3 → НЕ ОК
• Время до взаимодействия (TI): 5,0 → НЕ ОК

---

Что может быть причиной такого поведения?

Answer 1

Тесты Chrome Lighthouse на мобильных и настольных устройствах тестируют больше, чем просто рендеринг на разных размерах экрана. Профиль мобильного тестирования, используемый Lighthouse, пытается приблизиться к среднему пользователю мобильного устройства, ограничивая скорость сети и мощность процессора браузера, загружающего страницу. Это упоминается в документах Lighthouse.

Lighthouse сообщает о показателях производительности в том виде, в каком они были бы у типичного мобильного пользователя с подключением 4G и телефоном среднего уровня стоимостью около 200 долларов. Даже если он быстро загружается на вашем устройстве и в сети, пользователи в других средах будут воспринимать сайт совсем по-другому.

Подробнее читайте в нашем руководстве по дросселированию.

Точные цифры, используемые для мобильного профиля, взяты из документа по регулированию, но достаточно сказать, что он определенно медленнее, чем ваш настольный компьютер.

Настройки Lighthouse для настольных ПК не включают дросселирование сети или ЦП, поэтому измерения производительности, которые вы видите при работе с мобильным профилем, более медленные по сравнению с настольным компьютером.