Wygląda na to, że JavaScript jest wyłączony w twojej przeglądarce. By w pełni cieszyć się naszą stroną, upewnij się, że włączyłeś JavaScript w swojej przeglądarce.

Optymalizacja Magento 2 pod Google PageSpeed

1,00 zł

W magazynie

SKU

optymalizacja-pagespeed

W tym artykule postarmy się opisać podstawowy proces optymalizacji Magento 2 który wykonujemy dla naszych klientów. Artykuł bedzie zawierał nastepujące rozdziały:

Magento cache
Tryb produkcyjny
Minimalizacja i bundlowanie zasobów
Kompresja GZIP
CDN (np. Cloudflare)
Lazy Load dla obrazów
Optymalizuj obrazy
Redis jako cache
Optymalizacja motywu Magento 2
Optymalizacja modułów Magento 2
Monitoring wydajności
Instalacja modułów zwiększjacych wydajność

Przejdź na koniec galerii

Przejdź na początek galerii

Optymalizacja Magento 2 pod Google PageSpeed Insights może znacznie poprawić szybkość ładowania strony, doświadczenie użytkownika oraz SEO. Magento 2 z natury jest rozbudowanym systemem e-commerce, więc wymaga kilku konkretnych kroków, by działał sprawnie. Oto kompleksowa lista działań, które możesz wykonać, by zoptymalizować Magento 2:

1. Włącz i skonfiguruj cache Magento

Upewnij się, że wszystkie cache'e są włączone:
System > Cache Management
Rozważ użycie Varnish Cache zamiast domyślnego Full Page Cache:
- Magento > Stores > Configuration > Advanced > System > Full Page Cache

2. Włącz produkcyjny tryb pracy

Przełącz Magento na tryb produkcyjny:

bin/magento deploy:mode:set production

Musisz zalogować sie do konsoli SSH i wykonać powższe polecnie w katalogu domowym Magento 2.

3. Minimalizacja i łączenie zasobów

W panelu admina:
Stores > Configuration > Advanced > Developer

JavaScript:

Merge JavaScript Files: Yes
Minify JavaScript Files: Yes

CSS:

Merge CSS Files: Yes
Minify CSS Files: Yes

(Uwaga: Merge czasem może powodować problemy — testuj po zmianach!)

4. Włącz i skonfiguruj kompresję GZIP/Brotli

Skonfiguruj serwer Apache/Nginx, by używał GZIP lub Brotli do kompresji tekstowych zasobów (HTML, CSS, JS, SVG, JSON).

Przykład dla Apache:

AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/javascript application/json

5. Używaj CDN (np. Cloudflare)

Serwowanie zasobów (obrazów, JS, CSS) przez CDN znacząco przyspiesza ładowanie strony i obniżenie obciążenia Twojego serwera.
Cloudflare oferuje także:
- Kompresję Brotli
- Cache statycznych zasobów
- Automatyczne minifikacje

6. Włącz Lazy Load dla obrazów

Od Magento 2.4.3 lazy loading dla <img> jest domyślnie wspierany przez atrybut loading="lazy".
Upewnij się, że Twój motyw nie nadpisuje tego zachowania.
Dla starszych wersji Magento może sie okazać niezbednę zainstalowanie zewnetrznego modułu do lazy loadingu np:
- Magefan Lazy Loading
- Mageplaza Lazy Loading

7. Optymalizuj obrazy

Używaj nowoczesnych formatów jak WebP (obsługiwane od Magento 2.4.6).
Narzędzia:
- imagemagick + cwebp
- Moduły Magento:Magefan WebP Images, Tinify, Image Optimizer, lub własne skrypty CRON

Wiecej inforamcji znajdziesz w artykule: Optymalizacja obrazków w Magento 2 do WebP

8. Użyj Redis jako cache backend

Przyspiesza zarówno cache, jak i sesje.
W env.php dodaj konfigurację Redis:

'cache' => [
    'frontend' => [
        'default' => [
            'backend' => 'Cm_Cache_Backend_Redis',
            ...
        ],
        ...
    ]
],

Zalety Redis jako backend cache w Magento 2:

Redis działa w pamięci RAM, co oznacza błyskawiczny dostęp do danych cache w porównaniu do odczytu/zapisu plików z dysku.
Redis może działać jako centralny cache dla wielu serwerów aplikacyjnych, co jest kluczowe w środowiskach load-balanced / multi-node.
Magento standardowo zapisuje cache jako pliki (w var/cache), co może generować:
- duży ruch I/O,
- problemy z synchronizacją między serwerami,
- powolne odczyty.
Magento 2 korzysta z tagów cache – Redis je obsługuje natywnie, umożliwiając selektywne czyszczenie cache i automatyczne wygasanie danych (TTL).
Redis ma wbudowane mechanizmy czyszczenia cache, dzięki czemu unikasz problemów typu zapchany dysk przez pliki cache i ręcznego opróżnianie var/cache.
Można skonfigurować Redis jako:
- backend default cache (konfiguracje, blokowe fragmenty itp.),
- backend page cache (pełne HTML strony).
- Daje to elastyczność i niezależne zarządzanie cache'ami.

Poniżej przykłąd bardziej zawsowanej konfiguracji redis w magento 2 w pliku env.php:

'cache' => [
    'frontend' => [
        'default' => [
            'backend' => 'Cm_Cache_Backend_Redis',
            'backend_options' => [
                'server' => '127.0.0.1',
                'port' => '6379',
                'database' => '0',
                'compress_data' => '1'
            ]
        ],
        'page_cache' => [
            'backend' => 'Cm_Cache_Backend_Redis',
            'backend_options' => [
                'server' => '127.0.0.1',
                'port' => '6379',
                'database' => '1',
                'compress_data' => '0'
            ]
        ]
    ]
],

9. Użyj narzędzi do czyszczenia kodu/motywu

Usuń nieużywane JS, CSS i pliki z motywu
Zminimalizuj liczbę zewnętrznych fontów i skryptów

10. Zoptymalizuj zainstalowane moduły Magento 2

Zbadaj, które moduły wprowadzają duże obciążenie (np. dodatkowe JS).
Wyłącz niepotrzebne rozszerzenia lub zoptymalizuj je ręcznie.

11. Monitoring z Lighthouse lub PSI

Regularnie testuj z:

Google PageSpeed Insights
WebPageTest
Lighthouse z DevTools w Chrome

Informacje tam zawarte pomogą Ci zlokalizować problemy wydajnościowe w Twoim sklepie Magento 2.

12.Instalacja modułów zwiększjacych wydajność

Przetestuj moduły do optymalizacji:

Amasty Google Page Speed Optimizer
Mageplaza Page Speed Optimizer

To kompletne rozwiązanie typu „wszystko w jednym” do optymalizacji front-endu Magento 2 który automatycznie optymalizuje zasoby strony, aby poprawić wynik w Google PageSpeed Insights i przyspieszyć ładowanie.

Są to płatne rozwizania, ale mogą okazać sie znacznie bardziej opłacalne niż zlecenie optymalizacji firmie zewnętrznej.