Тестування продуктивності фронтенду: інтеграція Lighthouse CI для постійного вдосконалення

У сучасному цифровому світі продуктивність вебсайту має першочергове значення. Повільне завантаження, проблеми з доступністю та погане SEO можуть суттєво вплинути на користувацький досвід і, як наслідок, на бізнес-результати. Тестування продуктивності фронтенду стало невід'ємною частиною сучасного життєвого циклу розробки програмного забезпечення, гарантуючи, що вебсайти та вебдодатки є швидкими, надійними та зручними для глобальної аудиторії. Ця стаття розглядає інтеграцію Lighthouse CI, потужного інструменту з відкритим кодом, у ваш конвеєр безперервної інтеграції (CI) для автоматизації тестування продуктивності фронтенду та стимулювання постійного вдосконалення.

Чому тестування продуктивності фронтенду є важливим?

Перш ніж заглибитися в Lighthouse CI, давайте розберемося, чому тестування продуктивності фронтенду є надзвичайно важливим:

• Користувацький досвід: Швидкий та чутливий вебсайт забезпечує кращий користувацький досвід, що призводить до підвищення залученості та зменшення показника відмов. Уявіть потенційного клієнта в Токіо, Японія, який намагається придбати товар на повільному сайті електронної комерції. Найімовірніше, він покине сайт і шукатиме альтернативи.
• Ранжування в SEO: Пошукові системи, такі як Google, враховують швидкість та продуктивність вебсайту як фактори ранжування. Швидші сайти, як правило, посідають вищі позиції в результатах пошуку, залучаючи більше органічного трафіку. Ініціатива Google Core Web Vitals підкреслює важливість таких факторів, як Largest Contentful Paint (LCP), First Input Delay (FID) та Cumulative Layout Shift (CLS) для SEO.
• Доступність: Покращення продуктивності часто призводить до кращої доступності для користувачів з обмеженими можливостями. Оптимізований код та зображення можуть покращити досвід для користувачів, які покладаються на екранні зчитувачі, або для тих, хто має обмежену пропускну здатність.
• Коефіцієнт конверсії: Швидший вебсайт може безпосередньо впливати на коефіцієнт конверсії. Дослідження показали, що навіть односекундна затримка в завантаженні сторінки може призвести до значного зниження конверсії. Подумайте про користувача в Мумбаї, Індія, який намагається забронювати квиток на літак. Повільний процес бронювання може змусити його відмовитися від покупки та вибрати конкурента.
• Оптимізація ресурсів: Тестування продуктивності допомагає визначити сфери, де можна оптимізувати ресурси, що призводить до економії коштів на серверну інфраструктуру та використання пропускної здатності.

Представляємо Lighthouse CI

Lighthouse CI — це автоматизований інструмент з відкритим кодом, розроблений для безшовної інтеграції з вашим конвеєром CI/CD. Він запускає Lighthouse, популярний інструмент для аудиту від Google, і надає статистику щодо продуктивності вашого вебсайту, доступності, SEO, найкращих практик та відповідності стандартам Progressive Web App (PWA). Lighthouse CI допомагає вам:

• Автоматизувати аудити продуктивності: Запускайте аудити Lighthouse автоматично з кожним комітом або пул-реквестом.
• Відстежувати продуктивність з часом: Моніторте метрики продуктивності з часом та виявляйте регресії на ранніх етапах.
• Встановлювати бюджети продуктивності: Визначайте бюджети продуктивності та провалюйте збірки, якщо вони перевищені.
• Інтегруватися з системами CI/CD: Інтегруйте з популярними системами CI/CD, такими як GitHub Actions, GitLab CI, CircleCI та Jenkins.
• Співпрацювати над проблемами продуктивності: Діліться звітами Lighthouse та співпрацюйте з командою для вирішення проблем з продуктивністю.

Налаштування Lighthouse CI

Ось покрокова інструкція з налаштування Lighthouse CI у вашому проєкті:

1. Встановіть Lighthouse CI

Встановіть Lighthouse CI CLI глобально за допомогою npm або yarn:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. Налаштуйте Lighthouse CI

Створіть файл lighthouserc.js у кореневому каталозі вашого проєкту для налаштування Lighthouse CI. Ось приклад конфігурації:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

Давайте розберемо цю конфігурацію:

• collect.url: Масив URL-адрес для аудиту. Цей приклад перевіряє домашню сторінку та сторінку "Про нас". Вам слід включити всі критичні сторінки вашого вебсайту, враховуючи різні сценарії використання. Наприклад, сайт електронної комерції може включати домашню сторінку, сторінки зі списком товарів, сторінки з детальною інформацією про товар та процес оформлення замовлення.
• collect.startServerCommand: Команда для запуску вашого сервера розробки. Це необхідно, якщо Lighthouse CI потрібно працювати з локальним середовищем розробки.
• collect.numberOfRuns: Кількість запусків аудитів Lighthouse для кожної URL-адреси. Запуск кількох аудитів допомагає зменшити вплив коливань умов мережі та інших факторів.
• assert.assertions: Набір тверджень для перевірки результатів аудиту Lighthouse. Кожне твердження визначає метрику або категорію та порогове значення. Якщо порогове значення не досягнуто, збірка завершиться невдачею. Цей приклад встановлює порогові значення для категорій продуктивності, доступності, найкращих практик та SEO. Він також встановлює порогові значення для конкретних метрик, таких як First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) та Cumulative Layout Shift (CLS).
• upload.target: Вказує, куди завантажувати звіти Lighthouse. temporary-redirect завантажує звіти до тимчасового сховища та надає URL для доступу до них. Інші варіанти включають використання сервера Lighthouse CI або хмарних сховищ, таких як Google Cloud Storage або Amazon S3.

3. Інтегруйте з вашою системою CI/CD

Наступним кроком є інтеграція Lighthouse CI у ваш конвеєр CI/CD. Ось приклад інтеграції з GitHub Actions:

Створіть файл .github/workflows/lighthouse.yml у вашому репозиторії:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

Цей робочий процес виконує наступні кроки:

• Завантажує код.
• Налаштовує Node.js.
• Встановлює залежності.
• Запускає Lighthouse CI. Цей крок спочатку збирає додаток (npm run build), а потім запускає lhci autorun, який виконує аудити Lighthouse та перевіряє результати на відповідність налаштованим пороговим значенням.

Адаптуйте цей робочий процес до вашої конкретної системи CI/CD та вимог проєкту. Наприклад, якщо ви використовуєте GitLab CI, ви налаштуєте файл .gitlab-ci.yml з аналогічними кроками.

4. Запустіть Lighthouse CI

Закомітьте свої зміни та відправте їх у ваш репозиторій. Конвеєр CI/CD автоматично запустить Lighthouse CI. Якщо будь-яке з тверджень не буде виконано, збірка завершиться невдачею, надаючи розробникам цінний зворотний зв'язок. Звіти Lighthouse CI будуть доступні за URL-адресою, наданою системою CI/CD.

Розширена конфігурація та налаштування

Lighthouse CI пропонує широкий спектр опцій конфігурації та можливостей налаштування. Ось деякі розширені функції:

1. Використання сервера Lighthouse CI

Сервер Lighthouse CI надає централізовану панель для відстеження метрик продуктивності з часом, управління проєктами та співпраці над проблемами продуктивності. Щоб використовувати сервер Lighthouse CI, вам потрібно налаштувати екземпляр та сконфігурувати ваш файл lighthouserc.js для завантаження звітів на сервер.

Спочатку розгорніть сервер. Існують різні варіанти розгортання, включаючи Docker, Heroku та хмарних провайдерів, таких як AWS та Google Cloud. Зверніться до документації Lighthouse CI для отримання детальних інструкцій щодо розгортання сервера.

Після запуску сервера оновіть ваш файл lighthouserc.js, щоб він вказував на сервер:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

Замініть YOUR_LHCI_SERVER_URL на URL вашого сервера Lighthouse CI, а YOUR_LHCI_SERVER_TOKEN — на токен, згенерований сервером. Токен автентифікує ваш конвеєр CI на сервері.

2. Встановлення бюджетів продуктивності

Бюджети продуктивності визначають допустимі порогові значення для конкретних метрик. Lighthouse CI дозволяє встановлювати бюджети продуктивності та провалювати збірки, якщо ці бюджети перевищені. Це допомагає запобігти регресіям продуктивності та гарантує, що ваш вебсайт залишається в межах допустимих показників.

Ви можете визначити бюджети продуктивності у вашому файлі lighthouserc.js за допомогою властивості assert.assertions. Наприклад, щоб встановити бюджет продуктивності для First Contentful Paint (FCP), ви можете додати наступне твердження:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

Це твердження призведе до невдачі збірки, якщо FCP перевищує 2500 мілісекунд.

3. Налаштування конфігурації Lighthouse

Lighthouse CI дозволяє налаштовувати конфігурацію Lighthouse відповідно до ваших конкретних потреб. Ви можете налаштувати різні параметри Lighthouse, такі як:

• onlyAudits: Вкажіть список аудитів для запуску.
• skipAudits: Вкажіть список аудитів, які слід пропустити.
• throttling: Налаштуйте параметри обмеження швидкості мережі для симуляції різних умов мережі.
• formFactor: Вкажіть форм-фактор (десктопний або мобільний) для емуляції.
• screenEmulation: Налаштуйте параметри емуляції екрана.

Щоб налаштувати конфігурацію Lighthouse, ви можете передати прапор --config-path команді lhci autorun, вказавши шлях до власного файлу конфігурації Lighthouse. Зверніться до документації Lighthouse для повного списку опцій конфігурації.

4. Аудит сторінок, що вимагають автентифікації

Аудит сторінок, що вимагають автентифікації, потребує дещо іншого підходу. Вам потрібно надати Lighthouse CI спосіб автентифікації перед запуском аудитів. Це можна зробити за допомогою cookie або шляхом скриптування процесу входу.

Один з поширених підходів — використовувати прапор --extra-headers для передачі автентифікаційних cookie до Lighthouse CI. Ви можете отримати cookie з інструментів розробника у вашому браузері після входу на вебсайт.

Як альтернативу, ви можете використовувати скрипт Puppeteer для автоматизації процесу входу, а потім запускати аудити Lighthouse на сторінках, що вимагають автентифікації. Цей підхід забезпечує більшу гнучкість і дозволяє обробляти складні сценарії автентифікації.Найкращі практики тестування продуктивності фронтенду з Lighthouse CI

Щоб отримати максимальну користь від Lighthouse CI, дотримуйтесь цих найкращих практик:

• Регулярно запускайте Lighthouse CI: Інтегруйте Lighthouse CI у ваш конвеєр CI/CD для автоматичного запуску аудитів з кожним комітом або пул-реквестом. Це гарантує раннє виявлення та своєчасне усунення регресій продуктивності.
• Встановлюйте реалістичні бюджети продуктивності: Визначайте бюджети, які є складними, але досяжними. Почніть з консервативних бюджетів і поступово їх посилюйте в міру покращення продуктивності вашого сайту. Розгляньте можливість встановлення різних бюджетів для різних типів сторінок залежно від їх складності та важливості.
• Зосередьтеся на ключових метриках: Надайте пріоритет ключовим метрикам продуктивності, які найбільше впливають на користувацький досвід та бізнес-результати. Core Web Vitals від Google (LCP, FID та CLS) є гарною відправною точкою.
• Досліджуйте та вирішуйте проблеми з продуктивністю: Коли Lighthouse CI виявляє проблеми з продуктивністю, ретельно їх досліджуйте та впроваджуйте відповідні рішення. Використовуйте звіти Lighthouse для виявлення першопричин проблем та пріоритезації найефективніших виправлень.
• Моніторте продуктивність з часом: Відстежуйте метрики продуктивності з часом, щоб виявляти тенденції та закономірності. Використовуйте сервер Lighthouse CI або інші інструменти моніторингу для візуалізації даних про продуктивність та визначення областей для покращення.
• Навчайте свою команду: Переконайтеся, що ваша команда розуміє важливість продуктивності фронтенду та як ефективно використовувати Lighthouse CI. Надайте навчання та ресурси, щоб допомогти їм покращити свої навички та знання.
• Враховуйте глобальні умови мережі: При встановленні бюджетів продуктивності враховуйте умови мережі в різних частинах світу. Користувачі в регіонах з повільнішим інтернетом можуть мати інший досвід, ніж користувачі в регіонах з вищою швидкістю. Використовуйте інструменти для симуляції різних умов мережі під час тестування.
• Оптимізуйте зображення: Оптимізація зображень є критичним аспектом продуктивності фронтенду. Використовуйте такі інструменти, як ImageOptim, TinyPNG, або онлайн-конвертери для стиснення та оптимізації зображень без втрати якості. Використовуйте сучасні формати зображень, як-от WebP, які пропонують краще стиснення та якість, ніж традиційні формати, такі як JPEG та PNG. Впроваджуйте відкладене завантаження (lazy loading) для зображень, які не є одразу видимими у в'юпорті.
• Мініфікуйте та стискайте код: Мініфікуйте ваш HTML, CSS та JavaScript код, щоб зменшити розмір файлів. Використовуйте такі інструменти, як UglifyJS, Terser, або онлайн-мініфікатори. Увімкніть стиснення Gzip або Brotli на вашому сервері, щоб ще більше зменшити розмір переданих файлів.
• Використовуйте кешування в браузері: Налаштуйте ваш сервер для встановлення відповідних заголовків кешування для статичних ресурсів, таких як зображення, CSS та JavaScript файли. Це дозволяє браузерам кешувати ці ресурси та уникати їх повторного завантаження.

Висновок

Інтеграція Lighthouse CI у ваш робочий процес розробки є вирішальним кроком до створення високопродуктивних, доступних та SEO-дружніх вебсайтів. Автоматизуючи тестування продуктивності фронтенду та відстежуючи продуктивність з часом, ви можете виявляти та вирішувати проблеми з продуктивністю на ранніх етапах, покращувати користувацький досвід та досягати кращих бізнес-результатів. Впроваджуйте Lighthouse CI і зробіть постійне вдосконалення продуктивності основною цінністю у вашому процесі розробки. Пам'ятайте, що продуктивність вебсайту — це не одноразове зусилля, а постійний процес, який вимагає постійної уваги та оптимізації. Враховуйте культурні та регіональні фактори, щоб забезпечити бездоганний досвід для всіх ваших користувачів, незалежно від їхнього місцезнаходження чи пристрою. Дотримуючись найкращих практик, викладених у цій статті, ви можете гарантувати, що ваш вебсайт забезпечує швидкий, надійний та приємний досвід для користувачів у всьому світі.