Хобрук: Ваш путь к мастерству в программировании

Основные расхождения в оценках Google Lighthouse для приложения PWA

Это может показаться не техническим вопросом, но я постараюсь сделать это так.

Недавно я сделал приложение электронной коммерции PWA на основе ReactJS. И при проверке производительности на маяке я заметил пару неточностей и хотел бы, чтобы кто-нибудь мне их объяснил.

  1. Оценка для мобильных устройств почти всегда хуже, чем для компьютеров. И не только для моего приложения, но и для 100% всех протестированных мной веб-сайтов электронной коммерции (Amazon, Flipkart, eBay, Myntra и т. Д.). Это почему? Насколько я понимаю, наибольшее значение имеют оценки First Contentful Paint и Largest Contentful Paint. Если бы это было так, то разве у телефона технически не было бы меньше площади для рисования, что привело бы к более высоким оценкам?

  2. Оценки колеблются. И сильно колеблется. Я заметил, что это происходит только с одностраничными приложениями. И это не может быть из-за незначительной разницы в TTFB, поскольку я видел, как результаты меняются на 20+ пунктов за раз. Если это так, то как нам доверять оценкам?

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


  • Добавлен тег pagespeed-insights, чтобы вы могли получить другие ответы. За кулисами Page Speed ​​Insights использует Lighthouse для работы, поэтому результаты практически одинаковы, и к обоим применяются одни и те же принципы. 21.09.2020

Ответы:


1

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

Мобильный тест имитирует соединение 4G и 4-кратное замедление ЦП, чтобы более точно отразить пониженную мощность мобильного телефона и тот факт, что он не может быть подключен к Wi-Fi.

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

Насколько я понимаю, наибольшее значение имеют оценки First Contentful Paint и Largest Contentful Paint. Если бы это было так, то разве у телефона технически не было бы меньше площади для рисования, что привело бы к более высоким оценкам?

Первая отрисовка контента и самая большая отрисовка контента основаны на времени - размер не имеет значения, важно то, когда они возникают. Очевидно, что при более медленном соединении и более медленном ЦП это всегда будет медленнее в мобильном тесте.

Оценки колеблются.

Если ваш счет сильно колеблется, возможно, у вас возникла какая-то форма гонки. Если вы загружаете все асинхронно, но порядок загрузки влияет на отображение страницы, этого следовало ожидать. Я бы посоветовал запустить трассировку производительности на странице с примененным регулированием сети и посмотреть, получите ли вы там разные результаты.

Либо это, либо ваш сервер загружен и иногда медленнее отвечает.

Что важно при подсчете очков

Насколько я понимаю, наибольшее значение имеют оценки First Contentful Paint и Largest Contentful Paint.

Что касается того, что имеет значение для оценки, этот ответ, который я дал, объясняет новую оценку. Вы увидите, что наиболее важными элементами являются наиболее насыщенная краска и общее время блокировки. Вторая часть этого - ключ к разгадке одностраничных приложений: если JavaScript тяжелый, TBT будет выше и может сильно колебаться в зависимости от того, когда загружены скрипты.

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

21.09.2020
  • Это очень важные идеи. Спасибо. Разрешите мне запомнить это и сделать еще несколько маяковых тестов, чтобы лучше понять результаты. 21.09.2020
  • никаких проблем, не стесняйтесь задавать еще один вопрос со скриншотами (или, если необходимо, добавьте их к этому), если вы не можете что-либо отследить самостоятельно. 21.09.2020
  • Сделаю. Спасибо еще раз :) 21.09.2020
  • Новые материалы

    Как я могу подписаться на тему изображений в ROS Matlab и получить изображение RGB?
    Привет, Пожалуйста, как я могу извлечь изображение из сообщения ROS Image, за которым следует imshow? Я уже подписался на правильную тему, но message.getData() дает мне объект..

    Понимание СТРУКТУРЫ ДАННЫХ И АЛГОРИТМА.
    Что такое структуры данных и алгоритмы? Термин «структура данных» используется для описания того, как данные хранятся, а алгоритм используется для описания того, как данные сжимаются. И данные, и..

    Как интегрировать модель машинного обучения на ios с помощью CoreMl
    С выпуском новых функций, таких как CoreML, которые упростили преобразование модели машинного обучения в модель coreML. Доступная модель машинного обучения, которую можно преобразовать в модель..

    Создание успешной организации по науке о данных
    "Рабочие часы" Создание успешной организации по науке о данных Как создать эффективную группу по анализу данных! Введение Это обзорная статья о том, как создать эффективную группу по..

    Технологии и проблемы будущей работы
    Изучение преимуществ и недостатков технологий в образовании В быстро меняющемся мире технологии являются решающим фактором в формировании будущего работы. Многие отрасли уже были..

    Игорь Минар из Google приедет на #ReactiveConf2017
    Мы рады сообщить еще одну замечательную новость: один из самых востребованных спикеров приезжает в Братиславу на ReactiveConf 2017 ! Возможно, нет двух других кланов разработчиков с более..

    Я собираюсь научить вас Python шаг за шагом
    Привет, уважаемый энтузиаст Python! 👋 Готовы погрузиться в мир Python? Сегодня я приготовил для вас кое-что интересное, что сделает ваше путешествие более приятным, чем шарик мороженого в..