Max

Optymalizacja sklepu

  • Optymalizacja zdjęć + lazyload
  • Optymalizacja nagłówków SEO
  • Wprowadzenie alt / height / width zdjęć
  • Kompresja treści
  • Odstępy elementów klikalnych
  • Uporządkowanie skryptów js
  • Opóźnienie ładowania skryptów js
  • Poprawa CLS
  • Wdrożenie UX/UI dla wybranych elementów
  • Poprawa kontrastu tła / fontu (WCAG)
  • Kontrola formularzy label

Orientacyjna ilość roboczogodzin: 84

Cena netto:

6 000 zł

Optymalizacja sklepu Core Web Vitals Google

W optymalizacji Max otrzymujesz

Poprawki kodu html i css

Po pierwsze, zaczynamy od analizy Twojego sklepu i skupiamy się na najważniejszych globalnych poprawkach kodu HTML i CSS! Musimy dokładnie przejrzeć cały szablon graficzny i naprawić wszystkie błędy, które powstały podczas procesu tworzenia, rozwoju i konfiguracji Twojego sklepu!

Nie możemy tolerować niezamykających się znaczników HTML ani zbyt małych odstępów między klikalnymi elementami! To wszystko utrudnia czytanie treści i może negatywnie wpłynąć na wrażenia Twoich klientów! Musimy też upewnić się, że czcionka jest wystarczająco duża, aby można było łatwo przeczytać treść, bo przecież chcemy, aby Twoi klienci byli zadowoleni z zakupów w Twoim sklepie!

Poprawki kodu html i css w sklepie
 

Optymalizacja zdjęć

Wprowadzimy kompleksową optymalizację zdjęć w Twoim sklepie online! Przeprowadzimy szczegółową analizę wszystkich zdjęć znajdujących się w kodzie HTML i CSS, w tym bannerów graficznych i zdjęć produktów.

Nasze działania obejmują również konwersję wszystkich zdjęć do nowego formatu .webp, aby zapewnić szybsze ładowanie strony oraz wdrożenie brakujących znaczników alt, width oraz height, które pozwalają na lepszą optymalizację i indeksację zdjęć przez wyszukiwarki.

Optymalizacja zdjęć do formatu webp

Dodatkowo wdrożone będą nowe znaczniki img opóźniające ładowanie zdjęć niewidocznych na ekranie (lazyload - leniwe ładowanie), co pozwoli na szybsze wczytywanie się sklepu i zmniejszenie czasu ładowania każdej strony sklepu.

Optymalizacja nagłówków Hx

Nagłówki Hx pomagają nie tylko w prezentacji struktury oferty, podziału treści, ale też w pozycjonowaniu sklepu w wyszukiwarkach internetowych.

Hierarchia nagłówków jest prosta – H1 to główny nagłówek, który powinien odnosić się do nazwy produktu lub kategorii. Następnie H2 używamy w celu podziału treści na sekcje, np. opis produktu, dostawa, zwroty itp. Dalej mamy H3, które są używane do podziału kolejnych sekcji, takich jak cechy produktu, skład, rozmiary, itp.

Wdrażamy odpowiednie nagłówki Hx w kodzie html szablonu graficznego dla strony głównej sklepu, strony kategorii (opisy kategorii / wizytówki) oraz dla strony produktowej.

Optymalizacja nagłówków Hx

Optymalizacja serwera

Masz dość wolnego działania swojego sklepu online? Usługa optymalizacji serwera pozwoli zwiększyć szybkość działania Twojego sklepu i poprawić doświadczenia klientów!

Przeprowadzimy dokładną analizę Twojego serwera i uruchomimy odpowiednie funkcje związane z pamięcią podręczną i kompresją sklepu. Włączymy kompresję przez mod_deflate lub mod_gzip, co znacznie zmniejszy ilość zapytań do Twojego sklepu i przyspieszy przekazywanie jej z serwera do przeglądarki.

Dzięki funkcji mod_expires skonfigurujemy cache, czyli pamięć podręczną, co pozwoli na zapamiętanie niezmiennych części sklepu bezpośrednio na urządzeniu Twojego klienta przez określoną ilość czasu.

Optymalizacja serwera - kompresja i cache

Zapewniamy, że nasze działania optymalizacyjne pozwolą Ci zwiększyć wydajność i szybkość działania Twojego sklepu online, co przekłada się na lepsze doświadczenia Twoich klientów.

Uporządkowanie skryptów .js

Optymalizacja skryptów JS to kluczowy element poprawy wydajności każdej strony sklepu internetowego. Skrypty JS są często wykorzystywane do dodawania interaktywnych funkcji na Twojej stronie sklepu, ale ich niewłaściwe wykorzystanie może spowolnić ładowanie Twojego sklepu i wpłynąć na doświadczenia Twoich klientów.

W pierwszym etapie optymalizacji staramy się uporządkować wszystkie skrypty, usuwając niepotrzebne lub niewykorzystywane elementy. Łączymy mniejsze skrypty w jeden większy, co pozwoli na szybsze ładowanie się strony. Dodatkowo wgrywamy najnowszą bibliotekę jquery potrzebną do nowoczesnych animacji elementów na stronach sklepu internetowego.

Uporządkowanie skryptów

Kolejnym krokiem jest umieszczenie skryptów w odpowiednich miejscach w kodzie HTML. Skrypty powinny być umieszczone na końcu kodu HTML, aby nie opóźniać ładowania reszty elementów strony. W miarę możliwości czyścimy całkowicie sekcjęw której prawdopodobnie znajdują się wszystkie dodane przez Ciebie skrypty.

Dodatkowo korzystamy z tzw. "asynchronicznego ładowania" co również znacznie przyspieszy ładowanie Twojego sklepu. Dzięki temu skrypty będą ładowane równolegle z innymi elementami stron sklepu i nie blokują ładowania kolejnych elementów.

Opóźnienie ładowania skryptów

Opóźnione ładowanie skryptów to kolejna świetna i ciekawa technika, która pozwala na szybsze ładowanie stron sklepu internetowego oraz poprawę jej wydajności. Dzięki temu, że skrypty do animacji konkretnych elementów są ładowane dopiero wtedy, gdy użytkownik faktycznie zaczyna przeglądać stronę, skraca się czas ładowania, co przekłada się na lepsze wrażenia użytkownika.

W praktyce oznacza to, że kod do animacji elementów jest dołączany do strony po czasie, np. po 3 lub 4 sekundach, kiedy użytkownik ma już okazję zobaczyć i zainterakcjonować z istniejącymi elementami na stronie. Dzięki temu, użytkownik nie musi czekać na pełne załadowanie strony przed przeglądaniem jej treści, co zwiększa zadowolenie z wizyty na sklepie i wpływa na pozytywne doświadczenia użytkowników.

Opóźnienie ładowania skryptów

Warto jednak pamiętać, że nie wszystkie skrypty można ładować po czasie, ponieważ niektóre z nich są wymagane do poprawnego działania stron sklepu. Dlatego należy przeprowadzić analizę skryptów i wybrać te, które nie wpłyną negatywnie na działanie sklepu internetowego, a jednocześnie można je ładować po czasie, aby przyspieszyć ładowanie stron.

Poprawa metryki CLS

CLS (Cumulative Layout Shift) to jedna z trzech metryk Core Web Vitals, która mierzy stabilność wizualną strony internetowej sklepu. Mówiąc inaczej, CLS odnosi się do tego, jak bardzo elementy na stronie przesuwają się lub zmieniają swoje położenie podczas ładowania, co może prowadzić do niepożądanych efektów, takich jak kliknięcie w nieodpowiedni przycisk lub formularz.

Aby poprawić CLS na stronie, zaczynamy od zidentyfikowania wszystkich elementów, które mogą wpływać na stabilność wizualną strony. Mogą to być m.in. obrazy bez określonej szerokości i wysokości, reklamy, iframe'y lub skrypty, które modyfikują układ strony.

Oprócz wyżej wymienionych czynników, na CLS ma wpływ również renderowanie czcionek, animacje CSS i wszelkiego rodzaju dynamiczne elementy strony, które są ładowane później i przesuwają treść w czasie jej ładowania.

Poprawa metryki CLS

Po zidentyfikowaniu wszystkich elementów, możemy podjąć szereg działań, które pomogą poprawić metrykę CLS.

Warto zwrócić uwagę na to, aby wszystkie elementy stron sklepu były odpowiednio zaprojektowane i wczytywały się w sposób płynny i przewidywalny, aby uniknąć niepożądanych zmian w układzie strony podczas jej ładowania. Dlatego jeśli posiadasz bardzo stary szablon sklepu internetowego możesz rozważyć jego przekodowanie od podstaw z jednoczesną optymalizacją sklepu.

Wdrożenie UX/UI

Wdrożenie różnych elementów użytecznych i interaktywnych w sklepie internetowym może znacząco poprawić doświadczenie użytkowników i zwiększyć konwersję:

Wyszukiwarka z podpowiedziami - ułatwia szybkie i dokładne wyszukiwanie produktów.

Oceny produktów w formie gwiazdek - są jednym z najbardziej popularnych sposobów wyrażania opinii o produkcie. Dają one szybką i łatwą wizualną ocenę produktu bez potrzeby czytania długich recenzji. Stosujemy w sklepie zarówno system ocen przez klientów w formie wyboru gwiazdek oraz wyświetlenie średniej oceny produktu jako gwiazdki.

Filtry produktów - ułatwiają szybkie i skuteczne przeszukiwanie oferty sklepu w kategoriach i znalezienie odpowiedniego produktu.

Koszyk z elementami graficznymi - dodanie ikon graficznych do nazw przesyłek oraz form płatności co zwiększy czytelność procesu zakupowego. Dzięki nim klienci w prosty i szybki sposób będą mogli zidentyfikować, jakie formy płatności i wysyłki są dostępne w Twoim sklepie.

UX UI strona koszyka zakupowego

Dodanie nowych ikon i grafik - wprowadzenie graficznych symboli do najważniejszych elementów karty produktu ułatwi klientowi znalezienie najważniejszych informacji o produkcie oraz skróci czas procesu zakupowego i wpłynie pozytywnie na doświadczenie użytkownika.

Poprawa kontrastu

Poprawa kontrastu na stronach sklepu internetowego nie tylko wpływa pozytywnie na wskaźniki Core Web Vitals, ale również na dostępność sklepu dla osób niepełnosprawnych. Osoby z wadami wzroku, takimi jak np. daltoniści, mogą mieć trudności z odczytaniem tekstu lub rozróżnieniem elementów na stronie, jeśli kontrast między nimi jest zbyt niski. Wzrost kontrastu może znacznie poprawić jakość życia tych osób oraz zwiększyć ich zadowolenie z korzystania z Twojej strony internetowej.

Słaby kontrast przycisków i innych ważnych elementów w sklepie internetowym może sprawić, że klienci nie będą w stanie ich łatwo odnaleźć na stronie, co może prowadzić do ich frustracji i niezadowolenia. Dlatego tak ważne jest zadbanie o odpowiedni kontrast, aby nasi klienci mieli łatwy i przyjemny dostęp do wszystkich funkcjonalności sklepu.

Poprawa kontrastu

Kontrola formularzy label

Formularze z prostą walidacją to świetny sposób na ułatwienie klientom procesu zakupowego. Dzięki nim klienci dokładnie wiedzą, jakiego typu informacje muszą uzupełnić oraz czy uzupełnili wszystkie wymagane pola. Dzięki temu, klient unika błędów przy wprowadzaniu danych, co przyspiesza i ułatwia im dokonywanie transakcji.

UX UI  walidacja formularzy

Formularz kontaktowy

Masz pytania? Skorzystaj z poniższego formularza.

Przepisz kod z obrazka

weryfikator

Formularz kontaktowy
7380 In stock Optymalizacja sklepu


Ostatnio oglądałeś