Google Core Web Vitals w WordPress: jak zoptymalizować witrynę

Czy udało Ci się już zoptymalizować witrynę pod kątem Google Core Web Vitals?

Możesz powiedzieć nie, w porządku. Nie jesteś sam. W rzeczywistości Searchmetrics odkryło, że do 96% z 2 milionów najpopularniejszych witryn^[1] nieudane testy Core Web Vitals. Nie jestem matematykiem, ale wydaje mi się, że to dużo.

Google Core Web Vitals to najnowsze narzędzie pomagające Google analizować Twoją witrynę. Google nadal będzie wykorzystywać takie czynniki, jak szybkość, jakość treści i przyjazność dla urządzeń mobilnych, aby pozycjonować witryny. Tak więc, jeśli zajmujesz dobre miejsce w rankingu, możesz się trochę zrelaksować.

Ale tylko trochę, ponieważ twoi konkurenci szukają przewagi, która zaprowadzi ich na szczyt. Jak możesz ich wyprzedzić? Zapewniasz użytkownikom doskonałe wrażenia, a tego właśnie chce Google.

Otrzymasz duże nagrody, jeśli Twoja witryna zapewnia wspaniałe wrażenia oraz świetna treść. W tym artykule pomożemy Ci stworzyć taką stronę internetową.

Zaczniemy od zapoznania się z podstawowymi wskaźnikami internetowymi Google, abyś dokładnie wiedział, co one oznaczają i co mierzą. Następnie podzielimy się naszymi najlepszymi wskazówkami dotyczącymi tworzenia stron, które zawsze pomyślnie przejdą podstawowe wskaźniki internetowe.

Chociaż nastąpiła zmiana w harmonogramie i aktualizacja zostanie wprowadzona dopiero w połowie czerwca, wciąż mamy dużo pracy do wykonania. Zacznijmy!

📚 Spis treści:

Czym są Google Core Web Vitals (i dlaczego warto się nimi przejmować)?

Jeśli nie lubisz aktualizacji Google, prawdopodobnie zastanawiasz się, o co tyle ekscytacji. Rzućmy okiem na szczegóły.

W maju 2020 r. Google ogłosił nowy dodatek do swoich rankingów wyszukiwania, Core Web Vitals. Takie ogłoszenie zwykle oznacza dużo pracy ktoś. Z ponad 200 unikalnymi czynnikami używanymi do pozycjonowania stron internetowych^[2]okładka rankingów Google wszystko.

Przekonasz się nawet, że wiek Twojej domeny odgrywa pewną rolę w Twoim rankingu. W tym przypadku Google Core Web Vitals koncentruje się na wygodzie użytkownika lub korzystaniu z Twojej witryny.

Idąc dalej, Google Core Web Vitals będzie mieć szereg wskaźników, ale aktualizacja z 2021 r. obejmuje trzy: największe malowanie zawartości (LCP), skumulowane przesunięcie układu (CLS) i pierwsze opóźnienie wejścia (FID).

Największa farba zawierająca treści (LCP)

Twój LCP jest miarą tego, ile czasu zajmuje pobranie największej części treści. Może to być obraz lub po prostu tekst. Cokolwiek to jest, po załadowaniu strona internetowa czuje gotowe.

Co więcej, największe malowanie zawartości mierzy zawartość tylko w widocznym obszarze użytkownika. Żadne obrazy poniżej zakładki nie będą wliczane do wyniku LCP.

Jeśli chcesz uzyskać pozytywny wynik, Twój LCP musi być krótszy niż 2,5 s.

Skumulowana zmiana układu (CLS)

CLS mierzy stabilność Twojej strony podczas ładowania. Mierzy wszystkie przesunięcia, które mogą wystąpić, gdy obrazy są ładowane z opóźnieniem lub zmieniają style czcionek. Nawet rzeczy takie jak przyciski mogą powodować nieoczekiwane przesunięcia na stronie.

Jeśli twoje elementy poruszają się nagle (i więcej niż 0,1), masz problem z CLS do rozwiązania.

Opóźnienie pierwszego wejścia (FID)

FID mierzy, jak szybko przeglądarka staje się interaktywna. Oznacza to, że odwiedzający mogą to zrobić rzeczy i uzyskać reakcję. Obejmuje to klikanie linków, naciskanie przycisków lub wypełnianie pól wyboru.

Możesz przekazać tę metrykę, jeśli użytkownicy mogą wykonywać takie czynności, jak wprowadzanie danych w formularzach i ankietach w ciągu 100 ms.

Jak przetestować (i odczytać) swój wynik Google Core Web Vitals

Jedną z największych zalet Core Web Vitals jest ich przyjazne dla użytkownika podejście. To nie jest zbiór tajemnych wskaźników, które są trudne do przetestowania (nie mówiąc już o zrozumieniu). Zamiast tego wszystko mogą bądź całkiem łatwy dzięki wielu oficjalnym narzędziom Google do testowania i poprawiania Twojej witryny.

Jeśli chodzi o testowanie, musisz wiedzieć o dwóch głównych kategoriach: narzędzia do testów laboratoryjnych oraz narzędzia do testowania w terenie. Narzędzia do testowania w terenie są poparte rzeczywistymi danymi zebranymi od rzeczywistych użytkowników, którzy wyrazili zgodę na otrzymywanie raportu Chrome User Experience Report. To czyni je bardziej wartościowymi dla Core Web Vitals. Skupimy się na dwóch opcjach:

• Raport Google Core Web Vitals z Google Search Console.
• Test Page Speed ​​Insights, który zawiera zarówno wyniki terenowe, jak i laboratoryjne.

Zacznijmy od raportu Google Core Web Vitals, ponieważ powie nam on, które adresy URL stanowią problem.

Korzystanie z Google Search Console

Gdy znajdziesz się w konsoli, przewiń w dół, aby znaleźć Doświadczenie → Podstawowe wskaźniki internetowe. Kliknięcie tutaj otworzy pełny raport witryny z każdym adresem URL sklasyfikowanym jako Dobry, Wymaga poprawy lub Zły.

⚠️ Jeśli nie skonfigurowałeś Google Search Console, poświęć chwilę na przeczytanie naszego przewodnika po korzystaniu z Google Search Console z WordPress.

Kliknij Otwórz raport aby uzyskać bardziej szczegółowe informacje o tym, które wskaźniki Core Web Vitals sprawiają najwięcej problemów.

Jeśli klikniesz na Rodzaj otrzymasz pełną listę adresów URL, które następnie można przetestować Statystyki szybkości strony po więcej informacji.

Korzystanie ze statystyk szybkości strony

Wprowadź adres URL swojej strony i kliknij Analizować aby rozpocząć test. Ukończenie analizy nie powinno zająć dużo czasu, ponieważ domyślnie najpierw zostaną wyświetlone wyniki dla urządzeń mobilnych. Możesz jednak przeglądać dane Core Web Vitals zarówno na urządzeniu mobilnym, jak i na komputerze bez uruchamiania nowego testu. Wyniki znajdziesz na samej górze strony:

Jeśli chcesz przetestować całą stronę, kliknij Podsumowanie pochodzenia. Jak widać, Core Web Vitals zostały poręcznie oznaczone zakładkami z wartościami procentowymi wskazującymi, jak często przechodzą. Ta strona to solidna przepustka, ale co możemy zrobić w przypadku nieudanych stron?

Co mogę zrobić, aby poprawić swój wynik Google Core Web Vitals?

Właściwie możemy zrobić całkiem sporo, aby poprawić wyniki Core Web Vitals (nawet bez umiejętności technicznych). Przyjrzyjmy się naszym najlepszym wskazówkom, jak poprawić wygodę użytkownika i podstawowe wskaźniki internetowe.

Zaktualizuj swój hosting

Tak, nie ma lepszego sposobu na poprawę odpowiedzi serwera niż posiadanie dobrego. W rzeczywistości zmiana hosta może być trudna (nie wspominając o kosztach), ale nie musisz przeskakiwać z hostingu współdzielonego na hosting dedykowany. Mam na myśli, że ten skok rozwiąże wiele problemów z wydajnością, ale nawet niewielki skok na szybszy serwer może również przynieść zauważalną poprawę wydajności.

To powiedziawszy, jeśli już zdecydowałeś się na zmianę, najpierw przeczytaj nasze porównanie najlepszych hostów WordPress. Ale jeśli naprawdę się spieszysz, sprawdź poniższą tabelę:

Oprócz standardowych optymalizacji, każdy z powyższych hostów oferuje jakąś formę buforowania po stronie serwera. Buforowanie to proces przechowywania wersji HTML witryny na serwerze w celu ułatwienia jej odzyskiwania. Buforowanie po stronie serwera może być trudne w zarządzaniu i konfiguracji, więc musisz zapytać potencjalnego hosta o jego proces.

Korzystanie z wtyczki buforującej

Jednak nie wszystkie hosty oferują buforowanie po stronie serwera, ale możesz cieszyć się niektórymi korzyściami dzięki wtyczce buforującej strony. Nawet buforowanie na poziomie strony dostarcza zawartość wystarczająco szybko, aby ulepszyć Twój największy obraz treści.

Jeśli chodzi o korzystanie z wtyczki, polecam WP Super Cache, ponieważ jest całkowicie darmowa (bez aktualizacji) z prostymi i zaawansowanymi opcjami (takimi jak wstępne ładowanie).

Jak łatwy w użyciu jest WP Super Cache? Sprawdź to:

Po zainstalowaniu i aktywacji wtyczki otwórz ustawienia za pomocą Ustawienia → WP Super Cache. Kliknij Łatwo i skręć Buforowanie włączone i wtedy Stan aktualizacji.

W pewnym momencie napotkasz problemy z pamięcią podręczną. Nie tylko będziesz mieć zbyt wiele stron w pamięci podręcznej, ale nowe zmiany nie pojawią się na stronie. Jeśli tak się stanie, możesz wyczyścić pamięć podręczną, klikając Usuń pamięć podręczną.

WP Super Cache oferuje również opcję wstępnego ładowania najpopularniejszych stron. Jednak wstępne ładowanie pochłonie cenne zasoby, więc będziesz musiał mądrze wybierać i codziennie monitorować swój procesor.

Konfiguracja jest łatwa. Kliknij Załaduj wstępnie opcja. Możesz ustawić częstotliwość odświeżania pamięci podręcznej oraz to, czy stare pliki mają być usuwane, czy nie.

Gdy będziesz zadowolony z ustawień, naciśnij Wstępnie załaduj pamięć podręczną teraz rozpocząć. Po zakończeniu procesu buforowania pliki znajdą się w twoim wp-content/cache folder na serwerze.

Zoptymalizuj swoje obrazy

Ludzie kochają obrazy. I wszyscy używamy wielu z nich, prawda? Ale obrazy mogą szkodzić wynikom Core Web Vital. Jest tego kilka powodów:

• Obraz może być zbyt ciężki.
• Wymiary obrazu są za duże.
• Ładujesz każdy obraz na stronie.
• Obrazy są wysyłane z Twojego serwera do ludzi na całym świecie.

Na szczęście istnieje prosty sposób na naprawienie wszystkich powyższych problemów.

Po pierwsze, rozważ kilka rzeczy, jeśli chodzi o obrazy:

• Czy potrzebujesz każdego obrazu?
• Jakich wymiarów używasz? Naszym celem jest >2000px.
• W przypadku tła spróbuj użyć wzorów, gradientów lub plików SVG.
• Ogranicz obrazy na części widocznej na ekranie do logo i obrazu bohatera.
• Nie używaj suwaków ani karuzeli w części widocznej na ekranie.

Po uporządkowaniu obrazów możesz zoptymalizować resztę. Optymalizacja obrazu może zmniejszyć rozmiary obrazów, poprawić ich wymiary i dostarczyć je z sieci dostarczania treści (CDN) przy użyciu serwerów znajdujących się bliżej użytkowników. Za to wszystko polecam optymol.

Optimole oszczędza serwerom dużo pracy, wykonując wszystkie powyższe czynności w chmurze. Udaj się do optymol i zarejestruj się w celu uzyskania klucza API (jest on potrzebny do uzyskania dostępu do operacji w chmurze).

Otrzymasz wiadomość e-mail, aby zweryfikować swoje konto za pośrednictwem pulpitu nawigacyjnego Optimole. Chwyć klucz API i przejdź do swojej witryny WordPress.

Po zainstalowaniu i aktywacji Optimole uzyskaj dostęp do ustawień z pliku Media → Optimole menu. Wklej swój klucz API i naciśnij Połącz.

Należy również włączyć Skaluj obrazy i leniwe ładowanie.

Skalowanie obrazów oznacza, że ​​Optimole wyśle ​​obrazy idealnie dopasowane do urządzenia (bez względu na to, jakie ono jest), aby ograniczyć zmiany układu.

Leniwe ładowanie oznacza, że ​​ładujesz tylko te obrazy, które Twoi użytkownicy widzą w widocznym obszarze. Przy tej konfiguracji pozwól Optimole zająć się resztą.

Optymalizacje kodu

Rzecz w prowadzeniu witryny WordPress to wszystkie ruchome części. Pomiędzy motywami i wtyczkami oraz językami, które je napędzają, osobie nietechnicznej trudno jest zoptymalizować kod.

Oczywiście możemy wybrać motywy ze zoptymalizowanymi bazami kodu i unikać wtyczek z nadętym kodem. Poza tym możemy zoptymalizować kod na dwa główne sposoby:

Jedną wadą jest to, że Autoptimize ma wiele ustawień, co oznacza, że ​​nie ma jednego uniwersalnego rozwiązania.

Powiedziawszy to, możesz bezpiecznie wybrać Optymalizować wszystko w JavaScript, CSS, HTML. To ustawienie minimalizuje kod, usuwając spacje i podziały wierszy. Oprócz minifikacji, Autoptimize oferuje świetne opcje wydajności dla każdego, kto chce dowiedzieć się więcej i dużo przetestować.

Na przykład możesz uzyskać znaczny wzrost prędkości, korzystając z zaawansowanych zadań, takich jak wstępne ładowanie CSS oraz wstawianie krytycznego CSS, ale przed użyciem należy zapoznać się z każdą opcją.

Czcionki i ikony

Możesz użyć Autoptimize do obsługi czcionek, szczególnie jeśli jesteś zdecydowany korzystać z Czcionek Google. Możesz nawet spróbować wstępnie załadować czcionki Google, aby zapobiec „błyskowi niestylizowanego tekstu”, który szkodzi skumulowanej zmianie układu.

Polecam wypróbowanie kilku różnych opcji i sprawdzenie, co najlepiej sprawdza się w Twojej witrynie. Niestety, jeśli używasz Elementora, nadal będziesz widzieć zmiany układu. Jeśli tak jest w Twoim przypadku, rozważ przejście na czcionki systemowe.

Sprawdzone metody dotyczące reklam

Jeśli chodzi o zmianę układu, reklamy są jednym z największych problemów. Zwykle reklamy powodują przesuwanie treści w dół, co powoduje złe wrażenia użytkownika. Na szczęście można ograniczyć zmianę, stosując najlepsze praktyki.

Co najważniejsze, miejsce docelowe reklamy powinno być zrównoważone między uzyskaniem większej liczby kliknięć a wpływem na układ. Na przykład nie umieszczaj reklam u góry widocznego obszaru. Jeśli ostateczny rozmiar reklamy jest większy niż kontener, spowoduje to przesunięcie całej treści w dół. Celuj w środek strony, gdzie reklama wyrządzi mniej szkód.

Po wybraniu najlepszego miejsca docelowego zarezerwuj miejsce na reklamę. Chociaż może to pozostawić ci trochę pustego miejsca, może to być warte kompromisu.

Wniosek

Dzięki tym wskazówkom powinieneś zauważyć natychmiastową poprawę wyników. Co więcej, każda z opcji daje dobry punkt wyjścia do dalszych optymalizacji.

Pokonaliśmy dużo ziemi, więc podsumowując:

• Aktualizacja planu hostingowego może pomóc poprawić Twoje wyniki.
• Korzystanie z wtyczki buforującej powinno przyspieszyć dostarczanie treści.
• Optymalizacja obrazów i korzystanie z sieci CDN powinno poprawić wydajność witryny.
• Dzięki optymalizacji kodu możesz kontrolować sposób ładowania witryny.
• Dzięki przemyślanemu doborowi czcionek i wstępnemu ładowaniu możesz cieszyć się przyspieszeniem.
• Postępując zgodnie ze sprawdzonymi metodami dotyczącymi reklam, możesz ograniczyć zmiany układu.