Optymalizacja strony WordPress dla Google PageSpeed

Оптимизация сайта на WordPress для Google PageSpeed

Szybkość ładowania strony jest jednym z czynników rankingowych wyszukiwarek. Im szybciej strona się ładuje, tym lepiej.

Możesz sprawdzić, jak szybko Twoja witryna korzysta z Google PageSpeed Insights.

Dobra prędkość ładowania - jeśli witryna znajduje się w zielonej strefie.

Jak poprawić wskaźniki Google PageSpeed

Błąd "Defer offscreen images"

Aby skrócić czas przed rozpoczęciem interakcji z witryną, Google zaleca stosowanie zasady lazy loading dla ukrytych obrazów, co oznacza, że nie ładuj ich natychmiast, ale podczas przewijania strony.

Zainstaluj wtyczkę Lazy Load Optimizer, która dodaje leniwe ładowanie obrazów WordPress, a także obrazów produktów i kategorii produktów WooCommerce.

Błąd "Serve static assets with an efficient cache policy

Aby naprawić ten błąd, musisz wstawić następujący kod do pliku .htaccess (znajduje się w katalogu głównym WordPress, nadal można uzyskać do niego dostęp za pomocą wtyczki Yoast SEO):

# BEGIN EXPIRES 
<IfModule mod_expires.c>
ExpiresActive On 
ExpiresDefault "access plus 6 month"
ExpiresByType text/css "access plus 6 month" 
ExpiresByType text/plain "access plus 6 month"
ExpiresByType image/gif "access plus 6 month"
ExpiresByType image/png "access plus 6 month" 
ExpiresByType image/jpeg "access plus 6 month" 
ExpiresByType application/x-javascript "access plus 6 month"
ExpiresByType application/javascript "access plus 6 month"
ExpiresByType application/x-icon "access plus 6 month" 
</IfModule>  
# END EXPIRES

Jeśli korzystasz z Google Analytics, napraw ten błąd nie zadziała. Ale w porządku, ponieważ Google Analytics nie spowalnia Twojej witryny.

Błędy - "Zmniejsz rozmiar kodu CSS", "Zmniejsz rozmiar kodu JavaScript", "zmniejsz głębokość zagnieżdżania krytycznych żądań", " wyeliminuj zasoby blokujące wyświetlanie"

Te błędy pomogą naprawić wtyczkę Autoptimize.

W Ustawieniach włączamy:

Zoptymalizuj kod HTML
Zoptymalizuj kod JavaScript
Zoptymalizuj kod CSS

Aby naprawić błąd "wyeliminuj zasoby blokujące wyświetlanie", musisz zaznaczyć pole wyboru Osadź wszystkie CSS:

Настройки плагина Autoptimize

W ten sposób cały css zostanie osadzony na początku strony. Jeśli chodzi o JS-plugin zbiera wszystkie pliki js w jednym pliku i ładuje go na końcu dokumentu. Oznacza to, że js nie będzie już zakłócał ładowania witryny, co przyspieszy wyświetlanie strony dla użytkownika.

Błąd "zmniejsz głębokość zagnieżdżania krytycznych żądań" może wystąpić, jeśli witryna używa czcionek Google fonts. Kliknij kartę Zaawansowane tej wtyczki. Tam musisz ustawić ustawienie czcionek Google-Combine and preload in head (fonts load late, but are not render-blocking).

Błąd - " preload key requests"

Autoptimize ponownie pomoże w rozwiązaniu tego problemu. W zakładce "dodatkowe" musisz znaleźć element Preload specific request.

preload specific request

Tutaj musisz wstawić pełny adres URL zasobu. Jeśli jest ich kilka, wstawiamy kilka, oddzielając przecinkiem. Adres URL zasobu można skopiować, klikając prawym przyciskiem myszy łącze do zasobu:

узнать урл ресурса

Błąd - " Skonfiguruj skuteczne kodowanie obrazu"

Aby zoptymalizować obrazy, zainstaluj wtyczkę WP Smush. Ta wtyczka optymalizuje wszystkie obrazy przesłane do biblioteki multimediów WordPress.

Jeśli obrazy są pobierane z katalogu motywu, będą musiały zostać zoptymalizowane ręcznie.

Dobra strona, na której można zoptymalizować zdjęcia online -  https://tinypng.com/

Błąd  - "Serve images in next-gen formats"

Aby rozwiązać ten błąd, odpowiednia jest wtyczka WebP Converter for Media . Ta wtyczka utworzy dla wszystkich obrazów na stronie ich odpowiedniki w nowym formacie WebP. W przeglądarkach obsługujących ten format zdjęcia zostaną załadowane w nowym formacie, w pozostałych przeglądarkach zostanie załadowany stary format png, jpg.

Błąd " skróć czas odpowiedzi serwera (czas do otrzymania pierwszego bajtu)"

Najczęściej pomaga w walce z wtyczką WP Super Cashe. Po instalacji musisz włączyć buforowanie w ustawieniach wtyczki i włączyć opcję - " Kompresuj pliki pamięci podręcznej, aby przyspieszyć pracę":

Настройки Wp Super Cashe

Jeśli to nie pomoże, warto rozważyć zmianę hostingu na lepszy.

Błąd " Włącz kompresję tekstu"

Dodaj do pliku .htaccess:

<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

 


Aktualizacja: 28.12.2020

Czy ten artykuł ci pomógł? Postaw ocenę!
(53 ocen, średnia:4,23 из 5)
Loading...


Ilość komentarzy: 16

  • Witajcie. Nie mogę się wiele pozbyć. Wtyczka Autoptimize nie działa, ponieważ było kilka skryptów, więc jest. Ale pytanie jest inne! Jak zoptymalizować wersję mobilną? Na komputerze osiągnął 86%, ale na telefonie komórkowym 71% maksimum. Może ktoś mi powie?

    • Wtyczka Autoptimize może nie działać z powodu nieprawidłowej konfiguracji hostingu lub przestarzałej wersji PHP. Spróbuj umieścić wersję PHP 7.0

  • Nie można zoptymalizować w ten sposób, może ktoś coś powie?

    • Artykuł został zaktualizowany, być może teraz wynik będzie lepszy.

  • Dzięki, teraz serwis PageSpeed Insights przestał przeklinać. Użyłem podpowiedzi, aby dodać reguły do .htaccess

    • Zrób ręcznie To, co robią te wtyczki - minifikuj css, js i html. Połącz wszystkie skrypty w 1 plik i połącz na dole strony lub używając atrybutu async. Skompresuj wszystkie obrazy na stronie. Aby zintegrować leniwy moduł ładujący dla obrazów, takich jak lazysizes, link do niego znajduje się na początku artykułu.

  • Kiedy tworzę szablon (nie używam gotowych, trudno jest osiągnąć wysokie wskaźniki pagespeed), pamiętaj o włączeniu pamięci podręcznej w htaccess ze wskazaniem wszystkich formatów, ściskam Wszystkie zdjęcia za pomocą FileOptimizer, pamiętaj o umieszczeniu wtyczki Minit. Staram się łączyć czcionki z mojego serwera i przepisywać je w CSS font-display: swap. Przeglądam również kod, a jeśli coś nie pasuje pod względem obciążenia, usuwam (Skrypty, Style obrazu). Kiedy zaczynałem tworzyć szablony pod WordPress, dużym błędem było łączenie stylów i skryptów bezpośrednio w szablonie, na przykład w nagłówku.php, a okazało się poprawne przez functions.php poprzez funkcje wp_enqueue_style / wp_enqueue_script, początkujący powinni wziąć pod uwagę.

  • mam na stronie testy dla lekarzy z 30 na komórkę do 61. Google pisze więc, że pliki autoptimize blokują wyświetlanie.css, które łączy.

    • Być może nie włączyłeś w Ustawieniach " Osadź wszystkie CSS"

  • A jak radzić sobie z "skróć czas wykonywania kodu JavaScript", "zminimalizuj pracę w głównym wątku" - dwa główne problemy powodujące największe hamulce, a także "zmniejsz głębokość zagnieżdżania krytycznych zapytań", "Usuń nieużywany kod CSS"?
    Opóźnione ładowanie obrazów jest skonfigurowane(nadal przeklina googlespydtest, chociaż nie jest znaczący), reguły pamięci podręcznej dla obiektów statycznych są napisane(nie pomaga, metryka Yandex naturalnie stoi tak, jak napisałeś), istnieje wtyczka buforowania, Autooptymalizator jest skonfigurowany, jak pokazano w artykule, a wyniki testu 25 na urządzeniach mobilnych i 40 na komputerze, co jest koszmarem!

  • Dziękuję za przydatny artykuł, dużo używam u siebie + więcej W. tools, przyspieszenie jest dobre.

  • Dziękuję autorowi za artykuł. Zwiększono ładowanie strony z 15 punktów na telefonach komórkowych i 31 na PC do 70 i 90+. Polecam!

  • To nie wszystko. Głównymi metodami są optymalizacja zdjęć i buforowanie. Te opcje z ładowaniem asynchronicznym nie pomogą wszystkim, a tym bardziej łączenie stylów i skryptów bez zewnętrznego uszkodzenia witryny.

  • Dzień dobry! Dziękuję bardzo, dobry człowieku! Artykuł świetny! Wszystko zgodnie z Twoimi zaleceniami. Ładowanie strony z 15 punktów na urządzeniach mobilnych i 52 na PC wzrosło odpowiednio do 85 i 98. Powodzenia we wszystkich sprawach i dobrego zdrowia!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *