Hosting i instalacja najnowszej wersji sklepu Magento 2.4.8 wraz z szablonem Hyvä Theme

Wprowadznie

Po zainstalowaniu sklepu przyjdzie na Twój e-mail wiadomość z dostępami dzięki którym będziesz mógł się zalogować do SSH, panelu Magento 2 i PhpMyAdmina. Teraz możesz rozpocząć budować moduły lub szablony. Najprościej połączyć się z serwerem za pomocą rozszeżenia Remote SSH w środowisku programistycznym Visual Studio Code. Pamiętaj że pliki sklepu znajdują się w katalogu html i podczas konfiguracji wskaż go podczas konfiguracji połączenia SSH w tym programie.

Szablon Hyvä Theme

Hyvä Theme to nowoczesny, wydajny i minimalistyczny motyw dla platformy e-commerce Magento 2. Został zaprojektowany z myślą o znacznym uproszczeniu i optymalizacji front-endu, co przekłada się na wyjątkową szybkość działania sklepów. Oto kluczowe cechy i aspekty szablonu Hyvä:

• Ekstremalna szybkość: Jest to jego największy wyróżnik. Hyvä znacząco redukuje ilość kodu JavaScript, eliminując tradycyjne, "ciężkie" biblioteki Magento (takie jak Knockout.js i RequireJS).
• Lekkie technologie: Zamiast tego wykorzystuje nowoczesne i lekkie rozwiązania, głównie: 
  • Alpine.js: Do obsługi interaktywności JavaScript,
  • Tailwind CSS: Jako framework do stylizacji CSS, co przyspiesza pracę deweloperów i ułatwia tworzenie czystego, modułowego kodu.
• Wysokie wyniki SEO: Dzięki szybkości ładowania, sklepy oparte na Hyvä osiągają znacznie lepsze wyniki w testach wydajności (np. Google PageSpeed Insights) i łatwiej spełniają kryteria Core Web Vitals, co pozytywnie wpływa na pozycjonowanie w wyszukiwarkach (SEO).
• Mobile-first i responsywność: Szablon jest domyślnie projektowany z myślą o urządzeniach mobilnych, zapewniając doskonałe wrażenia użytkownika (UX) na każdym ekranie.

Kluczowe Optymalizacje PageSpeed w Hyvä

Hyvä Theme zostało stworzone głównie z myślą o maksymalnej optymalizacji PageSpeed Insights (PSI) i uzyskiwaniu doskonałych wyników wskaźników Core Web Vitals (CWV). Osiąga to poprzez radykalne uproszczenie warstwy frontendowej Magento.

Sklepy oparte na Hyvä rutynowo osiągają wyniki powyżej 90/100, a często nawet bliskie 100/100 w PageSpeed Insights, zwłaszcza w wersji mobilnej, gdzie tradycyjne motywy Luma radzą sobie najgorzej.

Hyvä osiąga tę wydajność dzięki fundamentalnym zmianom w architekturze frontendu, eliminując największe problemy wydajnościowe standardowego Magento Luma:

Minimalizacja Kodu JavaScript (JS)

• Usunięcie "ciężkich" bibliotek: Hyvä całkowicie eliminuje ciężkie i przestarzałe biblioteki, takie jak Knockout.js, RequireJS i dużą część jQuery, które są głównymi winowajcami złej wydajności w standardowym Magento.
• Wprowadzenie Alpine.js: Zamiast tego używa Alpine.js, lekkiej biblioteki JS, która pozwala na obsługę interaktywności bezpośrednio w kodzie HTML (jak Vue.js/React, ale bez wirtualnego DOM), minimalizując obciążenie.

Lekki i Czysty CSS

• Tailwind CSS: Hyvä opiera się na Tailwind CSS, nowoczesnym frameworku, który jest utility-first. Oznacza to, że generowany jest tylko ten kod CSS, który jest faktycznie używany na stronie (poprzez kompilację JIT - Just-In-Time), co prowadzi do minimalizacji rozmiaru pliku CSS.
• Brak nadmiarowości: Kod HTML jest czystszy i generuje mniej zbędnych klas, wrapperów i nadmiarowych styli, które spowalniają renderowanie.

Poprawa Core Web Vitals (CWV)

Zaprojektowana architektura ma bezpośredni wpływ na kluczowe metryki wydajnościowe Google:

• LCP (Largest Contentful Paint) - Bardzo szybki czas renderowania początkowego (dzięki lekkiemu JS/CSS) sprawia, że największy element strony jest wyświetlany niemal natychmiast.
• FID (First Input Delay)/ INP (Interaction to Next Paint) - Minimalna ilość JS-u do przetworzenia znacząco skraca czas do pełnej interaktywności strony (TBT - Total Blocking Time), co daje niemal zerowe opóźnienia wejścia.
• CLS (Cumulative Layout Shift) - Zapobiega przesunięciom wizualnym, ponieważ lekkie zasoby ładują się szybko, a ich układ jest stabilny, minimalizując skoki strony podczas ładowania.