Jak zdać test szybkości Google dzięki Pagespeed Insights

Kto chce czekać wieki na załadowanie strony? Zwłaszcza na urządzeniach mobilnych. Dobry wynik testu szybkości Google jest niezbędny dla Twojej witryny.

Szybkość strony i podstawowe wskaźniki sieciowe są dziś kluczowe i nie ma powodu, aby mieć wolne czasy ładowania strony lub witryny, zwłaszcza w przypadku witryn WordPress.

Jeśli Twój średni czas ładowania witryny jest dłuższy niż trzy do pięciu sekund przy użyciu testu szybkości witryny, tracisz ruch. Twój współczynnik odrzuceń będzie wysoki, ponieważ czytelnicy nie będą czekać i oglądać białego ekranu.

Wydajność witryny jest istotnym czynnikiem SEO i pomoże Ci poprawić pozycję w wyszukiwarce i współczynnik konwersji. W rzeczywistości Google ma teraz mobilny priorytet Core Web Vitals w rankingu słów kluczowych i stron.

Jak upewnić się, że Twój blog jest aktualny

Na wyniki testu prędkości wpływa wiele czynników.

Usługi internetowe oferujące testy szybkości różnią się w zależności od kraju, a nawet miasta.

Jeśli przetestowałeś swoje połączenie z Internetem, będziesz wiedział, że prędkość pobierania i wysyłania zależy od dostawcy usług oraz skuteczności sprawdzania połączenia internetowego i Wi-Fi.

Jednak dzięki Google Speed ​​Test przy użyciu Pagespeed Insights możesz uzyskać ogólny przegląd szybkości pobierania i wydajności witryny dla odwiedzających ją osób.

Nie ma potrzeby myśleć, że zdobycie 100 jest zawsze głównym celem. Możesz stracić dużo czasu na pogoni za perfekcją w wydajności sieci. Ale uzyskanie zielonych wyników jest stosunkowo łatwe i będzie oznaczać, że Twoja witryna ma dobre wyniki.

Just Publishing Advice ma wiele wbudowanych funkcji, widżetów i obrazów, ale nadal osiąga bardzo dobre wyniki pod względem szybkości witryny. Oto krótkie spojrzenie na wydajność witryny.

Wynik mobilny jest zwykle nieco niższy, ponieważ Google obniża wynik, jeśli nie używasz obrazów w formatach nowej generacji.

Obecnie byłoby to bardzo duże zadanie dla każdego bloga, ponieważ wymaga zastąpienia każdego obrazu w witrynie plikami graficznymi JPEG 2000, JPEG XR lub WebP. Większość blogerów może zignorować to ostrzeżenie i nadal używać plików obrazów JPEG i PNG.

Jak przetestować szybkość witryny

Test szybkości Google daje dobrą przybliżoną miarę szybkości Twojej witryny.

Możesz również sprawdzić średni czas ładowania strony w Google Analytics. Nie dostarcza jednak informacji potrzebnych do szczegółowej analizy wydajności witryny.

Potrzebujesz lepszych narzędzi SEO, aby wykonać tę pracę.

Jeśli wszystkie Twoje dane laboratoryjne są zielone, wszystko jest w porządku. Ale jeśli Twoje oceny są pomarańczowe lub czerwone, musisz podjąć pewne działania.

W zależności od tego, jak duży ruch uzyskasz, możesz zobaczyć swoją ocenę Core Web Vitals lub nie.

Mierzy rzeczywiste dane dotyczące szybkości użytkownika z przeglądarki Chrome.

Jest to test pozytywny lub negatywny, jeśli masz wystarczająco dużo ruchu, aby wygenerować raport.

Te raporty zawierają wskazówki, gdzie można poprawić wydajność witryny.

Ale narzędzia do testowania szybkości strony Google nie pomagają zbytnio w śledzeniu i naprawianiu problemów.

Znajdowanie sposobów rozwiązywania problemów

Znacznie lepszym sposobem sprawdzenia szybkości witryny jest użycie GTMetrix.

Jest open source i wykorzystuje wynik Google Pagespeed oraz YSlow Yahoo, i dostarcza znacznie więcej informacji niż Google.

Kiedy monitorujesz wydajność i mierzysz swoją prędkość, musisz sprawdzić dwa czasy.

Podczas gdy większość usług testowych wykorzystuje czas pełnego załadowania do pomiaru wydajności witryny, nie jest to najważniejsza statystyka.

Najdokładniejszą miarą prędkości witryny w świecie rzeczywistym jest czas ładowania Document Object Model (DOM).

Jest to moment w procesie ładowania witryny, w którym strona internetowa jest aktywna dla użytkownika.

Dla mnie jest to najważniejsza statystyka przy mierzeniu rzeczywistej szybkości strony internetowej.

Na poniższym obrazku widać, że podczas gdy czas pełnego załadowania wynosi 1,9 sekundy, czas załadowania DOM to tylko 1,3 sekundy.

Oto inny widok poniżej. Czerwona linia oznaczona strzałką to punkt załadowany DOM.

Możesz zobaczyć, że elementy, które nie są potrzebne w pierwszym widoku użytkownika, są ładowane później.

Elementy wczytywane później to zwykle obrazy ładowane z opóźnieniem i pliki javascript, które są odkładane do czasu, gdy będą potrzebne, aby Twoja strona działała lepiej.

Za każdym razem, gdy sprawdzasz swoją witrynę, zawsze zwracaj szczególną uwagę na czas ładowania DOM, ponieważ jest to o wiele dokładniejszy pomiar szybkości witryny dla użytkownika.

Przeprowadź także test dwa lub trzy razy, ponieważ prędkość Internetu zmienia się z minuty na minutę.

Możesz uzyskać lepszy pomysł, uśredniając swoje wyniki w ciągu, powiedzmy, godziny lub dłużej.

Wszystkie testy prędkości Internetu mają tę naturalną zmienność, więc nie martw się, że uzyskasz jeden przypadkowy zły wynik.

Możesz również sprawdzić na innych stronach z testami prędkości.

Jeśli Twoja witryna nie otrzymuje zielonych ocen od Google i GTMetrix, oto jedenaście prostych, szybkich i łatwych sposobów rozwiązania problemu i zadowolenia odwiedzających witrynę i wyszukiwarek.

1. Najpierw wyczyść bałagan na pasku bocznym

Pierwszą rzeczą, którą powinieneś zrobić, to sprawdzić pasek boczny. Czy potrzebujesz tych wszystkich widżetów i reklam? W rzeczywistości, czy naprawdę potrzebujesz paska bocznego?

Powinieneś myśleć o swoich stronach jako o najlepszych nieruchomościach.

Ile cennego obszaru jest marnowane w Twojej witrynie przez elementy, które nie służą rzeczywistemu celowi i spowalniają Twoją witrynę?

Zaśmiecona strona internetowa jest również trudna do odczytania, ponieważ zawiera zbyt wiele elementów rozpraszających uwagę.

Większość elementów paska bocznego przyspiesza ładowanie, więc im więcej możesz usunąć, tym lepiej.

2. Unikaj treści na stronie zależnych od witryn zewnętrznych

Jednym z najgorszych winowajców spowalniania strony internetowej i niepowodzenia testu szybkości Google jest przycisk „Lubię to” na Facebooku.

Twoja strona musi czekać na Facebooka, zanim się załaduje. Jest to powszechny problem z większością widżetów mediów społecznościowych i przycisków udostępniania.

Niektóre mogą dodać do dwóch sekund lub więcej do czasu ładowania strony.

Jeśli potrzebujesz udostępniania w mediach społecznościowych, poszukaj lekkiej wtyczki.

Inne usługi internetowe, które mogą spowalniać elementy w Twojej witrynie, to reklamy i widżety Amazon oraz duże banery reklamowe Google.

Jeśli masz Google Adsense, spróbuj użyć reklam w artykule zamiast dużych banerów reklamowych i ustaw saldo reklam na około 70-80 procent.

W przeciwieństwie do tego, co możesz przeczytać o Adsense, witryna nie jest zbytnio obciążona, jeśli korzystasz z reklam w artykule.

Oto strona w naszej witrynie z Google Ads mierzona przez GTmetrix.

Wpływ na czas ładowania jest minimalny.

Przy dwóch reklamach czas pełnego załadowania jest idealny i wynosi nieco ponad dwie sekundy, a DOM ładuje się w 1,6 sekundy.

Ponadto reklamy ładują się z opóźnieniem, co oznacza, że ​​strona nie czeka w Google na wyrenderowanie.

3. Sprawdź wolne pliki javascript

Każdy element, który masz na swojej stronie, potrzebuje czasu, aby się załadować.

Wypełnianie witryny mnóstwem wtyczek, widżetów i dodatków wiąże się z ogromnym kosztem szybkości.

Oto ocena GTMetrix strony internetowej, która naprawdę wymaga pilnej uwagi. Ładowanie strony w 12,4 sekundy jest dziś fatalne.

Możesz użyć GTMetrix, aby zlokalizować każdy element spowalniający Twoją witrynę.

Kliknij znak + obok każdego polecenia GET, aby dowiedzieć się, co spowalnia Twoją witrynę i co należy naprawić, usunąć lub zoptymalizować.

Witrynę taką jak ta powyżej można szybko ulepszyć, wykonując trzy bardzo proste czynności.

Poniższe trzy punkty wyjaśnią dodawanie pamięci podręcznej, zmniejszanie i agregowanie CSS i JavaScript oraz leniwe ładowanie obrazów.

Wszystkie trzy zalecane poniżej wtyczki są bezpłatne.

4. Zainstaluj Całkowitą pamięć podręczną W3

Istnieje wiele bardzo dobrych wtyczek do buforowania dla WordPress, w tym WP Super Cache i WP Fastest Cache.

Ale korzystam z W3 Total Cache od ponad dziesięciu lat we wszystkich moich witrynach.

Istnieje wiele ustawień, których możesz użyć ze wszystkimi tymi wtyczkami, aby wykorzystać buforowanie przeglądarki, ale są tylko dwa, które musisz ustawić i używać.

Oto ustawienia Total Cache. Ale są one podobne dla wszystkich wtyczek buforujących.

Wystarczy aktywować przeglądarkę i pamięć podręczną strony.

Te dwa ustawienia przyspieszą Twoją witrynę, przechowując w pamięci podręcznej elementy witryny, które się nie zmieniają, takie jak nagłówki, stopki, elementy paska bocznego i menu.

5. Zainstaluj Autooptymalizację

Większość wtyczek do buforowania może również minimalizować i agregować JavaScript i CSS.

Chociaż wszystkie działają całkiem dobrze, niektóre mogą być bardzo skomplikowane w konfiguracji.

Używam Autoptimize do wykonania tej pracy, ponieważ jest szybsza, łatwiejsza w konfiguracji i znacznie wydajniejsza. W rzeczywistości możesz to skonfigurować w mniej niż minutę.

Zmniejsza rozmiar wszystkich plików CSS i JavaScript, a następnie łączy je w jeden plik CSS i jeden plik JavaScript.

Te dwa pliki następnie ładują się tak, że nie blokują renderowania, co często stanowi problem z testem szybkości Google dla niektórych witryn.

Minifikacja i agregacja mają ogromny wpływ na szybkość witryny.

Oto ustawienia, których używam we wszystkich moich witrynach.

Kolejną dodatkową korzyścią z Autoptimize jest to, że wsparcie jest fantastyczne.

6. Zainstaluj leniwe ładowanie a3

Gdy użytkownik odwiedza Twoją witrynę, wszystkie obrazy, które masz na stronie internetowej, muszą zostać załadowane, zanim strona stanie się aktywna i użyteczna dla gościa.

Dzięki leniwemu ładowaniu wszystkie obrazy, które nie pojawiają się na ekranie użytkownika, są ładowane tylko podczas przewijania.

Takie postępowanie ma ogromny wpływ na szybkość witryny, ponieważ obrazy będą ładowane po pełnym załadowaniu modelu DOM.

Wypróbowałem kilka różnych wtyczek, zanim zdecydowałem się na a3 Lazy Load. Wygrywa pod względem wydajności i łatwości użytkowania.

Po zainstalowaniu możesz użyć ustawień domyślnych lub wprowadzić kilka poprawek.

Wtyczka będzie leniwie ładować wszystkie Twoje obrazy, filmy i ramki iFrame.

7. Zainstaluj WP Rocketa

Jeśli chcesz, aby opcja all-in-one zastąpiła trzy bezpłatne opcje powyżej, WP Rocket może zrobić wszystko i więcej.

Zamiast używać i konfigurować trzy wtyczki, możesz użyć WP Rocket, aby ustawić pamięć podręczną strony i przeglądarki, zminimalizować Javascript i CSS, a także leniwie załadować obrazy.

Może również zoptymalizować bazę danych i oferuje integrację z Cloudflare.

WP Rocket to ekonomiczne rozwiązanie typu „wszystko w jednym”, dzięki któremu Twoja witryna stanie się błyskawiczna w ciągu kilku minut przy niewielkim wysiłku.

8. Zmień rozmiar swoich zdjęć

Duże obrazy nie spowalniają szybkości witryny. Ale obrazy, które nie są dopasowane rozmiarem do strony internetowej, mogą znacznie spowolnić szybkość witryny.

Przed przesłaniem obrazów należy zawsze zmieniać ich rozmiar, aby uzyskać dokładnie taki rozmiar, jakiego potrzebujesz.

Jeśli chcesz mieć obraz o pełnej szerokości, powinien on mieć rozmiar zgodny z szerokością strony Twojego bloga.

Ta witryna ma szerokość 750 pikseli z paskiem bocznym 300 pikseli. Każdy obraz szerszy niż 750 pikseli spowalnia witrynę.

Ale nigdy nie dostosowuj rozmiaru obrazów w locie w polu szczegółów multimediów. Nie zmniejszy rozmiaru strony.

Jak widać, ten obraz ma szerokość 1218 pikseli. Wybranie dużego rozmiaru sprawi, że obraz będzie pasował.

Ale w rzeczywistości strona załaduje pełnowymiarowy obraz o rozdzielczości 1218 pikseli i spowolni prędkość witryny.

Nigdy nie używaj pola Szczegóły obrazu w WordPress do leniwego zmieniania rozmiaru obrazów.

Zawsze zmieniaj rozmiar obrazów przed przesłaniem, tak aby pełny rozmiar był rzeczywistym rozmiarem obrazu na Twojej stronie.

9. Optymalizuj obrazy

Smush to popularna wtyczka do zmniejszania obrazów przy użyciu kompresji stratnej. Korzystam z darmowej wersji i działa idealnie.

Jednak robię jeszcze jeden krok przed przesłaniem obrazu do którejkolwiek z moich witryn. Używam małej aplikacji komputerowej o nazwie ImageOptim.

Jak widać, stratna redukcja obrazów o około 80%.

Niestety jest dostępny tylko dla użytkowników komputerów Mac. Jeśli jesteś użytkownikiem systemu Windows, możesz użyć internetowego optymalizatora obrazu, aby uzyskać ten sam wynik.

Możesz także przeczytać wcześniejszy artykuł na temat zmniejszania obrazów.

10. Użyj Cloudflare CDN

Czy potrzebujesz korzystać z sieci dostarczania treści (CDN)?

To zależy. CDN przechowuje Twoje pliki statyczne na serwerach na całym świecie, aby Twoja witryna ładowała się nieco szybciej. Jeśli odwiedzający Twoją witrynę znajdują się w pewnej odległości od Ciebie, może to pomóc.

Ale jeśli Twoja witryna generuje głównie ruch lokalny, niewiele to pomoże.

Just Publishing Advice jest hostowane w Europie, ale duży procent ruchu pochodzi z USA. Dlatego sensowne jest użycie CDN.

Jeśli Twoja witryna jest hostowana na przykład w Australii, a duży ruch pochodzi z Wielkiej Brytanii i Stanów Zjednoczonych, prawdopodobnie warto rozważyć użycie sieci CDN.

Cloudflare jest popularny, wydajny i darmowy. Jest to więc dobry wybór.

Jednak potrzebujesz trochę umiejętności technicznych, aby wdrożyć go w swojej witrynie.

Możesz przeczytać więcej o konfigurowaniu Cloudflare z WordPress w naszym artykule z instrukcjami.

11. Sprawdzaj raz w tygodniu

Po ulepszeniu witryny za pomocą powyższych środków należy regularnie ją sprawdzać.

Na blogu zawsze coś się zmienia, więc warto śledzić swoje wyniki.

Przez większość czasu będziesz korzystać z Pagespeed Insights i GTMetrix.

Istnieje jednak jeszcze jeden bezpłatny test szybkości witryny, który możesz wykonać, aby sprawdzić wydajność swojej witryny w 25 lokalizacjach na całym świecie.

Dot-Com Tools testuje szybkość Twojej witryny w czasie rzeczywistym, dzięki czemu możesz zobaczyć, jak ocenia ją Twoja witryna.

Jest to bardzo dobre narzędzie testowe i przewodnik, jeśli zastanawiasz się, czy CDN jest dla Ciebie opłacalny.

Podczas testowania pamiętaj, że Google zaleca maksymalną prędkość pełnego załadowania strony wynoszącą 3 sekundy.

W WordPress jest to dość łatwe do osiągnięcia, jeśli skorzystasz z sugestii optymalizacji zawartych w tym artykule.

Streszczenie

Czy musisz zrobić wszystko, co jest wymienione w tym przewodniku?

WordPress po wyjęciu z pudełka zwykle działa całkiem dobrze, jeśli chodzi o szybkość.

Ale jeśli używasz powolnego motywu i dodajesz wiele wtyczek i używasz dużych obrazów, to tak, powinieneś rozważyć trochę pracy, jeśli Twoja witryna źle ocenia prędkość ładowania.

Inną przyczyną może być zawodny lub wolny serwer hosta. Jeśli musisz zmienić dostawcę, szybki host kosztuje tylko kilka dolarów miesięcznie.

Jeśli masz czerwony wynik w teście szybkości Google, zdecydowanie musisz pilnie popracować.

Jedna wskazówka to aktywacja domyślnego motywu WordPress, takiego jak Twenty Seventeen i ponowne przetestowanie. Większość motywów jest teraz responsywna, ale niektóre starsze motywy mogą powodować spowolnienie działania witryny.

Jeśli Twój motyw jest w porządku, głównymi priorytetami ulepszania witryny takiej jak ta na powyższym obrazku byłyby:

1. Zainstaluj wtyczkę buforującą.

2. Zainstaluj Autooptymalizację

3. Zainstaluj leniwy program ładujący

Wykonaj te trzy kroki, a wydajność Twojej witryny natychmiast się poprawi.

W przypadku obrazów instalacja Smush, a następnie optymalizacja zbiorcza, również bardzo pomoże.

Nie ma powodu, aby mieć powolną witrynę WordPress i nie zdać testu szybkości Google.

Jeśli zastosujesz dziesięć kroków wymienionych w tym artykule, Twoja witryna z łatwością przejdzie test Pagespeed Insight dla urządzeń mobilnych i komputerów stacjonarnych.