{"id":13194,"date":"2022-05-09T07:00:26","date_gmt":"2022-05-09T05:00:26","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=13194"},"modified":"2023-06-14T15:23:55","modified_gmt":"2023-06-14T13:23:55","slug":"testowanie-wydajnosci-czy-szybkosci-google-ligthouse-w-praktyce","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/testowanie-wydajnosci-czy-szybkosci-google-ligthouse-w-praktyce\/","title":{"rendered":"Testowanie wydajno\u015bci czy szybko\u015bci? Google Lighthouse w praktyce"},"content":{"rendered":"\n<p>W obecnym \u015bwiecie \u2013 nastawionym na digitalizacj\u0119 \u2013 ka\u017cda z firm oferuj\u0105cych swoje produkty za po\u015brednictwem sieci zdaje sobie spraw\u0119 z tego, \u017ce atrakcyjna aplikacja s\u0142u\u017c\u0105ca do sprzeda\u017cy przez internet jest niezb\u0119dna do generowania przychodu.<\/p>\n\n\n\n<p>Cyfrowy post\u0119p wymusza ju\u017c nie tylko poprawne dzia\u0142anie aplikacji w kontek\u015bcie operacyjnym lub funkcjonalnym (czyli \u017ceby aplikacja by\u0142a dost\u0119pna i pozwala\u0142a robi\u0107 u\u017cytkownikowi zakupy), ale r\u00f3wnie istotna staje si\u0119 szybko\u015bci jej dzia\u0142ania.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.awwwards.com\/brainfood-mobile-performance-vol3.pdf\" rel=\"nofollow\" >Wyniki bada\u0144 pokazuj\u0105<\/a>, \u017ce prawie <strong>80% u\u017cytkownik\u00f3w jest gotowych porzuci\u0107 zakup<\/strong>, je\u015bli napotkaj\u0105 dowolny problem ze stron\u0105 internetow\u0105. Dodatkowo a\u017c 3 na 4 u\u017cytkownik\u00f3w wybra\u0142o w\u0142a\u015bnie <strong>szybko\u015b\u0107 dzia\u0142ania strony jako g\u0142\u00f3wne z 5 kryteri\u00f3w dzia\u0142ania stron<\/strong>, podczas przegl\u0105dania tre\u015bci w Internecie. Wszystkie te zale\u017cno\u015bci przek\u0142adaj\u0105 si\u0119 na mniejszy o 7% poziom konwersji (liczb\u0119 sfinalizowanych zakup\u00f3w w stosunku do odwiedzin), gdy strona \u0142aduje si\u0119 o 1 sekund\u0119 d\u0142u\u017cej!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nowe wska\u017aniki od Google<\/h2>\n\n\n\n<p>Jak zatem zdefiniowa\u0107 ow\u0105 szybko\u015b\u0107 dzia\u0142ania stron internetowych lub aplikacji? Czy da si\u0119 j\u0105 zmierzy\u0107 i por\u00f3wna\u0107?<\/p>\n\n\n\n<p>Okre\u015blenie szybko\u015bci dzia\u0142ania, zar\u00f3wno sklepu internetowego, jak i dowolnej aplikacji czy strony, jest trudne, jednak mo\u017cliwe do wykonania, pomimo tego, \u017ce odczucie szybko\u015bci jest wzgl\u0119dne.<\/p>\n\n\n\n<p>Google rozpocz\u0119\u0142o inicjatyw\u0119 maj\u0105c\u0105 na celu wprowadzenie <strong>wska\u017anik\u00f3w jako\u015bci dostarczanych<\/strong> tre\u015bci. Obok \u201ezwyk\u0142ych\u201d wska\u017anik\u00f3w, kt\u00f3re okre\u015blamy w celu zapewnienia odpowiednich zasob\u00f3w do obs\u0142ugi wielu u\u017cytkownik\u00f3w jednocze\u015bnie w trybie ci\u0105g\u0142ym lub szczytowym, cyfrowy gigant wprowadza nowe wska\u017aniki, mog\u0105ce pos\u0142u\u017cy\u0107 do <strong>zdefiniowania og\u00f3lnej szybko\u015bci strony<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3 rodzaje test\u00f3w dopasowanych do okoliczno\u015bci<\/h2>\n\n\n\n<p>W e-commerce mo\u017cemy wyodr\u0119bni\u0107 3 podstawowe przypadki u\u017cycia, z kt\u00f3rymi nasi potencjalni klienci b\u0119d\u0105 mieli do czynienia. My natomiast musimy zna\u0107 nasze mo\u017cliwo\u015bci w celu odpowiednich reakcji. S\u0105 to przede wszystkim:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Stress testy<\/strong> \u2013 nag\u0142e \u201ezalanie\u201d systemu u\u017cytkownikami (black friday, cyber monday, b\u0142\u0105d cenowy, \u201ereddit effect\u201d).<\/li>\n\n\n\n<li><strong>Load testy<\/strong> \u2013 ci\u0105g\u0142a, wzmo\u017cona aktywno\u015b\u0107 u\u017cytkownik\u00f3w (wszelkiego rodzaju \u015bwi\u0119ta, d\u0142u\u017csze okresy promocyjne).<\/li>\n\n\n\n<li><strong>UX-performance testy<\/strong> \u2013 zwyk\u0142a, spodziewana aktywno\u015b\u0107 (codzienna aktywno\u015b\u0107 bez szczeg\u00f3lnych kampanii marketingowych).<\/li>\n<\/ul>\n\n\n\n<p>Stress i load testy s\u0105 opisywane w wielu systemach. W e-commerce ich idea jest identyczna. W du\u017cym uproszczeniu: testy maj\u0105 da\u0107 odpowied\u017a, <strong>czy i jak system zachowuje sprawno\u015b\u0107 w zale\u017cno\u015bci od nat\u0119\u017cenia u\u017cytkownik\u00f3w<\/strong>. Nast\u0119pnie chcemy ustali\u0107 graniczne warto\u015bci, kt\u00f3re b\u0119dziemy monitorowa\u0107 podczas dzia\u0142ania systemu, by reagowa\u0107 z wyprzedzeniem w ramach mo\u017cliwo\u015bci.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">UX-performance testy<\/h2>\n\n\n\n<p>Je\u015bli chodzi o ostatni zestaw test\u00f3w, nazwanych roboczo testami \u201eUX-performance\u201d, mamy na my\u015bli wszystkie testy, kt\u00f3re pozwol\u0105 nam <strong>zebra\u0107 metryki zorientowane na odczucia u\u017cytkownik\u00f3w<\/strong>.<\/p>\n\n\n\n<p>Do podstawowych wska\u017anik\u00f3w nale\u017c\u0105:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Largest Contentful Paint (LCP)<\/strong> \u2013 oznaczaj\u0105cy czas za\u0142adowania najwi\u0119kszego wizualnie (w kontek\u015bcie rozdzielczo\u015bci) elementu strony.<\/li>\n\n\n\n<li><strong>Cumulative Layout Shift (CLS)<\/strong> \u2013 wskazuj\u0105cy wynik niezamierzonego przesuni\u0119cia zawarto\u015bci w obszarze strony.<\/li>\n\n\n\n<li><strong>First Input Delay (FCP)<\/strong> \u2013 okre\u015blaj\u0105cy czas, po kt\u00f3rym strona staje si\u0119 responsywna dla u\u017cytkownika.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Pozycjonowanie stron ze wzgl\u0119du na szybko\u015b\u0107 dzia\u0142ania<\/h2>\n\n\n\n<p>Google, jako pionier definiowania metryk, od roku 2020 testuje strony w celu uzyskania wy\u017cej wymienionych parametr\u00f3w, a nast\u0119pnie uwzgl\u0119dnienia je przy pozycjonowaniu danej strony. Wy\u017cej pozycjonowane strony przyci\u0105gn\u0105 wi\u0119ksz\u0105 liczb\u0119 odwiedzaj\u0105cych. Jednocze\u015bnie \u2013 <strong>wy\u017cej pozycjonowane strony musz\u0105 dzia\u0142a\u0107 odpowiednio szybko<\/strong>, przez co wsp\u00f3\u0142czynnik konwersji (prze\u0142o\u017cenie liczby odwiedzaj\u0105cych na klient\u00f3w) b\u0119dzie na wysokim poziomie.<\/p>\n\n\n\n<p>Jest to wi\u0119c kolejna <strong>zale\u017cno\u015b\u0107 mi\u0119dzy przychodem a szybko\u015bci\u0105 dzia\u0142ania strony<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Zbieranie metryk<\/h2>\n\n\n\n<p>Skoro poznali\u015bmy przyczyny mierzenia szybko\u015bci oraz metryki, kt\u00f3re potrzebujemy okre\u015bli\u0107, aby zdefiniowa\u0107 nasz\u0105 stron\u0119 pod wzgl\u0119dem szybko\u015bci, pojawia si\u0119 pytanie: <strong>jak zebra\u0107 odpowiednie metryki?<\/strong><\/p>\n\n\n\n<p>Z odpowiedzi\u0105 \u015bpieszy samo Google, ale nie tylko. Na rynku jest wiele narz\u0119dzi pozwalaj\u0105cych na zbieranie metryk okre\u015blonych jako Core Web Vitals.<\/p>\n\n\n\n<p>Do podstawowych narz\u0119dzi nale\u017c\u0105:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Google Lighthouse,<\/li>\n\n\n\n<li>Google PageSpeed Insights,<\/li>\n\n\n\n<li>WebPageTest.<\/li>\n<\/ul>\n\n\n\n<p>Istnieje r\u00f3wnie\u017c wiele narz\u0119dzi, kt\u00f3re wykorzystuj\u0105 kombinacj\u0119 wy\u017cej wymienionych lub opakowanych w inny interfejs graficzny. Niemniej wszystkie s\u0142u\u017c\u0105 temu samemu celowi. Opr\u00f3cz metryk, musimy te\u017c wzi\u0105\u0107 pod uwag\u0119 kilka innych czynnik\u00f3w, kt\u00f3re b\u0119d\u0105 mia\u0142y wp\u0142yw na odczucia potencjalnego klienta.<\/p>\n\n\n\n<p>S\u0105 nimi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wydajno\u015b\u0107 urz\u0105dzenia do przegl\u0105dania.<\/li>\n\n\n\n<li>Przepustowo\u015b\u0107 \u0142\u0105cza internetowego, z kt\u00f3rego korzysta.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Narz\u0119dzia do testowania wydajno\u015bci UX<\/h2>\n\n\n\n<p>W przypadku testowania wydajno\u015bci UX stron statycznych wyb\u00f3r narz\u0119dzia nie stanowi wi\u0119kszego problemu. Naturaln\u0105 i popularn\u0105 opcj\u0105, ze wzgl\u0119du na swoj\u0105 stabilno\u015b\u0107 jak i prostot\u0119 u\u017cycia, b\u0119dzie Google Lighthouse.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">WebPageTest<\/h3>\n\n\n\n<p>Jednak, kiedy zale\u017cy nam na odwzorowaniu ruchu u\u017cytkownika po aplikacji, to zakres dost\u0119pnych narz\u0119dzi pozwalaj\u0105cych obs\u0142u\u017cy\u0107 ten ruch jest znacznie mniejszy. Mo\u017cemy skorzysta\u0107 z WebPageTest (WPT), lecz skrypty napisane do niego maj\u0105 pewne ograniczenia oraz odbiegaj\u0105 znacznie od znanych i przyj\u0119tych standard\u00f3w.<\/p>\n\n\n\n<p>WPT u\u017cywa utworzonych w ramach narz\u0119dzia keyword\u00f3w, kt\u00f3re odpowiadaj\u0105 poszczeg\u00f3lnym akcjom u\u017cytkownika. W zwi\u0105zku z tym problematyczne b\u0119dzie utworzenie du\u017cej bazy scenariuszy testowych \u0142atwych w utrzymaniu. Przyk\u0142ad kodu skryptu WebPageTest przechodz\u0105cego logowanie na stronie.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\nlogData 0\n\n\/\/ bring up the login screen\nnavigate    http:\/\/webmail.aol.com\n\nlogData 1\n\n\/\/ log in\n\nsetValue    name=loginId    someuser@aol.com\nsetValue    name=password    somepassword\nsubmitForm    name=AOLLoginForm\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">Chrome Devtools Protocol<\/h3>\n\n\n\n<p>Niestety, nie zawsze ograniczona ilo\u015b\u0107 akcji, jak\u0105 WPT oferuje, jest wystarczaj\u0105ca do osi\u0105gni\u0119cia zamierzonego rezultatu. Mo\u017cemy u\u017cy\u0107 r\u00f3wnie\u017c framework\u00f3w do automatyzacji test\u00f3w opartych na wykorzystaniu Chrome Devtools Protocol (CDP).<\/p>\n\n\n\n<p>Narz\u0119dzie r\u00f3\u017cni si\u0119 od znanego WebDriver protoko\u0142u tym, \u017ce test jest bezpo\u015brednio uruchamiany w przegl\u0105darce Chrome, wi\u0119c bez problemu mo\u017cna korzysta\u0107 ze wszystkich \u201enarz\u0119dzi deweloperskich\u201d dostarczonych z przegl\u0105dark\u0105.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wykorzystanie Webdriver.IO<\/h3>\n\n\n\n<p>W\u015br\u00f3d popularnych rozwi\u0105za\u0144 wykorzystuj\u0105cych CDP znajdziemy <strong>Webdriver.IO (WDIO),<\/strong> kt\u00f3ry poza mo\u017cliwo\u015bci\u0105 dzia\u0142ania z WebDriver protoko\u0142em, posiada mo\u017cliwo\u015b\u0107 pracy z CDP.<\/p>\n\n\n\n<p>W celu skorzystania z mo\u017cliwo\u015bci CDP musimy zainstalowa\u0107 odpowiedni pakiet i przestawi\u0107 WDIO w tryb 'devtools&#8217;. Da nam to mo\u017cliwo\u015b\u0107 u\u017cycia CDP nie tylko do sterowania aplikacj\u0105, ale tak\u017ce zbierania metryk. Pe\u0142ne metryki s\u0105 dost\u0119pne za pomoc\u0105 wywo\u0142ania jednej metody:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\nbrowser.getMetrics()\n<\/pre><\/div>\n\n\n<p>Natomiast og\u00f3lny wynik wydajno\u015bci proponowany przez Google pobierzemy za pomoc\u0105:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\nbrowser.getPerformanceScore()\n<\/pre><\/div>\n\n\n<p>G\u0142\u00f3wn\u0105 korzy\u015bci\u0105 p\u0142yn\u0105c\u0105 z wykorzystania Webdriver.IO w trybie devtools jest <strong>mo\u017cliwo\u015b\u0107 ponownego u\u017cycia istniej\u0105cych test\u00f3w do sprawdzenia wydajno\u015bci<\/strong>. Testy te mog\u0105 by\u0107 wcze\u015bniej napisane w trybie korzystaj\u0105cym z Selenium, ale do test\u00f3w wydajno\u015bciowych potrzebujemy drugiej konfiguracji z ustawiony serwisem devtools.<\/p>\n\n\n\n<p>R\u00f3wnie\u017c dostarczone API w celu pobrania metryk jest proste i intuicyjne. Dzi\u0119ki temu mo\u017cna niskim kosztem rozszerzy\u0107 mo\u017cliwo\u015b\u0107 weryfikowania naszego produktu.<\/p>\n\n\n\n<p>Jednak ma ono te\u017c wady. G\u0142\u00f3wn\u0105 z nich jest drugorz\u0119dne spojrzenie spo\u0142eczno\u015bci rozwijaj\u0105cej framework na ten serwis. Mo\u017ce to skutkowa\u0107 <strong>op\u00f3\u017anieniami w dodawaniu nowych funkcjonalno\u015bci,<\/strong> z jakich mo\u017cna korzysta\u0107.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dla przyk\u0142adu: w jednej z aktualizacji Lighthouse doda\u0142 now\u0105 metryk\u0119 do Core Web Vitals. Jednak zanim ta metryka by\u0142a obs\u0142ugiwana przez Webdriver.IO min\u0119\u0142o kilka miesi\u0119cy.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Wykorzystanie Puppeteer i Lighthouse<\/h3>\n\n\n\n<p>Z tego powodu warto rozwa\u017cy\u0107 uproszczenie zale\u017cno\u015bci i korzystanie bezpo\u015brednio z Puppeteer i Lighthouse. Od wersji 9 paczki Lighthouse, jest to rozwi\u0105zanie zalecane przez Google.<\/p>\n\n\n\n<p>Przyk\u0142ad kodu s\u0142u\u017c\u0105cy prostemu wygenerowaniu raportu ze strony example.com w takim podej\u015bciu wygl\u0105da nast\u0119puj\u0105co:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\nimport {writeFileSync} from &#039;fs&#039;;\nimport puppeteer from &#039;puppeteer&#039;;\nimport lighthouse from &#039;lighthouse&#039;;\n\n(async () =&gt; {\n    const browser = await puppeteer.launch();\n    const page = await browser.newPage();\n    const flow = await lighthouse.startFlow(page);\n    \/\/ Navigate with a URL\n    await flow.navigate(&#039;https:\/\/example-navigation.com&#039;);\n    \/\/ Navigate with a callback function\n    await flow.navigate(async () =&gt; {\n        await page.click(&#039;button&#039;);\n    });\n    await browser.close();\n    writeFileSync(&#039;report.html&#039;, flow.generateReport());\n})()\n<\/pre><\/div>\n\n\n<p>Na przyk\u0142adzie kodu wy\u017cej wida\u0107, \u017ce do obs\u0142ugi przegl\u0105darki wykorzystywany jest Puppeteer, ale do zbierania metryk korzysta si\u0119 bezpo\u015brednio z paczki Lighthouse. Dzi\u0119ki temu dany projekt jest na bie\u017c\u0105co ze wszystkimi KPI sprawdzaj\u0105cymi wydajno\u015b\u0107 stron internetowych oraz du\u017co szybciej korzysta z nowo\u015bci wprowadzanych w Lighthouse. To wa\u017cne, gdy\u017c w wersji 9 jest ich sporo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nowo\u015bci w Lighthouse<\/h2>\n\n\n\n<p>Je\u015bli chodzo o zmiany, to mi\u0119dzy innymi raportowanie przesta\u0142o ogranicza\u0107 si\u0119 do sprawdzania wczytywania strony (Navigation), ale mo\u017cliwe jest weryfikowanie okresu mi\u0119dzy interakcjami (Timespan) oraz stan strony w stosunku do norm zwi\u0105zanych z wygl\u0105dem i dost\u0119pno\u015bci\u0105 (Snapshot).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Interakcja u\u017cytkownika z aplikacj\u0105<\/h3>\n\n\n\n<p>We wspomnianym ju\u017c przyk\u0142adzie pokazano zebranie danych dotycz\u0105cych nawigacji. Podczas wczytywania strony jest przeprowadzany zestaw test\u00f3w sprawdzaj\u0105cych, jak radzi sobie ona w r\u00f3\u017cnych warunkach.<\/p>\n\n\n\n<p>Przyk\u0142ad kodu realizuj\u0105cego interakcj\u0119 u\u017cytkownika z aplikacj\u0105 wygl\u0105da nast\u0119puj\u0105co:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\nimport {writeFileSync} from &#039;fs&#039;;\nimport puppeteer from &#039;puppeteer&#039;;\nimport lighthouse from &#039;lighthouse&#039;;\n(async () =&gt; {\n    const browser = await puppeteer.launch();\n    const page = await browser.newPage();\n    const flow = await lighthouse.startFlow(page);\n    await page.goto(&#039;https:\/\/example-login.com&#039;);\n    \/\/ Timespan for login\n    await flow.beginTimespan();\n    await page.type(&#039;#username&#039;, &#039;Test&#039;);\n    await page.type(&#039;#password&#039;, Pa$w0rd&#039;);\n    await page.click(&#039;#login&#039;);\n    await page.waitForSelector(&#039;#menu&#039;);\n    await flow.endTimespan();\n    await browser.close();\nwriteFileSync(&#039;report.html&#039;, flow.generateReport());\n})()\n<\/pre><\/div>\n\n\n<p>We fragmencie kodu przedstawionym powy\u017cej, <strong>wykorzystujemy timespan<\/strong>. U\u017cywaj\u0105c tego mechanizmu, musimy by\u0107 ju\u017c na jakiej\u015b stronie internetowej. Je\u017celi nie przeszli\u015bmy do niej poprzez:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\nawait flow.navigate(adres-strony)\n<\/pre><\/div>\n\n\n<p>to nale\u017cy zrobi\u0107 to za pomoc\u0105:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\nawait page.goto(adres-strony)\n<\/pre><\/div>\n\n\n<p>Nast\u0119pnie, dla interesuj\u0105cych nas akcji zaczynamy sprawdzanie timespanu, poprzez:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\nawait flow.beginTimespan()\n<\/pre><\/div>\n\n\n<p>i po ich wykonaniu ko\u0144czymy zbieranie metryk dzi\u0119ki:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\nawait flow.endTimespan()\n<\/pre><\/div>\n\n\n<p>Musimy pami\u0119ta\u0107 o tym, by akcje sprawdzane by\u0142y pojedyncz\u0105, w miar\u0119 kr\u00f3tk\u0105 sekwencj\u0105 oraz &nbsp;timespan powinien by\u0107 zako\u0144czony po jaki\u015b oczekiwaniu.<\/p>\n\n\n\n<p>Chrome Devtools Protocol umo\u017cliwia te\u017c czekanie na response z request\u00f3w wys\u0142anych przez przegl\u0105dark\u0119, co upraszcza znalezienie odpowiedniego czynnika pozwalaj\u0105cego za\u0142adowa\u0107 stron\u0119.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\n\u2026 imports\n(async () =&gt; {\n    \u2026 init puppeteer and lighthouse and navigate\n    await page.click(&#039;#menu&#039;);\n    await flow.snapshot();\n    \u2026 close browser and generate report\n})()\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">R\u00f3\u017cnice mi\u0119dzy snapshotem a timespanem<\/h3>\n\n\n\n<p>Na podstawie powy\u017cszego i wcze\u015bniej om\u00f3wionego przyk\u0142adu mo\u017cemy zauwa\u017cy\u0107 <strong>niewielk\u0105 r\u00f3\u017cnic\u0119 mi\u0119dzy snapshotem i timespanem<\/strong> w przygotowaniach do ich wykonania. Jednak waliduj\u0105 one inne rzeczy.<\/p>\n\n\n\n<p>O ile timespan chce zmierzy\u0107, jak testowana aplikacja (aplication under test) zachowuje si\u0119 w czasie, tak snapshot dokonuje zrzutu strony w danym stanie i weryfikuje j\u0105 pod k\u0105tem oceny statycznej, czyli dost\u0119pno\u015bci jak i designu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kilka s\u0142\u00f3w na koniec<\/h2>\n\n\n\n<p>Jak wida\u0107, jest to ca\u0142kiem spory zestaw narz\u0119dzi, dzi\u0119ki kt\u00f3remu weryfikacja wydajno\u015bci stron mo\u017ce wej\u015b\u0107 na wy\u017cszy poziom, ale prawdziw\u0105 ich warto\u015b\u0107 mo\u017cna odkry\u0107 dopiero \u0142\u0105cz\u0105c je.<\/p>\n\n\n\n<p>Za\u0142\u00f3\u017cmy, \u017ce chcemy przetestowa\u0107 wydajno\u015b\u0107 internetowej wyszukiwarki. Zaczynaj\u0105c od sprawdzenia parametr\u00f3w podczas \u0142adowania strony, przejdziemy do zmierzenia, jak zachowuje si\u0119 ona w czasie od wpisania wyszukiwanego has\u0142a do znalezienia wynik\u00f3w oraz jak wygl\u0105da ze znalezionymi wynikami. Przyk\u0142ad implementacji takiego przypadku mo\u017cemy zobaczy\u0107 w kodzie poni\u017cej:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\n\u2026 imports\n(async () =&gt; {\n    const browser = await puppeteer.launch();\n    const page = await browser.newPage();\n    const flow = await lighthouse.startFlow(page);\n    \/\/ Navigate\n    await flow.navigate(&#039;https:\/\/example-search-engine.com&#039;);\n    \/\/ Timespan\n    await flow.beginTimespan();\n    await page.type(&#039;#search-field&#039;, &#039;Sweet cat&#039;);\n    await page.click(&#039;#submit&#039;);\n    await page.waitForSelector(&#039;#results&#039;);\n    await flow.endTimespan();\n    \/\/ Snapshot\n    await flow.snapshot();\n    await browser.close();\n    writeFileSync(&#039;report.html&#039;, flow.generateReport());\n})()\n<\/pre><\/div>\n\n\n<p>Jak mo\u017cemy zauwa\u017cy\u0107, podmieniaj\u0105c metod\u0119 przej\u015bcia na stron\u0119 internetow\u0105, otaczaj\u0105c wa\u017cne dla nas akcje timespanem i robi\u0105c snapshota po nich, mamy <strong>mo\u017cliwo\u015b\u0107 stworzy\u0107 nowe testy<\/strong> wykorzystuj\u0105c powszechnie znane narz\u0119dzia.<\/p>\n\n\n\n<p>Podsumowuj\u0105c, nie wa\u017cne z jakiego frameworku czy narz\u0119dzia skorzystamy, \u017ceby zebra\u0107 odpowiednie metryki, <strong>UX-performance jest wa\u017cny dla u\u017cytkownika ko\u0144cowego i od niego mo\u017ce zale\u017ce\u0107 powodzenie produktu<\/strong>.<\/p>\n\n\n\n<p>Dlatego warto rozwa\u017cy\u0107 dodanie do swoich test\u00f3w regresji testowanie sprawdzaj\u0105ce ten rodzaj wydajno\u015bci.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.awwwards.com\/brainfood-mobile-performance-vol3.pdf\" rel=\"nofollow\" >Speed matters: Designing for Mobile Performance<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.webpagetest.org\/scripting\/#:~:text=here%20is%20what%20an%20authentication%20script%20would%20look%20like\" rel=\"nofollow\" >Web Page Test<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\/blob\/master\/docs\/user-flows.md\" rel=\"nofollow\" >GitHub<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webdriver.io\/docs\/devtools-service\/#configuration\" rel=\"nofollow\" >Web Driver I\/O<\/a><\/li>\n<\/ol>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;13194&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;7&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;4.9&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;4.9\\\/5 ( votes: 7)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Testowanie wydajno\u015bci czy szybko\u015bci? Google Lighthouse w praktyce&quot;,&quot;width&quot;:&quot;136.6&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 136.6px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            4.9\/5 ( votes: 7)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>W obecnym \u015bwiecie \u2013 nastawionym na digitalizacj\u0119 \u2013 ka\u017cda z firm oferuj\u0105cych swoje produkty za po\u015brednictwem sieci zdaje sobie spraw\u0119 &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/testowanie-wydajnosci-czy-szybkosci-google-ligthouse-w-praktyce\/\">Continued<\/a><\/p>\n","protected":false},"author":435,"featured_media":13655,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":6,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1317],"tags":[1256,146,1258,1257],"class_list":["post-13194","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-testowanie","tag-google-lighthouse","tag-testing","tag-testy-szybkosci","tag-testy-wydajnosci"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Testowanie-wydajnosci-czy-szybkosci.png","category_names":["Testowanie"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/13194"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/435"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=13194"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/13194\/revisions"}],"predecessor-version":[{"id":22304,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/13194\/revisions\/22304"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/13655"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=13194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=13194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=13194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}