Zamknij się, Google PageSpeed! Naprawić najważniejsze komunikaty o błędach

Tobias Schüring Ostatnia aktualizacja w dniu 21.10.2020 r.
11 Min.
Komunikaty o błędach GooglePageSpeed Insights
Ostatnia aktualizacja w dniu 21.10.2020 r.

Google PageSpeed Insights jest doskonałym narzędziem do szybkiego przeglądu potencjału optymalizacyjnego Twojej strony. Dzisiaj pokażę Ci jak możesz wykorzystać ten potencjał i zwiększyć swój wynik PageSpeed. Ale nie należy niewolniczo śledzić wyników Google. Ponieważ komunikaty o błędach PageSpeed są nie zawsze użyteczny.

Jakiś czas temu, nasz kolega Caspar Hübinger jeden z jego postów na blogu Postpowiedzmy, bardzo jasne słowa dla jego Google PageSpeed Insights-Znaleziono wynik. I krytykuje nie tylko narzędzie, ale także jego wykorzystanie przez użytkowników. Bo jeśli nie wiesz, jak interpretować i naprawiać indywidualne propozycje optymalizacji, możesz szybko zatracić się w absurdalnym polowaniu na 100 ocen. Ale to byłoby nierozsądne. Ponieważ utopijne wysokie oceny Google PageSpeed są zazwyczaj stratą czasu. Ważniejsza jest optymalizacja czasu załadunku.

Dzisiaj pokażę Wam, jak interpretować najważniejsze komunikaty o błędach Google PageSpeed Insights i jak odpowiednio zoptymalizować Waszą stronę.

Zanim jednak pokażę wam, jak interpretować poszczególne komunikaty o błędach i jak je naprawiać, chciałbym wyjaśnić, jak prawidłowo korzystać z GooglePageSpeed Insights . Ponieważ często widzieliśmy, że użytkownicy są bardzo ustabilizowani na swoim PageSpeed score bez zwracania uwagi na czas ładowania ich strony.

Jeśli ta sekcja cię nie interesuje, po prostu go pominąć i dowiedzieć się bezpośrednio, jak naprawić komunikat o błędzie "Compress CSS".

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

Nigdy nie należy polegać wyłącznie na wynikach lub komunikatach o błędach z GooglePageSpeed Insights . Narzędzie Google nie mierzy najważniejszego parametru Twojej strony: czasu ładowania strony. Aby to prawidłowo zmierzyć, zalecam webpagetest.org.

Tylko wtedy, gdy od początku optymalizacji strony będziesz miał oko na czas ładowania strony, będziesz mógł wygłaszać sensowne stwierdzenia o sukcesie optymalizacji. Ponieważ celem każdej optymalizacji powinna być zawsze lepsza obsługa użytkownika. W przypadku optymalizacji wydajności jest to oczywiście czas obciążenia strony i postrzegany czas obciążenia strony.

UWAGA!

Zawsze najpierw należy zmierzyć czas obciążenia strony, zanim zoptymalizuje się wydajność strony. Tylko w ten sposób można ocenić, jak skuteczna była optymalizacja.

Z perspektywy użytkownika, szybszy czas ładowania strony i mniejszy rozmiar strony są zawsze zaletą. Cierpliwość i uwaga przeciętnego użytkownika stale się zmniejsza (jak wynika z badania przeprowadzonego przez firmę Microsoft) - ma to szczególne znaczenie dla handlu elektronicznego - a coraz więcej odwiedzających przybywa za pośrednictwem urządzeń przenośnych. Już w 2016 r. 56 procent Niemców regularnie korzysta z Internetu za pomocą smartfonów lub tabletów Zadzwonił. Prędkości połączeń i ilości danych nie zawsze są nieograniczone. Smukłe, szybkie strony są zatem odpowiednie.

Google PageSpeed daje jednak tylko podpowiedzi na temat potencjału optymalizacyjnego Państwa strony i pozwala tylko na kilka wniosków na temat doświadczeń użytkownika. Niska wartość informacyjna komunikatów o błędach Google PageSpeed jest wzmocniona przez fakt, że narzędzia nie można wyłączyć w pewnych obszarach lub tylko przy znacznych dodatkowych kosztach.

Na przykład odniesienie do buforowania w przeglądarce pojawi się zawsze, gdy zintegrowane zostaną zewnętrzne zasoby - w tym własne usługi Google. Ale te zasoby nie mogą być pokryte przez cache przeglądarki internetowej. Komunikat o błędzie nie ma żadnego znaczenia dla doświadczenia użytkownika Twojej strony, ale jest tworzony przez logikę samego narzędzia. W najgorszym przypadku komunikat zostanie zinterpretowany tak, jakby nie było aktywnego buforowania przeglądarki.

Więc nie oceniaj przede wszystkim na podstawie oceny Google, ale na podstawie czasu ładowania. To jest jedyna naprawdę ważna zmienna.

Ale co z moim rankingiem Google?

Przykład brakującego cachowania przeglądarki bardzo wyraźnie pokazuje, dlaczego nie należy się martwić o rzekomo zły wynik PageSpeed.

Na przykład, jeśli zintegrowałeś Google Maps lub Google Analytics na swojej stronie, spowodują one następujący komunikat o błędzie:

Typowe komunikaty o błędach GooglePageSpeed Insights: Buforowanie przeglądarki jest rzekomo niewłaściwie wykorzystywane

To samo dotyczy innych usług osób trzecich. Na przykład nasz czat wsparcia technicznego.

Więc za każdym razem, gdy PageSpeed Insights testujemy naszą stronę, ten punkt jest zamaskowany. Oznacza to, że wiemy, iż czynnik ten zawsze wypacza nasze wyniki w sposób negatywny i dlatego po prostu go ignorujemy.

Dla SEO Twojej strony oznacza to: Również dla rankingu w Google czas ładowania i wrażenia użytkownika są znacznie ważniejsze niż rzeczywista ocena PageSpeed.

Ponieważ jeśli zoptymalizujesz czas ładowania swojej strony, będziesz automatycznie edytować wiele obszarów, które są ważne dla Google. Tak więc poprawa czasu ładowania i wynik Google PageSpeed są w pewien sposób powiązane.

Ale moim zdaniem nie powinieneś zgubić się w polowaniu na 100 ratingów.

Ale teraz do etapu optymalizacji!

Komunikat o błędzie 1: Skompresuj CSS

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

Zamknij się, Google PageSpeed! Naprawić najważniejsze komunikaty o błędach

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

Wykonanie: Nawet jeśli to odniesienie ma skutek odstraszający, wykonanie jest bardzo proste. W zasadzie istnieją dwa możliwe rozwiązania dla tego przypadku: Jeśli sam wpasujesz się w CSS, możesz ręcznie zredukować liczbę plików CSS i utworzyć Forma skrócona użycie. Z plików CSS można również korzystać za pomocą narzędzi online, takich jak Sprężarka CSS czy CSS Minifier...samemu.

Zamknij się, Google PageSpeed! Naprawić najważniejsze komunikaty o błędach

Oczywiście istnieje również wygodne rozwiązanie wykorzystujące miniaturyzację CSS -Plugins na stronie WordPress . Niektóre strony Plugins robią bezpośrednio odwrotnie i mogą kompresować i optymalizować nie tylko CSS, ale także JavaScript i HTML.

Dalsze informacje

Szczegółowe objaśnienie sposobów redukcji w WordPress HTML, CSS i JavaScript znajduje się na stronie w tym artykule.

W przypadku HTTP/2, łączenie CSS nie musi mieć sensu.

Kopalnia -Plugins właśnie wspomniana - jest szeroko stosowana. Ponieważ są one wygodne i przejmują kompresję i podsumowanie CSS (i wiele innych) w pełni automatyczne. Do niedawna łączenie plików CSS również miało wiele sensu. Teraz jest inaczej: Od kiedy HTTP/2 Norma Przeglądarki są w stanie załadować wiele plików jednocześnie z serwera WWW.

Oznacza to, że dane nie muszą być już łączone, ponieważ HTTP/2 pozwala na jednoczesną wymianę kilku pakietów danych. HTTP/2 musi być np. ustawiony przez hostera i może być uruchomiony tylko z certyfikat SSL może być używany.

Zanim więc zdecydujesz się na jeden Plugin z kilkudziesięciu funkcji i opcji konfiguracyjnych, zastanów się dokładnie, czy w ogóle go potrzebujesz. Zwłaszcza jeśli uważasz, że możesz sam zoptymalizować CSS.

Ponieważ dodatkowy Plugin może spowolnić Twoją stronę w pewnych okolicznościach. Zwłaszcza jeśli inne funkcje wszechświata niePlugins mogą rozwinąć swojego pełnego potencjału.

Komunikat o błędzie 2: Usuń rendering blokujący zasoby

Ta wiadomość sprawia również, że wielu użytkowników poci się, ponieważ nie jest tak łatwo wdrożyć i jest również jednym z odwiecznych krytyków Google PageSpeed.

Zamknij się, Google PageSpeed! Naprawić najważniejsze komunikaty o błędach

Znaczenie: Strona internetowa jest budowana w określonej kolejności. To zlecenie załadunku może być zoptymalizowane. PageSpeed prawie zawsze skarży się, że pliki CSS blokują tę optymalną kolejność ładowania. Odnosi się to nawet do stron, które są już bardzo dobrze zoptymalizowane (jak pokazuje sprawa Caspara Hübingera). Niemniej jednak, notatka ta może być bardzo cenna dla optymalizacji czasu obciążenia. Zasadniczo, ta podpowiedź mówi, że kod JavaScript lub CSS, który jest ważny dla danego elementu do załadowania - na przykład kolor tła - nie jest jeszcze dostępny w momencie ładowania elementu. Dlatego nie będzie on wyświetlany, dopóki nie zostanie załadowane odpowiednie polecenie CSS. Wydłuża to czas ładowania strony, ale przede wszystkim wpływa na komfort użytkowania, ponieważ strona ładuje się dłużej.

Wdrożenie: Wspólnym rozwiązaniem jest wdrożenie zasady: CSS w nagłówku. Oznacza to, że przenosisz kod CSS z korpusu dokumentu HTML, z , na górę dokumentu, z , i go tam jako .

Ten przykład jasno pokazuje, o co mi chodzi. Poniższy fragment kodu definiuje nasz specyficzny kolor tła dla bloga.



Ten środek optymalizacyjny można wdrożyć na dwa sposoby: Możesz sam dotknąć kodu i przenieść kod CSS do nagłówka, lub pozwolić Plugin wykonać pracę. Ponownie, Plugins może pomóc również w tym przypadku, jak również Lepiej WordPress Minify Mów dalej.

Komunikaty o błędach PageSpeed Insights Google - wyciąg z programu Plugin Better WordPress  Minify

Minify-Plugin pokazuje na przykład w opcjach, które pliki CSS zostały już przeniesione do nagłówka. Możesz również ręcznie dodać więcej zasobów CSS tutaj.

Komunikaty o błędach Google PageSpeed Insights - wyciąg z wtyczki optymalizacyjnej Autoptimize

Natomiast Plugin Autoptimize jest rozwiązaniem uniwersalnym: Tutaj wybierasz opcje dla wszystkich plików CSS, które nie zostały wyłączone z procesu.

Fragmenty z opcji Plugins pokazu: Wariant pluginu nie może być wdrożony bez podstawowego zrozumienia procesu. Więc musisz Plugins się też nauczyć ich używać.

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

Również w tym momencie jest wiele narzekańPageSpeed Insights . Jednak ten przypadek jest prawie zawsze szybki i łatwy w realizacji i zazwyczaj przynosi wymierne korzyści w zakresie czasu załadunku.

Zamknij się, Google PageSpeed! Naprawić najważniejsze komunikaty o błędach

Celowe znaczenie: Wielu użytkowników nie docenia roli rozmiaru obrazu dla czasu ładowania ich strony. A obrazy są bardzo często jednym z największych hamulców czasu ładowania. Nawet jeśli na poszczególnych zdjęciach zapisywane są tylko niewielkie ilości danych, całkowita zapisana ilość może się sumować do znacznej ilości danych.

Ponieważ obraz rzadko jest tylko jednym obrazem. automatycznie WordPress generuje kilka miniaturek obrazu podczas przesyłania. Więc jeśli nie używasz oryginałów na swojej stronie domowej, ale ich mniejszych wersji, tj. miniatur lub Przedstawione obrazyto oczywiście należy je również zoptymalizować. Z jednego obrazu szybko stanie się kilka plików, które również wnoszą wiele danych z sobą.

Realizacja: Zasadniczo masz dwie możliwości zoptymalizowania swoich obrazów. Obrazy można optymalizować przed załadowaniem, po załadowaniu lub w trakcie ładowania. Pierwsze można zrobić za pomocą narzędzi online lub offline, drugie za pomocą odpowiednich WordPress Wtyczki poprawiające jakość obrazu.

Jeśli można sensownie zintegrować kompresję z przepływem pracy, sensowne jest zoptymalizowanie obrazów przed ich załadowaniem. W tym celu istnieją narzędzia online, takie jak Octopus.io. Możesz też zmniejszyć jakość, a co za tym idzie - rozmiar plików w trybie offline, na przykład bezpośrednio w programie Photoshop. W ten sposób oszczędzasz sobie dodatkowej Plugin pracy i zachowujesz smukłość swojej strony.

Bardziej komfortowym rozwiązaniem jest oczywiście Plugin. Dodatki takie jak Optimus czy Smush zoptymalizować nie tylko główny obraz, ale także wszystkie jego odmiany. Smush jest również w stanie zoptymalizować wszystkie istniejące obrazy.

Plugins Pracują oni między innymi z tzw. "bezstratna kompresja". Oznacza to, że podczas gdy rozmiar pliku obrazów jest zmniejszony, ich jakość widoczna nie zmniejsza się.

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

Ten komunikat o błędzie z Google PageSpeed może być naprawiony bardzo szybko i może znacznie skrócić czas ładowania strony.

Zamknij się, Google PageSpeed! Naprawić najważniejsze komunikaty o błędach

Celowe znaczenie: Skalowałeś już obrazy i CSS swojej strony tak bardzo, jak to możliwe. To jest to! Ale to jeszcze nie koniec. Bo teraz możesz użyć innego mechanizmu kompresji. Prawdopodobnie znasz ten proces z pobierania dużych pakietów danych: Zazwyczaj są one w formie zapinanej na zamek, skompresowanej. Powoduje to, że dane są mniejsze podczas pobierania, a zatem pobieranie jest szybsze. Jednak pakiety danych muszą być jeszcze rozpakowane po pobraniu. Dokładnie to samo dzieje się podczas budowania stron: Serwer WWW dostarcza pakiety danych w postaci skompresowanej, serwer WWW rozpakowuje je. Dzięki temu transfer danych jest szybszy i skraca się czas ładowania strony.

Implementacja: Albo kompresja danych jest już ustawiona po stronie serwera, albo trzeba ją aktywować samemu. Jeśli jesteś klientem RAIDBOXES , nie musisz się już o nic martwić. Ponieważ mamy szczególnie silnych Kompresja brotli Aktywny.

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


 mod_gzip_on Tak
 mod_gzip_dechunk Tak
 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.*
 
 
 
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE aplikacja/xml
 AddOutputFilterByType DEFLATE aplikacja/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE aplikacja/javascript
 AddOutputFilterByType DEFLATE aplikacja/x-javascript
 

Komunikat o błędzie 5: Dostarczenie statycznej treści z wydajną polityką buforowania 

Moim zdaniem, odniesienie do cachowania w przeglądarce jest zdecydowanie najbardziej irytujące w GooglePageSpeed Insights. Ponieważ można skonfigurować cachowanie przeglądarki tylko dla własnych zasobów. Buforowanie przeglądarki nie jest możliwe dla zasobów zewnętrznych.

Zamknij się, Google PageSpeed! Naprawić najważniejsze komunikaty o błędach

Znaczenie: Buforowanie przeglądarki oznacza, że przeglądarka przechowuje statyczną wersję Twojej strony i nie musi żądać od serwera WWW powtórnej wizyty, ale strona jest już załadowana.

Implementacja: Albo Twój hoster włączył już cachowanie przeglądarki po stronie serwera, albo możesz je ustawić poprzez manipulację plikiem .htaccess (pamiętaj: to ustawienie działa tylko na serwerach Apache). Przykładowo, poniższy przykładowy kod ustawia pamięć podręczną przeglądarki na jeden miesiąc, tzn. statyczna wersja strony jest przechowywana w przeglądarce odwiedzającego przez jeden miesiąc.


WygasaActive On
ExpiresDefault "dostęp 60 sekund
Wygasa przezType obraz/jpg "dostęp plus 1 miesiąc
Wygasa przezType image/jpeg "dostęp plus 1 miesiąc
Wygasa przezType image/gif "access plus 1 miesiąc".
Wygasa przezType image/png "access plus 1 miesiąc".
Wygasa przezType obraz/ico "dostęp plus 1 miesiąc
Wygasa przezType text/css "dostęp 1 miesiąc
Wygasa przezType text/javascript "dostęp 1 miesiąc
Wygasa na podstawie aplikacji ByType/skryptu JavaScript "dostęp 1 miesiąc
Wygasa przez aplikację ByType/x shockwave-flash "dostęp 1 miesiąc

Również tutaj obowiązuje: Jeśli jesteś RAIDBOXES klientem, to cachowanie przeglądarki jest już domyślnie aktywne.

Moje 2 centy: bez skrytki wszystko jest niczym

Cóż, teraz zoptymalizowałeś obrazy na swojej stronie, zredukowałeś CSS, skompresowałeś i ułożyłeś je w odpowiedniej kolejności oraz sprawiłeś, że przeglądarki Twoich gości buforowały stronę. Wszystkie te środki skracają czas ładowania strony na Twojej stronie.

Celowe znaczenie: Bez odpowiedniej pamięci podręcznej wybaczysz jednak wiele z tego potencjału. Caching jest i pozostaje zdecydowanie najważniejszym czynnikiem wydajności. Pamięć podręczna (cache) przechowuje tymczasowo zawartość Twojej WordPress strony i zapewnia, że cała strona nie musi być za każdym razem przeładowana. Zamiast tego, statyczna, już wyrenderowana wersja Twojej strony jest dostarczana z pamięci podręcznej. Omija to szczególnie powolne PHP i bazę danych.

Wdrożenie: Ponownie obowiązuje: Albo twój gospodarz już bufor po stronie serwera albo możesz użyć cache'aPlugin. Oto kilka bardzo potężnych Pluginsrozwiązań, które bufokują duże części strony i prowadzą do znacznego skrócenia czasu ładowania powracających użytkowników.

Duża potencja buforowaniaPlugins jest również jego największą słabością. Może się zdarzyć, że buforowaniePlugin spowolni Twoją stronę dla osób odwiedzających ją po raz pierwszy. Im bardziej skomplikowany jest Twój blog lub witryna, tym bardziej skomplikowany i rozbudowany musi być silnik pamięci podręcznej, który buforował Twój blog. Jest to szczególnie istotne w przypadku sklepów.

Jeśli prowadzisz stosunkowo prostą stronę internetową, minimalistyczne rozwiązania mogą być lepsze niż buforowanie uniwersalnych rozwiązań. Jednym z tych smukłych Plugins rozwiązań jest na przykład bufor.

Należy zauważyć, że buforowanie jestPlugins zwykle używane również do redukcji i łączenia CSS lub JavaScript. Dlatego należy sprawdzić, czy buforowaniePlugin nie sprawia, że optymalizacja Plugins CSS jest zbędna.

Jeśli używasz buforowania po stronie serwera, zalecane jest wyłączenie funkcji buforowaniaPlugins, takich jak Autoptimize, lub przetestowanie ich raz, jeśli przynoszą one dodatkową korzyść w zakresie wydajności.

Wniosek: Plugins Dużo przesunąć z zaledwie kilkoma

Zauważyłeś to już podczas czytania: Dla optymalizacji CSS, obrazów i optymalizacji kolejności ładowania Pluginssą takie, które oszczędzają wiele pracy. Ale nie cała ta praca. CachingPlugins również szybko daje zauważalny efekt, ale czasami jest bardzo rozbudowany i oferuje wiele opcji konfiguracyjnych i częściowo nadmiarowe funkcje.

Upewnij się, że dokładnie przyjrzysz się tym, których Pluginsużywasz. Tylko wtedy, gdy wiesz, co się dzieje, gdy używasz pewnych funkcji, możesz rozsądnie zoptymalizować. Przeciążenie strony z optymalizacjąPlugins zwykle nie przynosi zbyt wiele.

A przy optymalizacji należy upewnić się, że prawidłowo mierzysz swoje sukcesy. Nieważne, czy optymalizujesz ręcznie czy przez Plugin internet. Użyj PageSpeed Insights jako pierwszego punktu orientacyjnego, aby zidentyfikować słabe punkty swojej strony. Następnie zmierzyć czas załadunku Twojej strony przed jej optymalizacją. Dopiero po zarejestrowaniu sytuacji wyjściowej naprawdę sensowna jest optymalizacja strony krok po kroku. Ponieważ tylko wtedy, gdy zna się czas załadunku przed i po każdym etapie optymalizacji, można określić, jakie indywidualne działania optymalizacyjne zostały osiągnięte.

Jako administrator systemu Tobias czuwa nad naszą infrastrukturą i znajduje wszelkie możliwe sposoby na optymalizację wydajności naszych serwerów. Dzięki jego niestrudzonym wysiłkom często można go Slack znaleźć w nocy.

Artykuły pokrewne

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola oznaczone są * Zaznaczone.