Optymalizacja prędkości Magento 2: łatwe + zaawansowane sposoby

Szybkość strony ma duży wpływ na sukces sklepu, ponieważ sklepy o niskiej wydajności z pewnością będą miały niższe współczynniki konwersji i w rezultacie przegrają z konkurencją. A ponieważ regularnie przeprowadzamy optymalizację prędkości dla naszych klientów, uważamy, że w naszych kompetencjach jest dostarczanie najnowszych technik optymalizacji prędkości w Magento 2.

Optymalizacja prędkości i dlaczego trudno to zrobić dobrze

Oczywiście, gdyby optymalizacja prędkości w witrynach Magento 2 była po prostu instalacją i włączaniem rozszerzeń, nie miałbyś problemów z optymalizacją wydajności. To znacznie bardziej skomplikowane.

Wiele zmiennych

Musisz wziąć pod uwagę różne zmienne związane z pomiarem szybkości strony. Możliwe, że szybkość Twojej strony jest naprawdę fantastyczna w idealnym stanie – to znaczy, jeśli urządzenie użytkownika jest w stanie renderować wszystko, co na nie rzucasz. Może się też zdarzyć, że szybkość Twojej strony nie jest taka zła, ale postrzegana wydajność dla użytkownika jest okropna z powodu złej skumulowanej zmiany układu.

Istnieje wiele zmiennych, które należy wziąć pod uwagę przy optymalizacji wydajności Twojego sklepu, dlatego zawsze powinieneś najpierw zidentyfikować konkretne problemy.

Priorytet

A nawet jeśli odrobiłeś pracę domową i zidentyfikowałeś wszystkie problemy z bieżącym działaniem Twojego sklepu, nadal nie byłoby dobrym pomysłem naprawianie ich wszystkich. Z naszego doświadczenia wynika, że ​​mikrooptymalizacje prawie nic nie poprawiają rzeczywistej wydajności i powinieneś pracować tylko nad optymalizacją problemów, które Twoim zdaniem są głównymi przeszkodami, które uniemożliwiają Twojemu sklepowi prowadzenie zakupów w pożądany sposób.

Kompromis

Kiedy naprawdę się w to zagłębisz, optymalizacja prędkości jest ciągłym kompromisem między funkcjonalnością a wydajnością — zawsze musisz coś poświęcić, aby uzyskać lepszą wydajność. Czasami jest to pociągający motyw Magento, czasami jest to przydatne rozszerzenie, które jest szkodliwe dla wydajności Twojego sklepu.

Ogólne techniki optymalizacji

Te ogólne techniki optymalizacji są bezbolesne i nie wymagają dużej wiedzy technicznej do wdrożenia.

1. Sprawdź swoją aktualną wersję hostingu i Magento

Hosting odgrywa kluczową rolę w szybkości witryny, ponieważ im lepszy jest plan hostingowy, tym bardziej wydajny sklep może działać szybko pomimo rosnącego ruchu lub dużych katalogów.

Jeszcze ważniejsze jest, aby witryna Magento miała przyzwoity hosting, aby ułatwić jej solidną i złożoną strukturę. Podczas gdy hosting Magento wymaga do działania co najmniej 2 GB pamięci RAM, odpowiedni plan hostingowy zależy od skali strony.

Tak więc, jeśli Twoja obecna witryna Magento działa wolno i korzystasz z niższej klasy hostingu, nadszedł czas na uaktualnienie, aby uzyskać znaczną poprawę szybkości.

>> Zobacz więcej: 12 najlepszych dostawców hostingu Magento

2. Skorzystaj z usługi CDN

(Zdjęcie/WPpoczątkujący.com)

W logistycznym łańcuchu dostaw towary są wysyłane szybciej, jeśli w pobliżu lokalizacji kupującego znajduje się magazyn. Podobnie CDN (sieć dostarczania treści) pomaga szybciej dostarczać zawartość, buforując zawartość na serwerze brzegowym w pobliżu geolokalizacji użytkowników.

CDN najlepiej sprawdza się w dużych sklepach z międzynarodowymi gośćmi, a także w witrynach z dużą ilością dynamicznej zawartości zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych. Z tych powodów doskonale pasuje do wielu witryn Magento.

Podczas gdy wielu dostawców hostingu oferuje usługi CDN, możesz również wybrać własnych dostawców CDN, takich jak Fastly lub Stackpath. Po ustawieniu usługi musisz skonfigurować CDN w swoim backendzie Magento, zanim zobaczysz jakiekolwiek zmiany.

3. Lazy ładowania obrazów

Spośród wszystkich rodzajów zasobów żądanych przez popularne witryny, obrazy są najczęściej żądanym rodzajem zasobów, których liczba żądań zajmuje średnio 35,6% (desktop) wszystkich żądań wysłanych przez stronę. Jeśli chodzi o wagę strony, zasoby graficzne zajmują średnio 46,6% mediany wagi strony, co sprawia, że ​​jest to mało wiszący owoc optymalizacji szybkości, który zapewnia imponujące wyniki, gdy robisz to dobrze.

Lazy loading to skuteczny sposób na poprawę wydajności Twojego sklepu, ponieważ eliminuje konieczność ładowania wszystkich obrazów jednocześnie. Dzięki leniwemu ładowaniu obrazy są ładowane później, gdy użytkownik tego potrzebuje, co skutecznie skraca czas ładowania strony bez szkody dla wygody użytkownika.

W Magento 2 możesz zaimplementować lazy loading na swojej stronie Magento z rozszerzeniami, takimi jak Lazy Loading dla Magento 2. Istnieje kilka innych rozszerzeń, które są dostępne bezpłatnie na rynku Magento.

4. Użyj WebP

WebP, często porównywany do szwajcarskiego scyzoryka, jest nowym i elastycznym formatem obrazu, który szybko zyskuje na popularności i ma zastąpić PNG, JPEG i GIF. W porównaniu do obrazów PNG i JPG, obrazy WebP są zwykle o 25 – 35% mniejsze, przy niemal zerowej utracie jakości obrazu.

Ponieważ jest to wciąż stosunkowo nowy format obrazu, WebP nie jest domyślnie obsługiwany w Magento 2 i musisz zainstalować rozszerzenia innych firm, takie jak Magento 2 WebP Images Extension, aby umożliwić automatyczną konwersję obrazu do WebP.

5. Użyj lekkich motywów

Na podstawie samych wyświetleń możesz stwierdzić, kiedy ciężki motyw znacznie spowalnia Twój sklep, a użytkownicy z wolnym połączeniem internetowym i/lub przestarzałym sprzętem będą mieli na to tylko większy wpływ.

Aby obejść ten problem, musisz selektywnie wybierać motywy Magento, kładąc większy nacisk na wydajność. Jednak dowiadujemy się, że trudno jest dokładnie określić, czy motyw jest naprawdę lekki, dlatego powinieneś ogólnie sprawdzić, czy wersja demonstracyjna motywu jest dla Ciebie szybka, przeczytać więcej recenzji użytkowników i czy chcesz mieć pewność Użyj PageSpeed ​​Insights, aby dokładnie przetestować motyw.

6. Wyłącz płaskie katalogi

Kiedyś włączenie katalogu płaskiego było najlepszym rozwiązaniem, jeśli chcesz skrócić czas wykonywania zapytań SQL. Jednak od Magento 2.1 i nowszych nie jest to już najlepsza praktyka i należy powstrzymać się od używania jakiegokolwiek rozszerzenia, które wiąże się z użyciem katalogu płaskiego, ponieważ wiadomo, że ta funkcja powoduje pogorszenie wydajności i inne problemy z indeksowaniem.

Aby wyłączyć katalogi płaskie, upewnij się, że w opcji Sklepy > Ustawienia > Konfiguracja > Katalog wybrano opcję Użyj kategorii płaskiego katalogu/Użyj produktu z płaskiego katalogu na Nie .

7. Ogranicz niepotrzebne rozszerzenia stron trzecich

Jak zawsze, układanie w stos rozszerzeń innych firm nie zawsze jest dobrym pomysłem, a rozszerzenia innych firm mogą powodować jeszcze więcej problemów, jeśli zostaną pobrane/zakupione z niezaufanych źródeł. Aby wyeliminować potencjalne problemy, najlepszymi praktykami jest utrzymywanie liczby rozszerzeń na niezbędnym poziomie, regularne ich aktualizowanie i pobieranie/kupowanie rozszerzeń stron trzecich tylko z zaufanych źródeł.

8. Wyłącz łączenie JavaScript

Bundling JavaScript grupuje wiele plików JavaScript w pakiet. W rezultacie serwer musi żądać mniejszej liczby plików JavaScript, co zajmuje mniej czasu. Teoretycznie powinno to pomóc w osiąganiu wyników.

Jednak w rzeczywistości podstawowe narzędzie JS Bundling wbudowane w Magento nie spełnia tych oczekiwań, ale często powoduje gorszą prędkość ładowania. Według testu przeprowadzonego przez członka giełdy Magento, średni czas ładowania jego strony internetowej wzrasta z 5 do 15 sekund po włączeniu JS Bundling.

Pakowanie JS jest domyślnie wyłączone. Możesz jednak sprawdzić, czy był wcześniej włączony i wyłączyć go ponownie, przechodząc do

Przechowuj >> Konfiguracja >> Zaawansowane >> Deweloper >> Ustawienia JavaScript i ustaw Włącz łączenie JavaScript na Nie .

9. Zoptymalizuj dziennik danych Magento

Pliki dziennika Twojej witryny Magento zawierają listę wszystkich zmian dokonanych w bazie danych. Z czasem mogą gromadzić się nawet kilka GB, co spowalnia działanie Twojej witryny.

Usunięcie starych, dużych dzienników, które nie są już istotne dla bieżącej aktywności Twojej witryny, jest niezbędnym krokiem do utrzymania dobrej szybkości działania.

Ponadto Magento automatycznie i często generuje nowe pliki dziennika, więc usunięcie starych nie powinno powodować żadnych problemów.

Sprzedawcy nietechniczni mogą przejść do Sklepu >> Konfiguracja >> Zaawansowane >> Oczyszczanie kolejki wiadomości MySQL .

Oczyszczanie automatycznie usunie stare pliki dziennika po określonym czasie.

Magento ustawił domyślne wartości dla tych atrybutów powyżej, ale możesz je zmienić według własnego uznania.

Trochę bardziej zaawansowany

10. Użyj pamięci podręcznej całej strony lakieru

Varnish Cache to akcelerator aplikacji internetowych typu open source, który w zależności od architektury może przyspieszyć dostarczanie treści 300 – 1000 razy. Dlatego właśnie Magento zdecydowanie poleca Varnish, ponieważ jest to znacznie lepsza opcja niż wbudowane buforowanie całej strony. Ponadto, ponieważ Varnish został zaprojektowany w celu przyspieszenia ruchu HTTP, możesz znacznie skrócić czas odpowiedzi serwera i zużycie przepustowości sieci przy powtarzających się żądaniach.

Aby skonfigurować i używać lakieru, postępuj zgodnie ze szczegółowym przewodnikiem krok po kroku, jak sprawić, by Twoja witryna Magento 2 latała.

Zasilany przez Varnish, Fastly pomaga osiągnąć więcej za koszt

W szczególności w przypadku Magento Commerce Cloud, Fastly jest wymagane do użytku w środowiskach pomostowych i produkcyjnych. W porównaniu do korzystania z samego Varnish, jest to podejście bardziej bogate w funkcje, ponieważ oprócz możliwości szybkiego buforowania zapewnianych przez Varnish, zapewnia również CDN i ulepszenia bezpieczeństwa dla Twojej witryny Magento 2 i infrastruktury Cloud.

Sprzedawcy na Magento Open Source mogą korzystać z Fastly, ale nadal należy pamiętać, że w przeciwieństwie do Varnish, Fastly nie jest darmowym rozwiązaniem i ma opłaty oparte na przepustowości i wykorzystaniu żądań w zależności od regionu.

Aby skonfigurować Fastly, zapoznaj się z oficjalnym przewodnikiem po Magento DevDocs.

11. Skonfiguruj Memcached / Redis

Pamięć podręczna jest dobrze znana z tego, że jest skutecznym rozwiązaniem pozwalającym zoptymalizować prędkość i drastycznie skrócić czas ładowania.

Podczas gdy Varnish jest rozwiązaniem buforowania dla frontendu, Memcached i Redis pomagają w buforowaniu zaplecza, co jest zdecydowanie zalecane w przypadku aplikacji internetowych na dużą skalę z dynamicznymi bazami danych.

Redis jest potężniejszy i bardziej elastyczny niż Memcached i może zrobić wszystko, co potrafi Memcached. Dlatego jest to bardziej popularny wybór wśród programistów. Jednak Memcached jest prostszy w konfiguracji i obsłudze, aw określonych przypadkach może być korzystniejszy niż Redis.

Zaleca się zagłębienie się w temat, aby dowiedzieć się, które rozwiązanie najlepiej sprawdza się w środowisku Twojej witryny, zanim spróbujesz skonfigurować Memcached, Redis lub oba.

12. Przejdź do HTTP/2

Wydany w lutym 2015 r. HTTP/2 to nowe ulepszenie istniejącego protokołu HTTP. Jest teraz używany przez 49,9% wszystkich stron internetowych i od tej pory będzie coraz częściej stosowany, zwłaszcza że testy wykazały, że HTTP/2 zapewnia nawet 14% poprawę w ładowaniu strony i inne korzyści.

Na przykład w poniższej demonstracji wideo możesz zobaczyć, jak protokół HTTP/2 zapewnia większą wydajność po przekroczeniu limitu:

W tym filmie każdy obraz jest podzielony na 379 małych kafelków, co wymaga nawiązania 379 oddzielnych połączeń z serwerem. Jest to bardzo mało prawdopodobny scenariusz, ale daje nam wgląd w to, jak działa multipleksowanie HTTP/2 i jak może zapewnić znacznie wyższą wydajność w porównaniu z HTTP/1.

Aby włączyć HTTP/2 dla swojej witryny Magento, musisz ją skonfigurować za pośrednictwem CDN (np. Fastly) lub za pośrednictwem serwerów internetowych (Apache). Na przykład, oto jak to zrobić w Apache i Nginx.

13. Minifikacja

Minifikacja , jak sama nazwa wskazuje, to metoda minimalizacji kodu Twojej strony. W procesie minifikacji wszystkie niepotrzebne części w plikach HTML, JavaScript lub CSS zostaną usunięte, zapewniając, że zasoby Twojej strony są utrzymywane w jak najmniejszym stopniu. Minifikacja jest obecnie standardową praktyką i każda strona internetowa powinna ją zastosować w swojej infrastrukturze, ponieważ jest to zasadniczo darmowy wzrost wydajności.

Aby włączyć minifikację dla swojej witryny Magento, możesz polegać na łatwo dostępnych rozszerzeniach, takich jak Minify HTML CSS JS, lub włączyć minifikację CSS i JavaScript bezpośrednio przez zaplecze Magento. W przypadku tej drugiej metody musisz:

• Ustaw swój sklep Magento 2 w trybie produkcyjnym
• Następnie przejdź do Sklepy > Konfiguracja > Zaawansowane > Deweloper
• Ustaw Minify HTML/Minify CSS Files/Minify JavaScript Files na Tak
• Pamiętaj, aby później opróżnić pamięć podręczną za pomocą System> Zarządzanie pamięcią podręczną

14. Pozbądź się głowy z witryną sklepową PWA

Ponieważ większość stron internetowych Magento, które obecnie mamy, nadal opiera się na tradycyjnej architekturze, bardziej niż cokolwiek innego ogranicza Cię wykorzystywana infrastruktura, ponieważ sama architektura tradycyjna jest sztywna, konserwatywna i podatna na spowolnienia w czasie. Architektura bezgłowa w mniejszym lub większym stopniu rozwiązuje ten problem, ponieważ jest to podejście, które ma na celu zapewnienie większej elastyczności, skalowalności i większej poprawy wydajności w witrynach sklepowych.

Dlatego widzisz, że marki wybierają witryny sklepowe PWA (czyli sklep bez głowy) jako sposób na zwiększenie wydajności i naprawdę jest to sen, który zyska tylko większe uznanie w najbliższej przyszłości.

Ponieważ chodzenie bez głowy często wiąże się z poważnymi zmianami infrastruktury w Twojej witrynie, sugerujemy, abyś polegał wyłącznie na zaufanym dostawcy rozwiązań Magento PWA, który przeprowadzi cały proces za Ciebie.

 Polecana literatura: Korzyści z PWA dla Twojej firmy

15. Usuń nieużywane czcionki

Często próbuje się różnych czcionek przed podjęciem decyzji, które z nich najlepiej wyglądają w Twojej witrynie, a potem o nich zapomnij. Jednak te czcionki są nadal dodawane do pliku „default_head_blocks.xml” i nadal są pobierane.

Jeśli chcesz zoptymalizować szybkość swojej witryny Magento, musisz usunąć wszystkie nieużywane czcionki.

Podobnie, jeśli używasz niestandardowej czcionki, powinieneś usunąć inne domyślne czcionki twojego motywu (np. Open Sans, Helvetica itp.).

Możesz to naprawić, nadpisując _typography.less w swoim motywie.

Po prostu przenieś

 /vendor/magento/theme-frontend-blank/web/css/source/_typography.less

Do

 /app/design/frontend/Dostawca/Motyw/web/css/source/_typography.less

Następnie usuń niepotrzebne czcionki w nowych plikach _typography.less.

Ponadto będziesz musiał usunąć czcionki z pliku default_head_blocks.xml, aby nie był już pobierany.

 <głowa>
...
<remove src="fonts/helvetica/regular/helvetica-400.woff2"/> 
<remove src="fonts/helvetica/bold/helvetica-700.woff2"/> 
...

16. Używaj zaawansowanego łączenia skryptów JavaScript

W kroku 8 sugerujemy wyłączenie natywnego wiązania JS Magento ze względu na jego brak wydajności. Jednak JS Bundling jest nadal skuteczną praktyką, aby osiągnąć lepszą prędkość Magento 2, jeśli wiesz, jak ją dostosować.

Ale najpierw porozmawiajmy o tym, czym domyślny pakiet Magento JS różni się od zaawansowanych:

W przypadku podstawowego pakietu JS Magento można spakować lub scalić wszystkie pliki JS tylko w jeden pakiet jumbo. W rezultacie, gdy wymagana jest strona, przeglądarka musi załadować ten duży, ciężki pakiet JS, co nieuchronnie wydłuża czas ładowania.

Tymczasem dzięki zaawansowanemu pakietowaniu JS możesz dostosować własne pakiety, aby przeglądarka musiała pobierać tylko pakiet, który jest odpowiedni dla zawartości każdej strony. Ponieważ te pakiety są mniejsze i lżejsze, nie spowodują dalszych problemów z szybkością.

Elastycznie możesz tworzyć pakiety dla każdego typu strony lub do różnych celów.

Na przykład dostosuj jeden pakiet dla stron kategorii, a drugi dla stron kasy.

Jeśli chodzi o szczegółowe instrukcje, możesz polegać na oficjalnym przewodniku Magento po zaawansowanym pakiecie JS.

17. Użyj odroczenia ładowania JS

Kiedy przeglądarka ładuje stronę, ładuje wszystkie pliki JavaScript, HTML i CSS strony znajdujące się od góry do dołu. Pliki JavaScript, które często znajdują się na górze, są ładowane jako pierwsze. Po załadowaniu JavaScript przeglądarka kontynuuje renderowanie plików HTML i CSS.

Jednak JavaScript jest bardziej skomplikowanym językiem, który zazwyczaj ładuje się dłużej niż HTML. W związku z tym, aby zoptymalizować szybkość Magento 2, zaleca się przeniesienie JavaScript na dół, aby był ładowany dopiero po wyrenderowaniu plików HTML i CSS.

Możesz to zrobić, postępując zgodnie z oficjalnym przewodnikiem Magento lub używając rozszerzenia JS defer dla Magento 2.

18. Włącz ścieżkę krytyczną CSS

Powszechną praktyką programistów jest przechowywanie CSS w zewnętrznym pliku. Jednak według Magento wszystkie style CSS ze źródeł zewnętrznych będą blokować renderowanie. Innymi słowy, twoja strona nie wyświetli niczego, jeśli wszystkie te pliki nie zostaną załadowane.

W rezultacie zwiększa wskaźnik pierwszego znaczącego malowania w statystykach szybkości strony Google i spowalnia ładowanie strony.

Krytyczna ścieżka CSS umożliwia wybór krytycznego CSS z odroczeniem wszystkich nieistotnych stylów. Te krytyczne style CSS są następnie minimalizowane i składane inline w <head> .

W ten sposób pomaga skrócić czas potrzebny na wyrenderowanie strony po raz pierwszy. Magento doświadczyło spadku Pierwszego znaczącego malowania z 3,5 s do 2,3 s po włączeniu tej funkcji, a Ty możesz dowiedzieć się, jak to robią, podążając za przewodnikiem ścieżki krytycznej CSS.

19. Upewnij się, że jest w trybie produkcyjnym

Magento ma trzy tryby pracy: domyślny, deweloperski i produkcyjny.

Tryb produkcyjny, który jest zoptymalizowany pod kątem wydajności poprzez włączenie pełnego buforowania stron, pakietów JS i nie tylko, jest najlepiej zalecany dla wszystkich aktywnych witryn Magento. Jest to szybszy tryb Magento, który jest o 20%-30% szybszy niż tryb programisty.

Sprawdź swój bieżący tryb, uruchamiając polecenie:

 wdrażanie bin/magento: tryb: pokaz

Otrzymasz taką wiadomość:

Bieżący tryb aplikacji: {mode}. (Uwaga: zmienne środowiskowe mogą zastąpić tę wartość).

Jeśli bieżący tryb nie jest produkcyjny, możesz przejść do trybu produkcyjnego, uruchamiając polecenie:

 bin/magento deploy:mode:set {mode} [-s|--skip-compilation]

Wniosek

Dzięki tym wszystkim technikom możesz teraz pracować nad tym, aby Twoje Magento było szybsze, a tym samym uzyskać lepszą przewagę nad konkurencją. Należy jednak pamiętać, że optymalizacja wydajności nie zawsze jest opłacalna, ponieważ mikrooptymalizacje w większości przypadków są zmarnowanym wysiłkiem i pozostają niezauważalne w rzeczywistych zastosowaniach. Z naszego doświadczenia wynika, że ​​najlepszą strategią jest najpierw zidentyfikowanie istotnych problemów i skupienie się tylko na nich, dopóki nie osiągniesz pożądanych rezultatów.

Dla sprzedawców Magento, którzy zmagają się z wydajnością, w SimiCart oferujemy szeroki zakres usług, w tym optymalizację prędkości dla Twojej firmy. Zacznij badać dostępne opcje już teraz i osiągnij wiodącą w branży wydajność sklepu.