{"id":34540,"date":"2025-01-30T08:49:16","date_gmt":"2025-01-30T07:49:16","guid":{"rendered":"https:\/\/nearshore-it.eu\/?p=34540"},"modified":"2025-01-31T16:28:46","modified_gmt":"2025-01-31T15:28:46","slug":"testowanie-dostepnosci-stron-internetowych","status":"publish","type":"post","link":"https:\/\/nearshore-it.eu\/pl\/artykuly\/testowanie-dostepnosci-stron-internetowych\/","title":{"rendered":"Testowanie dost\u0119pno\u015bci stron internetowych"},"content":{"rendered":"\n<p>Responsywne projektowanie stron internetowych (RWD) to dzi\u015b ju\u017c nie tylko dobra praktyka, lecz standard. Znajomo\u015b\u0107 Chrome DevTools to must have dla developer\u00f3w, kt\u00f3rzy chc\u0105 szybko sprawdzi\u0107 responsywno\u015b\u0107 i dost\u0119pno\u015b\u0107 tworzonych przez siebie rozwi\u0105za\u0144 na r\u00f3\u017cnych urz\u0105dzeniach i przegl\u0105darkach. Zebra\u0142am praktyczne wskaz\u00f3wki dotycz\u0105ce audytu strony internetowej, mo\u017cliwo\u015bci automatyzacji i wiele wi\u0119cej. Sprawd\u017a na przyk\u0142adzie case study, jak szybko i sprawnie wykorzysta\u0107 te narz\u0119dzia do optymalizacji stron!&nbsp; &nbsp;<\/p>\n\n\n\n<p>W pierwszej cz\u0119\u015bci materia\u0142u skupi\u0142am si\u0119 na opisie i og\u00f3lnym opisie i mo\u017cliwo\u015bciach <a href=\"https:\/\/nearshore-it.eu\/pl\/artykuly\/optymalizacja-z-chrome-devtools\/\" target=\"_blank\" rel=\"noreferrer noopener\">ChromeDev Tools<\/a>. Czas wzi\u0105\u0107 pod lup\u0119 konkretne zastosowania i sprawdzi\u0107 je w praktyce. Zacznijmy testy!&nbsp;<\/p>\n\n\n\n<div class=\"table-of-contents\">\n    <p class=\"title\"><\/p>\n    <ol>\n                    <li><a href=\"#Jak-u\u017cywa\u0107-Chrome-DevTools-do-testowania-responsywno\u015bci?\">1.  Jak u\u017cywa\u0107 Chrome DevTools do testowania responsywno\u015bci? <\/a><\/li>\n                    <li><a href=\"#Jak-testowa\u0107-dost\u0119pno\u015b\u0107-pod-wzgl\u0119dem-zaburze\u0144-widzenia?\">2.  Jak testowa\u0107 dost\u0119pno\u015b\u0107 pod wzgl\u0119dem zaburze\u0144 widzenia? <\/a><\/li>\n                    <li><a href=\"#Symulowanie-innej-lokalizacji-i-stref-czasowych\">3.  Symulowanie innej lokalizacji i stref czasowych <\/a><\/li>\n                    <li><a href=\"#Jak-przeprowadzi\u0107-audyt-wydajno\u015bci-strony-w-Google-Chrome?\">4.  Jak przeprowadzi\u0107 audyt wydajno\u015bci strony w Google Chrome? <\/a><\/li>\n                    <li><a href=\"#Jak-wykorzysta\u0107-wbudowane-audyty-do-optymalizacji-stron-internetowych?\">5.  Jak wykorzysta\u0107 wbudowane audyty do optymalizacji stron internetowych?<\/a><\/li>\n                    <li><a href=\"#Jak-oceni\u0107-szybko\u015b\u0107-\u0142adowania-strony-za-pomoc\u0105-narz\u0119dzi-deweloperskich?\">6.  Jak oceni\u0107 szybko\u015b\u0107 \u0142adowania strony za pomoc\u0105 narz\u0119dzi deweloperskich?<\/a><\/li>\n                    <li><a href=\"#Praktyczne-wskaz\u00f3wki-dla-programist\u00f3w-korzystaj\u0105cych-z-Chrome-DevTools\">7.  Praktyczne wskaz\u00f3wki dla programist\u00f3w korzystaj\u0105cych z Chrome DevTools<\/a><\/li>\n                    <li><a href=\"#Optymalizacja-strony-internetowej-przy-pomocy-narz\u0119dzi-deweloperskich-\u2013-case-study\">8.  Optymalizacja strony internetowej przy pomocy narz\u0119dzi deweloperskich \u2013 case study<\/a><\/li>\n            <\/ol>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"Jak-u\u017cywa\u0107-Chrome-DevTools-do-testowania-responsywno\u015bci?\">Jak u\u017cywa\u0107 Chrome DevTools do testowania responsywno\u015bci?<\/h2>\n\n\n\n<p>Pierwsze testy dost\u0119pno\u015bci strony mo\u017cna przeprowadzi\u0107, wykonuj\u0105c audyt Lighthouse w trybie <em>Navigation<\/em> pod wzgl\u0119dem kategorii <em>Accessibility<\/em>. Ten tryb ocenia przystosowanie strony do potrzeb u\u017cytkownik\u00f3w z niepe\u0142nosprawno\u015bciami. Automatyczne testowanie dost\u0119pno\u015bci warto jednak dope\u0142ni\u0107 testami manualnymi.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Jak-testowa\u0107-dost\u0119pno\u015b\u0107-pod-wzgl\u0119dem-zaburze\u0144-widzenia?\">Jak testowa\u0107 dost\u0119pno\u015b\u0107 pod wzgl\u0119dem zaburze\u0144 widzenia?<\/h2>\n\n\n\n<p>W panelu <em>Rendering<\/em> znajduj\u0105 si\u0119 opcje pozwalaj\u0105ce na symulacj\u0119 zaburze\u0144 widzenia i ustawie\u0144 u\u017cytkownika u\u0142atwiaj\u0105cych dost\u0119pno\u015b\u0107. Aby otworzy\u0107 panel <em>Rendering<\/em>, nale\u017cy otworzy\u0107 <em>Command Menu<\/em> (Cmd + Shift + P lub Ctrl + Shift + P) i wpisa\u0107 \u201e<em>Show rendering<\/em>\u201d. Zaznaczaj\u0105c odpowiednie opcje, mo\u017cemy:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>przetestowa\u0107 dostosowanie strony pod k\u0105tem ustawie\u0144 u\u017cytkownika okre\u015blaj\u0105cych m.in. kontrast, przezroczysto\u015b\u0107 element\u00f3w i animacje,&nbsp;<\/li>\n\n\n\n<li>emulowa\u0107 wady wzroku, takie jak nieostre widzenie, protanopia (nierozpoznawanie barwy czerwonej), deuteranopia (nierozpoznawanie barwy zielonej), tritanopia (nierozpoznawanie barwy niebieskiej) czy achromatopsja (widzenie monochromatyczne).&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Symulowanie-innej-lokalizacji-i-stref-czasowych\">Symulowanie innej lokalizacji i stref czasowych<\/h2>\n\n\n\n<p>Zagadnienia zwi\u0105zane z internacjonalizacj\u0105 (<em>internationalization<\/em>, i18n) najlepiej sprawdza\u0107 na poziomie test\u00f3w automatycznych. Z poziomu narz\u0119dzi deweloperskich przegl\u0105darki mo\u017cna te\u017c jednak szybko sprawdzi\u0107, czy tekst jest poprawnie lokalizowany albo czy funkcje zale\u017c\u0105ce od lokalizacji albo strefy czasowej dzia\u0142aj\u0105 poprawnie. W tym celu nale\u017cy otworzy\u0107 <em>Command Menu<\/em> (Cmd + Shift + P lub Ctrl + Shift + P), wpisa\u0107 \u201e<em>Show sensors<\/em>\u201d i zaznaczy\u0107 wybran\u0105 lokalizacj\u0119.&nbsp;<\/p>\n\n\n\n<p>Zdarza si\u0119, \u017ce aplikacja jest dost\u0119pna w jednym j\u0119zyku, ale korzysta z bibliotek, kt\u00f3re maj\u0105 tekst przet\u0142umaczony na wi\u0119cej j\u0119zyk\u00f3w. Dobrym przyk\u0142adem jest tutaj bardzo popularna biblioteka Moment.js. Je\u017celi locale nie s\u0105 r\u0119cznie ustawione w jej konfiguracji, to daty b\u0119d\u0105 wy\u015bwietla\u0107 si\u0119 w j\u0119zyku u\u017cytkownika, a nie w j\u0119zyku strony. Ta niekonsekwencja mo\u017ce by\u0107 myl\u0105ca przy skr\u00f3conych formatach dat i niekorzystnie wp\u0142ywa\u0107 na automatyczne t\u0142umaczenie czy czytniki ekranu.&nbsp;<\/p>\n\n\n\n<p>Je\u017celi wy\u015bwietlamy na stronie elementy zale\u017cne od czasu \u2013 np. wykresy albo pola wyboru daty \u2013 mo\u017cna w ten spos\u00f3b te\u017c zobaczy\u0107, jak aplikacja zachowuje si\u0119 dla u\u017cytkownik\u00f3w w innych strefach czasowych. Jedn\u0105 z domy\u015blnych opcji jest Mumbaj, gdzie strefa czasowa to GMT+5:30. Mo\u017cna doda\u0107 r\u00f3wnie\u017c swoje ustawienia, np. sprawdzaj\u0105c lokalizacj\u0119 tak\u0105 jak Nepal (gdzie strefa czasowa to GMT+5:45) albo Kiribati (gdzie strefa czasowa to GMT +14:00).&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Jak-przeprowadzi\u0107-audyt-wydajno\u015bci-strony-w-Google-Chrome?\">Jak przeprowadzi\u0107 audyt wydajno\u015bci strony w Google Chrome?<\/h2>\n\n\n\n<p>Narz\u0119dzia deweloperskie przegl\u0105darki Chrome maj\u0105 wbudowane narz\u0119dzie Lighthouse, pozwalaj\u0105ce na przeprowadzenie audytu strony pod k\u0105tem dost\u0119pno\u015bci dla os\u00f3b z niepe\u0142nosprawno\u015bciami, SEO, wydajno\u015bci i u\u017cyteczno\u015bci. Narz\u0119dzie Lighthouse mo\u017ce by\u0107 r\u00f3wnie\u017c zainstalowane oddzielnie jako rozszerzenie do przegl\u0105darki albo paczka Node, co pozwala na wi\u0119ksz\u0105 konfiguracj\u0119 i generowanie audyt\u00f3w z poziomu CI\/CD.&nbsp;<\/p>\n\n\n\n<p>Aby przeprowadzi\u0107 audyt Lighthouse, u\u017cywaj\u0105c Chrome DevTools, nale\u017cy otworzy\u0107 zak\u0142adk\u0119 Lighthouse i wybra\u0107 odpowiednie opcje:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>Mode<\/em>&nbsp;<\/strong>\n<ul class=\"wp-block-list\">\n<li><em>Navigation <\/em>\u2013 analizuje pojedyncze za\u0142adowanie strony.&nbsp;<\/li>\n\n\n\n<li><em>Timespan <\/em>\u2013 analizuje zachowanie strony w okre\u015blonym czasie, przy okre\u015blonych interakcjach u\u017cytkownika.&nbsp;<\/li>\n\n\n\n<li><em>Snapshot <\/em>\u2013 analizuje stan strony w okre\u015blonym momencie.&nbsp;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><em><strong>Device <\/strong><\/em>\u2013 desktop lub mobile&nbsp;<\/li>\n\n\n\n<li><strong><em>Categories<\/em>&nbsp;<\/strong>\n<ul class=\"wp-block-list\">\n<li><em>Performance <\/em>\u2013 ocena szybko\u015bci \u0142adowania strony i jej responsywno\u015bci.&nbsp;<\/li>\n\n\n\n<li><em>Accessibility<\/em> \u2013 ocena przystosowania strony do potrzeb u\u017cytkownik\u00f3w z niepe\u0142nosprawno\u015bciami.&nbsp;<\/li>\n\n\n\n<li><em>Best practices<\/em> \u2013 ocena zgodno\u015bci ze standardami tworzenia stron internetowych i protoko\u0142ami bezpiecze\u0144stwa.&nbsp;<\/li>\n\n\n\n<li><em>SEO<\/em> \u2013 ocena optymalizacji strony pod k\u0105tem wyszukiwarek.&nbsp;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Jak-wykorzysta\u0107-wbudowane-audyty-do-optymalizacji-stron-internetowych?\">Jak wykorzysta\u0107 wbudowane audyty do optymalizacji stron internetowych?<\/h2>\n\n\n\n<p>Audyty Lighthouse zawieraj\u0105 diagnostyk\u0119 element\u00f3w nadaj\u0105cych si\u0119 do optymalizacji, na przyk\u0142ad nieu\u017cywany lub niezminifikowany kod JavaScript lub obrazy w nieodpowiednim rozmiarze lub formacie. Opr\u00f3cz diagnostyki audyty zawieraj\u0105 r\u00f3wnie\u017c instrukcje u\u0142atwiaj\u0105ce wprowadzenie sugerowanych rozwi\u0105za\u0144.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Jak-oceni\u0107-szybko\u015b\u0107-\u0142adowania-strony-za-pomoc\u0105-narz\u0119dzi-deweloperskich?\">Jak oceni\u0107 szybko\u015b\u0107 \u0142adowania strony za pomoc\u0105 narz\u0119dzi deweloperskich?<\/h2>\n\n\n\n<p>Szybko\u015b\u0107 \u0142adowania strony najlepiej oceni\u0107, wykonuj\u0105c audyt Lighthouse w trybie <em>Navigation<\/em> pod wzgl\u0119dem kategorii <em>Performance<\/em>. Ten tryb ocenia szybko\u015b\u0107 \u0142adowania strony pod wzgl\u0119dem pierwszego wyrenderowania tre\u015bci (<em>First Contentful Paint<\/em>), najwi\u0119kszego wyrenderowania tre\u015bci (<em>Largest Contentful Paint<\/em>), \u0142\u0105cznego czasu blokowania (<em>Total Blocking Time<\/em>) i skumulowanych zmian uk\u0142adu (<em>Cumulative Layout Shift<\/em>).&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Praktyczne-wskaz\u00f3wki-dla-programist\u00f3w-korzystaj\u0105cych-z-Chrome-DevTools\">Praktyczne wskaz\u00f3wki dla programist\u00f3w korzystaj\u0105cych z Chrome DevTools<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Jak przyspieszy\u0107 debugowanie kodu JavaScript w Chrome?&nbsp;<\/h3>\n\n\n\n<p>Sprawne u\u017cywanie debuggera mo\u017ce znacznie przyspieszy\u0107 debugowanie. Ustawianie breakpoint\u00f3w z poziomu IDE albo wywo\u0142ywanie debuggera bezpo\u015brednio w kodzie pozwala zatrzyma\u0107 wykonywanie programu w kluczowych momentach, co umo\u017cliwia dok\u0142adne przeanalizowanie stanu aplikacji i warto\u015bci zmiennych. Warto te\u017c zna\u0107 mo\u017cliwo\u015bci ustawiania breakpoint\u00f3w przy zmianach w strukturze DOM, przy okre\u015blonych zapytaniach HTTP, zdarzeniach albo wyj\u0105tkach.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Jak zautomatyzowa\u0107 proces testowania stron internetowych w Chrome?&nbsp;<\/h3>\n\n\n\n<p>Czasem dostanie si\u0119 do testowanego widoku wymaga przeklikania si\u0119 przez niezwi\u0105zany z nim bezpo\u015brednio proces \u2013 na przyk\u0142ad wype\u0142nienie formularza. U\u017cywaj\u0105c <em>Code Snippets,<\/em> mo\u017cemy zautomatyzowa\u0107 skryptami cz\u0119\u015b\u0107 tych proces\u00f3w i usprawni\u0107 testowanie. Z <em>Command Menu<\/em> (Cmd + Shift + P lub Ctrl + Shift + P) nale\u017cy wybra\u0107 \u201e<em>Show Snippets<\/em>\u201d. W otworzonym panelu <em>Snippets<\/em> mo\u017cemy zapisywa\u0107 skrypty i uruchamia\u0107 je skr\u00f3tem Cmd + Enter lub Ctrl + Enter. <em>Snippets<\/em> mo\u017cna te\u017c uruchamia\u0107 z poziomu <em>Command Menu<\/em>, gdzie nale\u017cy wpisa\u0107 nazw\u0119 skryptu poprzedzon\u0105 wykrzyknikiem.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Automatyzacja wype\u0142niania formularzy&nbsp;<\/h3>\n\n\n\n<p>Innym sposobem automatyzacji wype\u0142niania formularzy jest u\u017cycie narz\u0119dzia <em>Autofill<\/em>. Pozwala ono przetestowa\u0107, czy zapisane dane adresowe u\u017cytkownika b\u0119d\u0105 prawid\u0142owo uzupe\u0142niane przez przegl\u0105dark\u0119. Nale\u017cy otworzy\u0107 <em>Command Menu<\/em> (Cmd + Shift + P lub Ctrl + Shift + P) i wpisa\u0107 \u201e<em>Show Autofill<\/em>\u201d. Kiedy panel <em>Autofill<\/em> jest otworzony, po klikni\u0119ciu w pole formularza wy\u015bwietli si\u0119 dodatkowe menu kontekstowe pozwalaj\u0105ce na wyb\u00f3r testowych danych pogrupowanych wed\u0142ug kraju.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Jak wykona\u0107 zrzut ekranu w wysokiej rozdzielczo\u015bci?&nbsp;<\/h3>\n\n\n\n<p>W tym celu w Google Chrome nale\u017cy otworzy\u0107 widok podgl\u0105du responsywno\u015bci za pomoc\u0105 ikonki w lewym g\u00f3rnym rogu narz\u0119dzi deweloperskich oznaczaj\u0105cej \u201e<em>Toggle device toolbar<\/em>\u201d lub u\u017cy\u0107 skr\u00f3tu klawiszowego Cmd + Shift + M lub Ctrl + Shift + M. Z menu dodatkowych opcji, okre\u015blonego ikonk\u0105 z trzema kropkami, nale\u017cy w\u0142\u0105czy\u0107 menu okre\u015blaj\u0105ce DPR (device-pixel ratio) i ustawi\u0107 DPR na najwy\u017csz\u0105 warto\u015b\u0107 \u2013 na przyk\u0142ad, przy DPR r\u00f3wnym 3 i rozdzielczo\u015bci 1920 \u00d7 1080, uzyskamy obraz o rozdzielczo\u015bci 5760 \u00d7 3240. Z menu dodatkowych opcji mo\u017cna wtedy wybra\u0107 opcj\u0119 \u201e<em>Capture screenshot<\/em>\u201d, by uchwyci\u0107 widok okna, lub \u201e<em>Capture full size screenshot<\/em>\u201d, by uchwyci\u0107 ca\u0142\u0105 stron\u0119.&nbsp;<\/p>\n\n\n\n<p>W przegl\u0105darce Firefox zrzut ekranu mo\u017cna wykona\u0107 z poziomu konsoli, u\u017cywaj\u0105c komendy: screenshot, z opcjonalnymi parametrami &#8211;dpr i &#8211;fullpage \u2013 na przyk\u0142ad:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">:screenshot --dpr 3 --fullpage<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Optymalizacja-strony-internetowej-przy-pomocy-narz\u0119dzi-deweloperskich-\u2013-case-study\">Optymalizacja strony internetowej przy pomocy narz\u0119dzi deweloperskich \u2013 case study<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Jakich narz\u0119dzi w przegl\u0105darce u\u017cy\u0107 do optymalizacji dzia\u0142ania strony?&nbsp;<\/h3>\n\n\n\n<p>Proces optymalizacji strony internetowej mo\u017cna rozpocz\u0105\u0107 od wykonania audytu Lighthouse. Nie zawsze da si\u0119 otrzyma\u0107 perfekcyjny wynik \u2013 czasem wykorzystywane biblioteki i narz\u0119dzia mog\u0105 nie funkcjonowa\u0107 wed\u0142ug zalecanych wzorc\u00f3w, ale ich zast\u0105pienie by\u0142oby zbyt kosztowne. Ponadto standardy ulegaj\u0105 zmianom, a wi\u0119c wynik mo\u017ce si\u0119 z czasem zmieni\u0107. Audyt Lighthouse jest jednak dobrym punktem wyj\u015bcia, poniewa\u017c zawiera konkretn\u0105 diagnostyk\u0119 element\u00f3w nadaj\u0105cych si\u0119 do optymalizacji oraz instrukcje u\u0142atwiaj\u0105ce wprowadzenie sugerowanych rozwi\u0105za\u0144.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Responsive web design \u2013 testujemy stron\u0119 w praktyce&nbsp;<\/h3>\n\n\n\n<p>Przyjrzyjmy si\u0119 wynikowi audytu przeprowadzonego na stronie zawieraj\u0105cej <a href=\"https:\/\/nearshore-it.eu\/pl\/artykuly\/optymalizacja-z-chrome-devtools\/\" target=\"_blank\" rel=\"noreferrer noopener\">pierwsz\u0105 cz\u0119\u015b\u0107 artyku\u0142u<\/a> o narz\u0119dziach developerskich dost\u0119pnych w przegl\u0105darce.&nbsp;<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"796\" height=\"509\" data-id=\"34572\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-desktop-1.png\" alt=\"\" class=\"wp-image-34572\" title=\"\" srcset=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-desktop-1.png 796w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-desktop-1-300x192.png 300w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-desktop-1-768x491.png 768w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-desktop-1-495x317.png 495w\" sizes=\"auto, (max-width: 796px) 100vw, 796px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"796\" height=\"495\" data-id=\"34575\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-mobile-1.png\" alt=\"responsive web design - testy\" class=\"wp-image-34575\" title=\"\" srcset=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-mobile-1.png 796w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-mobile-1-300x187.png 300w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-mobile-1-768x478.png 768w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-mobile-1-495x308.png 495w\" sizes=\"auto, (max-width: 796px) 100vw, 796px\" \/><figcaption class=\"wp-element-caption\">Mobile<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Google zaleca, aby autorzy stron internetowych d\u0105\u017cyli do osi\u0105gni\u0119cia wyniku w przedziale od 90 do 100, przy czym uzyskanie idealnego wyniku na poziomie 100 nie jest oczekiwane. Wed\u0142ug <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/performance-scoring\" target=\"_blank\" rel=\"noreferrer noopener\">dokumentacji<\/a> poprawa wyniku z 99 na 100 wymaga podobnego nak\u0142adu pracy jak podniesienie wyniku z 90 na 94.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Testy dost\u0119pno\u015bci i SEO&nbsp;<\/h3>\n\n\n\n<p>Wszystkie cztery kategorie audytu sprowadzaj\u0105 si\u0119 g\u0142\u00f3wnie do dw\u00f3ch czynnik\u00f3w: szybko\u015bci \u0142adowania strony oraz zgodno\u015bci strony z zasadami semantycznego HTML. Wszystkie kategorie maj\u0105 te\u017c wp\u0142yw na pozycj\u0119 strony w rankingach wyszukiwarek \u2013 na przyk\u0142ad b\u0142\u0119dy zwi\u0105zane ze struktur\u0105 HTML zobaczymy tak samo w kategorii \u201eAccessibility\u201d, jak i \u201eSEO\u201d. To dlatego, \u017ce prawid\u0142owa struktura strony pozwala zar\u00f3wno na dost\u0119p do strony u\u017cytkownikom czytnik\u00f3w ekranu, jak i crawlerom na parsowanie danych.&nbsp;<\/p>\n\n\n\n<p>R\u00f3wnie\u017c tekst alternatywny (atrybut <em>alt<\/em>) wykorzystywany jest zar\u00f3wno przez czytniki ekranu do przekazania tre\u015bci obraz\u00f3w, jak i przez crawlery Google Images do ich indeksowania. Audyt Lighthouse wykryje brak tekstu alternatywnego, ale warto zadba\u0107, \u017ceby istniej\u0105cy tekst mia\u0142 r\u00f3wnie\u017c warto\u015b\u0107 merytoryczn\u0105 \u2013 wp\u0142ynie to pozytywnie zar\u00f3wno na dost\u0119pno\u015b\u0107 strony, jak i na SEO.&nbsp;<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"791\" height=\"627\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-poprawki.png\" alt=\"Testowanie dost\u0119pno\u015bci stron internetowych\" class=\"wp-image-34569\" title=\"\" srcset=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-poprawki.png 791w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-poprawki-300x238.png 300w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-poprawki-768x609.png 768w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-poprawki-495x392.png 495w\" sizes=\"auto, (max-width: 791px) 100vw, 791px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Nawet przy wysokim wyniku lista element\u00f3w nadaj\u0105cych si\u0119 do optymalizacji mo\u017ce by\u0107 d\u0142uga. Wykazane problemy jednak cz\u0119sto si\u0119 ze sob\u0105 \u0142\u0105cz\u0105 i mo\u017cna je rozwi\u0105za\u0107 r\u00f3wnocze\u015bnie \u2013 du\u017co zale\u017cy od u\u017cywanego frameworka i narz\u0119dzi. W przypadku WordPressa sugerowane poprawki zawieraj\u0105 cz\u0119sto propozycje konkretnych wtyczek, co powinno u\u0142atwi\u0107 rozwi\u0105zywanie problem\u00f3w. &nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Zgodno\u015b\u0107 ze standardem WebP&nbsp;<\/h3>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"439\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-webp-1.png\" alt=\"Testowanie dost\u0119pno\u015bci stron internetowych\" class=\"wp-image-34566\" title=\"\" srcset=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-webp-1.png 764w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-webp-1-300x172.png 300w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lighthouse-webp-1-495x284.png 495w\" sizes=\"auto, (max-width: 764px) 100vw, 764px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Zalecenie u\u017cywania formatu WebP to te\u017c przyk\u0142ad stosunkowo nowego standardu. Ten format zacz\u0105\u0142 by\u0107 wspierany przez wszystkie najpopularniejsze przegl\u0105darki dopiero pod koniec 2020 roku.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mobile web testing \u2013 sprawdzamy responsywno\u015b\u0107 na urz\u0105dzeniach przeno\u015bnych&nbsp;<\/h3>\n\n\n\n<p>W audycie Lighthouse otrzymamy uwagi odno\u015bnie do dzia\u0142ania strony na urz\u0105dzeniach przeno\u015bnych, ale nie wszystkie problemy b\u0119d\u0105 automatycznie wykryte. Warto sprawdzi\u0107 dzia\u0142anie strony r\u00f3wnie\u017c <a href=\"https:\/\/nearshore-it.eu\/pl\/artykuly\/optymalizacja-z-chrome-devtools\/#Testowanie-responsywno%C5%9Bci-stron-internetowych-\" target=\"_blank\" rel=\"noreferrer noopener\">w panelu widoku responsywnego<\/a>. Pozwoli to na wykrycie problem\u00f3w z responsywno\u015bci\u0105 strony, na przyk\u0142ad z b\u0142\u0119dnym skalowaniem si\u0119 element\u00f3w.&nbsp;<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1013\" height=\"900\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_mobile-view.png\" alt=\"Testowanie dost\u0119pno\u015bci stron internetowych\" class=\"wp-image-34563\" title=\"\" srcset=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_mobile-view.png 1013w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_mobile-view-300x267.png 300w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_mobile-view-768x682.png 768w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_mobile-view-445x395.png 445w\" sizes=\"auto, (max-width: 1013px) 100vw, 1013px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Testujemy kod HTML&nbsp;<\/h3>\n\n\n\n<p>Na koniec warto r\u00f3wnie\u017c spojrze\u0107 w kod HTML strony. Na zaprezentowanym przyk\u0142adzie wida\u0107, \u017ce mimo zgodnej ze standardem struktury HTML lista nie jest poprawnie sformatowana \u2013 ka\u017cdy element listy to tak naprawd\u0119 osobna lista. Taka struktura nie spowoduje b\u0142\u0119du w audycie, ale mo\u017ce negatywnie wp\u0142ywa\u0107 na SEO \u2013 Google wykorzystuje listy do tzw. \u201efragment\u00f3w z odpowiedzi\u0105\u201d (<em>featured snippets<\/em>), ale przy b\u0142\u0119dnie sformatowanej li\u015bcie dane nie zostan\u0105 prawid\u0142owo sparsowane.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1071\" height=\"828\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lista-1.png\" alt=\"Testowanie dost\u0119pno\u015bci stron internetowych\" class=\"wp-image-34560\" title=\"\" srcset=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lista-1.png 1071w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lista-1-300x232.png 300w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lista-1-768x594.png 768w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_lista-1-495x383.png 495w\" sizes=\"auto, (max-width: 1071px) 100vw, 1071px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Zw\u0142aszcza korzystaj\u0105c z frameworka typu WordPress, gdzie kontrola nad wpi\u0119tymi wtyczkami mo\u017ce by\u0107 ograniczona, warto sprawdzi\u0107, czy nie ma mi\u0119dzy nimi konflikt\u00f3w, czy nie powoduj\u0105 b\u0142\u0119d\u00f3w w konsoli albo pobierania niepotrzebnych zasob\u00f3w, oraz czy nie dodaj\u0105 telemetrii negatywnie wp\u0142ywaj\u0105cej na prywatno\u015b\u0107 u\u017cytkownik\u00f3w. Na za\u0142\u0105czonym przyk\u0142adzie wida\u0107, \u017ce wtyczki do SEO powielaj\u0105 si\u0119, przez co tagi meta s\u0105 zduplikowane i artyku\u0142 mo\u017ce b\u0142\u0119dnie wy\u015bwietla\u0107 si\u0119 w sieci.&nbsp;<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"933\" height=\"778\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_meta.png\" alt=\"Testowanie dost\u0119pno\u015bci stron internetowych\" class=\"wp-image-34557\" title=\"\" srcset=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_meta.png 933w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_meta-300x250.png 300w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_meta-768x640.png 768w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.27_graphic_meta-474x395.png 474w\" sizes=\"auto, (max-width: 933px) 100vw, 933px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Warto pami\u0119ta\u0107, \u017ce wszystkie niepotrzebne elementy strony to bajty, kt\u00f3re serwer musi przes\u0142a\u0107, a u\u017cytkownik pobra\u0107, co wp\u0142ywa na szybko\u015b\u0107 \u0142adowania strony, a w sumie r\u00f3wnie\u017c na obci\u0105\u017cenie i koszt utrzymania serwera.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Podsumowanie&nbsp;<\/h2>\n\n\n\n<p>Wspomniane przeze mnie zagadnienia to po cz\u0119\u015bci ledwie wierzcho\u0142ek g\u00f3ry lodowej. Aby by\u0107 na bie\u017c\u0105co z funkcjonalno\u015bciami narz\u0119dzi deweloperskich, warto \u015bledzi\u0107 oficjalny <a href=\"https:\/\/developer.chrome.com\/blog\" target=\"_blank\" rel=\"noreferrer noopener\">blog<\/a> i <a href=\"https:\/\/www.youtube.com\/@ChromeDevs\/videos\" target=\"_blank\" rel=\"noreferrer noopener\">kana\u0142 na YouTube<\/a> programist\u00f3w Google Chrome, a tak\u017ce stron\u0119 <a href=\"https:\/\/devtoolstips.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">DevTools Tips<\/a>, kt\u00f3ra w bardzo przyst\u0119pny spos\u00f3b pokazuje praktyczne wskaz\u00f3wki zwi\u0105zanie z narz\u0119dziami deweloperskimi i by\u0142a ogromn\u0105 pomoc\u0105 przy tworzeniu tych artyku\u0142\u00f3w.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Testowanie dost\u0119pno\u015bci stron internetowych to kluczowy etap optymalizacji. Sprawd\u017a, jak wykorzysta\u0107 Chrome DevTools do audytu, automatyzacji i poprawy RWD!<\/p>\n","protected":false},"author":199,"featured_media":34582,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"iawp_total_views":38,"footnotes":""},"categories":[1],"tags":[],"offering":[522],"class_list":["post-34540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artykuly","offering-tech-blog"],"acf":[],"_links":{"self":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/34540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/comments?post=34540"}],"version-history":[{"count":5,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/34540\/revisions"}],"predecessor-version":[{"id":37370,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/34540\/revisions\/37370"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/media\/34582"}],"wp:attachment":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/media?parent=34540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/categories?post=34540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/tags?post=34540"},{"taxonomy":"offering","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/offering?post=34540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}