Jak osiągnąć 100 w Google PageSpeed ​​Insights (na WordPress)

Czy nie byłoby wspaniale, gdyby istniało narzędzie, które pomoże Ci przyspieszyć witrynę? Cóż, jest! Google PageSpeed ​​​​Insights to nazwa i jest to bezpłatna usługa, która jest pod ręką, aby rozwiązać problemy z powolną witryną. W tym artykule przyjrzymy się, co to jest, jak działa i jak możesz osiągnąć nieuchwytny wynik Google PageSpeed ​​Insights 100/100 w WordPress.

Co to jest Google PageSpeed ​​Insights?

Google PageSpeed ​​Insights to narzędzie online do mierzenia szybkości i wrażeń użytkowników Twojej witryny. Mierzy czas ładowania witryny na komputerze i urządzeniu mobilnym oraz wyświetla różne dane dotyczące wydajności witryny. Jeśli wskaźniki zostaną uznane za nieoptymalne, narzędzie podpowie, jak je poprawić.

Po prostu przejdź do Google PageSpeed ​​Insights, wprowadź adres URL i kliknij Analizuj. Google ocenia Twoją witrynę zarówno na urządzeniach mobilnych, jak i na komputerach. Może się okazać, że uzyskasz lepszy wynik w jednym niż w drugim.

Kiedyś Google dawało ogólny wynik na 100 dla strony internetowej, ale już tego nie robi.

Zamiast tego Google mierzy trzy statystyki, które nazywa Core Web Vitals . To są:

• Largest Contentful Paint (LCP) : jak szybko ładuje się główna zawartość witryny. Powinno to wynosić 2,5 sekundy lub mniej, aby zapewnić dobre wrażenia użytkownika.
• Opóźnienie pierwszego wejścia (FID) : jak strona reaguje na dane wprowadzane przez użytkownika. FID powinien wynosić 100 milisekund lub mniej.
• Skumulowane przesunięcie układu (CLS) : mierzy stabilność wizualną strony internetowej. Preferowany jest wynik CLS wynoszący 0,1 lub mniej.

Ponadto Google mierzy:

• First Contentful Paint (FCP) : czas potrzebny do rozpoczęcia renderowania strony internetowej na ekranie. Dobry wynik FCP to 1,8 sekundy lub mniej.
• Interaction to Next Paint (INP) : mierzy stopień responsywności strony na interakcje użytkownika. Naprawdę responsywna strona internetowa ma INP 200 milisekund lub mniej.
• Time to First Byte (TTFB) : czas potrzebny na wysłanie pierwszego bajtu danych po żądaniu serwera. TTFB wynoszący 0,8 sekundy lub mniej jest idealny.

Poniżej, w sekcji Diagnozuj problemy z wydajnością, Google PageSpeed ​​Insights podaje cztery wyniki – Wydajność, Dostępność, Najlepsze praktyki i SEO. 90 lub więcej to dobry wynik, od 50 do 89 wskazuje, że można dokonać poprawy, a wszystko poniżej 50 jest złe.

Poniżej znajdują się możliwości i diagnostyka Google. Oto sposoby, dzięki którym możesz pośrednio poprawić swój wynik wydajności. Metryka wydajności ma największy wpływ na szybkość witryny.

Zanim przejdziemy do tego, jak poprawić wydajność witryny, przyjrzyjmy się, dlaczego szybkość witryny ma znaczenie.

Dlaczego szybkość strony jest ważna?

Szybkość witryny ma ogromny wpływ na zachowania użytkowników i konsumentów.

Średni czas pełnego załadowania mobilnej strony docelowej to 22 sekundy [1] .

Prawdopodobieństwo odrzucenia wzrasta o 32% , gdy czas ładowania strony zmienia się z 1 sekundy na 3 sekundy [2] .

53% odwiedzin zostaje porzuconych , jeśli ładowanie witryny mobilnej trwa dłużej niż 3 sekundy [3] .

Oczywiście, jeśli prowadzisz witrynę e-commerce, powolna witryna powoduje zmniejszenie liczby konwersji i jest to coś, czym chcesz się zająć. Współczynnik konwersji spada wraz z czasem ładowania witryny [4] :

• Strony, które załadowały się w 2,4 sekundy, miały współczynnik konwersji 1,9%.
• Przy 3,3 sekundy współczynnik konwersji wyniósł 1,5%
• Przy 4,2 sekundy współczynnik konwersji był mniejszy niż 1%
• Przy ponad 5,7 sekundy współczynnik konwersji wyniósł 0,6%

Wysoki wynik PageSpeed ​​​​Insights a rzeczywista prędkość strony

Google oblicza wynik PageSpeed ​​Insights zarówno na podstawie danych laboratoryjnych (zebranych w kontrolowanych warunkach), jak i danych terenowych (zebranych od rzeczywistych użytkowników w środowisku naturalnym).

Aby sprawdzić rzeczywistą szybkość strony, możesz skorzystać z narzędzi online, takich jak test szybkości GTmetrix lub Pingdom.

Za pomocą tych narzędzi możesz przetestować swoją witrynę w różnych lokalizacjach.

Możesz zobaczyć na GTmetrix, że czas ładowania strony dla serwera testowego w San Antonio w Teksasie wynosi 666ms – bardzo dobry wynik.

W Hongkongu czas ładowania strony jest nieco dłuższy – 1,4 s.

Pingdom pokazuje również szybki czas ładowania 850 ms dla testu w Waszyngtonie, ale wolniejszy czas ładowania 1,06 s w Tokio w Japonii.

Narzędzie Uptrends umożliwia testowanie na urządzeniach mobilnych i komputerach. Oto wynik strony WP Shout z Paryża we Francji na iPadzie Air – czas ładowania 1,9 s:

Wydaje się więc, że istnieje korelacja między wynikiem Google PageSpeed ​​Insights a rzeczywistą szybkością strony.

Jak uzyskać idealny wynik Google PageSpeed ​​Insights 100 na WordPressie

Skoro już wiesz, dlaczego wysoki wynik Google PageSpeed ​​Insights jest ważny, nadszedł czas, aby przyjrzeć się sposobom jego poprawy.

Sposoby na poprawę wyniku Google PageSpeed ​​Insights

1. Zoptymalizuj obrazy

Optymalizacja obrazów pod kątem Internetu to prosty sposób na poprawę wyniku wydajności.

Będziesz potrzebować wtyczki do kompresji obrazu, takiej jak Optimole.

Ta wtyczka może skompresować twoje obrazy do mniejszego rozmiaru pliku, dzięki czemu ładują się szybciej. Możesz ich używać do wszystkich nowych przesyłanych obrazów, jak również do już istniejących. Wspaniałą cechą Optimole jest to, że dostarcza również obrazy za pośrednictwem sieci CDN, co zapewnia jeszcze szybszą dostawę.

Może również konwertować obrazy do formatu WebP, który ma mniejszy rozmiar niż pliki JPG lub PNG. Pomoże Ci to przekazać rekomendację Udostępnij obrazy w formatach nowej generacji . Ponadto możesz zmienić rozmiar dowolnych większych obrazów, ustawiając dla nich maksymalną szerokość.

Upewnij się, że Twoje obrazy mają atrybuty szerokości i wysokości określone w celu spełnienia możliwości Elementy obrazu nie mają wyraźnej szerokości i wysokości .

Wtyczka Optimole zawiera również leniwe ładowanie, które ładuje obrazy lub filmy tylko wtedy, gdy użytkownik przewinie je w dół. Pomaga to w przypadku możliwości Odrocz obrazy poza ekranem , pokazanej poniżej.

Inną metodą zmniejszenia rozmiaru pliku obrazu jest użycie obrazów SVG. Pliki SVG to pliki wektorowe, dzięki czemu można je łatwo przeskalować bez wpływu na rozmiar pliku. Nie są natywnie obsługiwane w WordPress, ale możesz dodać je do swojej biblioteki multimediów za pomocą wtyczki, takiej jak SVG Support lub Safe SVG.

2. Unikaj nadmiernego rozmiaru DOM

Co to jest DOM? DOM oznacza Document Object Model i jest strukturą przypominającą drzewo, zawierającą wszystkie elementy HTML, atrybuty i tekst strony.

Kilka strategii zmniejszania rozmiaru DOM to dzielenie długich stron internetowych na mniejsze sekcje i unikanie ukrywania węzłów DOM za pomocą deklaracji {display:none;} w CSS.

Jednym z czynników, który może zwiększyć rozmiar DOM, jest użycie narzędzia do tworzenia stron. Twórcy stron mają tendencję do zwiększania liczby elementów <div> na stronie.

Jeśli używasz Elementora, od wersji 3.0 niektóre opakowania HTML zostały usunięte, co zmniejszyło rozmiar DOM.

Lub możesz przejść do korzystania z Gutenberga zamiast narzędzia do tworzenia stron, tak jak zrobił to Chris Lema.

Więcej wskazówek, jak uniknąć nadmiernego rozmiaru DOM, znajdziesz w tym poście.

3. Zoptymalizuj JavaScript i CSS

Pliki CSS i JS można zminimalizować i skompresować , aby poprawić wydajność. Minifikacja usuwa wszystkie spacje z pliku CSS lub JS, a kompresja GZIP usuwa powtarzające się znaki, takie jak {.

Wtyczki WordPress, które pozwalają zminimalizować CSS lub JS, obejmują Autoptimize (bezpłatny) i WP Rocket (płatny).

Minifikacja może zepsuć twoją witrynę, więc wtyczki, które minimalizują, mają opcję wykluczenia plików z minifikacji, jeśli masz problem.

WP Rocket ma również opcję łączenia plików CSS i JS w jeden plik, zmniejszając liczbę żądań. Nie będziesz jednak chciał tego robić, jeśli Twój serwer WWW korzysta z protokołu HTTP/2. Możesz najpierw sprawdzić, czy Twój serwer obsługuje protokół HTTP/2.

Możesz aktywować kompresję GZIP za pomocą większości wtyczek do buforowania. Jeśli twój serwer WWW to Apache lub LiteSpeed, wtyczka może zapisywać bezpośrednio do pliku .htaccess lub zapewniać wiersze do skopiowania i wklejenia. Jeśli używasz NGINX lub IIS, Hummingbird zapewnia również konfigurację umożliwiającą kompresję na tych serwerach.

Jeśli w Twojej witrynie jest jakiś CSS lub JS, który nie jest używany, czas go usunąć. Możesz użyć Chrome DevTools, aby znaleźć nieużywane CSS i JS, które najprawdopodobniej pochodzą z wtyczki.

Możesz także skorzystać z CSS Saver Rapidload, aby zobaczyć, jakie CSS możesz utracić ze swojej witryny:

4. Wyeliminuj zasoby blokujące renderowanie

CSS i JS blokujące renderowanie to pliki, które są oznaczane jako blokujące pierwsze malowanie strony internetowej.

Wtyczka Autoptimize może rozwiązać ten problem, aw rezultacie poprawić wyniki pierwszego malowania zawartości i największego malowania treści.

5. Skróć początkowy czas odpowiedzi serwera

Czas odpowiedzi serwera zależy od kilku czynników: używanego motywu i wtyczek oraz rodzaju posiadanego hostingu.

Rozważ usunięcie nadmiarowych wtyczek, których nie używasz, lub przejście na lekki motyw, taki jak Astra.

W przypadku hostingu zalecamy zarządzany hosting WordPress zamiast współdzielonego hostingu. Zarządzane hosty WordPress obejmują optymalizację serwera w ramach usługi.

6. Upewnij się, że tekst pozostaje widoczny podczas ładowania czcionek internetowych. Upewnij się, że tekst pozostaje widoczny podczas ładowania czcionek internetowych

Jeśli używasz czcionek internetowych, zalecenie Google sprawi, że tekst na Twoich stronach będzie niewidoczny podczas ładowania.

Zalecenie sugeruje dodanie font-display: swap; do deklaracji @font-face w arkuszu stylów.

Poniższy zrzut ekranu pokazuje, jak dodać tę właściwość za pomocą wtyczki Asset CleanUp.

7. Utrzymuj niską liczbę żądań i małe rozmiary transferów

Google PageSpeed ​​Insights rejestruje liczbę plików żądanych przez serwer sieciowy oraz rozmiar tych plików.

Jeśli masz tutaj duże liczby, możesz je zmniejszyć przez:

• Optymalizacja obrazów i plików multimedialnych. Zaleca się używanie plików wideo zamiast animowanych plików GIF.
• Optymalizacja CSS i JS
• Optymalizacja czcionek i skryptów innych firm
• Zmniejszenie rozmiaru pliku HTML

8. Unikaj łączenia krytycznych żądań

Żądania krytyczne to żądania niezbędne do załadowania strony. Na przykład logo może być żądaniem krytycznym.

Długie łańcuchy i łańcuchy zawierające duże pliki do pobrania są uważane za szkodliwe dla szybkości Twojej witryny. Wpływają na pierwszą i największą zawartość.

Według Google, aby uniknąć łączenia krytycznych żądań, należy:

• Zminimalizuj liczbę krytycznych zasobów: wyeliminuj je, odłóż ich pobieranie, oznacz jako asynchroniczne i tak dalej.
• Zoptymalizuj liczbę krytycznych bajtów, aby skrócić czas pobierania (liczba podróży w obie strony).
• Zoptymalizuj kolejność ładowania pozostałych krytycznych zasobów: pobierz wszystkie krytyczne zasoby tak wcześnie, jak to możliwe, aby skrócić długość ścieżki krytycznej.

Możesz to zrobić przez:

• Wstępne ładowanie kluczowych żądań, obrazów i czcionek za pomocą „link rel=”preload” w kodzie HTML, który się do nich odwołuje.
• Minifikacja CSS i JavaScript.
• Wyeliminuj zasoby blokujące renderowanie.

Możesz użyć wtyczki, takiej jak WP Rocket, aby wykonać te zadania za Ciebie.

9. Unikaj długich zadań związanych z głównym wątkiem i zminimalizuj pracę nad głównym wątkiem

Długie zadania głównego wątku to zadania JavaScript (powyżej 50 ms), które opóźniają Czas do Interaktywności dla użytkownika.

Minimalizacja pracy głównego wątku oznacza skrócenie czasu analizowania, kompilowania i wykonywania JS.

Długość i czas wykonywania zadań JavaScript można skrócić, wykonując następujące czynności:

• minimalizowanie korzystania z nadętych wtyczek
• lokalny hosting czcionek i skryptów analitycznych
• minimalizacja lub odroczenie JS i CSS
• leniwe ładowanie obrazów tła

Zobacz poniższy artykuł, aby uzyskać więcej wskazówek dotyczących minimalizowania pracy głównego wątku w WordPress.

10. Unikaj dużych zmian układu Unikaj dużych zmian układu

Zmiany układu przyczyniają się do metryki Skumulowana zmiana układu i dają użytkownikom wrażenie przeskakiwania strony.

Możesz wyleczyć ten problem poprzez:

• Dodawanie wymiarów do Twoich multimediów
• Wstępne ładowanie czcionek
• Optymalizacja dynamicznych treści, np. formularzy zapisów do newslettera

Aby uzyskać więcej informacji, przeczytaj ten przewodnik dotyczący naprawiania skumulowanej zmiany układu w WordPress.

11. Zmniejsz wpływ kodu stron trzecich

Skrypty stron trzecich to skrypty hostowane gdzie indziej, takie jak śledzenie Google Analytics lub osadzone w YouTube.

Jeśli to możliwe, spróbuj hostować skrypty lokalnie. Nie możesz tego zrobić w YouTube, ale możesz przechowywać swój kod analityczny i czcionki lokalnie.

Możesz użyć wtyczki Local Google Fonts do hostowania czcionek Google na własnym serwerze.

Lokalna wtyczka Google Analytics dla WordPress — buforuje zewnętrzne żądania, będzie hostować Twoje Google Analytics lokalnie.

12. Użyj sieci CDN

Sieć dostarczania treści to zdalna sieć serwerów, które przechowują i udostępniają treści internetowe użytkownikom.

Sieć CDN może poprawić szybkość Twojej witryny, przechowując w pamięci podręcznej pliki statyczne (np. HTML, CSS i JavaScript) i udostępniając je użytkownikowi z pobliskiej lokalizacji. Pomaga to zmniejszyć wyniki pierwszego malowania z treścią i największego malowania z treścią.

Używamy Cloudflare CDN w WP Shout. Możesz zacząć na nim za darmo.

Dowiedz się więcej o tym, dlaczego warto korzystać z CDN i najlepszych opcjach.

Podsumowanie, jak dostać się do wyniku Google PageSpeed ​​Insights 100

Widzieliśmy, że na szybkość strony wpływa kilka czynników. Te wskazówki pomogą Ci osiągnąć doskonały wynik.

Nie powinieneś jednak za bardzo skupiać się na zdobyciu 100 punktów – wynik 90+ to wciąż bardzo dobry wynik. Przeczytaj post Davida na temat optymalizacji wydajności witryny, aby zobaczyć, co zrobiliśmy, aby poprawić nasze wyniki.