{"id":1272,"date":"2019-02-12T14:46:57","date_gmt":"2019-02-12T13:46:57","guid":{"rendered":"https:\/\/www.freeline.pl\/blog\/?p=1272"},"modified":"2019-07-25T15:25:54","modified_gmt":"2019-07-25T13:25:54","slug":"nowy-google-pagespeed-insights-jak-poprawic-wynik","status":"publish","type":"post","link":"https:\/\/www.freeline.pl\/blog\/nowy-google-pagespeed-insights-jak-poprawic-wynik\/","title":{"rendered":"Nowy Google PageSpeed Insights &#8211; jak poprawi\u0107 wynik?"},"content":{"rendered":"<p style=\"text-align: justify;\"><strong>Google PageSpeed Insights to darmowe narz\u0119dzie, dzi\u0119ki kt\u00f3remu w prosty spos\u00f3b sprawdzimy czas \u0142adowania si\u0119 strony na komputerach i smartfonach. Dowiemy si\u0119 r\u00f3wnie\u017c, co musimy poprawi\u0107 na naszej stronie, \u017ceby zatrzyma\u0107 u\u017cytkownik\u00f3w na d\u0142u\u017cej na naszej stronie. Wszystkie osoby zajmuj\u0105ce si\u0119 na co dzie\u0144 budow\u0105 i utrzymaniem stron internetowych, zdecydowanie powinny korzysta\u0107 z tego narz\u0119dzia.<\/strong><\/p>\n<p style=\"text-align: justify;\">W poprzednim roku Google zmieni\u0142 silnik w swoim narz\u0119dziu i obecnie wykorzystuje on Lighthouse. Zmiana ta zosta\u0142a wprowadzona w celu zwi\u0119kszenia sp\u00f3jno\u015bci pomi\u0119dzy narz\u0119dziami do analizy skuteczno\u015bci stron internetowych. W poprzedniej wersji narz\u0119dzie korzysta\u0142o z r\u00f3\u017cnych mechanizm\u00f3w analitycznych, kt\u00f3re dawa\u0142y odmienne rekomendacje z ka\u017cdego narz\u0119dzia. Powodowa\u0142o to sprzeczne informacje, dostarczane z r\u00f3\u017cnych urz\u0105dze\u0144. Obecnie u\u017cytkownik otrzymuje sp\u00f3jny audyt wydajno\u015bci i rekomendacje, kt\u00f3re dotycz\u0105 rzeczywistej wydajno\u015bci witryny, poprawy wygody u\u017cytkownik\u00f3w i wsp\u00f3\u0142czynnika konwersji w witrynie.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_45 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Spis tre\u015bci<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" area-label=\"ez-toc-toggle-icon-1\"><label for=\"item-69f4dd365d618\" aria-label=\"Table of Content\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><input  type=\"checkbox\" id=\"item-69f4dd365d618\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.freeline.pl\/blog\/nowy-google-pagespeed-insights-jak-poprawic-wynik\/#PageSpeed_Insights_dostarcza_uzytkownikom_nastepujace_dane\" title=\"PageSpeed Insights dostarcza u\u017cytkownikom nast\u0119puj\u0105ce dane:\">PageSpeed Insights dostarcza u\u017cytkownikom nast\u0119puj\u0105ce dane:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.freeline.pl\/blog\/nowy-google-pagespeed-insights-jak-poprawic-wynik\/#Sprawdzmy_o_ktore_elementy_musimy_zadbac_zeby_uzyskac_wynik_100100_w_tescie_PageSpeed_Insights\" title=\"Sprawd\u017amy, o kt\u00f3re elementy musimy zadba\u0107, \u017ceby uzyska\u0107 wynik 100\/100 w te\u015bcie PageSpeed Insights:\">Sprawd\u017amy, o kt\u00f3re elementy musimy zadba\u0107, \u017ceby uzyska\u0107 wynik 100\/100 w te\u015bcie PageSpeed Insights:<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"PageSpeed_Insights_dostarcza_uzytkownikom_nastepujace_dane\"><\/span>PageSpeed Insights dostarcza u\u017cytkownikom nast\u0119puj\u0105ce dane:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Dzi\u0119ki Lighthouse, symulowany jest spos\u00f3b wczytywania strony przez urz\u0105dzenia mobilne. Obliczony zestaw wska\u017anik\u00f3w wydajno\u015bci i podsumowanie danych prezentowane jest w punktacji od 0 do 100, wska\u017anik 90 i wy\u017cej jest uwa\u017cany za dobry.<\/li>\n<li>Pobierane s\u0105 rzeczywiste dane wydajno\u015bci strony i jej pochodzenia, \u0142\u0105cznie z pierwsz\u0105 pe\u0142n\u0105 tre\u015bci\u0105 i pierwszym op\u00f3\u017anieniem wej\u015bcia.<\/li>\n<li>Prezentowane s\u0105 sugestie jak poprawi\u0107 skuteczno\u015b\u0107 strony, a tak\u017ce szacunkowe dane dotycz\u0105ce szybko\u015bci \u0142adowania strony po wprowadzonych zmianach.<\/li>\n<li>Dowied\u017a mo\u017cna si\u0119 te\u017c w jaki spos\u00f3b nasza strona spe\u0142nia najlepsze praktyki w zakresie tworzenia stron internetowych.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Udoskonalenie stron internetowych powinno dotyczy\u0107 nie tylko os\u00f3b, kt\u00f3re korzystaj\u0105 z p\u0142atnych reklam w sieci wyszukiwania Google Ads. Dzi\u0119ki zapewnieniu bezproblemowej obs\u0142ugi strony zwi\u0119kszymy znacznie jej wsp\u00f3\u0142czynnik. Wprowadzone zmiany i szybciej \u0142aduj\u0105ca si\u0119 strona b\u0119dzie mia\u0142a bezpo\u015bredni wp\u0142yw na kampanie Google Ads i wy\u017cszy wynik jako\u015bci, kt\u00f3ry prze\u0142o\u017cy si\u0119 na ni\u017csze koszty klikni\u0119cia CPC. Dla tych, kt\u00f3rzy nie korzystaj\u0105 z reklam korzy\u015bci s\u0105 podobne \u2013 im szybciej \u0142aduj\u0105ca si\u0119 jest strona tym mniejsze prawdopodobie\u0144stwo utraty potencjalnego klienta.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Sprawdzmy_o_ktore_elementy_musimy_zadbac_zeby_uzyskac_wynik_100100_w_tescie_PageSpeed_Insights\"><\/span>Sprawd\u017amy, o kt\u00f3re elementy musimy zadba\u0107, \u017ceby uzyska\u0107 wynik 100\/100 w te\u015bcie PageSpeed Insights:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>1. Nale\u017cy dba\u0107 o wszystkie problemy z pr\u0119dko\u015bci\u0105<\/strong><\/p>\n<p style=\"text-align: justify;\">Szybko\u015b\u0107 witryny zawsze b\u0119dzie najwa\u017cniejszym czynnikiem do dalszej poprawy wydajno\u015bci witryny. By\u0142 to jeden z g\u0142\u00f3wnych wyznacznik\u00f3w do zmiany silnika na Lighthouse. \u017beby mie\u0107 pewno\u015b\u0107, \u017ce zajmujemy si\u0119 wszystkimi problemami zwi\u0105zanymi z szybko\u015bci\u0105 witryny, nale\u017cy wzi\u0105\u0107 pod uwag\u0119 jak motywy i wtyczki, wraz z innymi integracjami wyp\u0142ywaj\u0105 na szybko\u015b\u0107 witryny.<\/p>\n<p style=\"text-align: justify;\">R\u00f3wnie\u017c inwestycja w najlepsze us\u0142ugi hostingowe, jest wa\u017cna dla utrzymania odpowiedniego czasu \u0142adowania strony. Poznanie opinii na temat hostingu i jego specyfikacji przed wyborem dostawcy jest bardzo wa\u017cne, \u017ceby mie\u0107 pewno\u015b\u0107 zaimplementowania wszystkich zmian optymalizacyjnych.<\/p>\n<p><strong>2. Zapewnienie dobrze widocznej tre\u015bci<\/strong><\/p>\n<p style=\"text-align: justify;\">W momencie pojawienia si\u0119 u\u017cytkownika na stronie tre\u015b\u0107 powinna by\u0107 widoczna bez przewijania. Dlatego wa\u017cne jest, aby HTML prezentowa\u0142 zawarto\u015b\u0107 strony, zanim przedstawi inne rzeczy. \u017beby to osi\u0105gn\u0105\u0107, mo\u017cna zmniejszy\u0107 ilo\u015b\u0107 danych u\u017cywanych przez zasoby lub utworzy\u0107 kod HTML, tak aby za\u0142adowana zosta\u0142a w pierwszej kolejno\u015bci krytyczna zawarto\u015b\u0107 strony, widoczna na ekranie powy\u017cej innych element\u00f3w.<\/p>\n<p><strong>3. Minimalizacji kodu jest konieczno\u015bci\u0105<\/strong><\/p>\n<p style=\"text-align: justify;\">Dzi\u0119ki stworzeniu bardziej zwartego kodu i usuni\u0119cie niepotrzebnych linii skutecznie zwi\u0119kszymy szybko\u015b\u0107 \u0142adowania strony. Nale\u017cy usun\u0105\u0107 tutaj z kodu bia\u0142e spacje, nowe linie, niepotrzebny i nieu\u017cywany kod, komentarze itp.<\/p>\n<p>W ten spos\u00f3b uzyskamy szybsz\u0105 dla serwera wersj\u0119 naszego pliku. Zasoby takie jak CSS, HTML czy JavaScript poprawi\u0107 mo\u017cemy dzi\u0119ki narz\u0119dziom CSSNano, HTML Minifier, czy kompilator Closure \/ Uflify JS.<\/p>\n<p><strong>4. Optymalizacja zdj\u0119\u0107<\/strong><\/p>\n<p style=\"text-align: justify;\">Optymalizacja znajduj\u0105cych si\u0119 na stronie zdj\u0119\u0107 mo\u017ce znacz\u0105co wp\u0142yn\u0105\u0107 na popraw\u0119 \u0142adowania naszej strony internetowej. Drogi do optymalizacji s\u0105 tutaj dwie. R\u0119czna optymalizacja ka\u017cdego obrazu jest mo\u017cliwa, ale mo\u017ce zaj\u0105\u0107 ca\u0142\u0105 wieczno\u015b\u0107, dlatego w tym celu lepiej jest u\u017cy\u0107 wtyczek do optymalizacji obrazu. Na CMS WordPress b\u0119dzie to np. Smush it lub EWWW Image optimizer. Dla pozosta\u0142ych witryn wykorzysta\u0107 mo\u017cna narz\u0119dzia takie jak TinyPNG lub Compress JPEG.<\/p>\n<p><strong>5. Kompresja plik\u00f3w<\/strong><\/p>\n<p style=\"text-align: justify;\">Dostarczenie skompresowanych plik\u00f3w na serwery pozwala na szybsze \u0142adowanie strony. Spowoduje to zwi\u0119kszenie szybko\u015bci przesy\u0142ania do przegl\u0105darki.<\/p>\n<p><strong>6. Implementacja buforowania przegl\u0105darki<\/strong><\/p>\n<p style=\"text-align: justify;\">Gdy odwiedzamy strony internetowe, nasza przegl\u0105darka przechowuje pliki takie jak HTML, CSS, JavaScript oraz zdj\u0119cia do lokalnej pami\u0119ci podr\u0119cznej. U\u0142atwi to za\u0142adowanie tej strony przy nast\u0119pnych odwiedzinach. Skutecznie zmniejszy to op\u00f3\u017anienie wyst\u0119puj\u0105ce podczas renderowania strony internetowej i sprawi, \u017ce strona za\u0142aduje si\u0119 szybciej.<\/p>\n<p style=\"text-align: justify;\">Cz\u0119sto us\u0142ugi hostingowe wyposa\u017cone s\u0105 w us\u0142ug\u0119 buforowania przegl\u0105darki. Je\u015bli jednak nie posiada mo\u017cemy wykorzysta\u0107 jedn\u0105 z wtyczek do buforowania witryn w WordPress b\u0119dzie to np. WP Super Cache lub W3 Total Cache.<\/p>\n<p style=\"text-align: justify;\"><strong>7. Usuni\u0119cie JavaScript blokuj\u0105cego renderowanie<\/strong><\/p>\n<p style=\"text-align: justify;\">Najlepszym sposobem na zwi\u0119kszenie szybko\u015bci wczytywania strony jest niedopuszczenie do za\u0142adowania CSS lub JavaScript przed tre\u015bci\u0105 strony. \u017beby to zrobi\u0107 nale\u017cy wstawi\u0107 kod CSS i JavaScript zamiast plik\u00f3w .css i .js. Dzi\u0119ki temu zdecydowanie poprawimy szybko\u015b\u0107 \u0142adowania strony.<\/p>\n<p>8. Przy\u015bpieszone strony mobilne<\/p>\n<p style=\"text-align: justify;\">Korzystaj\u0105c z AMP (Accelerated Mobile Pages) b\u0142yskawicznie za\u0142adujemy stron\u0119 mobiln\u0105 i pozb\u0119dziemy si\u0119 niepotrzebnego formatowania oraz tre\u015bci zapewniaj\u0105cych bezproblemow\u0105 mobilno\u015b\u0107. Wszyscy w\u0142a\u015bciciele powinni stale d\u0105\u017cy\u0107 do osi\u0105gni\u0119cia wyniku 100\/100 w narz\u0119dziu PageSpeed Insights. Wykorzystuj\u0105c powy\u017csze wskaz\u00f3wki, z pewno\u015bci\u0105 uda si\u0119 podkr\u0119ci\u0107 wydajno\u015b\u0107 strony do wyniku 100\/100, ale r\u00f3wnie\u017c zwi\u0119kszy\u0107 ruch i wsp\u00f3\u0142czynnik konwersji w swoich witrynach. Nie jest to proste, bo jak mo\u017cna sprawdzi\u0107, sam Google nie osi\u0105gn\u0105\u0142 trzycyfrowego wyniku!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google PageSpeed Insights to darmowe narz\u0119dzie, dzi\u0119ki kt\u00f3remu w prosty spos\u00f3b sprawdzimy czas \u0142adowania si\u0119<\/p>\n","protected":false},"author":1,"featured_media":1280,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,2,22,13,7],"tags":[],"_links":{"self":[{"href":"https:\/\/www.freeline.pl\/blog\/wp-json\/wp\/v2\/posts\/1272"}],"collection":[{"href":"https:\/\/www.freeline.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freeline.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freeline.pl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freeline.pl\/blog\/wp-json\/wp\/v2\/comments?post=1272"}],"version-history":[{"count":8,"href":"https:\/\/www.freeline.pl\/blog\/wp-json\/wp\/v2\/posts\/1272\/revisions"}],"predecessor-version":[{"id":1652,"href":"https:\/\/www.freeline.pl\/blog\/wp-json\/wp\/v2\/posts\/1272\/revisions\/1652"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.freeline.pl\/blog\/wp-json\/wp\/v2\/media\/1280"}],"wp:attachment":[{"href":"https:\/\/www.freeline.pl\/blog\/wp-json\/wp\/v2\/media?parent=1272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freeline.pl\/blog\/wp-json\/wp\/v2\/categories?post=1272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freeline.pl\/blog\/wp-json\/wp\/v2\/tags?post=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}