JavaScript našumo regresijos prevencija: automatinis našumo testavimas

Šiuolaikiniame sparčiai besivystančiame skaitmeniniame pasaulyje svetainių ir programų našumas yra lemiamas veiksnys, siekiant vartotojų pasitenkinimo, įsitraukimo ir, galiausiai, verslo sėkmės. Lėtai įsikelianti ar nereaguojanti programa gali nuvilti vartotojus, lemti nutrauktus sandorius ir neigiamai paveikti jūsų prekės ženklo reputaciją. JavaScript, būdama pagrindinė šiuolaikinio žiniatinklio kūrimo sudedamoji dalis, vaidina svarbų vaidmenį bendrame našume. Todėl našumo regresijų – netikėtų našumo sumažėjimų – prevencija yra nepaprastai svarbi. Būtent čia į pagalbą ateina automatinis našumo testavimas.

Kas yra JavaScript našumo regresija?

Našumo regresija įvyksta, kai naujas kodo pakeitimas ar atnaujinimas sumažina JavaScript programos našumą. Tai gali pasireikšti įvairiais būdais, pavyzdžiui:

• Padidėjęs puslapio įkrovimo laikas: Vartotojai patiria ilgesnį laukimo laiką, kol puslapis tampa visiškai interaktyvus.
• Lėtesnis atvaizdavimas: Vaizdiniai elementai ilgiau atsiranda ekrane.
• Sumažėjęs kadrų dažnis: Animacijos ir perėjimai atrodo trūkčiojantys ir mažiau sklandūs.
• Padidėjęs atminties suvartojimas: Programa naudoja daugiau atminties, o tai gali sukelti strigimus ar sulėtėjimą.
• Padidėjęs procesoriaus (CPU) naudojimas: Programa sunaudoja daugiau apdorojimo galios, o tai turi įtakos mobiliųjų įrenginių baterijos veikimo laikui.

Šios regresijos gali būti subtilios ir lengvai nepastebimos rankinio testavimo metu, ypač sudėtingose programose su daugybe tarpusavyje susijusių komponentų. Jos gali išryškėti tik po įdiegimo į produkcinę aplinką, paveikdamos didelį skaičių vartotojų.

Automatinio našumo testavimo svarba

Automatinis našumo testavimas leidžia jums aktyviai identifikuoti ir spręsti našumo regresijas, kol jos dar nepaveikė jūsų vartotojų. Tai apima automatizuotų scenarijų kūrimą, kurie matuoja įvairius našumo rodiklius ir lygina juos su iš anksto nustatytomis ribomis ar baziniais lygiais. Šis metodas suteikia keletą pagrindinių privalumų:

• Ankstyvas aptikimas: Identifikuokite našumo problemas ankstyvoje kūrimo ciklo stadijoje, užkertant kelią joms pasiekti produkcinę aplinką.
• Nuoseklumas ir patikimumas: Automatiniai testai pateikia nuoseklius ir patikimus rezultatus, pašalindami žmogiškąją klaidą ir subjektyvumą.
• Greitesnis grįžtamasis ryšys: Gaukite tiesioginį grįžtamąjį ryšį apie kodo pakeitimų poveikį našumui, leidžiantį greitai kartoti ir optimizuoti.
• Sumažintos išlaidos: Ištaisykite našumo problemas ankstyvoje kūrimo proceso stadijoje, žymiai sumažinant ištaisymo išlaidas ir pastangas.
• Pagerinta vartotojo patirtis: Suteikite nuolat greitą ir reaguojančią vartotojo patirtį, didinant vartotojų pasitenkinimą ir įsitraukimą.
• Nuolatinis stebėjimas: Integruokite našumo testus į savo nuolatinės integracijos / nuolatinio pristatymo (CI/CD) procesą nuolatiniam našumo stebėjimui.

Pagrindiniai našumo rodikliai, kuriuos reikia stebėti

Įgyvendinant automatinį našumo testavimą, būtina sutelkti dėmesį į pagrindinius našumo rodiklius, kurie tiesiogiai veikia vartotojo patirtį. Kai kurie iš svarbiausių rodiklių yra:

• Pirmojo turinio atvaizdavimas (FCP): Matuoja laiką, per kurį ekrane pasirodo pirmasis turinys (tekstas, vaizdas ir t. t.).
• Didžiausio turinio atvaizdavimas (LCP): Matuoja laiką, per kurį ekrane pasirodo didžiausias turinio elementas.
• Pirmojo įvesties delsa (FID): Matuoja laiką, per kurį naršyklė sureaguoja į pirmąją vartotojo sąveiką (pvz., mygtuko paspaudimą).
• Laikas iki interaktyvumo (TTI): Matuoja laiką, per kurį puslapis tampa visiškai interaktyvus ir reaguoja į vartotojo įvestį.
• Bendras blokavimo laikas (TBT): Matuoja bendrą laiką, per kurį pagrindinė gija yra blokuojama puslapio įkrovimo metu, neleidžiant naršyklei reaguoti į vartotojo įvestį.
• Kaupiamasis maketo poslinkis (CLS): Matuoja netikėtų maketo poslinkių, kurie atsiranda puslapio įkrovimo metu ir sukelia vizualinį nestabilumą, kiekį.
• JavaScript vykdymo laikas: Laikas, praleistas vykdant JavaScript kodą.
• Atminties naudojimas: Programos suvartojamos atminties kiekis.
• Procesoriaus (CPU) naudojimas: Programos suvartojamos apdorojimo galios kiekis.
• Tinklo užklausos: Programos atliekamų tinklo užklausų skaičius ir dydis.

Įrankiai ir technologijos automatiniam JavaScript našumo testavimui

Automatiniam JavaScript našumo testavimui galima naudoti keletą įrankių ir technologijų. Štai keletas populiarių variantų:

• WebPageTest: Nemokamas ir atvirojo kodo įrankis, skirtas svetainių našumui testuoti iš įvairių vietų ir įrenginių. Jis pateikia išsamias našumo ataskaitas, įskaitant krioklio diagramas, kadrų juostas ir pagrindinius svetainės rodiklius (Core Web Vitals). WebPageTest galima automatizuoti per jo API.
• Lighthouse: „Google“ sukurtas atvirojo kodo įrankis, kuris audituoja tinklalapius pagal našumą, prieinamumą, geriausias praktikas ir SEO. Jis teikia išsamias rekomendacijas našumui gerinti. „Lighthouse“ galima paleisti iš komandinės eilutės, „Chrome DevTools“ arba kaip „Node“ modulį.
• PageSpeed Insights: „Google“ teikiamas įrankis, kuris analizuoja jūsų tinklalapių greitį ir teikia rekomendacijas tobulinimui. Jis naudoja „Lighthouse“ kaip savo analizės variklį.
• Chrome DevTools: Į „Chrome“ naršyklę integruoti kūrėjo įrankiai siūlo išsamų našumo analizės įrankių rinkinį, įskaitant „Performance“, „Memory“ ir „Network“ skydelius. Šie įrankiai gali būti naudojami profiliuoti JavaScript kodą, nustatyti našumo kliūtis ir stebėti atminties naudojimą. „Chrome DevTools“ galima automatizuoti naudojant „Puppeteer“ ar „Playwright“.
• Puppeteer ir Playwright: „Node“ bibliotekos, teikiančios aukšto lygio API, skirtą valdyti „Chrome“ ar „Firefox“ naršykles be grafinės sąsajos. Jas galima naudoti automatizuojant naršyklės sąveikas, matuojant našumo rodiklius ir generuojant našumo ataskaitas. „Playwright“ palaiko „Chrome“, „Firefox“ ir „Safari“.
• Sitespeed.io: Atvirojo kodo įrankis, kuris renka duomenis iš kelių žiniatinklio našumo įrankių (pvz., „WebPageTest“, „Lighthouse“ ir „Browsertime“) ir pateikia juos vienoje informacinėje lentoje.
• Browsertime: „Node.js“ įrankis, kuris matuoja naršyklės našumo rodiklius naudojant „Chrome“ ar „Firefox“.
• Jest: Populiari JavaScript testavimo sistema, kurią galima naudoti vienetiniam ir integraciniam testavimui. „Jest“ taip pat gali būti naudojama našumo testavimui matuojant kodo fragmentų vykdymo laiką.
• Mocha ir Chai: Kita populiari JavaScript testavimo sistema ir tvirtinimų biblioteka. Šiuos įrankius galima derinti su našumo testavimo bibliotekomis, tokiomis kaip benchmark.js.
• Našumo stebėjimo įrankiai (pvz., New Relic, Datadog, Sentry): Šie įrankiai teikia realaus laiko našumo stebėjimo ir perspėjimo galimybes, leidžiančias aptikti ir diagnozuoti našumo problemas produkcinėje aplinkoje.

Automatinio našumo testavimo įgyvendinimas: žingsnis po žingsnio vadovas

Pateikiame žingsnis po žingsnio vadovą, kaip įgyvendinti automatinį našumo testavimą savo JavaScript projektuose:

1. Apibrėžkite našumo biudžetus

Našumo biudžetas – tai ribų rinkinys pagrindiniams našumo rodikliams, kurių jūsų programa turi laikytis. Šie biudžetai tarnauja kaip gairės kūrėjams ir suteikia aiškų tikslą našumo optimizavimui. Našumo biudžetų pavyzdžiai:

• Puslapio įkrovimo laikas: Siekite, kad puslapio įkrovimo laikas būtų trumpesnis nei 3 sekundės.
• Pirmojo turinio atvaizdavimas (FCP): Siekite, kad FCP būtų trumpesnis nei 1 sekundė.
• JavaScript paketo dydis: Apribokite savo JavaScript paketų dydį iki 500 KB.
• HTTP užklausų skaičius: Sumažinkite HTTP užklausų skaičių iki mažiau nei 50.

Apibrėžkite realistiškus ir pasiekiamus našumo biudžetus, atsižvelgdami į savo programos reikalavimus ir tikslinę auditoriją. Atsižvelkite į tokius veiksnius kaip tinklo sąlygos, įrenginių galimybės ir vartotojų lūkesčiai.

2. Pasirinkite tinkamus įrankius

Pasirinkite įrankius ir technologijas, kurios geriausiai atitinka jūsų poreikius ir biudžetą. Atsižvelkite į tokius veiksnius kaip:

• Naudojimo paprastumas: Rinkitės įrankius, kuriuos lengva išmokti ir naudoti, su aiškia dokumentacija ir palaikančia bendruomene.
• Integracija su esamomis darbo eigomis: Pasirinkite įrankius, kurie sklandžiai integruojasi su jūsų esamomis kūrimo ir testavimo darbo eigomis.
• Kaina: Apsvarstykite įrankių kainą, įskaitant licencijavimo mokesčius ir infrastruktūros išlaidas.
• Funkcijos: Rinkitės įrankius, kurie siūlo jums reikalingas funkcijas, tokias kaip našumo profiliavimas, ataskaitų teikimas ir perspėjimai.

Pradėkite nuo nedidelio įrankių rinkinio ir palaipsniui plėskite savo įrankių arsenalą, atsižvelgdami į besikeičiančius poreikius.

3. Sukurkite našumo testų scenarijus

Parašykite automatizuotus testų scenarijus, kurie matuoja kritinių vartotojo srautų ir komponentų našumą jūsų programoje. Šie scenarijai turėtų imituoti realias vartotojo sąveikas ir matuoti pagrindinius našumo rodiklius.

Pavyzdys, naudojant Puppeteer puslapio įkrovimo laikui matuoti:

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 const url = 'https://www.example.com';

 const navigationPromise = page.waitForNavigation({waitUntil: 'networkidle0'});
 await page.goto(url);
 await navigationPromise;

 const metrics = await page.metrics();

 console.log(`Page load time for ${url}: ${metrics.timestamps.loadEventEnd - metrics.timestamps.navigationStart}ms`);

 await browser.close();
})();

Šis scenarijus naudoja Puppeteer, kad paleistų „Chrome“ naršyklę be grafinės sąsajos, nueitų į nurodytą URL, palauktų, kol puslapis bus įkeltas, ir tada išmatuotų puslapio įkrovimo laiką. Opcija `networkidle0` `waitForNavigation` metode užtikrina, kad naršyklė lauks, kol nebeliks tinklo ryšių bent 500 ms, prieš laikydama puslapį įkeltu.

Kitas pavyzdys, naudojant Browsertime ir Sitespeed.io, sutelktas į pagrindinius svetainės rodiklius (Core Web Vitals):

// Įdiekite reikiamus paketus:
// npm install -g browsertime sitespeed.io

// Paleiskite testą (pavyzdinis naudojimas komandinėje eilutėje):
// sitespeed.io https://www.example.com --browsertime.iterations 3 --browsertime.xvfb

// Ši komanda:
// 1. Paleis Browsertime 3 kartus nurodytam URL.
// 2. Naudos virtualų X serverį (xvfb) testavimui be grafinės sąsajos.
// 3. Sitespeed.io apibendrins rezultatus ir pateiks ataskaitą, įskaitant pagrindinius svetainės rodiklius (Core Web Vitals).

// Ataskaitoje bus rodomi LCP, FID, CLS ir kiti našumo rodikliai.

Šis pavyzdys parodo, kaip nustatyti Sitespeed.io su Browsertime, kad būtų galima vykdyti automatinius našumo testus ir gauti pagrindinius svetainės rodiklius. Komandinės eilutės parinktys yra specifinės browsertime testui vykdyti su sitespeed.io.

4. Integruokite našumo testus į savo CI/CD procesą

Integruokite savo našumo testus į CI/CD procesą, kad jie būtų automatiškai vykdomi kiekvieną kartą, kai patvirtinami kodo pakeitimai. Tai užtikrina nuolatinį našumo stebėjimą ir ankstyvą regresijų aptikimą.

Dauguma CI/CD platformų, tokių kaip Jenkins, GitLab CI, GitHub Actions ir CircleCI, suteikia mechanizmus automatiniams testams vykdyti kaip kūrimo proceso dalį. Konfigūruokite savo CI/CD procesą taip, kad jis vykdytų jūsų našumo testų scenarijus ir nutrauktų kūrimą, jei viršijami našumo biudžetai.

Pavyzdys naudojant GitHub Actions:

name: Performance Tests

on:
 push:
 branches: [ main ]
 pull_request:
 branches: [ main ]

jobs:
 performance:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v2
 - name: Set up Node.js
 uses: actions/setup-node@v2
 with:
 node-version: '16'
 - name: Install dependencies
 run: npm install
 - name: Run performance tests
 run: npm run performance-test
 env:
 PERFORMANCE_BUDGET_PAGE_LOAD_TIME: 3000 # milliseconds

Ši GitHub Actions darbo eiga apibrėžia užduotį, pavadintą „performance“, kuri vykdoma Ubuntu aplinkoje. Ji paima kodą, nustato Node.js, įdiegia priklausomybes, o tada paleidžia našumo testus naudodama `npm run performance-test` komandą. Aplinkos kintamasis `PERFORMANCE_BUDGET_PAGE_LOAD_TIME` apibrėžia puslapio įkrovimo laiko našumo biudžetą. `npm run performance-test` scenarijuje turėtų būti komandos, reikalingos jūsų našumo testams vykdyti (pvz., naudojant Puppeteer, Lighthouse ar WebPageTest). Jūsų `package.json` faile turėtų būti `performance-test` scenarijus, kuris vykdo testus ir tikrina rezultatus pagal nustatytus biudžetus, išeidamas su ne nuliniu išėjimo kodu, jei biudžetai yra pažeidžiami, taip sukeldamas CI kūrimo proceso nesėkmę.

5. Analizuokite ir teikite našumo rezultatų ataskaitas

Analizuokite savo našumo testų rezultatus, kad nustatytumėte tobulintinas sritis. Generuokite ataskaitas, kurios apibendrina našumo rodiklius ir pabrėžia bet kokias regresijas ar našumo biudžetų pažeidimus.

Dauguma našumo testavimo įrankių turi integruotas ataskaitų teikimo galimybes. Naudokite šias ataskaitas, kad stebėtumėte našumo tendencijas laikui bėgant ir nustatytumėte modelius, kurie gali rodyti esmines našumo problemas.

Našumo ataskaitos pavyzdys (supaprastintas):

Našumo ataskaita:

URL: https://www.example.com

Rodikliai:
 Pirmojo turinio atvaizdavimas (FCP): 0.8s (ATITINKA)
 Didžiausio turinio atvaizdavimas (LCP): 2.2s (ATITINKA)
 Laikas iki interaktyvumo (TTI): 2.8s (ATITINKA)
 Bendras blokavimo laikas (TBT): 150ms (ATITINKA)
 Puslapio įkrovimo laikas: 2.9s (ATITINKA) - Biudžetas: 3.0s

JavaScript paketo dydis: 480KB (ATITINKA) - Biudžetas: 500KB

Našumo regresijų neaptikta.

Ši ataskaita apibendrina konkretaus URL našumo rodiklius ir nurodo, ar jie atitinka, ar neatitinka nustatytų našumo biudžetų. Joje taip pat pažymima, ar buvo aptikta našumo regresijų. Tokią ataskaitą galima generuoti testų scenarijuose ir pridėti prie CI/CD išvesties.

6. Kartokite ir optimizuokite

Remdamiesi našumo rezultatų analize, nustatykite optimizavimo sritis ir kartokite kodo tobulinimo procesą, siekdami pagerinti našumą. Dažniausiai naudojamos optimizavimo technikos:

• Kodo skaidymas (Code Splitting): Suskaidykite didelius JavaScript paketus į mažesnius, lengviau valdomus gabalus, kuriuos galima įkelti pagal poreikį.
• Atidėtas įkėlimas (Lazy Loading): Atidėkite nekritinių išteklių įkėlimą, kol jų prireiks.
• Vaizdų optimizavimas: Optimizuokite vaizdus juos suglaudindami, keisdami jų dydį iki tinkamų matmenų ir naudodami modernius vaizdų formatus, tokius kaip WebP.
• Spartinimas (Caching): Pasinaudokite naršyklės spartinimu, kad sumažintumėte tinklo užklausų skaičių.
• Minifikavimas ir „uglifikavimas“: Sumažinkite savo JavaScript ir CSS failų dydį, pašalindami nereikalingus simbolius ir tarpus.
• Debouncing ir Throttling: Apribokite skaičiavimams imlių operacijų, kurias sukelia vartotojo veiksmai, dažnumą.
• Efektyvių algoritmų ir duomenų struktūrų naudojimas: Pasirinkite efektyviausius algoritmus ir duomenų struktūras savo konkretiems naudojimo atvejams.
• Atminties nutekėjimų vengimas: Užtikrinkite, kad jūsų kodas tinkamai atlaisvintų atmintį, kai jos nebereikia.
• Trečiųjų šalių bibliotekų optimizavimas: Įvertinkite trečiųjų šalių bibliotekų poveikį našumui ir, jei reikia, pasirinkite alternatyvas. Apsvarstykite galimybę atidėtai įkelti trečiųjų šalių scenarijus.

Nuolat stebėkite savo programos našumą ir prireikus kartokite testavimo ir optimizavimo procesą.

Geriausios JavaScript našumo testavimo praktikos

Pateikiame keletą geriausių praktikų, kurių reikėtų laikytis įgyvendinant automatinį JavaScript našumo testavimą:

• Testuokite realistiškoje aplinkoje: Vykdykite našumo testus aplinkoje, kuri kuo labiau primena jūsų produkcinę aplinką. Tai apima tokius veiksnius kaip tinklo sąlygos, įrenginių galimybės ir serverio konfigūracija.
• Naudokite nuoseklią testavimo metodiką: Naudokite nuoseklią testavimo metodiką, kad jūsų rezultatai būtų palyginami laikui bėgant. Tai apima tokius veiksnius kaip iteracijų skaičius, „apšilimo“ laikotarpis ir matavimo intervalas.
• Stebėkite našumą produkcinėje aplinkoje: Naudokite našumo stebėjimo įrankius, kad nuolat stebėtumėte savo programos našumą produkcinėje aplinkoje. Tai leidžia aptikti ir diagnozuoti našumo problemas, kurių galbūt nepavyko užfiksuoti testavimo metu.
• Automatizuokite viską: Automatizuokite kuo daugiau našumo testavimo proceso dalių, įskaitant testų vykdymą, rezultatų analizę ir ataskaitų generavimą.
• Atnaujinkite testus: Atnaujinkite savo našumo testus kiekvieną kartą, kai atliekami kodo pakeitimai. Tai užtikrina, kad jūsų testai visada yra aktualūs ir tiksliai atspindi jūsų programos našumą.
• Įtraukite visą komandą: Įtraukite visą kūrėjų komandą į našumo testavimo procesą. Tai padeda didinti informuotumą apie našumo problemas ir puoselėti našumo optimizavimo kultūrą.
• Nustatykite perspėjimus: Konfigūruokite perspėjimus, kad būtumėte informuoti, kai aptinkamos našumo regresijos. Tai leidžia greitai reaguoti į našumo problemas ir užkirsti kelią jų poveikiui vartotojams.
• Dokumentuokite savo testus ir procesus: Dokumentuokite savo našumo testus, našumo biudžetus ir testavimo procesus. Tai padeda užtikrinti, kad visi komandos nariai suprastų, kaip matuojamas ir stebimas našumas.

Dažniausių iššūkių sprendimas

Nors automatinis našumo testavimas suteikia daug naudos, jis taip pat kelia tam tikrų iššūkių. Štai kaip spręsti kai kurias dažniausiai pasitaikančias kliūtis:

• Nestabilūs testai: Našumo testai kartais gali būti nestabilūs, t. y., jie gali pavykti arba nepavykti su pertrūkiais dėl veiksnių, kurių negalite kontroliuoti, pavyzdžiui, tinklo perkrovos ar serverio apkrovos. Norėdami tai sušvelninti, vykdykite testus kelis kartus ir apskaičiuokite rezultatų vidurkį. Taip pat galite naudoti statistinius metodus, kad nustatytumėte ir filtruotumėte išskirtis.
• Testų scenarijų priežiūra: Jūsų programai tobulėjant, reikės atnaujinti ir našumo testų scenarijus, kad jie atspindėtų pakeitimus. Tai gali būti daug laiko reikalaujantis ir klaidų kupinas procesas. Norėdami tai išspręsti, naudokite modulinę ir lengvai prižiūrimą testų architektūrą ir apsvarstykite galimybę naudoti testų automatizavimo įrankius, kurie gali automatiškai generuoti ir atnaujinti testų scenarijus.
• Rezultatų interpretavimas: Našumo testų rezultatai gali būti sudėtingi ir sunkiai interpretuojami. Norėdami tai išspręsti, naudokite aiškias ir glaustas ataskaitų teikimo ir vizualizavimo priemones. Taip pat gali būti naudinga nustatyti bazinį našumo lygį ir lyginti vėlesnių testų rezultatus su šiuo baziniu lygiu.
• Darbas su trečiųjų šalių paslaugomis: Jūsų programa gali priklausyti nuo trečiųjų šalių paslaugų, kurių jūs nekontroliuojate. Šių paslaugų našumas gali paveikti bendrą jūsų programos našumą. Norėdami tai išspręsti, stebėkite šių paslaugų našumą ir apsvarstykite galimybę naudoti imitavimo (mocking) ar pakeitimo (stubbing) technikas, kad izoliuotumėte savo programą našumo testavimo metu.

Išvados

Automatinis JavaScript našumo testavimas yra esminė praktika, siekiant užtikrinti nuolat greitą ir efektyvią vartotojo patirtį. Įdiegę automatinius testus, galite aktyviai identifikuoti ir spręsti našumo regresijas, sumažinti kūrimo išlaidas ir pateikti aukštos kokybės produktą. Pasirinkite tinkamus įrankius, apibrėžkite aiškius našumo biudžetus, integruokite testus į savo CI/CD procesą ir nuolat stebėkite bei optimizuokite savo programos našumą. Laikydamiesi šių praktikų, galite kurti JavaScript programas, kurios yra ne tik funkcionalios, bet ir našios, džiuginančios jūsų vartotojus ir skatinančios verslo sėkmę.

Nepamirškite, kad našumas yra nuolatinis procesas, o ne vienkartinis pataisymas. Nuolat stebėkite, testuokite ir optimizuokite savo JavaScript kodą, kad suteiktumėte geriausią įmanomą patirtį savo vartotojams, nesvarbu, kurioje pasaulio vietoje jie būtų.

Papildomi šaltiniai

• Web Vitals
• Lighthouse
• WebPageTest
• Sitespeed.io
• Puppeteer
• Playwright