{"id":6739,"date":"2021-06-21T11:19:38","date_gmt":"2021-06-21T09:19:38","guid":{"rendered":"https:\/\/pomoc.dhosting.pl\/?post_type=manual_kb&p=6739"},"modified":"2024-02-02T09:45:31","modified_gmt":"2024-02-02T08:45:31","slug":"jak-czytac-wyniki-pagespeed-insights","status":"publish","type":"manual_kb","link":"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jak-czytac-wyniki-pagespeed-insights\/","title":{"rendered":"Jak czyta\u0107 wyniki PageSpeed Insights?"},"content":{"rendered":"

Przyj\u0119\u0142o si\u0119, \u017ce \u201eGoogle PageSpeed Insights\u201d<\/em><\/strong> s\u0142u\u017cy przede wszystkim sprawdzeniu pr\u0119dko\u015bci \u0142adowania si\u0119 strony WWW. Po podaniu adresu strony wykonany zostanie test, w wyniku kt\u00f3rego otrzymasz punktacj\u0119 w skali od zera do stu (0-100). Przede wszystkim jednak otrzymasz wytyczne dotycz\u0105ce tego jakie kroki mo\u017cesz podj\u0105\u0107 aby zoptymalizowa\u0107 swoj\u0105 stron\u0119 WWW.<\/p>\n

Wynik jest podzielony na urz\u0105dzenia mobilne oraz desktop. Jest to o tyle wa\u017cne, \u017ce kryteria wykonywanego testu dla urz\u0105dze\u0144 mobilnych i przegl\u0105darek na komputerach stacjonarnych lub laptopach s\u0105 nieco inne. Cz\u0119st\u0105 sytuacj\u0105 jest wi\u0119c, \u017ce mo\u017cesz mie\u0107 stosunkowo niski wynik dla urz\u0105dze\u0144 mobilnych, a wysoki na komputery stacjonarne lub na odwr\u00f3t. Warto wi\u0119c, aby\u015b po otrzymaniu wyniku zapozna\u0142 si\u0119 z obiema sekcjami.<\/p>\n

\"\"
Poznaj hosting, kt\u00f3ry automatycznie dostosowuje si\u0119 do potrzeb<\/div>Dowiedz si\u0119 wi\u0119cej<\/a><\/div>\n

Na co zwraca\u0107 uwag\u0119?<\/h3>\n

Jak ju\u017c wiemy, raport b\u0119d\u0105cy wynikiem testu jest swoistym kompendium wskaz\u00f3wek i warto pami\u0119ta\u0107, \u017ce s\u0105 to wskaz\u00f3wki, poniewa\u017c ka\u017cda strona WWW jest inna, mo\u017ce by\u0107 zbudowana w wykorzystaniu innych technologii i mie\u0107 r\u00f3\u017cne za\u0142o\u017cenia. Paradoksalnie wi\u0119c mo\u017ce zdarzy\u0107 si\u0119 sytuacja, \u017ce strona z bardzo dobrymi ocenami nie b\u0119dzie do ko\u0144ca przyjazna u\u017cytkownikom, a ta z ni\u017cszym wynikiem b\u0119dzie subiektywnie odbierana przez u\u017cytkownik\u00f3w lepiej.<\/p>\n

\"\"<\/a><\/p>\n

Pierwsze wyrenderowanie tre\u015bci<\/strong> – jest to informacja o szybko\u015bci pojawienia si\u0119 jakiejkolwiek zawarto\u015bci na stronie<\/p>\n

Indeks szybko\u015bci<\/strong> – informuje o tym jaki czas jest potrzebny do za\u0142adowania tre\u015bci jak np. grafiki , zdj\u0119cia czy wideo.<\/p>\n

Najwi\u0119ksze wyrenderowanie tre\u015bci<\/strong> – informuje (to do\u015b\u0107 wa\u017cne) jak d\u0142ugo \u0142adowany by\u0142 najwi\u0119kszy element na stronie WWW. Warto jest zwr\u00f3ci\u0107 uwag\u0119 na to wskazanie, poniewa\u017c mo\u017ce si\u0119 zdarzy\u0107, \u017ce mamy np. grafik\u0119 lub wideo o sporej wadze (nie zoptymalizowane) i \u0142adowanie tego elementu staje si\u0119 w\u0105skim gard\u0142em.<\/p>\n

Czas do pe\u0142nej interaktywno\u015bci<\/strong> – tutaj otrzymujemy r\u00f3wnie wa\u017cny czas kiedy strona WWW w trakcie lub po za\u0142adowaniu si\u0119, jest gotowa do interakcji z odwiedzaj\u0105cym. Cz\u0119sto mo\u017cesz zwr\u00f3ci\u0107 uwag\u0119 na to, \u017ce czas ten jest ni\u017cszy od czasu przedstawionego w pozycji najwi\u0119kszej wyrenderowanej tre\u015bci, a to z uwagi na to, \u017ce mimo i\u017c dane zasoby mog\u0105 by\u0107 jeszcze \u0142adowane, strona WWW jest ju\u017c funkcjonalna dla odwiedzaj\u0105cego przy czym przyk\u0142adowo, nie widzi on jeszcze okre\u015blonego obrazka czy materia\u0142u wideo.<\/p>\n

Zbiorcze przesuni\u0119cie uk\u0142adu<\/strong> – wskazuje na kwesti\u0119 UX (user experience) gdzie na stronie WWW \u0142adowane s\u0105 elementy powoduj\u0105ce przesuni\u0119cie innych i co za tym idzie, mog\u0105ce powodowa\u0107 np. klikni\u0119cie przez odwiedzaj\u0105cego w banner reklamowy nie\u015bwiadomie.<\/p>\n

Mo\u017cliwo\u015bci, diagnostyka, audyty oraz porady z nimi zwi\u0105zane<\/h3>\n

Co wa\u017cne, ani sugestie w sekcji Mo\u017cliwo\u015bci, ani punkty wylistowane w sekcji Diagnostyka, nie maj\u0105 bezpo\u015bredniego odniesienia na wynik wydajno\u015bciowy, niemniej o ile to tylko mo\u017cliwe, warto jest skorzysta\u0107 z przedstawionych tam porad, aby strona WWW \u0142adowa\u0142a si\u0119 i dzia\u0142a\u0142a nieco sprawniej.<\/p>\n

Poni\u017cej przedstawiamy zrzut ekranu z wyniku testu przyk\u0142adowej strony. Nie opiszemy tutaj ka\u017cdej z mo\u017cliwych opcji, poniewa\u017c tych jest bardzo du\u017co. Pami\u0119taj jednak, \u017ce narz\u0119dzie \u201eGoogle PageSpeed Insights\u201d<\/em><\/strong>\u00a0po klikni\u0119ciu w dan\u0105 pozycj\u0119, poinformuj\u0119 Ci\u0119 jakie kroki mo\u017cesz podj\u0105\u0107 w danej kwestii.<\/p>\n

\n

Pami\u0119taj, \u017ce raport dla ka\u017cdej testowanej strony WWW b\u0119dzie wygl\u0105da\u0142 nieco inaczej, o czym wspomnieli\u015bmy ju\u017c wcze\u015bniej. Wszystko jest zale\u017cne od specyfiki strony WWW, kt\u00f3rej test wykonujesz i technologii, z kt\u00f3rych korzystasz.<\/p>\n<\/div>\n

Punkty, kt\u00f3rym zawsze warto si\u0119 przyjrze\u0107<\/h3>\n

\"\"<\/a><\/p>\n

Usuni\u0119cie zb\u0119dnego CSS<\/strong> – Sporo stron WWW zawiera w plikach CSS (kaskadowy arkusz styl\u00f3w) elementy, kt\u00f3re nie s\u0105 zawsze i na ka\u017cdej z pod stron potrzebne. Warto jest wi\u0119c, aby Tw\u00f3j programista \/ webmaster przyjrza\u0142 si\u0119 tej kwestii, okre\u015blaj\u0105c np. \u017ce strona g\u0142\u00f3wna, poza globalnym plikiem styl\u00f3w main.css (przyk\u0142adowa nazwa) ma skorzysta\u0107 z pliku home.css, natomiast strona kontakt z contact.css. W ten spos\u00f3b strona g\u0142\u00f3wna nie za\u0142aduje element\u00f3w z pliku styl\u00f3w wymaganych wy\u0142\u0105cznie na stronie kontaktowej.<\/p>\n

Minifikacja JavaScript oraz CSS<\/strong> – Minifikacja jest swoist\u0105 form\u0105 kompresji, gdzie w chwili programowania \/ pisania danego pliku .js lub .css autorowi wygodniej jest przechodzi\u0107 do nowej linii, aby kod by\u0142 po prostu czytelny. Przegl\u0105darka nie ma takiej potrzeby, tak wi\u0119c przy sporej ilo\u015bci plik\u00f3w .js oraz .css do za\u0142adowania, usuni\u0119cie pustych linii i pustych znak\u00f3w mo\u017ce skutkowa\u0107 oszcz\u0119dno\u015bci\u0105 w rozmiarze plik\u00f3w, kt\u00f3re przegl\u0105darka musi za\u0142adowa\u0107 odwiedzaj\u0105cemu stron\u0119 WWW.<\/p>\n

Kompresja Gzip<\/strong> – Kompresja ta mo\u017ce by\u0107 por\u00f3wnana do minifikacji, przy czym obejmuje juz nie tylko pliki .js oraz .css, ale r\u00f3wnie\u017c wygenerowane chocia\u017cby przez system cache (pami\u0119ci podr\u0119cznej) strony WWW pliki statyczne w formacie .html<\/p>\n

Optymalizacja obraz\u00f3w<\/strong> – Strony WWW sk\u0142adaj\u0105 si\u0119 obecnie z du\u017cej ilo\u015bci grafik oraz zdj\u0119\u0107. Cz\u0119sto jednak zapominamy, \u017ce na stronie WWW nie musi znajdowa\u0107 si\u0119 zdj\u0119cie w pe\u0142nej rozdzielczo\u015bci w jakiej zosta\u0142o ono wykonane. Cz\u0119sto obrazy lub grafiki wy\u015bwietlane s\u0105 w formie niewielkich ramek rz\u0119du kilkunastu lub kilkuset pikseli, gdy oryginalne zdj\u0119cie jest wykonane w rozdzielczo\u015bci kilku tysi\u0119cy pikseli. Optymalizacja, a wi\u0119c dopasowanie rozmiaru faktycznego obrazka do rozmiaru, kt\u00f3ry ma zosta\u0107 za\u0142adowany na stronie WWW potrafi odchudzi\u0107 stron\u0119 WWW nawet o kilkaset procent.<\/p>\n

Lazy loading<\/strong> – Okre\u015bla mechanizm, gdzie przede wszystkim obrazy strony WWW nie s\u0105 \u0142adowane do momentu kiedy znajd\u0105 si\u0119 w polu widzenia odwiedzaj\u0105cego. Przy za\u0142o\u017ceniu, \u017ce odwiedzaj\u0105cego stron\u0119 WWW interesuje wy\u0142\u0105cznie to co znajduje si\u0119 w jej pierwszej po\u0142owie, oszcz\u0119dzamy transfer zar\u00f3wno serwera, jak i po\u0142\u0105czenia odwiedzaj\u0105cego i przyspieszamy proces \u0142adowania si\u0119 tre\u015bci strony, prezentuj\u0105c wy\u0142\u0105cznie to co znajduje si\u0119 w polu widzenia.<\/p>\n

\n

Powy\u017cszy artyku\u0142 jest do\u015b\u0107 og\u00f3lnym wst\u0119pem, kt\u00f3ry mo\u017ce wskaza\u0107 Ci podstawowe zasady i uwarunkowania, na kt\u00f3rych opiera si\u0119 \u201eGoogle PageSpeed Insights\u201d<\/em><\/strong>.<\/p>\n<\/div>\n

Je\u015bli interesuje Ci\u0119 jak procentowo wygl\u0105da punktacja \u201eLighthouse\u201d<\/em><\/strong>, na kt\u00f3rym opiera si\u0119 wykonywany przez Google test, na stronie: https:\/\/googlechrome.github.io\/lighthouse\/scorecalc\/<\/a> znajdziesz kalkulator wyniku.<\/p>\n","protected":false},"author":6,"featured_media":10957,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[95,109],"manual_kb_tag":[1727,655,1728,1730,3517,3516,3537,1729],"class_list":["post-6739","manual_kb","type-manual_kb","status-publish","format-standard","has-post-thumbnail","hentry","manualknowledgebasecat-hosting","manualknowledgebasecat-strony-www","manual_kb_tag-google-insights","manual_kb_tag-hosting","manual_kb_tag-jak-czytac-google-insignts","manual_kb_tag-lighthouse","manual_kb_tag-polski-hosting","manual_kb_tag-web-hosting","manual_kb_tag-wydajnosc","manual_kb_tag-wyniki-testu-google"],"_links":{"self":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/6739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":0,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/6739\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/media\/10957"}],"wp:attachment":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/media?parent=6739"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manualknowledgebasecat?post=6739"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb_tag?post=6739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}