Хорошо известно, что производительность является критическим фактором для любого веб-сайта, который может иметь далеко идущие последствия для всего: от удовлетворенности клиентов, SEO и, в конечном итоге, до вашей прибыли. Вы не можете определить успех производительной работы без возможности измерить результаты и сравнить их с бюджетами производительности — для этого требуется тестовая инфраструктура, чтобы убедиться, что у вас есть необходимая видимость метрик… введение cypress-web-vitals
.
cypress-web-vitals
позволяет вам тестировать сигналы Google Web Vital в ваших рабочих процессах Cypress с помощью новой пользовательской команды cy.vitals()
.
Web Vitals — это инициатива Google, направленная на предоставление унифицированных рекомендаций по сигналам качества, которые необходимы для обеспечения удобного взаимодействия с пользователями в Интернете.
Ссылка: https://web.dev/vitals/
Начиная
В вашем проекте установите зависимости:
npm install --save-dev cypress-web-vitals cypress-real-events
Примечание.
cypress-web-vitals
в настоящее время используетcypress-real-events
, чтобы щелкнуть страницу и рассчитать первую задержку ввода. Следовательно, это необходимо как одноранговая зависимость.
В вашем файле команд поддержки (обычно cypress/support/commands.js
) добавьте этот один вкладыш, чтобы получить настройку:
import "cypress-web-vitals";
И теперь вы готовы приступить к тестированию бюджета производительности Web Vital в рабочем процессе Cypress! 🎉
Добавьте свой первый тест следующим образом:
describe("Web Vitals", () => { it("should pass the meet Google's 'Good' thresholds", () => { cy.vitals({ url: "https://www.google.com/" }); }); });
Теперь вы настроены на тестирование всех Web Vitals с использованием пороговых значений Google «Хорошо»:
- Самая большая содержательная краска (LCP) —
2500
. - Задержка первого входа (FID) —
100
. - Совокупная смена раскладки (CLS) —
0.1
. - Первая содержательная краска (FCP) —
1800
. - Время до первого байта (TTFB) —
600
.
Настройте свои тесты
Вы можете дополнительно настроить свои тесты с помощью дополнительной дополнительной конфигурации, которая передается в вызов cy.vitals(webVitalsConfig)
:
- Необязательный
url: string
— URL-адрес для аудита. Если он не указан, вам нужно будет вызватьcy.visit(url)
перед командой. - Необязательный
firstInputSelector: string
— элемент, по которому нужно щелкнуть для захвата FID. Используется первый соответствующий элемент. По умолчанию:"body"
. - Необязательный
thresholds: object
— пороговые значения для аудита Web Vitals. Если они не указаны, будут использоваться пороговые значения «Хорошо» Google. Если они предоставлены, любые отсутствующие сигналы Web Vitals не будут проверяться. - Необязательный
vitalsReportedTimeout: number
— время в мс для ожидания отчета Web Vitals перед сбоем. По умолчанию:10000
.
Например:
// Use the `main` element for clicking to capture the FID. cy.vitals({ firstInputSelector: "main" }); // Test the page against against a CLS threshold of 0.2. cy.vitals({ thresholds: { cls: 0.2 } });
Подробнее об использовании см. в Документации по API.
Как это работает?
- URL-адрес посещается с ответом HTML, перехваченным и измененным Cypress, чтобы включить сценарий web-vitals и некоторый код для записи значений Web Vitals.
- Несколько элементов (если они существуют), начиная с предоставленного элемента (на основе
firstInputSelector
), затем быстро щелкаются, чтобы имитировать нажатие пользователем страницы. Примечание: при выборе пользовательского элемента не выбирайте то, что уйдет со страницы, иначе плагин не сможет зафиксировать показатели Web Vitals. - Затем аудит ожидает события загрузки страницы, чтобы позволить значениям LCP и CLS установиться; которые могут изменяться по мере загрузки разных частей страницы.
- Затем аудит моделирует изменение состояния видимости страницы, которое требуется для отчета CLS Web Vital.
- Затем аудит пытается дождаться отчета о любых невыполненных веб-показателях, для которых были предоставлены пороговые значения.
- Наконец, значения Web Vitals сравниваются с пороговыми значениями, регистрируя успешные результаты и выдавая ошибку для любых неудачных сигналов. Примечание: если в ходе аудита не удалось записать Web Vital, он заносится в журнал, но тест не завершается ошибкой.
Тестовые площадки в дикой природе
Вот несколько примеров тестовых запусков домашних страниц FAANG, чтобы увидеть cypress-web-vitals
в действии:
Фейсбук
cy.vitals({ url: "https://www.facebook.com/" });
Амазонка
cy.vitals({ url: "https://www.amazon.com/" });
Нетфликс
cy.vitals({ url: "https://www.netflix.com/gb/", firstInputSelector: ".our-story-card-title", });
Для Netflix нам пришлось ввести настраиваемый выбор элемента для имитации первого клика. Несмотря на то, что задержка первого ввода может быть измерена в тех случаях, когда для элемента не зарегистрирован прослушиватель событий, есть сценарии, в которых нажатие на body
не отключает ее. Вот несколько хороших примеров элементов, которые надежно запускают метрику FID:
- Текстовые поля, флажки и переключатели (
<input>
,<textarea>
) - Выберите раскрывающиеся списки (
<select>
) - Ссылки (
<a>
)
Чтобы убедиться, что Web Vitals можно протестировать, лучше попытаться найти элемент, который надежно запускает FID, но не уходит со страницы (возможно, избегайте <a>
!).
cy.vitals({ url: "https://www.google.com/" });
Заворачивать
Используете какие-нибудь потрясающие инструменты для тестирования производительности в последнее время? Опробовали cypress-web-vitals на своем сайте и хотите поделиться результатами? Есть какие-либо мысли, вопросы или вопросы? Оставить комментарий!
Это все люди! 🚀
Первоначально опубликовано на https://dev.to 3 апреля 2022 г.