PageSpeed Insights Google to świetny sposób na szybkie uzyskanie przeglądu potencjału optymalizacyjnego Twojej witryny. Dzisiaj pokażę Ci, jak wykorzystać ten potencjał i zwiększyć PageSpeed Score. Nie powinieneś jednak niewolniczo podążać za wynikami Google. Ponieważ komunikaty o błędach PageSpeednie zawsze są przydatne.

PageSpeed InsightsJakiś czas temu Caspar Hübinger w jednym ze swoich blogpostów znalazł bardzo dosadne słowa na temat wyników Google. Krytykuje on nie tylko samo narzędzie, ale także sposób korzystania z niego. Ponieważ jeśli nie wiesz, jak interpretować i naprawiać poszczególne sugestie optymalizacji, możesz szybko zgubić się w bezsensownym polowaniu na 100 punktów. Byłoby to jednak nierozsądne. W końcu utopijne wyniki Google PageSpeed są zazwyczaj stratą czasu. Ważniejsza jest optymalizacja czasu ładowania.

W pełni responsywna, ładuje się w 500 ms, a lśniące narzędzie Google'a mówi mi, że moja wydajność na urządzeniach mobilnych jest „dobra”, ponieważ renderuje się przez pieprzony CSS.

Caspar Hübinger(Glueckpress)

PageSpeed Insights Dzisiaj pokażę Ci, jak interpretować najważniejsze komunikaty o błędach od Google i odpowiednio zoptymalizować swoją witrynę.

PageSpeed Insights Ale zanim pokażę ci, jak interpretować poszczególne komunikaty o błędach i naprawiać błędy, chciałbym przejść do tego, jak prawidłowo korzystać z Google. Widzieliśmy już, że niektórzy ludzie są bardzo zafiksowani na swoim PageSpeed Score, nie zwracając uwagi na czas ładowania swojej strony.

Jeśli nie jesteś zainteresowany tą sekcją, pomiń ją i dowiedz się bezpośrednio, jak naprawić komunikat o błędzie "Kompresuj CSS".

Komunikaty o błędach Google PageSpeed nie zawsze są poprawne i ważne

PageSpeed Insights Nigdy nie powinieneś polegać wyłącznie na wynikach lub komunikatach o błędach z Google . Ponieważ narzędzie Google nie mierzy najważniejszego parametru Twojej witryny: czasu ładowania strony. Aby zmierzyć to poprawnie, polecamWebpagetest.org.

Tylko wtedy, gdy od samego początku masz na uwadze czas ładowania strony podczas optymalizacji witryny, możesz złożyć znaczące oświadczenia dotyczące sukcesu optymalizacji. Ponieważ celem każdej optymalizacji powinna być zawsze poprawa doświadczenia użytkownika. W przypadku optymalizacji wydajności jest to oczywiście czas ładowania strony i postrzegany czas ładowania strony.

Dla doświadczenia użytkownika, szybsze czasy ładowania stron i mniejsze rozmiary stron są zawsze korzystne. Cierpliwość i uwaga ludzi wciąż maleje(jak pokazuje to badanie przeprowadzone przez Microsoft) - jest to szczególnie istotne dla handlu elektronicznego - a coraz większy ruch pochodzi z urządzeń mobilnych. Już w 2016 roku 56 procent Niemców regularnie korzystało z Internetu za pośrednictwem smartfonów lub tabletów. Tutaj prędkość połączenia i ilość danych nie zawsze są nieograniczone. Dlatego też odpowiednie są szybkie strony internetowe.

Google PageSpeed dostarcza jednak tylko informacji na temat potencjału optymalizacyjnego Twojej witryny i pozwala wyciągnąć tylko kilka wniosków na temat doświadczenia użytkownika. Niska wartość informacyjna komunikatów o błędach Google PageSpeed jest wzmocniona przez fakt, że narzędzia nie można wyciszyć w niektórych obszarach lub tylko przy znacznym dodatkowym wysiłku.

Na przykład, odniesienie do buforowania przeglądarki pojawi się zawsze, gdy zintegrowane są zasoby zewnętrzne - w tym własne usługi Google. Jednak zasoby te nie mogą być objęte buforowaniem przeglądarki Twojej witryny. Komunikat o błędzie nie ma zatem żadnego znaczenia dla doświadczenia użytkownika Twojej witryny, ale jest generowany przez logikę samego narzędzia. W najgorszym przypadku komunikat jest interpretowany tak, jakby buforowanie przeglądarki nie było aktywne.

Dlatego nie skupiaj się przede wszystkim na ocenie Google, ale na czasie ładowania. Jest to jedyny naprawdę ważny parametr.

Ale co z moim rankingiem Google?

Przykład komunikatu o brakującym buforowaniu przeglądarki wyjaśnia, dlaczego nie powinieneś być zaniepokojony rzekomo słabym wynikiem PageSpeed.

Jeśli na przykład masz zintegrowane Mapy Google lub Google Analytics na swojej stronie internetowej, wygenerują one następujący komunikat o błędzie:

To samo dotyczy innych usług stron trzecich. Na przykład nasz czat wsparcia.

PageSpeed Insights Dlatego za każdym razem, gdy testujemy naszą witrynę, punkt ten jest odejmowany. Oznacza to, że wiemy, że ten czynnik zawsze negatywnie zniekształca nasze wyniki i dlatego po prostu go ignorujemy.

Dla SEO Twojej witryny oznacza to, że czas ładowania i wrażenia użytkownika są również znacznie ważniejsze dla rankingu Google niż konkretny wynik PageSpeed.

Ponieważ jeśli zoptymalizujesz czas ładowania swojej witryny, automatycznie będziesz pracować nad wieloma obszarami, które są ważne dla Google. Poprawa czasu ładowania i Google PageSpeed Score są zatem w pewien sposób ze sobą powiązane.

Moim zdaniem jednak nie daj się zgubić w polowaniu na wynik 100.

A teraz przejdźmy do optymalizacji!

Komunikat o błędzie 1: Kompresja CSS

Z naszego doświadczenia wynika, że jest to jeden z najbardziej denerwujących komunikatów o błędach z Google PageSpeed Insights.

Znaczenie: Ten komunikat o błędzie wskazuje, że pliki CSS twojej strony internetowej mogą być jeszcze skompresowane (lub w powyższym przypadku, że zostało to już zrobione pomyślnie). Taka redukcja zmniejsza liczbę znaków w dokumentach. Zmniejsza to rozmiar pliku. Komentarze, spacje i formatowanie, na przykład, są usuwane.

Implementacja: Nawet jeśli ta wskazówka wydaje się zniechęcająca, implementacja jest prawdopodobnie prosta. Zasadniczo istnieją dwa możliwe rozwiązania dla tego przypadku: Jeśli jesteś wprawnym użytkownikiem CSS, możesz zmniejszyć liczbę plików CSS ręcznie i użyć skróconej notacji podczas ich tworzenia. Możesz także samodzielnie zmniejszyć rozmiar plików CSS za pomocą narzędzi online, takich jak CSS Minifier.

Oczywiście istnieje również wygodne rozwiązanie w postaci wtyczek do minifikacji CSS w WordPress. Niektóre wtyczki wykonują wszechstronną pracę i mogą kompresować i optymalizować nie tylko CSS, ale także JavaScript i HTML.

W przypadku HTTP/2, łączenie CSS niekoniecznie ma sens.

Wspomniane przed chwilą wtyczki Minify są powszechnie używane. Wynika to z faktu, że są one wygodne i dbają o kompresję i scalanie CSS (i wiele więcej) w pełni automatycznie. Do niedawna scalanie plików CSS również miało wiele sensu. W międzyczasie sytuacja uległa zmianie: od czasu wprowadzenia standardu HTTP/2 przeglądarki są w stanie ładować kilka plików z serwera WWW w tym samym czasie.

Oznacza to, że dane nie muszą być już koniecznie łączone, ponieważ dzięki HTTP/2 kilka pakietów danych może być wymienianych w tym samym czasie. HTTP/2 musi być skonfigurowany przez hostera i może być używany tylko z certyfikatem SSL.

Zanim więc zdecydujesz się na Plugin z kilkudziesięcioma funkcjami i możliwościami konfiguracji, dobrze się zastanów, czy w ogóle jest Ci to potrzebne. Zwłaszcza jeśli jesteś pewien, że potrafisz samodzielnie zoptymalizować CSS.

Ponieważ dodatkowa wtyczka może w pewnych okolicznościach spowolnić działanie Twojej witryny. Zwłaszcza jeśli inne funkcje wszechstronnej wtyczki nie mogą rozwinąć swojego pełnego potencjału.

Komunikat o błędzie 2: Usuń zasoby, które blokują renderowanie

Ta wiadomość również wywołuje krople potu na czołach wielu osób, ponieważ nie jest tak łatwa do wdrożenia i jest również jednym z odwiecznych punktów krytyki Google PageSpeed.

Znaczenie: Strona internetowa jest zbudowana w określonej kolejności. Ta kolejność ładowania może być zoptymalizowana. PageSpeed prawie zawsze narzeka, że pliki CSS blokują tę optymalną kolejność ładowania. Dotyczy to nawet stron, które zostały już bardzo dobrze zoptymalizowane(jak pokazuje przypadek Caspara Hübingera). Niemniej jednak wskazówka ta może być bardzo cenna dla optymalizacji czasu ładowania. Zasadniczo podpowiedź ta informuje, że kod JavaScript lub CSS, który jest ważny dla załadowania elementu - na przykład kolor tła - nie jest jeszcze dostępny w momencie ładowania elementu. Oznacza to, że nie zostanie on wyświetlony, dopóki nie zostanie załadowane odpowiednie polecenie CSS. Nie zwiększa to czasu ładowania Twojej witryny, ale ma wpływ na wrażenia użytkownika, ponieważ wydaje się, że ładowanie witryny trwa dłużej.

Implementacja: Powszechnym rozwiązaniem jest wdrożenie zasady: CSS w nagłówku. Oznacza to, że przenosisz kod CSS z głównej części dokumentu HTML, "body", na początek dokumentu, "head", i umieszczasz go tam jako "style".

Ten przykład jasno pokazuje, co mam na myśli. Poniższy fragment kodu definiuje kolor tła dla bloga. Element "style" jest ładowany w nagłówku dokumentu HTML. W ten sposób tło strony nie ładuje się na końcu dokumentu i nie tworzy nieestetycznego przeskoku kolorów, a nawet nie blokuje renderowania.

<head>
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #f5faff; }
</style>
</head>

Możesz wdrożyć ten środek optymalizacji na dwa sposoby: Możesz samodzielnie dotknąć kodu i przenieść kody CSS do nagłówka, lub możesz pozwolić wtyczce wykonać tę pracę.

Wtyczka Autoptimize, na przykład, przyjmuje wszechstronne podejście: Tutaj wybierasz opcje dla wszystkich plików CSS, które nie są wykluczone z procesu.

Fragment opcji wtyczki pokazuje: Nawet wariant wtyczki nie może być wdrożony bez podstawowego zrozumienia procesu. Musisz więc również zapoznać się z wtyczkami.

Komunikat o błędzie 3: Skuteczne kodowanie obrazów

To kolejny punkt, na który PageSpeed Insights często narzeka. Jednak ten przypadek jest prawie zawsze szybki i łatwy do wdrożenia i zazwyczaj przynosi wymierne korzyści w zakresie czasu ładowania.

Znaczenie: Wiele osób nie docenia roli rozmiaru obrazu dla czasu ładowania ich strony internetowej. Tymczasem obrazy są bardzo często jednym z największych hamulców czasu ładowania. Nawet jeśli tylko niewielkie ilości danych są zapisywane dla poszczególnych obrazów, całkowita ilość zapisanych danych może sumować się do znacznej ilości danych.

Ponieważ obraz rzadko jest tylko obrazem. WordPress automatycznie generuje kilka miniaturek obrazu podczas przesyłania. Jeśli więc nie używasz oryginałów na swojej stronie głównej, ale ich mniejsze wersje, np. miniaturki lub wyróżnione obrazy, to oczywiście one również powinny być zoptymalizowane. Jeden obraz szybko staje się kilkoma plikami, które również niosą ze sobą wielokrotny ładunek danych.

Wykonanie: W zasadzie masz dwie możliwości optymalizacji swoich zdjęć. Albo optymalizujesz obrazy przed załadowaniem, albo po lub w trakcie ładowania. Pierwszy można zrobić za pomocą narzędzi online lub offline, drugi można zrobić za pomocą odpowiednich WordPress wtyczek optymalizacji obrazu.

Jeśli możesz zintegrować kompresję z przepływem pracy, warto zoptymalizować obrazy przed ich przesłaniem. Istnieją do tego narzędzia online, takie jak Kraken.io. Możesz też zmniejszyć jakość, a tym samym rozmiar plików obrazów w trybie offline, na przykład bezpośrednio w programie Photoshop. Dzięki temu zaoszczędzisz na dodatkowej wtyczce i zachowasz smukłą stronę internetową.

Wygodniejszym rozwiązaniem jest oczywiście wtyczka. Wtyczki takie jak Optimus lub Smush optymalizują nie tylko główny obraz, ale także wszystkie jego odmiany. Smush jest również w stanie zoptymalizować wszystkie Twoje istniejące obrazy.

Plugins działa między innymi w oparciu o tzw. kompresję bezstratną. Oznacza to, że rozmiar pliku obrazów jest zmniejszony, ale ich widoczna jakość nie ulega pogorszeniu.

Komunikat o błędzie 4: Włącz kompresję tekstu

Ten komunikat o błędzie Google PageSpeed jest bardzo szybki do naprawienia i może znacznie skrócić czas ładowania Twojej witryny.

Znaczenie: Zmniejszyłeś już rozmiar obrazów i CSS swojej witryny tak bardzo, jak to możliwe. To dobrze! Ale to nie wszystko. Teraz możesz użyć innego mechanizmu kompresji. Prawdopodobnie znasz ten proces z pobierania dużych pakietów danych: Zwykle masz je w postaci zzipowanej, czyli skompresowanej. Dzięki temu dane są mniejsze, a pobieranie szybsze. Jednak pakiety danych nadal muszą zostać rozpakowane po pobraniu. Dokładnie to samo dzieje się podczas ładowania strony: Serwer WWW dostarcza skompresowane pakiety danych, a serwer WWW je rozpakowuje. Dzięki temu transfer danych jest szybszy, a czas ładowania strony krótszy.

Wdrożenie: Albo kompresja danych jest już ustawiona na serwerze, albo musisz ją aktywować samodzielnie. Raidboxes W tym przypadku nie musisz się o nic martwić. Domyślnie aktywowaliśmy szczególnie silnąkompresję Brotli.

Za pomocą poniższego wpisu w pliku .htaccess możesz również ręcznie aktywować tak zwaną kompresję GZIP. Pod warunkiem, że posiadasz serwer Apache.

<ifModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
 </ifModule>
 
 <IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 </IfModule>

Komunikat o błędzie 5: Dostarczaj statyczną zawartość z wydajną polityką pamięci podręcznej 

PageSpeed InsightsMoim zdaniem odniesienie do buforowania przeglądarki jest zdecydowanie najbardziej irytujące w Google . Dzieje się tak, ponieważ możesz skonfigurować buforowanie przeglądarki tylko dla własnych zasobów. Buforowanie przeglądarki nie jest możliwe dla zasobów zewnętrznych.

Znaczenie: Buforowanie przeglądarki oznacza, że przeglądarka zapisuje statyczną wersję Twojej strony internetowej i nie musi jej żądać z serwera internetowego, gdy odwiedzasz ją ponownie, ale strona jest już załadowana.

Wdrożenie: Albo twój hostingodawca już aktywował buforowanie przeglądarki po stronie serwera, albo możesz je ustawić, manipulując plikiem .htaccess (pamiętaj: to ustawienie działa tylko na serwerach Apache). Na przykład poniższy przykładowy kod ustawia pamięć podręczną przeglądarki na jeden miesiąc, tj. statyczna wersja Twojej witryny jest przechowywana w przeglądarce odwiedzającego przez jeden miesiąc.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>

Raidboxes Jeśli jesteś klientem, buforowanie przeglądarki jest już domyślnie aktywne.

Moja opinia: Bez pamięci podręcznej wszystko jest niczym

Dobrze, teraz zoptymalizowałeś obrazy swojej witryny, zredukowałeś CSS, skompresowałeś je i ułożyłeś we właściwej kolejności oraz sprawiłeś, że przeglądarka odwiedzających buforowała witrynę. Wszystkie te środki skracają czas ładowania Twojej witryny.

Znaczenie: Bez odpowiedniej pamięci podręcznej oddajesz jednak wiele z tego potencjału. Buforowanie jest i pozostaje zdecydowanie najważniejszym czynnikiem wpływającym na wydajność. Pamięć podręczna tymczasowo przechowuje zawartość Twojej witryny WordPress i zapewnia, że cała witryna nie musi być za każdym razem ponownie ładowana. Zamiast tego statyczna, tj. już wyrenderowana wersja Twojej witryny jest dostarczana z pamięci podręcznej. Pozwala to ominąć powolny PHP, a w szczególności bazę danych.

Wdrożenie: Ponownie, albo Twój hostingodawca skonfigurował już pamięć podręczną po stronie serwera, albo korzystasz z wtyczki buforującej. Istnieje kilka bardzo potężnych wtyczek, które buforują duże części Twojej witryny i prowadzą do znacznego skrócenia czasu ładowania przy powtarzających się wizytach na stronie.

Duża moc wtyczek buforujących jest również ich największą słabością. Może się zdarzyć, że wtyczka buforująca początkowo spowolni Twoją witrynę dla osób odwiedzających ją po raz pierwszy. Ponieważ im bardziej skomplikowany jest twój blog lub strona internetowa, tym bardziej skomplikowany i rozbudowany musi być silnik pamięci podręcznej, który buforuje twój blog. Jest to szczególnie istotne w przypadku sklepów internetowych.

Jeśli prowadzisz stosunkowo prostą stronę internetową, to minimalistyczne rozwiązania mogą być lepsze niż buforowanie "jack-of-all-trades". Jedną z takich oszczędnych wtyczek jest na przykład Cache Enabler.

Powinieneś zauważyć, że wtyczki buforujące zazwyczaj przejmują również redukcję i scalanie CSS lub JavaScript. Dlatego powinieneś sprawdzić, czy twoja wtyczka do buforowania nie czyni już wtyczek do optymalizacji CSS zbędnymi.

Jeśli korzystasz z buforowania po stronie serwera, zaleca się dezaktywację funkcji buforowania wtyczek, takich jak Autoptimize, lub przetestowanie, czy w ogóle przynoszą one dalsze korzyści w zakresie wydajności.

Wniosek: Dużo się dzieje dzięki kilku wtyczkom

Zauważyłeś to już podczas czytania: do optymalizacji CSS, obrazów i optymalizacji kolejności ładowania istnieją wtyczki, które zdejmują z Ciebie wiele pracy. Ale nie całą pracę. Wtyczki do buforowania również szybko przynoszą zauważalny efekt, ale czasami są bardzo rozbudowane i oferują wiele opcji konfiguracyjnych, a czasami zbędne funkcje.

W każdym razie przyjrzyj się bliżej wtyczkom, których używasz. Tylko wtedy, gdy wiesz, co się dzieje, gdy używasz określonych funkcji, możesz rozsądnie optymalizować. Przeładowanie witryny wtyczkami optymalizacyjnymi zwykle nie przynosi nic dobrego.

Podczas optymalizacji powinieneś upewnić się, że prawidłowo mierzysz swój sukces. Nie ma znaczenia, czy optymalizujesz ręcznie, czy za pomocą wtyczki. PageSpeed Insights Użyj jako pierwszego punktu odniesienia, aby zidentyfikować słabe punkty swojej witryny. Następnie zmierz czas ładowania witryny przed optymalizacją. Dopiero po zarejestrowaniu sytuacji początkowej naprawdę ma sens optymalizacja witryny krok po kroku. Tylko wtedy, gdy znasz czas ładowania przed optymalizacją i po każdym kroku optymalizacji, możesz określić, co osiągnęły poszczególne środki optymalizacji.