Дізнайтеся, як впровадити Frontend Lighthouse CI для безперервного моніторингу продуктивності, забезпечуючи оптимальну швидкість та користувацький досвід для ваших вебзастосунків.
Frontend Lighthouse CI: Безперервний моніторинг продуктивності для вебзастосунків
У сучасному швидкоплинному цифровому світі продуктивність вебсайту має першочергове значення. Повільний або погано оптимізований сайт може призвести до розчарування користувачів, зниження залученості та, зрештою, негативно вплинути на ваш бізнес. Саме тут у нагоді стає Lighthouse CI. Цей посібник проведе вас через впровадження Lighthouse CI для безперервного моніторингу продуктивності, що дозволить вам проактивно виявляти та усувати вузькі місця продуктивності до того, як вони вплинуть на ваших користувачів.
Що таке Lighthouse CI?
Lighthouse CI — це автоматизований інструмент для тестування продуктивності з відкритим кодом, який безшовно інтегрується у ваш конвеєр безперервної інтеграції та доставки (CI/CD). Він використовує інструмент аудиту Google Lighthouse для надання дієвих інсайтів щодо продуктивності, доступності, SEO та найкращих практик вашого вебсайту. Включивши Lighthouse CI у свій робочий процес, ви можете постійно відстежувати продуктивність сайту, виявляти регресії та гарантувати, що кожна зміна коду сприяє кращому користувацькому досвіду. Lighthouse CI не прив'язаний до одного конкретного хмарного провайдера і може використовуватися з різними налаштуваннями. Наприклад, він може працювати всередині Docker-контейнера на таких сервісах, як Github Actions, Jenkins, CircleCI та багатьох інших.
Навіщо використовувати Lighthouse CI?
Впровадження Lighthouse CI пропонує безліч переваг:
- Раннє виявлення регресій продуктивності: Виявляйте проблеми з продуктивністю, спричинені новими змінами в коді, ще до їх потрапляння у продакшн.
- Покращена продуктивність вебсайту: Отримуйте дієві інсайти для оптимізації вашого сайту щодо швидкості, доступності та SEO.
- Покращений користувацький досвід: Забезпечте швидший та більш дружній до користувача вебсайт, який утримує відвідувачів залученими.
- Зниження показника відмов: Оптимізуйте час завантаження, щоб зменшити розчарування користувачів і запобігти їхньому виходу з вашого сайту.
- Збільшення коефіцієнта конверсії: Швидший вебсайт зазвичай призводить до вищих коефіцієнтів конверсії та кращих бізнес-результатів.
- Автоматизоване тестування продуктивності: Інтегруйте тестування продуктивності у ваш CI/CD пайплайн для безперервного моніторингу.
- Прийняття рішень на основі даних: Базуйте свої зусилля з оптимізації на конкретних метриках продуктивності та інсайтах.
- Довгострокове відстеження продуктивності: Моніторте продуктивність вашого сайту з часом, щоб виявляти тенденції та вимірювати вплив ваших оптимізацій.
Ключові особливості Lighthouse CI
- Автоматизовані аудити: Запускає аудити Lighthouse автоматично як частину вашого CI/CD процесу.
- Бюджети продуктивності: Встановлюйте бюджети продуктивності, щоб гарантувати, що ваш сайт залишається в межах прийнятних порогів продуктивності.
- Відстеження регресій: Відстежує регресії продуктивності з часом, дозволяючи вам ідентифікувати зміни в коді, які їх спричинили.
- Дієві інсайти: Надає детальні звіти з практичними рекомендаціями щодо покращення продуктивності вашого сайту.
- Налаштовувана конфігурація: Конфігуруйте Lighthouse CI відповідно до ваших конкретних потреб та вимог.
- Інтеграція з інструментами CI/CD: Безшовно інтегрується з популярними інструментами CI/CD, такими як Jenkins, CircleCI, GitHub Actions та GitLab CI.
- Відкритий код: Lighthouse CI є проєктом з відкритим кодом, що означає, що його можна використовувати та модифікувати безкоштовно.
Налаштування Lighthouse CI: Покроковий посібник
Ось вичерпний посібник з налаштування Lighthouse CI для вашого проєкту:
1. Встановіть Lighthouse CI CLI
Спочатку вам потрібно встановити інтерфейс командного рядка (CLI) Lighthouse CI глобально за допомогою npm або yarn:
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Налаштуйте Lighthouse CI
Створіть файл lighthouserc.js у корені вашого проєкту, щоб налаштувати Lighthouse CI. Цей файл визначає URL-адреси для аудиту, правила тверджень (assertions) та інші параметри конфігурації.
Ось базовий приклад файлу lighthouserc.js:
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000', 'http://localhost:3000/about']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'temporary-public-storage'
},
},
};
Пояснення:
collect.url: Вказує URL-адреси, які Lighthouse має перевірити. У цьому прикладі ми перевіряємо домашню сторінку та сторінку "about" вебсайту, що працює наlocalhost:3000. Не забудьте замінити це на URL-адреси, що стосуються *вашого* проєкту, які можуть включати середовища для тестування (staging).assert.preset: Використовує пресетlighthouse:recommended, який застосовує набір попередньо визначених тверджень на основі рекомендацій Lighthouse. Це гарна відправна точка, але ви можете налаштувати ці твердження за потреби.upload.target: Налаштовує, куди будуть завантажуватися результати Lighthouse CI.temporary-public-storageкорисний для тестування та розробки, але для продакшн-середовищ вам, як правило, знадобиться більш постійне рішення для зберігання (обговоримо пізніше).
3. Інтегруйте Lighthouse CI у ваш CI/CD пайплайн
Наступний крок — інтеграція Lighthouse CI у ваш CI/CD пайплайн. Точні кроки залежатимуть від вашого CI/CD провайдера, але загальний процес полягає у додаванні скрипта до вашої CI/CD конфігурації, який запускає команди Lighthouse CI.
Приклад використання GitHub Actions:
Створіть файл з назвою .github/workflows/lighthouse-ci.yml у вашому репозиторії з наступним вмістом:
name: Lighthouse CI
on:
push:
branches: [main]
pull_request:
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: '16.x'
- name: Install dependencies
run: npm ci
- name: Run Lighthouse CI
run: |
npm install -g @lhci/cli@0.11.x
lhci autorun
Пояснення:
on.push.branches: Запускає воркфлоу при пушах у гілкуmain.on.pull_request: Запускає воркфлоу для пул-реквестів.jobs.lighthouse.runs-on: Вказує операційну систему для виконання завдання (у цьому випадку Ubuntu).steps: Визначає кроки, які будуть виконані в завданні:actions/checkout@v3: Клонує репозиторій.actions/setup-node@v3: Налаштовує Node.js.npm ci: Встановлює залежності.Run Lighthouse CI: Запускає команди Lighthouse CI:npm install -g @lhci/cli@0.11.x: Встановлює Lighthouse CI CLI глобально. *Важливо*: завжди рекомендується фіксувати конкретну версію.lhci autorun: Запускає Lighthouse CI в режимі "autorun", який автоматично збирає аудити, перевіряє бюджети продуктивності та завантажує результати.
Важливі міркування щодо інтеграції CI/CD:
- Запуск сервера: Перш ніж запускати
lhci autorun, переконайтеся, що ваш вебсервер працює (наприклад,npm start). Можливо, вам доведеться додати крок до вашої CI/CD конфігурації для запуску сервера у фоновому режимі. - Міграції бази даних: Якщо ваш застосунок залежить від бази даних, переконайтеся, що міграції бази даних виконуються як частина вашого CI/CD процесу *перед* запуском Lighthouse CI.
- Змінні середовища: Якщо ваш застосунок вимагає змінних середовища, переконайтеся, що вони правильно налаштовані у вашому CI/CD середовищі.
4. Запустіть Lighthouse CI
Тепер, щоразу, коли ви пушите зміни у гілку main або створюєте пул-реквест, воркфлоу Lighthouse CI запускатиметься автоматично. Результати будуть доступні в інтерфейсі GitHub Actions.
5. Перегляньте результати Lighthouse CI
Результати Lighthouse CI будуть завантажені у місце, вказане у вашому файлі lighthouserc.js (наприклад, temporary-public-storage). Ви можете отримати доступ до цих результатів, перейшовши за посиланням, наданим у виводі CI/CD. Ці результати містять детальну інформацію про продуктивність, доступність, SEO та найкращі практики вашого вебсайту.
Налаштування асерцій та бюджетів продуктивності
Lighthouse CI дозволяє налаштовувати асерції та бюджети продуктивності, щоб гарантувати, що ваш вебсайт відповідає вашим цілям продуктивності. Асерції — це правила, які перевіряють конкретні метрики продуктивності (наприклад, First Contentful Paint, Largest Contentful Paint) на відповідність попередньо визначеним порогам. Бюджети продуктивності визначають прийнятні ліміти для різних метрик продуктивності.
Ось приклад того, як налаштувати асерції у вашому файлі lighthouserc.js:
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
assertions: {
'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
'total-blocking-time': ['warn', { maxNumericValue: 500 }],
'categories:performance': ['warn', { minScore: 0.9 }],
'categories:accessibility': ['error', { minScore: 0.8 }],
}
},
upload: {
target: 'temporary-public-storage'
},
}
};
Пояснення:
first-contentful-paint: Встановлює поріг попередження для First Contentful Paint (FCP) на рівні 2000 мс.largest-contentful-paint: Встановлює поріг попередження для Largest Contentful Paint (LCP) на рівні 2500 мс.cumulative-layout-shift: Встановлює поріг попередження для Cumulative Layout Shift (CLS) на рівні 0.1.total-blocking-time: Встановлює поріг попередження для Total Blocking Time (TBT) на рівні 500 мс.categories:performance: Встановлює поріг попередження для загального балу категорії Performance на рівні 0.9.categories:accessibility: Встановлює поріг помилки для загального балу категорії Accessibility на рівні 0.8.
Рівні асерцій:
off: Вимикає асерцію.warn: Відображає попередження, якщо асерція не проходить.error: Призводить до збою запуску Lighthouse CI, якщо асерція не проходить.
Кастомізація асерцій:
Ви можете налаштувати асерції відповідно до ваших конкретних потреб. Наприклад, ви можете встановити суворіші пороги для критичних метрик продуктивності або вимкнути асерції, які не є релевантними для вашого застосунку.
Вибір цілі для завантаження результатів Lighthouse CI
Опція upload.target у вашому файлі lighthouserc.js вказує, куди будуть завантажуватися результати Lighthouse CI. Ціль temporary-public-storage зручна для тестування та розробки, але вона не підходить для продакшн-середовищ, оскільки дані не є постійними.
Ось деякі альтернативні цілі для завантаження:
- Lighthouse CI Server: Рекомендованим підходом для продакшн-середовищ є використання сервера Lighthouse CI. Сервер Lighthouse CI надає постійне рішення для зберігання ваших результатів Lighthouse CI, а також користувацький інтерфейс для перегляду та аналізу ваших даних. Його можна розгорнути у різних хмарних провайдерів або розмістити на власній інфраструктурі.
- Google Cloud Storage: Ви можете завантажувати результати Lighthouse CI у бакет Google Cloud Storage. Це економічно вигідне та масштабоване рішення для зберігання ваших даних.
- Amazon S3: Подібно до Google Cloud Storage, ви можете завантажувати результати Lighthouse CI у бакет Amazon S3.
Налаштування Lighthouse CI Server:
Налаштування сервера Lighthouse CI включає наступні кроки:
- Встановіть Lighthouse CI Server: Ви можете встановити сервер Lighthouse CI за допомогою npm або yarn:
- Налаштуйте базу даних: Сервер Lighthouse CI потребує бази даних для зберігання своїх даних. Ви можете використовувати різні бази даних, включаючи PostgreSQL, MySQL та SQLite. Налаштуйте параметри підключення до бази даних у файлі
.env. - Запустіть Lighthouse CI Server: Запустіть сервер Lighthouse CI за допомогою команди
lhci server. - Налаштуйте Lighthouse CI CLI для використання сервера: Оновіть ваш файл
lighthouserc.js, щоб використовувати сервер Lighthouse CI як ціль для завантаження:
npm install -g @lhci/server
yarn global add @lhci/server
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'lhci',
serverBaseUrl: 'http://your-lhci-server.com',
token: 'YOUR_LHCI_TOKEN'
},
}
};
Замініть http://your-lhci-server.com на URL вашого сервера Lighthouse CI та YOUR_LHCI_TOKEN на токен доступу для вашого проєкту.
Найкращі практики використання Lighthouse CI
Щоб отримати максимальну користь від Lighthouse CI, дотримуйтесь цих найкращих практик:
- Запускайте Lighthouse CI при кожній зміні коду: Інтегруйте Lighthouse CI у ваш CI/CD пайплайн для запуску аудитів при кожній зміні коду. Це допоможе вам завчасно виявляти регресії продуктивності.
- Встановлюйте бюджети продуктивності: Визначте бюджети продуктивності, щоб гарантувати, що ваш вебсайт залишається в межах прийнятних порогів продуктивності.
- Моніторте тенденції продуктивності: Відстежуйте продуктивність вашого сайту з часом, щоб виявляти тенденції та вимірювати вплив ваших оптимізацій.
- Пріоритизуйте зусилля з оптимізації: Спочатку зосередьтеся на оптимізації найкритичніших метрик продуктивності.
- Використовуйте реальні дані: Використовуйте реальні дані для обґрунтування ваших зусиль з оптимізації. Наприклад, ви можете використовувати Google Analytics для визначення сторінок, які найчастіше відвідують ваші користувачі.
- Тестуйте на реальних пристроях: Тестуйте ваш вебсайт на реальних пристроях, щоб переконатися, що він добре працює в реальних умовах.
- Регулярно переглядайте результати Lighthouse CI: Регулярно переглядайте результати Lighthouse CI та вживайте заходів для усунення будь-яких виявлених проблем з продуктивністю.
- Оптимізуйте зображення: Оптимізуйте ваші зображення, щоб зменшити їх розмір без втрати якості. Для цього корисні такі інструменти, як ImageOptim (macOS), TinyPNG та ImageKit.
- Мініфікуйте CSS та JavaScript: Мініфікуйте ваші файли CSS та JavaScript, щоб зменшити їх розмір. У цьому можуть допомогти такі інструменти, як UglifyJS та CSSNano.
- Використовуйте кешування браузера: Використовуйте кешування браузера, щоб зменшити кількість запитів, які ваш вебсайт робить до сервера.
- Використовуйте мережу доставки контенту (CDN): Використовуйте CDN для розповсюдження контенту вашого вебсайту на сервери по всьому світу. Це може покращити час завантаження для користувачів у різних географічних регіонах. Такі сервіси, як Cloudflare та Amazon CloudFront, є популярними CDN.
- Відкладайте завантаження зображень поза екраном: Впровадьте ліниве завантаження (lazy loading) для зображень, які не є видимими на екрані одразу. Це може значно покращити початковий час завантаження сторінки. Атрибут
loading="lazy"можна використовувати для простого лінивого завантаження. - Усувайте ресурси, що блокують рендеринг: Виявляйте та усувайте ресурси, які блокують рендеринг вашої сторінки. Це часто включає вбудовування критичного CSS та відкладення некритичного CSS та JavaScript.
- Зменшуйте час виконання JavaScript: Профілюйте ваш JavaScript-код, щоб виявити та оптимізувати повільні функції. Такі техніки, як розділення коду (code splitting) та "струшування дерева" (tree shaking), можуть допомогти зменшити кількість JavaScript, який потрібно завантажувати та виконувати.
Просунуті техніки Lighthouse CI
Коли ви освоїте основи Lighthouse CI, ви можете дослідити деякі просунуті техніки для подальшого покращення моніторингу продуктивності:
- Власні аудити Lighthouse: Ви можете створювати власні аудити Lighthouse для тестування специфічних проблем продуктивності, які є актуальними для вашого застосунку.
- Конфігурація Headless Chrome: Налаштуйте Headless Chrome для використання специфічних емуляцій пристроїв або налаштувань обмеження швидкості мережі.
- Інтеграція з інструментами моніторингу: Інтегруйте Lighthouse CI з вашими існуючими інструментами моніторингу (наприклад, New Relic, Datadog), щоб отримати більш повне уявлення про продуктивність вашого вебсайту.
- Візуальне регресійне тестування: Поєднуйте Lighthouse CI з інструментами візуального регресійного тестування для виявлення візуальних змін, які можуть вплинути на продуктивність.
Lighthouse CI для глобальної аудиторії: Міркування для міжнародних вебсайтів
При використанні Lighthouse CI для вебсайтів, орієнтованих на глобальну аудиторію, враховуйте наступне:
- Тестуйте з різних локацій: Час відповіді сервера може значно відрізнятися залежно від місцезнаходження користувача. Використовуйте CDN (Мережу доставки контенту) та розглядайте можливість запуску аудитів Lighthouse CI з різних географічних регіонів, щоб отримати більш точне уявлення про продуктивність для ваших міжнародних користувачів. Деякі CI/CD провайдери пропонують опції для вказівки географічного розташування ранера.
- Враховуйте умови мережі: Швидкість та затримка мережі значно варіюються по всьому світу. Симулюйте різні умови мережі під час ваших аудитів Lighthouse CI, щоб зрозуміти, як ваш вебсайт працює за різних обмежень. Lighthouse дозволяє обмежувати швидкість мережевого з'єднання, симулюючи повільніші з'єднання, наприклад 3G.
- Локалізація контенту: Переконайтеся, що ваш локалізований контент належним чином оптимізований. Це включає оптимізацію зображень для різних мов та наборів символів, а також правильне кодування для уникнення проблем з відображенням.
- Завантаження шрифтів: Оптимізуйте завантаження шрифтів для різних мов. Розгляньте можливість використання font-display: swap, щоб запобігти невидимості тексту під час завантаження шрифту.
- Сторонні скрипти: Будьте уважні до сторонніх скриптів, оскільки вони можуть значно впливати на продуктивність, особливо для користувачів у регіонах з повільнішим мережевим з'єднанням. Регулярно проводьте аудит продуктивності сторонніх скриптів та розглядайте можливість використання асинхронного завантаження або самостійного хостингу критичних скриптів.
- Мобільна оптимізація: Використання мобільних пристроїв поширене в багатьох частинах світу. Переконайтеся, що ваш вебсайт оптимізований для мобільних пристроїв і що ваші аудити Lighthouse CI включають тести, специфічні для мобільних пристроїв.
Вирішення поширених проблем з Lighthouse CI
Ось деякі поширені проблеми, з якими ви можете зіткнутися при використанні Lighthouse CI, та способи їх вирішення:
- Lighthouse CI завершується з помилкою "Timeout": Це може статися, якщо ваш вебсайт завантажується занадто довго або якщо Lighthouse CI не може підключитися до вашого сайту. Спробуйте збільшити значення тайм-ауту у вашому файлі
lighthouserc.jsабо перевірте лог-файли сервера вашого вебсайту на наявність помилок. - Lighthouse CI повідомляє про непослідовні результати: Результати Lighthouse можуть незначно відрізнятися між запусками через умови мережі або інші фактори. Запустіть кілька аудитів, щоб отримати більш стабільний середній показник.
- Lighthouse CI не може завантажити результати: Перевірте конфігурацію
upload.targetі переконайтеся, що ваш сервер Lighthouse CI працює і є доступним. Також перевірте, чи налаштований правильний токен доступу. - Lighthouse CI повідомляє про несподівані регресії продуктивності: Дослідіть зміни в коді, які були зроблені до того, як була виявлена регресія. Використовуйте звіти Lighthouse CI для визначення конкретних метрик продуктивності, які погіршилися, і зосередьте свої зусилля з оптимізації на цих областях.
Висновок
Frontend Lighthouse CI є потужним інструментом для безперервного моніторингу продуктивності вебзастосунків. Інтегруючи Lighthouse CI у ваш CI/CD пайплайн, ви можете проактивно виявляти та усувати проблеми з продуктивністю, забезпечуючи оптимальний користувацький досвід на вашому вебсайті. Не забувайте адаптувати ваші налаштування, правила асерцій та локації тестування для глобальної аудиторії, щоб створити найкращий можливий досвід для користувачів по всьому світу.
Дотримуючись кроків та найкращих практик, викладених у цьому посібнику, ви можете значно покращити продуктивність вашого вебсайту, зменшити показники відмов, збільшити коефіцієнти конверсії та, зрештою, досягти своїх бізнес-цілей. Почніть впроваджувати Lighthouse CI сьогодні та розкрийте повний потенціал ваших вебзастосунків.