Wprowadzenie

Szybkość działania sklepu PrestaShop nie może być definiowana przez jego zdolność do uzyskania wysokiego wyniku Lighthouse. Wydajność to przede wszystkim szybkość, z jaką użytkownik może uzyskać dostęp do ważnych treści, wejść w interakcję z produktami i polami formularza zamówienia oraz poruszać się po stronie bez niepożądanych ruchów.

W tym miejscu do gry wkracza PrestaShop Core Web Vitals Optimization.

Wskaźniki Core Web Vitals koncentrują się na trzech aspektach rzeczywistego doświadczenia użytkownika strony: wydajności ładowania, responsywności i stabilności wizualnej. Zgodnie z zaleceniami Google, idealny czas ładowania powinien wynosić mniej niż 2.5 sekundy, czas interakcji poniżej 200 milisekund, a czas CLS poniżej 0.1.

Jednak w przypadku sklepów PrestaShop osiągnięcie tych standardów nie jest takie proste, ponieważ wiąże się to nie tylko ze skompresowaniem obrazów i skonfigurowaniem buforowania.

Na wydajność witryny internetowej wpływa wiele różnych elementów, m.in. zastosowany motyw, moduły, skrypty, informacje o produkcie i konfiguracja serwera, co utrudnia spełnienie standardów Google.

W artykule opisano proces optymalizacji Core Web Vitals dla PrestaShop.

Co to są podstawowe funkcje sieciowe?

Core Web Vitals to wskaźniki Google służące do pomiaru skuteczności projektu z perspektywy doświadczenia użytkownika.

Trzy obecne wskaźniki to:

Largest Contentful Paint (LCP): mierzy wydajność ładowania. 
Dobry cel: ≤ 2.5 sekundy.
Interakcja z następnym malowaniem (INP): mierzy responsywność interakcji. 
Dobry cel: < 200 milisekund.
Kumulatywne przesunięcie układu (CLS): mierzy stabilność wizualną. 
Dobry cel: < 0.1.

Tych wskaźników nie należy traktować jako odizolowanych danych SEO. Opisują one rzeczywiste aspekty wrażeń użytkowników ze strony. Dobre wskaźniki Core Web Vitals nie gwarantują wysokich pozycji w wynikach wyszukiwania; wrażenia ze strony są szersze niż te trzy wskaźniki.

W przypadku sklepu e-commerce to rozróżnienie ma znaczenie. Strona główna może ładować się szybko, podczas gdy strony produktów pozostają wolne. Strona produktu może wyświetlać się szybko, ale stać się nieaktywna, gdy klienci zmieniają kombinację. Strona może również wyświetlać się szybko, ale gwałtownie zmieniać się po załadowaniu baneru promocyjnego lub widżetu recenzji.

Dlaczego sklepy PrestaShop często mają problemy z wydajnością

PrestaShop sam w sobie rzadko jest jedynym powodem spowolnienia sklepu. Wąskim gardłem jest często kombinacja platformy, motywu, modułów, serwera, bazy danych, zasobów i usług zewnętrznych.

Typowe przyczyny powolnego działania witryny internetowej to:

• Banery wielkoformatowe i zdjęcia produktów
• Nadmierne używanie JavaScript
• Moduły ładują zasoby w obrębie witryny.
• Posiadanie zbyt wielu skryptów analityki marketingowej
• Funkcje motywu o dużej intensywności
• CSS powoduje blokowanie renderowania.
• Pamięć podręczna jest nieprawidłowo skonfigurowana.
• Powolne przetwarzanie PHP
• Kosztowne żądania do bazy danych
• Żądania zewnętrzne do interfejsów API
• Niska jakość hostingu
• Zbyt wiele elementów DOM
• Lazy loading jest wykonywany nieprawidłowo.
• Zawartość jest dodawana dynamicznie z optymalizacją wydajności. 

Aby to zadziałało, należy przeprowadzić optymalizację wydajności, mierząc i identyfikując problemy, wprowadzając niezbędne zmiany oraz ponownie testując i mierząc, zanim przejdzie się do następnego kroku.

Jak ulepszyć podstawowe wskaźniki internetowe w PrestaShop

Pierwszym krokiem w kierunku udoskonalenia wskaźników Core Web Vitals w PrestaShop jest przetestowanie reprezentatywnych stron.

Powinno to z pewnością obejmować:

• Strona główna
• Strona kategorii
• Strona produktu
• Strona wyszukiwania
• Koszyk
• Zamówienie
• Niezbędne strony docelowe

Wydajność stron produktów może się różnić od wydajności strony głównej. Na przykład, baner główny może być elementem LCP na stronie głównej, podczas gdy jego miejsce na stronie produktu może zająć główny obraz produktu, a strona kategorii fasetowej może być przeciążona JavaScriptem i wykorzystaniem DOM.

Aby dokładnie śledzić proces, skorzystaj z następujących narzędzi: Google PageSpeed ​​Insights, Lighthouse, Chrome DevTools, Google Search Console i narzędzi do monitorowania użytkowników.

Pamiętaj, że poleganie wyłącznie na jednej sesji Lighthouse nie wystarczy. Wyniki testów mogą się różnić w zależności od urządzenia, sieci, pamięci podręcznej itp.

Jak ulepszyć LCP w PrestaShop

 

Largest Contentful Paint (LCP) to miara momentu, w którym podstawowy, istotny element treści pojawia się na ekranie.

W PrestaShop elementem LCP jest zazwyczaj najważniejsze zdjęcie produktu, główny obraz na stronie głównej, baner kategorii lub duży blok nagłówka/treści. Kluczowe jest, aby nie zakładać, czym dokładnie jest element LCP; należy go znaleźć za pomocą narzędzi do testowania wydajności.

Znajdź rzeczywisty element LCP

Gdyby strona produktu wygenerowała wynik LCP na poziomie 4.2 sekundy, można by od razu zadać pytanie: „Jaki jest najlepszy sposób na optymalizację obrazu?”. Należy jednak najpierw sprawdzić, czy komponent LCP odnosi się do obrazu produktu. Dodatkowo należy wziąć pod uwagę następujące kwestie: 

1. Czas pojawienia się HTML.
2. Moment, w którym przeglądarka identyfikuje obraz.
3. Czy bloki CSS są renderowane.
4. Rozmiar obrazu.
5. Prędkość pobierania obrazu.
6. Wpływ JavaScript na proces renderowania.
7. Szybkość odpowiedzi serwera.

Byłoby to o wiele korzystniejsze niż stosowanie typowej techniki kompresji.

Zoptymalizuj obraz LCP

W przypadku gdy elementem LCP jest główny obraz produktu, upewnij się, że przeglądarka nie pobierze zasobu o rozmiarze przekraczającym potrzebę.

Aby to osiągnąć:

• Obrazy powinny mieć odpowiedni rozmiar.
• Korzystaj z responsywnych metod dostarczania obrazów.
• Obrazy powinny być skutecznie kompresowane.
• Jeśli to możliwe, użyj formatu WebP lub AVIF.
• Wybierz odpowiednią jakość obrazu.
• Generuj poprawnie miniatury.

Wyświetlanie zdjęć produktów o wymiarach 700 × 700 pikseli i takiej liczby pikseli, jaka jest potrzebna, zapobiegnie niepotrzebnemu pobieraniu dużych obrazów.

Najlepiej byłoby, gdyby leniwe ładowanie obrazów dotyczyło obrazów wyświetlanych poniżej linii zagięcia na stronie produktu.

Bądź selektywny w kwestii wstępnego ładowania

Wstępne załadowanie rzeczywistego obrazu kluczowego może pomóc przeglądarce w jego wcześniejszym odkryciu. Niemniej jednak, zastosowanie instrukcji wstępnego ładowania dla kilku obrazów, czcionek, plików CSS i skryptów może przynieść odwrotny skutek, ponieważ ograniczają one przepustowość.

Wstępnie ładuj tylko zasoby, które mają rzeczywiście duże znaczenie dla początkowego renderowania; podobnie, parametr fetchpriority=”high” powinien być używany selektywnie, a nie bezkrytycznie.

Skróć czas odpowiedzi serwera

Aby wyświetlić przydatną treść, przeglądarka musi najpierw uzyskać odpowiednią odpowiedź.

Istnieje kilka przyczyn, które mogą powodować opóźnienia w czasie reakcji, w tym:

 – Problemy z czasem wykonywania PHP

 – Kosztowne zapytania do bazy danych

 – Brak pojemności serwera

 – Nieskuteczne buforowanie

 – Wydajność przetwarzania modułowego

 – Korzystanie z zewnętrznych interfejsów API

 – Duża ilość pracy back-endowej wykonywanej w celu wygenerowania strony

Dlatego też potrzeba skrócenia czasu reakcji jest powiązana z optymalizacją LCP.

Jak obniżyć CLS w PrestaShop

Cumulative Layout Shift (CLS) mierzy nieoczekiwane przesunięcie zawartości podczas ładowania strony.

Typowym przykładem jest baner promocyjny, który ładuje się po wyświetleniu informacji o produkcie i jest wstawiany nad nim. Wszystko poniżej przesuwa się w dół, co może negatywnie wpłynąć na komfort użytkowania.

Najczęstsze przyczyny problemów w PrestaShop są następujące:

• Zdjęcia nie mają ustalonych wymiarów.
• Galerie produktów.
• Suwaki.
• Banery.
• Baner dotyczący plików cookie.
• Biuletyny
• Recenzje
• Zalecenia ładowane dynamicznie.
• Czcionki internetowe.
• Zawartość AJAX.
• Widżety stron trzecich.

Zarezerwuj miejsce na obrazy

Obrazy powinny mieć znane wymiary lub być umieszczone w odpowiednim formacie. Na przykład:

Konkretny sposób implementacji będzie się różnić w zależności od motywu PrestaShop i systemu obrazów responsywnych, ale podstawowa zasada pozostaje ta sama: przeglądarka musi wiedzieć, ile miejsca potrzebuje obraz, zanim zostanie on pobrany. 

Stabilizuj moduły dynamiczne

Jeśli moduł dynamicznie wstawia treść, zastanów się nad utworzeniem symbolu zastępczego przed dostarczeniem treści.

Zamiast pozwalać, aby widżet recenzji w drastyczny sposób spychał opis produktu na dalszy plan, zadbaj o to, aby zarezerwować dla niego miejsce lub umieścić widżet w taki sposób, aby proces ładowania nie kolidował z ważną treścią.

Celem wyeliminowania CLS nie jest zapobieganie każdej zmianie wizualnej. Celem jest powstrzymanie nieprzewidzianych zmian, które negatywnie wpływają na pracę użytkownika.

Jak poprawić INP

Funkcja INP jest szczególnie istotna w przypadku stron e-commerce. Użytkownicy muszą wybierać opcje produktów, modyfikować ilość, przeglądać zdjęcia, stosować filtry, wyszukiwać produkty, dodawać produkty do koszyka, otwierać listy rozwijane, korzystać z kuponów i zmieniać opcje dostawy.

Jeśli JavaScript zawładnie przeglądarką użytkownika, takie operacje mogą przebiegać wolniej.

Dlaczego INP może być trudne w PrestaShop

Typowy sklep PrestaShop może zawierać elementy JavaScript pochodzące z funkcjonalności motywu, modułów produktów, modułów wyszukiwania, narzędzi analitycznych, menedżerów tagów, systemów recenzji, aplikacji czatu, narzędzi personalizacji, platform zgód i integracji płatności.

Każdy pojedynczy skrypt może wydawać się nieszkodliwy. Łączny koszt wykonania może być znaczny.

Użyj narzędzi Chrome DevTools do analizy wydajności i pokrycia, aby znaleźć długie zadania, nieużywany kod JavaScript, obiekty nasłuchujące zdarzeń, kosztowne wykonania skryptów oraz zmiany układu/przerysowania spowodowane manipulacjami DOM.

Zredukuj niepotrzebny JavaScript

Po zminimalizowaniu kodu JavaScript rozmiar pliku się zmniejsza, nie oznacza to jednak, że w czasie wykonywania nie będzie konieczności wykonywania intensywnych obliczeń.

Obsługa kliknięć może nadal powodować spowolnienie przeglądarki, nawet jeśli pliki JS są zminimalizowane i mają bardzo mały rozmiar.

Jeśli to możliwe, należy dążyć do eliminowania zbędnego kodu, wprowadzać funkcje wyłącznie niezbędne, minimalizować czasochłonne operacje i ponownie oceniać kod napisany przez osoby trzecie.

Załaduj funkcjonalność tylko tam, gdzie jest to wymagane

Praktycznym sposobem optymalizacji PrestaShop byłoby unikanie ładowania zasobów modułów na stronach, gdzie taka funkcjonalność nie jest wymagana.

Na przykład moduł obsługujący galerię produktów nie musi ładować całego pakietu JavaScript na stronach CMS, na których ta funkcja nie jest wykorzystywana.

Jak optymalizować obrazy, aby uzyskać lepszą wydajność

Obrazy są niezbędne w handlu elektronicznym, ale to one najczęściej wpływają na objętość strony.

Użyj odpowiednich wymiarów, wydajnych formatów, takich jak WebP lub AVIF (jeśli są obsługiwane), odpowiedniej kompresji, responsywnego dostarczania obrazów i leniwego ładowania obrazów poniżej linii zagięcia.

Celem nie są po prostu mniejsze obrazy. Celem jest właściwy obraz, o właściwych wymiarach, dostarczony we właściwym czasie.

Jak naprawić zasoby blokujące renderowanie

CSS i JavaScript mogą opóźniać renderowanie strony przez przeglądarkę. Sklep PrestaShop może gromadzić zasoby z plików motywu, podstawowych funkcji, modułów, niestandardowych rozwiązań i integracji z rozwiązaniami innych firm.

Otwórz kartę Sieć w narzędziach Chrome DevTools, aby znaleźć duże pliki CSS i JavaScript, zbędne biblioteki, zasoby modułów ładowane globalnie, skrypty innych firm, czcionki i blokowanie żądań.

Znajdź style potrzebne w pierwszym obszarze widoku i usuń niepotrzebne arkusze CSS, odłóż nieistotne funkcjonalności i unikaj globalnego ładowania nieużywanego modułu CSS.

Nie łącz wszystkich arkuszy stylów bezmyślnie. Mogą występować pewne zależności w motywie i modułach PrestaShop, co może być niebezpieczne dla agresywnego zarządzania zasobami.

Moduły PrestaShop: Ukryty koszt wydajności

Moduły mogą dodawać przetwarzanie PHP, zapytania do bazy danych, CSS, JavaScript, wywołania AJAX, żądania zewnętrzne, HTML i kod śledzenia.

Praktyczne pytanie nie brzmi, czy moduły są złe, ale czy moduł musi być wykonywany na konkretnej stronie.

Moduł recenzji może działać tylko na stronach produktów, podczas gdy widżet wysyłki może być istotny tylko w kasie. Jeśli moduł ładuje zasoby globalnie, sprawdź, czy jego implementację można bezpiecznie dostosować.

Buforowanie i wydajność PrestaShop

Należy jednak pamiętać, że buforowanie można wykorzystać do uniknięcia powtarzania zadań na poziomie serwera, ale należy zrozumieć działanie tego narzędzia, a nie po prostu je aktywować bez zastanowienia.

W zależności od środowiska systemowego zaleca się korzystanie z buforowania PrestaShop, buforowania aplikacji/stron, buforowania kodów operacji, buforowania HTTP, buforowania CDN i buforowania przeglądarki.

Dynamiczny charakter operacji e-commerce utrudnia konfigurację buforowania w porównaniu ze stroną statyczną. Niektóre dane, takie jak osobiste treści klientów, zawartość koszyka, status uwierzytelnienia, informacje o cenach, stany magazynowe i personalizacja, mogą mieć specjalne wymagania dotyczące buforowania.

Przetestuj strony po ich buforowaniu.

Jak skrócić czas reakcji serwera

1. Utwórz linię bazową: zbierz szczegóły dotyczące LCP, INP, CLS, TTFB, wagi, liczby żądań, wykonania JavaScript i ważnych czasów zasobów.
2. Przetestuj modele reprezentatywne: produktów, kategorii, wyszukiwania, koszyka, uzupełniania i CMS / innych stron docelowych.
3. Zidentyfikuj miejsca występowania problemów: sprawdź, czy problem jest związany z odpowiedzią serwera, dostarczaniem obrazów, plikami CSS, ścieżkami JavaScript lub usługami świadczonymi przez osoby trzecie.
4. Przeprowadź audyt: zlokalizuj wymienione moduły, które działają globalnie, narzucają JavaScript/CSS, wywołują żądania zewnętrzne lub przeprowadzają kosztowne operacje zaplecza.
5. Udoskonalaj system stopniowo: systemy przesyłania obrazów, przesyłania CSS, przesyłania JavaScript, odpowiedzi serwera, itd.
6. Sprawdź funkcjonalność: różnorodne możliwości zaawansowanego produktu, wyszukiwanie, procesy koszyka, płatności i aspekty korzystania z urządzeń mobilnych.
7. Wykonaj pomiary i porównaj je z początkową linią bazową.

Jak poprawić szybkość stron mobilnych

Wydajność urządzeń mobilnych to osobny temat. Urządzenia mobilne mogą mieć procesory o niższej wydajności i zawodne połączenie z siecią komórkową, co sprawia, że ​​wykonywanie kodu JavaScript i pobieranie obrazów staje się bardziej kluczowe.

Zwróć uwagę na:

• Kompaktowe obrazy responsywne
• Minimalny JavaScript
• Minimalna liczba skryptów innych firm
• Wydajny CSS
• Stabilny układ
• Szybki czas reakcji serwera
• Minimalny DOM
• Prawidłowe leniwe ładowanie
• Lekka nawigacja

Nie zakładaj, że dobra wydajność komputera stacjonarnego oznacza dobrą wydajność urządzenia mobilnego. Sprawdź to!

Praktyczny proces optymalizacji podstawowych wskaźników internetowych PrestaShop

1. Utwórz linię bazową: zbierz szczegóły dotyczące LCP, INP, CLS, TTFB, wagi, liczby żądań, wykonania JavaScript i ważnych czasów zasobów.
2. Przetestuj modele reprezentatywne: produktów, kategorii, wyszukiwania, koszyka, uzupełniania i CMS / innych stron docelowych.
3. Zidentyfikuj miejsca występowania problemów: sprawdź, czy problem jest związany z odpowiedzią serwera, dostarczaniem obrazów, plikami CSS, ścieżkami JavaScript lub usługami świadczonymi przez osoby trzecie.
4. Przeprowadź audyt: zlokalizuj wymienione moduły, które działają globalnie, narzucają JavaScript/CSS, wywołują żądania zewnętrzne lub przeprowadzają kosztowne operacje zaplecza.
5. Udoskonalaj system stopniowo: systemy przesyłania obrazów, przesyłania CSS, przesyłania JavaScript, odpowiedzi serwera, itd.
6. Sprawdź funkcjonalność: różnorodne możliwości zaawansowanego produktu, wyszukiwanie, procesy koszyka, płatności i aspekty korzystania z urządzeń mobilnych.
7. Wykonaj pomiary i porównaj je z początkową linią bazową.

Przykład PrestaShop w świecie rzeczywistym: powolna strona produktu LCP

Załóżmy, że strona produktu mierzy LCP na poziomie 4.5 sekundy. Na stronie znajduje się duży obraz produktu.

Można by wnioskować, że obraz jest za duży. Jednak po bliższym przyjrzeniu się okazuje się, że odpowiedź serwera trwa 1.5 sekundy, CSS blokuje renderowanie, obraz produktu jest używany w rozmiarze zbyt dużym dla strony, inicjalizacja galerii jest opóźniona przez niepotrzebny moduł JavaScript, a obraz jest traktowany jako ładowany leniwie.

Należy pamiętać, że samo sprawdzanie problemów optymalizacyjnych nie powinno być traktowane jako skuteczny sposób na zwiększenie szybkości ładowania strony.

Przykład z życia wzięty: słaba wartość INP z wielu modułów

Pomyśl o stronie produktu z funkcjami takimi jak logika wariantów produktu, narzędzie do recenzowania, czat, analityka, zarządzanie tagami i moduł sugestii.

Gdy klient kliknie rozmiar, przeglądarka może uruchomić procedurę obsługi wariantów, zaktualizować szczegóły produktu, przeliczyć część DOM, zainicjować analizę, wykonać inną procedurę obsługi zdarzeń i zaktualizować interfejs użytkownika.

Jednak najlepszym rozwiązaniem nie zawsze jest usuwanie każdego modułu z procesu. Należy przeanalizować interakcję i ustalić, który konkretny moduł obsługi zdarzeń jest kosztowny, a który skrypt wykonuje długie operacje, a także sprawdzić, czy zawiera on kod innej firmy, czy w DOM nie jest wykonywana zbędna praca oraz czy można uprościć lub odłożyć na później niektóre funkcjonalności.

Przykład z życia wzięty: CLS z baneru promocyjnego

Załóżmy, że sprzedawca umieszcza baner reklamowy po załadowaniu strony produktu. W rezultacie baner znajduje się nad nazwą produktu, wpływając tym samym na tytuł, zdjęcie produktu, cenę i pozycję przycisku „Dodaj do koszyka”. 

Lepszym pomysłem byłoby wcześniejsze przydzielenie przestrzeni na baner lub umieszczenie go w taki sposób, aby nie kolidował z główną treścią strony. 

Odpowiedź leży zatem w zrozumieniu czynników odpowiedzialnych za ruch obiektów, przyczyn tego ruchu oraz czasu, w którym obiekty te docierają na miejsce.

Typowe błędy w optymalizacji podstawowych wskaźników internetowych

1. Dążenie do uzyskania idealnego wyniku PageSpeed. Celem firmy jest zapewnienie użytkownikowi lepszego doświadczenia, a nie tylko osiągnięcie określonego trendu w wynikach.
2. Korzystanie z licznych modułów optymalizacyjnych. Nadmierne stosowanie wielu rozwiązań optymalizacyjnych i opóźniających może prowadzić do niepożądanych komplikacji.
3. Używaj leniwego ładowania dla wszystkich. Może to jednak powodować opóźnienia podczas ładowania ważnych informacji.
4. Wstępne pobieranie wszystkiego. W przypadku, gdy wiele rzeczy jest uznawanych za ważne, pojawi się konkurencja o ograniczoną przepustowość.
5. Optymalizacje nie mogą współdziałać ze stroną główną. Optymalizacje zastosowane na stronach docelowych nie mogą być używane z szablonami kategorii i produktów.
6. Pomijanie kodu JavaScript firm trzecich. Efektywne wykorzystanie analityki i marketingu może prowadzić do bardzo wysokich kosztów realizacji.

Pomiar wyniku

Optymalizację wydajności należy traktować jako proces ciągły. Po zainstalowaniu nowego modułu, aktualizacji do nowego motywu, wdrożeniu narzędzia marketingowego lub przesłaniu obrazów o wyższej rozdzielczości, sklep internetowy może odnotować spadek wydajności.

W związku z tym wszelkie istotne zmiany związane z motywem, modułami, układem lub infrastrukturą należy traktować jako możliwe przyczyny pogorszenia wydajności.

Podstawowe wskaźniki internetowe powinny być procesem ciągłym

Optymalizacja wydajności nie jest zadaniem jednorazowym. Sklep może działać wolniej po zainstalowaniu nowego modułu, aktualizacji motywu, dodaniu narzędzia marketingowego, przesłaniu większych zdjęć, dodaniu skryptów śledzących, zmianie hostingu, modyfikacji szablonów produktów lub wdrożeniu nowej funkcjonalności.

Każda większa zmiana motywu, modułu, infrastruktury lub interfejsu użytkownika powinna być zatem traktowana jako potencjalna zmiana wydajności.

Ostateczne rekomendacje

Oczyszczenie podstawowych wskaźników internetowych PrestaShop nie sprowadza się do maksymalnej kombinacji technik. Jeśli chodzi o LCP, konieczne jest zbadanie serwera, zasobów krytycznych, obrazów, CSS i odnalezienie zasobów.

Celem CLS jest identyfikacja elementów w ruchu i zaoszczędzenie potrzebnej im przestrzeni.

Biorąc pod uwagę INP, konieczne będzie przeprowadzenie profilowania rzeczywistych interakcji i skonfigurowanie wymaganego JavaScriptu i zdarzeń, aby działały w wątku głównym.

Całościowa optymalizacja wydajności witryny internetowej obejmuje audyt modułów, skryptów stron trzecich, pamięci podręcznej, obrazów, działania bazy danych i zasobów serwera.

Najbardziej efektywny proces wydajności PrestaShop to

Pomiar → Diagnoza → Optymalizacja → Test → Ponownie pomiar.

Podejście to pozwala na osiągnięcie trwałych ulepszeń bez poświęcania funkcjonalności, która sprawia, że ​​sklep eCommerce jest użyteczny.

Najczęściej zadawane pytania

Jaki jest najlepszy LCP dla witryny PrestaShop?

Zgodnie z zaleceniami Google, wynik LCP wynoszący 2.5 sekundy lub mniej jest wartością idealną.

Jak ulepszyć LCP stron produktów PrestaShop?

Na początek dowiedz się, czym jest element LCP. Jeśli jest to główny obraz produktu, spróbuj zoptymalizować go pod kątem rozmiaru i ładowania, upewniając się, że będzie szybko wykrywany, a nie ładowany leniwie.

Jak mogę obniżyć CLS w PrestaShop?
Zidentyfikuj elementy, które się przesuwają. Typowe przyczyny to obrazy bez zarezerwowanych wymiarów, dynamiczne banery, wyskakujące okienka, slidery i widżety innych firm. Zarezerwuj odpowiednią przestrzeń przed załadowaniem dynamicznej zawartości.

Jak poprawić INP?

Należy zbadać rzeczywistą wydajność użytkownika i wykryć kosztowne zadania JavaScript. Kolejnym krokiem jest wyeliminowanie zbędnego użycia JavaScript, minimalizacja manipulacji DOM oraz sprawdzenie zaimplementowanych narzędzi i modułów innych firm.

Czy włączenie buforowania automatycznie rozwiąże problemy z Core Web Vitals?

Nie, buforowanie zmniejsza zapotrzebowanie na przetwarzanie po stronie serwera i poprawia responsywność, ale nie rozwiązuje problemów związanych z dużymi obrazami, blokującymi renderowanie arkuszami CSS, nadmiarem JavaScript, CLS i wolnym działaniem.

Czy poprawa wydajności witryny wymaga odinstalowania wszystkich modułów PrestaShop?

Nie, ponieważ moduły są kluczowe dla realizacji potrzeb biznesowych. Celem jest znalezienie zbędnego przetwarzania, a nie odinstalowanie oprogramowania bez zastanowienia.

Czy uzyskanie wyniku PageSpeed ​​wynoszącego 100 jest obowiązkowe?

Nie, bo to nie jest cel. Liczy się tylko zapewnienie jak najlepszych wrażeń użytkownika.

Co powinienem zoptymalizować w pierwszej kolejności?

Pierwszy krok. Określ szablony stron o najniższej wydajności i dowiedz się, co jest głównym wąskim gardłem: LCP, INP, CLS, TTFB, obrazy, JavaScript, CSS, moduły czy strona serwera.