Jak mierzyć i optymalizować największą zawartość, aby uzyskać doskonały UX?

Jeśli chodzi o sukces online, istnieje wiele sposobów, aby to osiągnąć. Jednym z takich sposobów jest zoptymalizowane doświadczenie użytkownika. Google użyje różnych doświadczeń użytkowników i powiązanych wskaźników, aby uszeregować witryny pod kątem SEO. Kontynuuje tworzenie wielu narzędzi poprawiających wydajność sieci. Poniżej przyjrzymy się niektórym sposobom, w jakie Google chce poprawić wrażenia użytkownika.

Co to są Google Core Web Vitals?

W swojej ostatniej próbie zmodyfikowania miary i zrozumienia tego, co kwalifikuje się jako przyzwoite wrażenia użytkownika, Google uregulowało metryki strony. Te standardowe wskaźniki są określane jako podstawowe wskaźniki sieciowe i ułatwiają ocenę rzeczywistej wiedzy użytkowników w Twojej witrynie.

Co to jest największa zawartość farby?

Na początek spójrzmy na największą zawartość treści (LCP). Jest to jeden z podstawowych wskaźników internetowych. Mierzy czas ładowania największego komponentu treści w widocznym obszarze, gdy staje się widoczny. Alternatywne metryki, takie jak TTFB i First Contentful Paint, wspólnie ułatwiają obsługę strony na żywo, nie są one dostępne, gdy strona staje się „istotna” dla użytkownika.

Zwykle, o ile najważniejszy element na stronie nie stanie się w pełni widoczny, strona może nie oferować użytkownikowi wystarczającego kontekstu. LCP jest zatem reprezentatywny dla oczekiwań użytkownika. Jako podstawowy miernik wskaźników internetowych, LCP odpowiada za dwadzieścia pięć procent Wyniku Wydajności, dlatego jest jednym z najważniejszych mierników do optymalizacji.

Sprawdzanie czasu LCP

Według Google kategorie części, o których mowa w przypadku największej zawartości do malowania, to:

• <img> elementy
• Elementy <image> wewnątrz elementu <svg>
• Elementy <video> (użyto obrazu plakatu)
• Element z obrazem tła załadowany za pomocą funkcji URL
• Elementy blokowe składające się z węzłów tekstowych i/lub innych wbudowanych elementów tekstowych

Jak mierzy się LCP?

Oczywiście istnieje wiele sposobów mierzenia LCP Twojej strony internetowej. Najłatwiej to zrobić, korzystając z jednej z dostępnych platform, która obejmuje Lighthouse, PageSpeed ​​Insights, Search Console oraz Chrome User Experience Report. Na przykład Google PageSpeed ​​Insights w swoim raporcie wskazuje komponent do obliczania LCP.

Co to jest dobry LCP?

Aby zapewnić przyzwoitą wiedzę użytkowników, musisz starać się utrzymać w witrynie LCP wynoszący 2,5 sekundy lub mniej. Większość wczytywania stron powinna odbywać się poniżej tego progu. Teraz, gdy wszyscy wiemy, czym są LCP i jaki powinien być nasz cel, przyjrzyjmy się sposobom wzmocnienia LCP.

(Proszę dodać obraz o nazwie Większość stron musi ładować się przy LCP 2,5 sekundy lub niższym.jpg)

Jak zoptymalizować największą zawartość treści (LCP)

Podstawowym systemem całkowitego zmniejszenia LCP jest ograniczenie danych pobieranych na urządzenie użytkownika i skrócenie czasu potrzebnego na zarządzanie tymi treściami i zapewnienie bezproblemowego doświadczenia użytkownika.

Zoptymalizuj swoje zdjęcia

W większości witryn zawartość strony widocznej na ekranie zazwyczaj zawiera zbyt duży obraz, który jest wymagany w przypadku LCP. Może to być obraz bohatera, karuzela lub baner. Musisz zoptymalizować te obrazy, aby uzyskać bardziej niezawodny LCP.

Aby zoptymalizować swoje zdjęcia, musisz użyć obrazu CDN innej firmy, takiego jak ImageKit.io. Zaletą korzystania z zewnętrznej sieci CDN obrazu jest to, że po prostu kierujesz się na rzeczywistą działalność i pozostawiasz optymalizację obrazu do obrazu CDN.

Transformacje w czasie rzeczywistym dla responsywnych zdjęć

W prawie wszystkich witrynach Google stosuje podział na komórki z myślą o urządzeniach mobilnych. Dlatego konieczna jest optymalizacja LCP pod kątem urządzeń mobilnych na komputerach stacjonarnych. Każdy obraz musi być przeskalowany w dół, zgodnie z wymaganiami układu.

Na przykład chcesz, aby obraz był w mniejszym rozmiarze na stronie oferty i większy na stronie szczegółów produktu. Ta zmiana rozmiaru zapewnia, że ​​nie wydajesz się używać żadnych dodatkowych bajtów niż to, co jest potrzebne dla tej konkretnej strony.

Buforuj zdjęcia i skróć czas dostawy

Image CDNs używają Content Delivery Network (CDN) do dostarczania zdjęć. Zatrudnienie CDN zapewnia, że ​​zdjęcia ładują się z pobliskiej lokalizacji, a nie z serwera, który może znajdować się w połowie świata.

Wstępnie wczytaj niezbędne zasoby

Istnieją przypadki, w których przeglądarka może nie załadować wizualizacji, jeśli ma to wpływ na LCP. Na przykład obraz banera u góry strony zgięcia może być postrzegany jako obraz tła w pliku CSS. Ponieważ przeglądarka nie będzie wiedziała o tym obrazie, dopóki plik CSS nie zostanie pobrany, nie załaduje go.

Teraz, jeśli pytasz „Jak wstępnie załadować największy obraz farby Contentful?”, odpowiedź jest prosta. Będziesz mógł je wstępnie wczytać, używając tagu z atrybutem rel= „preload” w górnej części dokumentu w języku znaczników hipertekstowych.

Chociaż będziesz w stanie wstępnie załadować wiele zasobów w dokumencie, musisz ograniczyć je do obrazów lub filmów w części strony widocznej na ekranie, plików czcionek na całej stronie lub podstawowych plików CSS i JS.

Skróć czas reakcji serwera

Jeśli twój serwer ładuje się dłużej niż to, co jest uważane za normalne, czas potrzebny na załadowanie strony na ekranie rośnie. Ma to negatywny wpływ na każdy wskaźnik szybkości strony, łącznie z LCP. Aby wydłużyć czas reakcji serwera, możesz:

• Analizuj i optymalizuj swoje serwery
• Użyj sieci dostarczania treści
• Połącz się wstępnie z zewnętrznymi źródłami
• Podaj zawartość pamięci podręcznej - najpierw z pracownikiem serwisu
• Kompresuj pliki tekstowe

Popraw czasy reakcji urządzeń klienckich

Jeśli Twoja strona ładuje się długo, może zniechęcać potencjalnych klientów. Na szczęście jest kilka rzeczy, które możesz zrobić, aby upewnić się, że ładuje się poprawnie po ich stronie i zapewnia bezproblemową obsługę. To zawiera:

• Inline niezbędne CSS
• Minifikowanie i prasowanie treści
• Optymalizacja LCP pod kątem renderowania po stronie klienta
• Korzystanie z renderowania po stronie serwera
• Korzystanie z renderowania wstępnego

LCP stał się ważnym czynnikiem w rankingu wyszukiwania, który silnie koreluje z doświadczeniem użytkownika i podróżą. Dlatego jeśli prowadzisz biznes internetowy, musisz zoptymalizować te komponenty, aby zapewnić powodzenie przedsięwzięcia.

Biografia autora

Ghia Marnewick jest pisarką, menedżerem mediów społecznościowych i menedżerem ds. cyfrowych. Pisze treści dla Aumcore i pasjonuje się znajdowaniem nowych sposobów dzielenia się informacjami ze światem.