Core Web Vitals w Shopify — jak poprawić LCP, INP i CLS bez ryzykownych skrótów

Dobry wynik Core Web Vitals oznacza, że co najmniej 75% odpowiednich wizyt mieści się w zalecanych progach: LCP do 2,5 s, INP do 200 ms i CLS do 0,1. Cel LCP poniżej 1,5 s może być ambitnym wynikiem konkretnego projektu, ale nie jest oficjalnym uniwersalnym progiem Google. W Shopify poprawa wymaga identyfikacji rzeczywistego elementu LCP, kontroli motywu, aplikacji, obrazów i skryptów zewnętrznych.

Dane terenowe i laboratoryjne

Dane terenowe pochodzą od prawdziwych użytkowników i uwzględniają urządzenia, sieci oraz zachowanie. To na nich opiera się ocena Core Web Vitals w Search Console i CrUX.

Dane laboratoryjne z Lighthouse lub testów lokalnych pomagają odtworzyć problem i znaleźć zasób, który go powoduje. Pojedynczy test laboratoryjny nie powinien być przedstawiany jako wynik wszystkich użytkowników.

Raport przed i po wdrożeniu musi wskazywać, czy dana liczba pochodzi z pola, laboratorium, którego szablonu, urządzenia i okresu.

Audyt LCP

Dla strony głównej, kolekcji, produktu i artykułu ustal:

• element LCP;
• czas odpowiedzi serwera;
• moment odkrycia zasobu;
• opóźnienie pobrania;
• czas renderowania;
• rozmiar i format obrazu;
• CSS oraz fonty blokujące renderowanie;
• wpływ banera cookies, pop-upu i aplikacji.

fetchpriority="high" stosuj tylko dla rzeczywistego obrazu LCP. Nie dodawaj go do wielu zasobów. Obraz LCP nie powinien być ładowany leniwie i powinien być możliwy do odkrycia w początkowym HTML.

Obrazy Shopify

Korzystaj z mechanizmów CDN i transformacji obrazów Shopify zgodnie z aktualną składnią motywu. Generuj warianty odpowiadające realnym breakpointom, dodawaj srcset, sizes, width i height, a jakość kompresji oceniaj wizualnie.

Nie wymuszaj konkretnego formatu przez niepotwierdzony parametr Liquid. Sprawdź rzeczywisty URL, nagłówek Content-Type oraz zachowanie CDN. Nie zamieniaj każdej grafiki na bardzo mały plik kosztem jakości produktu.

Motyw, CSS i JavaScript

Najpierw usuń niewykorzystywane sekcje, skrypty i duplikaty. Dopiero później rozważ krytyczny CSS, opóźnianie kodu i dzielenie zasobów.

Nie wdrażaj globalnie technik typu media="print" dla stylesheetów ani masowego inline CSS bez testów. Mogą powodować błysk nieostylowanej treści, błędy dostępności, duplikację i trudniejszy cache.

Każda zmiana powinna przejść:

• build motywu;
• kontrolę wizualną;
• test menu, wyszukiwarki, wariantów, koszyka i checkoutu;
• test urządzeń mobilnych;
• kontrolę błędów JS;
• pomiar przed i po.

Aplikacje i tagi zewnętrzne

Zrób inwentaryzację:

• aplikacji aktywnych;
• pozostałości po odinstalowanych aplikacjach;
• app embeds;
• pikseli;
• GTM;
• chatów;
• narzędzi opinii;
• personalizacji;
• testów A/B;
• skryptów zgód.

Nie usuwaj aplikacji tylko dlatego, że zwiększa czas JavaScript. Najpierw sprawdź wartość biznesową, alternatywę i wpływ na funkcjonalność.

INP i CLS

Dla INP analizuj długie zadania, obsługę kliknięć, warianty produktu, filtry, menu, skrypty aplikacji i renderowanie po interakcji.

Dla CLS rezerwuj miejsce na obrazy, banery, komunikaty, rekomendacje i fonty. Elementy pojawiające się nad treścią po załadowaniu powinny mieć zaplanowaną przestrzeń albo nie przesuwać głównej zawartości.

Zakres prac technicznych

Relacja z Stwórz Stronę

Samurai SEO odpowiada w tym materiale za diagnozę wpływu wydajności na crawl, UX, analitykę i konwersję. Pełne prace programistyczne oraz rozwój sklepu mogą być realizowane przez zaplecze Stwórz Stronę. Link ma prowadzić do właściwej usługi technicznej, a nie do ogólnej strony głównej, jeśli taka podstrona istnieje.

Podsumowanie

Poprawa Core Web Vitals w Shopify nie polega na wklejeniu jednego snippetu. Najpierw identyfikujemy problem w danych terenowych, później odtwarzamy go laboratoryjnie, wdrażamy zmianę na kopii motywu i kontrolujemy funkcjonalność. Wynik techniczny wspiera użytkownika, ale nie jest gwarancją pozycji ani konwersji.