Научете как да внедрите 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.
- Подобрено потребителско изживяване: Предоставете по-бърз и по-удобен за потребителите уебсайт, който ги задържа ангажирани.
- Намален процент на отпадане (Bounce Rate): Оптимизирайте времето за зареждане, за да намалите разочарованието на потребителите и да ги предпазите от напускане на сайта ви.
- Увеличени проценти на конверсия: По-бързият уебсайт обикновено води до по-високи проценти на конверсия и подобрени бизнес резултати.
- Автоматизирано тестване на производителността: Интегрирайте тестването на производителността във вашия 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 environments).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: Задейства работния процес при push къмmainклона.on.pull_request: Задейства работния процес при pull request.jobs.lighthouse.runs-on: Посочва операционната система, която да се използва за задачата (в този случай Ubuntu).steps: Дефинира стъпките, които да се изпълнят в задачата:actions/checkout@v3: Изтегля (checks out) хранилището.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 клона или създадете pull request, работният процес на Lighthouse CI ще се изпълни автоматично. Резултатите ще бъдат достъпни в интерфейса на GitHub Actions.
5. Прегледайте резултатите от Lighthouse CI
Резултатите от Lighthouse CI ще бъдат качени на мястото, посочено във вашия файл lighthouserc.js (напр. temporary-public-storage). Можете да получите достъп до тези резултати, като последвате връзката, предоставена в изходните данни на CI/CD. Тези резултати предоставят подробна информация за производителността, достъпността, SEO и добрите практики на вашия уебсайт.
Конфигуриране на проверки и бюджети за производителност
Lighthouse CI ви позволява да конфигурирате проверки и бюджети за производителност, за да гарантирате, че уебсайтът ви отговаря на вашите цели за производителност. Проверките (assertions) са правила, които проверяват конкретни показатели за производителност (напр. 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) на 2000ms.largest-contentful-paint: Задава праг за предупреждение за Largest Contentful Paint (LCP) на 2500ms.cumulative-layout-shift: Задава праг за предупреждение за Cumulative Layout Shift (CLS) на 0.1.total-blocking-time: Задава праг за предупреждение за Total Blocking Time (TBT) на 500ms.categories:performance: Задава праг за предупреждение за общия резултат на категорията "Производителност" на 0.9.categories: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 bucket. Това е рентабилно и мащабируемо решение за съхранение на вашите данни.
- Amazon S3: Подобно на Google Cloud Storage, можете да качите резултатите си от Lighthouse CI в Amazon S3 bucket.
Настройка на 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"може да се използва за просто мързеливо зареждане. - Елиминирайте ресурси, блокиращи рендирането: Идентифицирайте и елиминирайте ресурси, които блокират рендирането на вашата страница. Това често включва вграждане (inlining) на критичен CSS и отлагане на некритичен CSS и JavaScript.
- Намалете времето за изпълнение на JavaScript: Профилирайте своя JavaScript код, за да идентифицирате и оптимизирате бавно работещи функции. Техники като code splitting и tree shaking могат да помогнат за намаляване на количеството JavaScript, което трябва да бъде изтеглено и изпълнено.
Напреднали техники в Lighthouse CI
След като се почувствате комфортно с основите на Lighthouse CI, можете да изследвате някои напреднали техники, за да подобрите допълнително мониторинга на производителността:
- Персонализирани одити на Lighthouse: Можете да създавате персонализирани одити на Lighthouse, за да тествате за специфични проблеми с производителността, които са от значение за вашето приложение.
- Конфигурация на Headless Chrome: Конфигурирайте Headless Chrome да използва специфични емулации на устройства или настройки за ограничаване на мрежата (network throttling).
- Интеграция с инструменти за мониторинг: Интегрирайте Lighthouse CI със съществуващите си инструменти за мониторинг (напр. New Relic, Datadog), за да получите по-цялостен поглед върху производителността на уебсайта си.
- Тестване на визуални регресии: Комбинирайте Lighthouse CI с инструменти за тестване на визуални регресии, за да откривате визуални промени, които могат да повлияят на производителността.
Lighthouse CI за глобална аудитория: Съображения за международни уебсайтове
Когато използвате Lighthouse CI за уебсайтове, насочени към глобална аудитория, вземете предвид следното:
- Тествайте от множество местоположения: Времето за отговор на сървъра може да варира значително в зависимост от местоположението на потребителя. Използвайте CDN (мрежа за доставка на съдържание) и обмислете изпълнението на одити на Lighthouse CI от различни географски региони, за да получите по-точна представа за производителността за вашите международни потребители. Някои CI/CD доставчици предлагат опции за указване на географското местоположение на изпълнителя (runner).
- Вземете предвид мрежовите условия: Скоростите и латентността на мрежата варират в широки граници по света. Симулирайте различни мрежови условия по време на вашите 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 днес и отключете пълния потенциал на вашите уеб приложения.