Jak zoptymalizować podstawowe wskaźniki internetowe w Shopify

Opublikowany: 2023-01-30

W Internecie jest mnóstwo informacji o tym, jak mierzyć podstawowe wskaźniki internetowe i czy Twoja witryna ma dobre, czy słabe wyniki. Ale jest bardzo mało praktycznych porad na temat tego, co musisz zrobić, aby wprowadzić ulepszenia, szczególnie w Shopify.

W tym artykule przyjrzymy się, jak dokładnie możesz poprawić swój wynik Core Web Vitals w swoim sklepie Shopify. Staraliśmy się, aby jak najwięcej z tych zaleceń było wykonalnych bez programisty, ale niektóre wymagają specjalistycznej implementacji technicznej.

Po kolei opiszemy każdy podstawowy wskaźnik Web Vital, wyjaśnimy, jakie czynniki wpływają na ich wydajność, a następnie pokażemy, jak poprawić każdy wskaźnik CWV w dowolnym sklepie Shopify.


Kliknij poniższe nagłówki, aby przejść bezpośrednio do tej sekcji:

  • Jak obliczane są podstawowe wskaźniki internetowe w Shopify
  • Jak ulepszyć LCP w Shopify
  • Jak ulepszyć CLS w Shopify
  • Jak poprawić FID w Shopify
  • Aplikacje Shopify Core Web Vitals

Co to są podstawowe wskaźniki internetowe

Podsumujmy bardzo krótko, czym są Core Web Vitals.

Podstawowe wskaźniki internetowe to zestaw wskaźników, których Google używa do mierzenia wydajności strony internetowej i wrażeń użytkowników. Dla każdego wskaźnika adresy URL są oznaczone jako „Zielony – dobry”, „Bursztynowy – wymaga poprawy” lub „Czerwony – słaby”.

Wyniki Core Web Vitals mają bezpośredni wpływ na rankingi w wyszukiwarkach.

LCP — największa farba zawierająca treść

Ile czasu zajmuje wyrenderowanie największego elementu na Twojej stronie na ekranie?

CLS — skumulowana zmiana układu

Jak bardzo zmienia się układ strony podczas ładowania strony?

FID — opóźnienie pierwszego wejścia

Jak długo strona reaguje na interakcje?


Jak obliczane są podstawowe wskaźniki internetowe w Shopify

Ważne jest, aby zrozumieć, w jaki sposób Google oblicza wyniki Core Web Vitals, ponieważ ma to wpływ na wprowadzanie znaczących ulepszeń. Dane dla Core Web Vitals pochodzą z danych CrUX, które mierzą wydajność prawdziwych odwiedzających witrynę za pomocą przeglądarki internetowej Chrome. Nazywa się to „danymi terenowymi”.

Dla każdego wskaźnika CWV istnieje minimalny średni wynik, który musisz osiągnąć, aby nie zostać oznaczony jako „słaby”. Jest to oparte na średnich wynikach zarejestrowanych dla grup stron. Ważne jest, aby zrozumieć, że Twoja witryna Shopify nie jest oceniana na podstawie podstawowych wskaźników internetowych; adresy URL w Twojej witrynie są.

Gdy Twój sklep Shopify ulegnie awarii w odniesieniu do danych Core Web Vitals, Search Console wyświetli przykładowe adresy URL, których dotyczy problem. Pomaga to zawęzić obszar występowania problemu i zastosować docelowe ulepszenia. Przed rozpoczęciem jakichkolwiek prac związanych z optymalizacją Core Web Vitals w sklepie Shopify najpierw określ, które obszary ulepszeń będą miały największy wpływ. Nie trać czasu na pracę, która nie przyniesie pozytywnego rezultatu.

Shopify Core Web Vital Porady dotyczące optymalizacji metryk

Podstawowa funkcja Web Vitals polega na dostarczaniu najważniejszych treści i zasobów tak szybko, jak to możliwe.

Optymalizacja szybkości strony nie jest sprawą jednorazową. Twoja organizacja musi przyjąć kulturę, w której wpływ na szybkość strony jest uwzględniany we wszystkich procesach decyzyjnych. W przypadku każdego ulepszenia, które rozważasz w swoim sklepie, zastanów się, jaki będzie kompromis w zakresie szybkości strony.

Jak ulepszyć LCP w Shopify

LCP odnosi się do największego elementu na Twojej stronie i czasu, jaki zajmuje przeglądarce załadowanie i wyświetlenie tego elementu na ekranie. Zwykle będzie to obraz, ale może to być również element tekstowy.

Aby ulepszyć LCP w sklepie Shopify, warto zrozumieć czynniki wpływające na LCP. Ładowanie elementu LCP składa się z czterech etapów.

Nie. Etap Opis
1 Czas do pierwszego bajtu Czas od momentu zainicjowania przeglądarki internetowej do momentu otrzymania przez przeglądarkę pierwszego bajtu danych w odpowiedzi HTML
2 Opóźnienie ładowania zasobów Różnica między TTFB a momentem rozpoczęcia ładowania elementu LCP przez przeglądarkę
3 Czas ładowania zasobów Czas potrzebny przeglądarce na pobranie elementu LCP
4 Opóźnienie renderowania elementu Różnica między pobraniem elementu LCP a wyrenderowaniem go na stronie

LCP polega na tym, ile czasu zajmuje przeglądarce malowanie/renderowanie największego elementu na stronie. Ładowanie i malowanie to nie to samo. Nawet jeśli Twój element LCP jest zoptymalizowany do małego rozmiaru pliku, LCP może nadal zająć dużo czasu z powodu:

  • Opóźnienie ładowania zasobów. Rozpoczęcie pobierania elementu przez przeglądarkę trwa zbyt długo
  • Opóźnienie renderowania elementu. Po pobraniu elementu LCP przez przeglądarkę renderowanie elementu na stronie trwa zbyt długo.

Wgląd na wynos jest taki, że LCP to coś więcej niż tylko rozmiar pliku największego elementu. Jest to czas potrzebny na ukończenie powyższego 4-etapowego procesu. Aby poprawić wyniki LCP, skup się na całym procesie ładowania i renderowania elementu LCP.


Jak znaleźć element LCP na dowolnej stronie Shopify

Aby ulepszyć LCP, musisz wiedzieć, który element na stronie jest LCP. W Shopify jest to łatwe. Po prostu przejdź do PageSpeed ​​Insights i przeanalizuj adres URL, dla którego chcesz znaleźć LCP. Po zakończeniu raportu przewiń w dół i zajrzyj do sekcji „Diagnostyka”. Pojawi się wiersz o nazwie „Największy element farby z zawartością”. Rozwiń to, aby zobaczyć szczegółowe informacje o tym, jakim elementem jest LCP na tej stronie.


Nie leniwie ładuj element LCP

Ładowanie z opóźnieniem to metoda używana do ładowania elementu tylko wtedy, gdy staje się on widoczny w rzutni. Pomaga to przyspieszyć ładowanie treści widocznej na części strony widocznej na ekranie. Nie powinieneś leniwie ładować elementu LCP, ponieważ opóźni to szybkość pobierania elementu przez przeglądarkę.

W sklepach Shopify elementem LCP na stronie produktu będzie zazwyczaj główny obraz produktu. Lub w poście na blogu elementem LCP będzie prawdopodobnie obraz nagłówka bloga. Niektóre motywy Shopify automatycznie dodają leniwe ładowanie do każdego obrazu, nawet tych, które pojawiają się w części widocznej na ekranie. Przejrzyj każdy ze swoich szablonów Shopify i dowiedz się, czym jest element LCP. Jeśli pojawia się nad zakładką, upewnij się, że poniższy atrybut nie znajduje się w tagu HTML:

ładowanie = "leniwy"


Wstępnie załaduj element LCP

Możesz użyć rel=”preload”, aby poinformować przeglądarki internetowe o jak najszybszym pobraniu określonego zasobu. Stosując rel=”preload” w elemencie LCP, przeglądarka nada priorytet ładowaniu tego zasobu na stronę.

Możesz to zrobić samodzielnie, edytując kod motywu. Deweloperzy motywów Shopify mają do dyspozycji filtr, który można dodać do szablonów Shopify Liquid, który wyświetli tag wstępnego ładowania.


Użyj obrazów Nextgen

Nowe formaty obrazów, takie jak WebP, mają mniejszy rozmiar pliku niż tradycyjne formaty, takie jak JPG i PNG. Jeśli elementem LCP jest obraz, użycie formatu obrazu Nextgen przyspieszy czas pobierania. Jeśli to możliwe, używaj obrazów WebP, ale pamiętaj o uwzględnieniu opcji zastępczej dla starszych przeglądarek, które nie obsługują obrazów nowej generacji.

Nowe motywy Shopify automatycznie konwertują Twoje obrazy na WebP i wyświetlają je w odpowiednich przeglądarkach.


Upewnij się, że element LCP jest zawarty w początkowej odpowiedzi HTML

Zmniejsz „opóźnienie ładowania zasobów”, upewniając się, że element LCP jest dostarczany w ramach początkowej odpowiedzi HTML. Jeśli element LCP zostanie załadowany na stronę przez zasób zewnętrzny (taki jak skrypt JS), rozpoczęcie pobierania elementu LCP przez przeglądarkę potrwa dłużej.

To, czy wpłynie to na Twój sklep Shopify, będzie zależeć od używanego szablonu sklepu. Szybkim sposobem na przetestowanie tego jest sprawdzenie, jaki jest twój element LCP, a następnie wyświetlenie strony z wyłączonym JS. Jeśli element LCP nie jest wyświetlany w kodzie HTML strony, oznacza to, że nie został dostarczony w początkowej odpowiedzi HTML.


Wyeliminuj zasoby blokujące renderowanie

Porada „Wyeliminuj zasoby blokujące renderowanie” istnieje od wieków. Ale co to właściwie znaczy? Niektóre zasoby, takie jak skrypty i arkusze stylów, blokują renderowanie strony internetowej. Gdy przeglądarka wykryje zasób, zatrzyma pobieranie strony, a zamiast tego pobierze i uruchomi ten zasób. Opóźnia to renderowanie strony dla użytkowników.

Raport latarni morskiej pokaże Ci zasoby blokujące renderowanie dla dowolnej strony. Musisz więc ustalić, które skrypty i arkusze stylów blokują renderowanie, a następnie zoptymalizować sposób ich dostarczania.

Wyeliminuj JS blokujący renderowanie

Najpierw musisz zrozumieć dwa atrybuty zwane defer i async. Te atrybuty HTML można dołączać do zewnętrznych skryptów i informować przeglądarkę, kiedy pobrać/uruchomić zasób.

Atrybut Definicja
Odraczać Nie pobieraj ani nie uruchamiaj skryptu, dopóki strona się nie zrenderuje
asynchroniczny Kontynuuj pobieranie skryptu podczas pobierania reszty strony, ale następnie zatrzymaj pobieranie strony i uruchom skrypt

Tak więc, stosując async lub defer w swoich skryptach JS, możesz zminimalizować ich wpływ na renderowanie strony. Shopify nie będzie automatycznie asynchronizować ani opóźniać skryptów, więc musisz przejść do płynnych szablonów motywu i samodzielnie dodać atrybut. Ale bądź bardzo ostrożny podczas wykonywania tego procesu, ponieważ musisz rozważyć, jaki wpływ odroczenie skryptu może mieć na funkcjonalność Twojego sklepu.

Przekonasz się również, że aplikacje i wtyczki, które instalujesz w swoim sklepie Shopify, będą wyświetlać skrypty JS blokujące renderowanie. Możesz je zidentyfikować za pomocą raportu Lighthouse. Dokładnie rozważ każdą aplikację, którą instalujesz w swoim sklepie i pomyśl o potencjalnym wpływie na szybkość strony. Niektórzy sprzedawcy nawet nie zdają sobie sprawy, że nieużywane aplikacje są nadal zainstalowane w sklepie i wpływają na szybkość strony. Odinstalowując aplikację, upewnij się, że nie pozostawia ona żadnego starszego kodu w Twoim motywie.

Wyeliminuj arkusze stylów CSS blokujące renderowanie

Aby wyeliminować kod CSS blokujący renderowanie, należy osadzić krytyczne style potrzebne do renderowania treści w części strony widocznej na ekranie. Natychmiastowe pobieranie całego arkusza stylów dla każdego odwiedzającego nie jest efektywne, ponieważ większość CSS nie zostanie wykorzystana.

Rozwiązaniem jest wbudowanie krytycznego kodu CSS potrzebnego do renderowania części strony widocznej na ekranie poprzez umieszczenie go w tagu stylu w nagłówku . Następnie dodaj poniższy kod do pliku Twojego theme.liquid.js, aby załadować główny arkusz stylów asynchronicznie.

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

Zanim opublikujesz to w swoim działającym sklepie, poeksperymentuj z motywem testowym, aby sprawdzić, czy Twoja strona nadal wygląda poprawnie wizualnie.


Jak ulepszyć CLS w Shopify

CLS polega na tym, jak bardzo zmienia się układ strony podczas ładowania strony. Przyczyną są zwykle obrazy, które przesuwają zawartość podczas ładowania i renderowania.

Dodaj atrybuty szerokości i wysokości do swoich obrazów

Najłatwiejszym rozwiązaniem CLS jest upewnienie się, że tagi img wyświetlają jawne atrybuty szerokości i wysokości. Atrybuty te są stosowane do obrazu HTML i informują przeglądarkę o szerokości i wysokości obrazu. Dzięki tym informacjom przeglądarka może obliczyć proporcje i wymiary obrazu oraz zarezerwować miejsce potrzebne na ten obraz. Zapobiega to przesuwaniu się układu po dodaniu obrazu na stronę.

Aby to zrobić na obrazie we własnym sklepie Shopify, zaloguj się i przejdź do sekcji szablonów. I przejdź do „Edytuj kod” dla swojego motywu. Następnie znajdź fragment kodu w swoim płynnym szablonie, który wyświetla obraz i dodaj następujący fragment kodu do tagu img.

 height="{{img.height}}" width="{{img.width}}

Przyjrzyj się płynnym szablonom, których używasz na stronie głównej Shopify, kolekcjach, produktach i blogach, i upewnij się, że tagi img odnoszą się do atrybutów szerokości i wysokości.

Zoptymalizuj swoje czcionki

Te fantazyjne czcionki internetowe, które ładujesz z miejsc takich jak czcionki Google, mogą powodować problemy z CLS z powodu problemu zwanego FOUS (błysk niestylizowanego tekstu). W tym miejscu przeglądarka internetowa początkowo ładuje czcionkę zastępczą, a następnie, gdy ładowana jest główna czcionka internetowa, tekst jest ponownie renderowany, powodując zmianę układu.

Ogranicz poleganie na czcionkach internetowych innych firm Przede wszystkim spróbuj zmniejszyć swoją zależność od czcionek internetowych innych firm. Podczas importowania czcionek internetowych należy importować tylko potrzebne rodziny czcionek. Nie importuj różnych grubości i stylów czcionek, jeśli nigdy nie były używane, ponieważ spowoduje to zwiększenie rozmiaru pliku czcionki.

Wstępnie ładuj czcionki Czcionki internetowe są czasami ładowane z arkusza stylów. Opóźnia to szybkość, z jaką przeglądarka może rozpocząć pobieranie czcionki. Zamiast tego wstępnie załaduj pliki czcionek w formacie Twojego sklepu. Spowoduje to, że przeglądarka załaduje plik czcionki jako wysoki priorytet.

Użyj font-display:opcjonalnie Wyświetlanie czcionek to właściwość CSS, która mówi przeglądarce, co ma zrobić, gdy krój czcionki nie zostanie pobrany w ciągu 100 ms. Przeglądarka początkowo załaduje czcionkę zastępczą, a jeśli pobieranie niestandardowej czcionki nie zakończy się w ciągu 100 ms, przeglądarka zachowa renderowanie czcionki zastępczej na stronie. Zmniejsza to ryzyko zbyt późnego załadowania niestandardowej czcionki i spowodowania zmiany układu.


Jak poprawić FID w Shopify

Z naszego doświadczenia wynika, że ​​FID jest najmniej powszechnym wskaźnikiem Core Web Vital, który ma wpływ na sklepy Shopify. Pomyśl o FID jako o sposobie mierzenia responsywności strony podczas ładowania. Nic nie frustruje użytkowników bardziej niż klikanie/stukanie i nic się nie dzieje.

FID jest podobny do innego wskaźnika o nazwie Całkowity czas blokowania (TBT). TBT mierzy czas między rozpoczęciem renderowania strony (First Contentful Paint lub FCP) a momentem, w którym strona staje się responsywna (Time to Interactive lub TTI).

TBT jest spowodowane „długimi zadaniami”, które blokują przetwarzanie głównego wątku. Główny wątek to miejsce, w którym przeglądarka przetwarza wszystko, co potrzebne do załadowania strony. Jeśli długie zadania blokują przetwarzanie głównego wątku, opóźnia to, jak szybko strona staje się interaktywna dla użytkowników.


Jaka jest różnica między FID a TBT

Główna różnica między FID i TBT polega na tym, że FID opiera się na danych terenowych (danych od rzeczywistych użytkowników, którzy odwiedzili Twój sklep Shopify). Podczas gdy TBT jest mierzalny w laboratorium i jest obliczany poprzez przeprowadzanie testów w wymyślonym środowisku z określonymi warunkami sieciowymi.

Ponieważ nie możesz zmierzyć FID podczas testowania własnych stron, powinieneś zamiast tego zmierzyć TBT.

Aby poprawić FID, musisz przyspieszyć reakcję sklepu Shopify na pierwszą interakcję użytkownika. Odbywa się to poprzez sprawienie, aby strony Shopify ładowały się tak wydajnie, jak to możliwe. Skoncentruj się na tych trzech obszarach:

Zmniejsz wpływ kodu stron trzecich

Podobnie jak w przypadku wszystkich podstawowych wskaźników Web Vitals, JavaScript innych firm jest często przyczyną problemów. Każda firma zewnętrzna, która zablokuje główny wątek na dłużej niż 250 ms, zostanie oznaczona w raporcie Lighthouse. Przeprowadź swoje strony przez Lighthouse, aby zidentyfikować, które skrypty innych firm powodują problemy. Następnie zdecyduj, które z nich można ustawić jako asynchroniczne lub odroczone.

Skróć czas wykonywania JavaScript

Ważny jest również czas potrzebny do wykonania kodu JavaScript. Przede wszystkim przeprowadź swoje strony przez Lighthouse i określ, które skrypty są wykonywane najdłużej. Lighthouse oznaczy wszystkie skrypty, które trwają dłużej niż 2 sekundy.

Użyj dzielenia kodu Zamiast dostarczać cały kod JavaScript w jednym pliku, podziel kod na mniejsze części i dostarczaj tylko kod potrzebny dla danej strony. Nie jest to łatwe i wymaga wsparcia programistów, którzy zarządzają Twoim kodem. Przekonasz się, że jest to o wiele łatwiejsze, jeśli zostanie zintegrowane z rozwojem motywu Shopify na początku projektu.

Minifikuj i kompresuj swój kod Kiedy zmniejszasz swój kod, usuwasz niepotrzebne spacje i komentarze. Zmniejsza to rozmiar pliku, ale przyspiesza, jak szybko przeglądarka może wykonać kod. Jedną z największych zalet Shopify jest to, że większość motywów js jest automatycznie minimalizowana.

Podobnie jak minifikacja, kompresja js zmniejsza rozmiar pliku i przyspiesza, jak szybko przeglądarka internetowa może wykonać kod.

Zminimalizuj pracę gwintu

Główny wątek wykonuje całą pracę przetwarzania i obliczania, jak zbudować stronę. Gdy główny wątek zostanie zajęty przez intensywne zadania, Twój TBT będzie gorszy. Sprowadza się to głównie do tego, jak solidny jest Twój motyw Shopify. Tanie szablony zbudowane przez słabych programistów nie będą ładować się tak wydajnie, jak te opracowane przez ekspertów Shopify.

Jak możesz zminimalizować pracę wątków w swoim sklepie Shopify? Jak wspomniano powyżej, jest o wiele łatwiej, jeśli jest to zintegrowane z motywem od samego początku. Zalecamy zakup premium motywu Shopify ze świetnymi recenzjami. Lub jeśli budujesz własny sklep Shopify, upewnij się, że współpracujesz z programistami-ekspertami Shopify, którzy mogą zapewnić optymalizację Twojego motywu w celu zminimalizowania pracy z wątkami.

Jak mierzyć wydajność podstawowych wskaźników internetowych

Teraz wiesz, jak ulepszyć Core Web Vitals w swoim sklepie Shopify, następnie musisz wiedzieć, jak mierzyć postęp w Core Web Vitals.

Konsola wyszukiwania

Najszybszym sposobem sprawdzenia, jak Twój sklep Shopify obecnie radzi sobie z podstawowymi wskaźnikami internetowymi, jest skorzystanie z Search Console. Przejdź do raportu Podstawowe wskaźniki internetowe z menu po lewej stronie, aby uzyskać dane o aktualnej wydajności witryny. Będzie zawierać zestawienie problemów z podstawowymi wskaźnikami internetowymi oraz przykładowe adresy URL, których dotyczy problem.

Pagespeed Insights/Lighthouse

Pagespeed Insights to bezpłatne narzędzie Google, które pozwala mierzyć szybkość dowolnej strony. Przeprowadź adresy URL Shopify za pomocą narzędzia, aby uzyskać szczegółowe zestawienie wydajności wraz z zalecanymi działaniami w celu uzyskania wyższego wyniku.

Raport CrUX

CrUX to własny zestaw danych Google dotyczący szybkości/wydajności dla milionów prawdziwych stron. Możesz uzyskać dostęp do danych CrUX dla własnego sklepu Shopify za pomocą pulpitu nawigacyjnego Google CrUX Data Studio. Pulpit nawigacyjny zawiera szczegółowe zestawienie wyników Twojej witryny w zakresie wskaźników podstawowych wskaźników internetowych w ciągu ostatnich 16 miesięcy.

Co oznaczają wszystkie te warunki CWV?

Kiedy zaczniesz przeglądać Core Web Vitals, natkniesz się na wiele skomplikowanych terminologii, oto co to wszystko oznacza:

Termin Definicja
Załaduj wstępnie Poproś przeglądarkę, aby priorytetowo potraktowała pobieranie określonego zasobu. Wysoki priorytet
Wstępne pobieranie DNS Rozwiąż nazwę domeny
Wstępne pobieranie Powiedz przeglądarce, aby załadowała zasób, zanim użytkownik o to poprosi. Używane w przypadku zasobów, które prawdopodobnie będą potrzebne w najbliższej przyszłości (takich jak następna strona). Przyspieszy ładowanie, gdy zasób jest wymagany, ale może spowolnić ładowanie bieżącej strony. Niski priorytet
Wstępne połączenie Zasugeruj, aby przeglądarka łączyła się ze źródłem, zanim zasoby zostaną pobrane z domeny. Rozwiąże DNS i TCP Handshake/TLS Negocjacje
Odraczać Opóźnij ładowanie skryptu do momentu załadowania strony
Asynchroniczny Załaduj skrypt, gdy tylko zostanie osiągnięty, ale kontynuuj ładowanie reszty strony

Podstawowe wskaźniki internetowe Shopify Apps

Istnieje wiele aplikacji Shopify, które twierdzą, że są w stanie poprawić wyniki Core Web Vitals. Niektóre z tych aplikacji są skuteczne i zapewniają poprawę wydajności. Chociaż może to poprawić Twoje wyniki Core Web Vitals, nie ma gwarancji, że zobaczysz jakikolwiek efekt. Wynika to z faktu, że wyniki Core Web Vitals są unikalne dla każdego sklepu Shopify. Jeśli wyniki Core Web Vitals Twojego sklepu są słabe z powodu konkretnego problemu z motywem, aplikacja prawdopodobnie nie zrobi żadnej różnicy.

Jeśli chcesz skorzystać z aplikacji, zalecamy wypróbowanie aplikacji i obserwowanie jej wpływu na wydajność. Oto kilka sugerowanych aplikacji do wypróbowania:

  • https://apps.shopify.com/core-web-vitals-booster
  • https://apps.shopify.com/page-speed-optimizer
  • https://apps.shopify.com/swift

Jeśli potrzebujesz porady lub wsparcia w swojej firmie e-commerce, napisz do naszego zespołu, a z przyjemnością Ci pomożemy.