Opracowaliśmy komponenty Standard nowej generacji na stronie głównej i dodaliśmy do szablonów aktualizacje, które wpłyną pozytywnie na PageSpeed i SEO twojego sklepu internetowego od IdoSell. Sprawdź nowe możliwości dla twojego e-commerce.

Czym są szablony Standard w IdoSell?

Szablon Standard to baza każdego sklepu w IdoSell. Są uniwersalne i odpowiednie dla różnych branż, ponieważ zostały zaprojektowane z myślą o łatwej nawigacji zarówno dla właścicieli sklepów, jak i konsumentów. Dostępne są w kilku wersjach bezpłatnie dla wszystkich merchantów korzystających z platformy IdoSell i można dostosować je w podstawowym zakresie (zmiana fontu, koloru czy zaokrągleń elementów). Idealnie sprawdzą się na start, a jeśli potrzebujesz dostosować wygląd szablonu do swojego brandu, możesz skorzystać z takich rozwiązań jak Composer, Prace Kontraktowe czy Redesign. Szablony Standard są regularnie aktualizowane, a zmiany wdrażane są bezpłatnie. Dowiedz się więcej o szablonach Standard.

Rozpoczęliśmy dostosowywanie szablonów Standard do wytycznych WCAG

W ramach ostatnich aktualizacji szablonów Standard dostosowaliśmy design i funkcjonalności elementów strony głównej do standardu WCAG 2.1 (Web Content Accessibility Guidelines). Prace podyktowane były Europejskim Aktem o Dostępności, który nakłada wymóg dostosowania sklepów internetowych do wspomnianego standardu WCAG 2.1 od połowy 2025 roku.
Ważne! Jest to pierwszy etap prac z planowanych co najmniej trzech.

Co oznacza standard WCAG 2.1

Web Content Accessibility Guidelines 2.1 to standard opracowany przez World Wide Web Consortium (W3C), mający na celu zwiększenie dostępności treści internetowych dla jak najszerszego grona użytkowników, w tym osób z różnymi niepełnosprawnościami.

Wytyczne te zostały opublikowane w czerwcu 2018 roku jako rozszerzenie wcześniejszej wersji WCAG 2.0. Wprowadzono dodatkowe kryteria i zalecenia, które uwzględniają nowe technologie i wyzwania związane z dostępnością stron.

Kluczowe aspekty WCAG 2.1

Na postrzeganie dostępności stron składają się cztery zasady:

• Postrzegalność (Perceivable): Informacje i komponenty interfejsu użytkownika muszą być prezentowane w sposób, który użytkownicy mogą dostrzegać, niezależnie od tego, czy korzystają ze wzroku, słuchu, czy dotyku.
• Funkcjonalność (Operable): Interfejsy i nawigacja muszą być dostępne i możliwe do obsłużenia przez wszystkich użytkowników, także tych korzystających z klawiatury czy urządzeń asystujących.
• Zrozumiałość (Understandable): Informacje oraz obsługa interfejsu muszą być zrozumiałe dla użytkowników, niezależnie od ich zdolności poznawczych.
• Solidność (Robust): Treści muszą być wystarczająco solidne, aby mogły być prawidłowo interpretowane przez różne technologie, również przyszłe.

W ramach pierwszych prac przystosowujących szablony Standard do wymogów WCAG 2.1 usprawniliśmy strukturę komponentów strony głównej, aby zapewnić odpowiednie odstępy oraz wielkości czcionek i kontrasty poszczególnym elementom.

Strona główna korzysta teraz z komponentu Design system BETA, który odpowiada za style wszystkich komponentów strony głównej oraz stopki. W dalszych etapach prac komponent będzie odpowiadał również za style kolejnych podstron. Wielkości czcionek oraz odpowiednie dla nich odstępy zostaną wówczas globalnie dostosowane do zaleceń WCAG, dlatego teraz wielkości fontów zostały tymczasowo dostosowane do pozostałych podstron.

1. Nawigacja po stronie głównej możliwa jest teraz za pomocą tabulatora. Interfejs na początku zapyta konsumenta, czy chce nawigować po elementach strony czy przejść bezpośrednio do wyszukiwarki produktów, co znacząco ułatwi zakupy osobom z niepełnosprawnościami. Aktywny element oznaczony jest fioletowym obramowaniem dobrze widocznym również na kolorowych tłach, dzięki zastosowaniu alternatywnego białego obrysu.

2. Dodatkowo teraz możliwe jest korzystanie z czytników tekstu, jak np. funkcja VoiceOver. Dzięki temu osoby z uszkodzonym zmysłem wzroku będą wiedziały na jakim elemencie sklepu obecnie się znajdują.

3. Przyciski nawigacyjne w galeriach i banerach są teraz lepiej widoczne dzięki zastosowaniu ciemnego tła.

4. Lepiej wyeksponowane są także zdjęcia produktów w strefach rekomendacji oraz grafiki wpisów blogowych i aktualności. Dzięki zastosowaniu szarej apli grafiki, które nie zostały idealnie wykadrowane do potrzeb szablonu sklepu, zyskują na lepszej czytelności, a układ elementów jest bardziej wyrazisty.

5. Zmiany objęły także stopkę sklepu, która uległa uproszczeniu poprzez usunięcie kolorowych ikon oraz obramowania. Dzięki czemu jest bardziej czytelna i dostosowana do obowiązujących trendów. Dane kontaktowe zostały przeniesione wyżej, co sprawia, że są lepiej wyeksponowane - porządkuje to architekturę informacji w całej stopce.

Usprawnienia pod PageSpeed i SEO w szablonach Standard

Opracowane zmiany mają wpływ na lepszą wydajność szablonów Standard. Umożliwiają osiągnięcie jeszcze lepszych wyników w pomiarach Google PageSpeed, co przekłada się na większy potencjał SEO.

Zoptymalizowana struktura plików JavaScript i CSS

Zoptymalizowaliśmy strukturę plików JavaScript i CSS w szablonach Standard, aby w maksymalnym stopniu wyeliminować nadmiarowy kod, który nie jest wykorzystywany w danym momencie. Pozwoliło to na zredukowanie plików JavaScript i CSS do jednego per podstrona, a zmiany objęły stronę główną, listę towarów i kartę produktu.

Zestaw optymalizacji pod wskaźniki LCP, CLS, INP

Komponenty stref rekomendacji oraz galerie i banery również zostały przebudowane z myślą o Google PageSpeed. Elementy te zyskały szereg usprawnień pod kątem najczęściej monitowanych uwag w raportach PageSpeed takich jak:

• Sugestie optymalizacji pod kątem wskaźników First Contenful Paint (czas załadowania pierwszego elementu)
• Cumulative Layout Shift (zmiana układu podczas ładowania strony)
• Interaction to Next Paint (czas, jaki upływa od interakcji użytkownika do wyświetlenia nowej zawartości).

Strefy rekomendacji korzystają teraz z naszego Storefront API.

Dodatkowo opracowaliśmy opcjonalne komponenty stref rekomendacji z możliwością dodawania produktów do koszyka. Komponent występuje w dwóch wersjach: przewijanej oraz statycznej, a dodawanie do koszyka zostało przygotowane z myślą o towarach jednorozmiarowych.

Możliwość przyspieszenia ładowania strony przy włączonych integracjach

Zoptymalizowaliśmy najczęściej wykorzystywane wbudowane integracje w sklepach IdoSell, żeby nie obniżały scoringu szablonów Standard w pomiarach PageSpeed.

Zmiany dotyczą integracji z:

• Google Analytics
• Google Tag Manager
• Piksel Meta (Facebook)
• SALESmanago

W ustawieniach tych integracji pojawiła się nowa opcja umożliwiająca wydelegowanie integracji do web workera, co eliminuje problem z blokowaniem głównego wątku nawet na ~ 4 sek.

Włączenie opcji “Zoptymalizuj integrację pod Google PageSpeed” zalecane jest we wszystkich sklepach zmagających się z próbą zminimalizowania aktywności głównego wątku zalecaną przez PageSpeed.

Możliwość zoptymalizowania wbudowanych integracji znajduje się w panelu administracyjnym:

• Google Analytics: Marketing i Integracje > Google > Google Analytics > Zoptymalizuj integrację pod Google PageSpeed
• Google Tag Manager: Marketing i Integracje > Google > Google Tag Manager > Zoptymalizuj integrację pod Google PageSpeed
• Piksel Meta (Facebook): Marketing i Integracje > Facebook > Meta Pixel > Zoptymalizuj integrację pod Google PageSpeed
• SALESmanago: Marketing i Integracje > Automatyzacja marketingu > SALESmanago > Zoptymalizuj integrację pod Google PageSpeed

Przełącznik będzie dostępny od 25 lipca 2024.