Optymalizacja Magento 2 pod Google PageSpeed

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.