Dołącz do czytelników
Brak wyników

SEM/SEO

1 września 2021

NR 59 (Sierpień 2021)

Poznaj 7 sztuczek w Wordpressie, dzięki którym Twój e-commerce będzie przygotowany do aktualizacji algorytmu Google’a

15

Weszła w życie zapowiadana aktualizacja algorytmu Google’a – Core Web Vitals. Podstawowe wskaźniki internetowe są już kolejnym składnikiem przepisu na ranking witryn w Google. Dowiedz się, jak w prosty sposób poprawić Twój sklep na WordPressie do aktualnie zachodzących zmian.

Web Vitals to inicjatywa Google’a mająca na celu zapewnienie ujednoliconych wskazówek dotyczących sygnałów jakości stron internetowych, które są niezbędne do zapewnienia doskonałych wrażeń użytkownikom w sieci. A mówiąc wprost jest to zbiór elementów do poprawy, by strona internetowa szybciej się wczytywała i oszczędzała ilość przesyłanych danych.
Google podzieliło parametry na trzy grupy:

  1. Largest Contentful Paint (LCP) – to czas potrzebny przeglądarce na wyświetlenie największego elementu strony w widocznym obszarze (above the fold). 
  2. First Input Delay (FID) – to czas, jaki minął od pierwszej interakcji użytkownika ze stroną (kliknięcia linku lub przycisku itp.) do reakcji przeglądarki.
  3. Cumulative Layout Shift (CLS) – to wskaźnik informujący, jak wiele jest niespodziewanych przesunięć treści w trakcie jej ładowania. Nie dotyczy to interakcji użytkownika.

Założeniem wyszukiwarki jest jak najszybsze dostarczenie odpowiedzi na zadane przez internautę pytanie (tab. 1). Wyobraź sobie, że musisz czekać na załadowanie popularnej Wikipedii pół minuty – obniża to od razu Twoje zadowolenie z użytkowania wyszukiwarki. Aby temu zaradzić, Google będzie serwować na najwyższych pozycjach strony, które oprócz dostarczania świetnych treści, są na wydajnych serwerach i szybko wyświetlają się w przeglądarce czytelnika.
 

Tabela 1. Ustalone przedziały parametrów z podziałem na wartość dobrą, średnią i niską (złą)
Sygnał Dobrze Średnio Źle
LCP <2,5 s 2,5–4 s 4 s+
FID <100 ms 100–300 ms 300 ms+
CLS <0,1 0,1–0,25 0,25+


Jak sprawdzić sygnały Core Web Vitals w Twojej stronie internetowej?

Najłatwiejszym sposobem jest skorzystanie z gotowych rozwiązań od Google’a lub innych dużych firm. Możesz skorzystać np. z:

W pierwszym przypadku po wejściu na wskazany link wpisz adres strony i kliknij w przycisk Analizuj. Po chwili otrzymasz ogólny wynik jakościowy z podziałem na urządzenia desktopowe i mobilne (rys. 1). Poniżej oceny ogólnej znajdziesz procentowy status sygnałów CWV zebranych od realnych użytkowników (rys. 2), dane laboratoryjne obliczone przez specjalistyczne narzędzia (rys. 3), a także listę elementów do poprawy (rys. 4 i 5).
 

Rys. 1. Wynik jakościowy szybkości strony testowanej przez Google PageSpeed

 

Rys. 2. Procentowy status sygnałów CWV

 

Rys. 3. Dane laboratoryjne od Google’a

 

Rys. 4. Lista elementów do poprawy na stronie

 

Rys. 5. Lista elementów do poprawy na stronie


7 rozwiązań najpopularniejszych problemów Core Web Vitals

Kiedy wiesz już, jak sprawdzić obecny stan swojej strony, czas, abyś poznał proste metody na naprawę najczęstszych problemów dotyczących optymalizacji prędkości i użyteczności strony internetowej opartej na WordPressie. 
Dzięki tym kilku krokom nie tylko przyspieszysz działanie swojego sklepu, ale przede wszystkim zwiększysz komfort użytkowników, którzy będą chcieli wracać i realizować u Ciebie kolejne zakupy.

  1. Użyj efektywnego kodowania obrazów

Nie bez znaczenia są formaty i rozmiary, w jakich są grafiki szablonu strony czy też zdjęcia produktów w WooCommerce lub fotografie na blogu. Elementy statyczne szaty graficznej powinny być np. w formacie PNG – czyli np. logo, przyciski lub tło. Zdjęcia zawierające dużo detali (np. zdjęcia produktów) publikuj w JPEG2000 – dzięki temu przyspieszysz swoją stronę. Przykładowy zrzut ekranu, który zawiera dużo detali, m.in. ikon, zapisany w formacie JPG ma rozmiar 59 KB, a dokładnie to samo w PNG aż 335 KB. Oznacza to prawie 6 razy większą objętość mimo tej samej zawartości. Warto oszczędzać transfer użytkowników mobilnych, a tym samym swojego serwera – z roku na rok jest to coraz większy odsetek całego ruchu.
Do optymalizacji obrazków można wykorzystać wtyczkę Imagify, która w darmowej wersji oferuje optymalizację do 20 MB miesięcznie. 

Po instalacji wtyczki i wpisaniu klucza (API KEY) uzyskanego po założeniu konta pojawia się nowa pozycja w Ustawieniach Imagify, gdzie możesz wybrać stopień optymalizacji zdjęć, a także wskazać, które katalogi ze zdjęciami wtyczka ma przeszukać podczas masowej kompresji. Zaleca się również włączenie automatycznej optymalizacji oraz zmniejszania szerokości zdjęć dodawanych w przyszłości.
Druga opcja pojawi się w menu Media – to Bulk Optimization (masowa optymalizacja). Tam zobaczysz status dotychczasowej optymalizacji (rys. 6), a także możliwość uruchomienia masowej kompresji (IMAGIF’EM ALL). 
 

Rys. 6. Status dotychczasowej optymalizacji przez wtyczkę Imagify


Pamiętaj, by nie zamykać tej podstrony w trakcie kompresji. Po zakończeniu procesu otrzymasz komunikat z informacją, ile danych zaoszczędziłeś (rys. 7).
 

Rys. 7. Informacja, ile danych zaoszczędziłeś dzięki optymalizacji

 

  1. Wyświetlaj obrazy w formatach nowej generacji

Zmieniając tylko format grafik na bardziej nowoczesny, możemy znacznie zmniejszyć ilość przesyłanych danych. Nowe wersje przeglądarek internetowych potrafią wyświetlać formaty, takie jak WebP. Format ten oferuje taką samą jakość, jak starsze (np. JPEG/PNG), ale przy znacznie mniejszym rozmiarze. Obsługuje on również przezroczystość, a więc jest tak samo uniwersalny. Obrazy bezstratne WebP są o 26% mniejsze w porównaniu z plikami PNG. Stratne obrazy WebP są o 25–34% mniejsze niż porównywalne obrazy JPEG. 
 

Porada

Do konwersji zdjęć w bibliotece mediów Word-
Pressa można wykorzystać w pełni darmową wtyczkę Images to WebP4. Po jej instalacji i aktywacji pojawi się nowa opcja w menu Media: Images to WebP. Po wejściu w ten panel możesz skonfigurować jakość zdjęć (zalecam ok. 80% – sprawdź na swoim zdjęciu, jaki poziom jakości będzie odpowiedni), ustawić automatyczną konwersję do WebP, a także formaty, które chcesz konwertować na WebP (zalecam wszystkie).

https://pl.wordpress.org/plugins/images-to-webp/


Po zapisaniu ustawień w zakładce Media -> Convert existing images wybierz folder, który wtyczka ma przejrzeć w celu zbudowania listy grafik do konwersji. Zdjęcia produktów i z postów na blogu znajdują się w folderze uploads. 
Pod listą folderów są dwa guziki o innym działaniu:

  • Find and convert missing images – odszukuje grafiki, do których nie ma jeszcze ich odpowiedników w formacie WebP;
  • Find and convert all images – konwertuje wszystkie obrazki, nadpisując nawet te przekonwertowane wcześniej.

Wtyczka ta dodaje też odpowiedni kod do pliku .htaccess zamieniający „w locie” wyświetlanie obrazków WebP przeglądarkom, które je obsługują. Nie ma więc możliwości, by internauta ze starszą przeglądarką nie zobaczył grafik na Twojej stronie.

  1. Odłóż ładowanie obrazów poza ekranem

Standardowo do pełne...

Pozostałe 70% treści dostępne jest tylko dla Prenumeratorów

Co zyskasz, kupując prenumeratę?
  • 6 drukowanych wydań magazynu Online Marketing
  • Dodatkowe artykuły niepublikowane w formie papierowej
  • Dostęp do czasopisma w wersji online
  • Dostęp do wszystkich archiwalnych wydań magazynu oraz dodatków specjalnych
  • ... i wiele więcej!
Sprawdź szczegóły

Przypisy