#AEM

Optymalizacja wydajności Adobe Experience Manager: Eksperckie techniki dla najlepszych rezultatów

Spis treści

Adobe Experience Manager ma opinię najbardziej zaawansowanego systemu zarządzania treścią na świecie, ale ma to swoją cenę — wiele możliwości optymalizacji i wykorzystania wydajności AEM jest często pomijanych z powodu jego złożonej architektury i braku świadomości. 

Biorąc pod uwagę wysoki koszt licencji AEM, taki scenariusz jest prawdopodobnie więcej niż frustrujący. I choć nie ma magicznego, uniwersalnego rozwiązania, możemy zaoferować zestaw praktyk, które można wykorzystać do szybkiego uzyskania mierzalnych rezultatów, bez tygodni przekopywania się przez dokumentację.

Przegląd architektury AEM

Bez zagłębiania się w szczegóły techniczne, pokrótce przedstawimy architekturę AEM. Ten przegląd jest kluczowy, ponieważ podkreśla podstawowe zasady, które bezpośrednio wpływają na główną metrykę oceny wydajności Twojej witryny: czas odpowiedzi na żądanie użytkownika.

W skrócie, architektura AEM jest zorganizowana wokół czterech głównych instancji: Author, Publisher, Dispatcher i Load balancer. Pomyśl o nich jak o dobrze skoordynowanej grupie tanecznej: Author pisze ruchy, Publisher je wykonuje, Dispatcher kieruje, a Load Balancer dba o to, by wszyscy dotrzymywali kroku. Zapewniają one, że nowe treści pojawiają się płynnie i szybko ładują się dla użytkowników.

Instancja Author jest rodzajem piaskownicy do tworzenia i modyfikowania treści. To tutaj strony internetowe są tworzone, kategoryzowane i modyfikowane, a także przechowywane są wszelkie media używane w Twojej witrynie.

Instancja Publisher to aktywna wersja Twoich treści, dostępna do przeglądania przez użytkowników. Gdy treść zostanie zatwierdzona do publikacji w środowisku autora, jest wysyłana do warstwy wydawniczej (publisher tier).  

Instancja Dispatcher jest odpowiedzialna za buforowanie (caching) i równoważenie obciążenia (load balancing), czyli kierowanie ruchu do ścieżek, które zapewniają możliwie najkrótszy czas ładowania.  

Wreszcie, Load balancer. Tak, zadanie równoważenia obciążenia jest już wykonywane przez Dispatcher, ale to środowisko istnieje, aby dystrybuować ruch od twórców treści i użytkowników pomiędzy środowiskami autora, wydawcy i Dispatchera, jeśli jest ich więcej niż jedno.W idealnych warunkach jest to perfekcyjnie zaaranżowany spektakl, w którym nikt nie popełnia błędu. Koncepcja AEM CCMS podkreśla skalowalność i elastyczność AEM, umożliwiając systemowi rozwój wraz z Twoim biznesem. Jednakże, w dużych projektach, wraz ze wzrostem wolumenu treści, rośnie również ryzyko zakłóceń w różnych komponentach. Zrozumienie, jak monitorować, zapobiegać i, idealnie, przewidywać te problemy, jest kluczowe. Poniższe praktyki pomogą Ci to osiągnąć.

Optymalizacja treści

Adobe Experience Manager zawiera kilka różnych typów zasobów skategoryzowanych jako treść. Dla każdego typu istnieją bieżące możliwości optymalizacji, które warto wykorzystać, aby utrzymać wysoki poziom wydajności AEM.

Poprawa czasu ładowania obrazów

Jakość obrazów jest kluczowa dla postrzegania Twojej strony internetowej. W dużym stopniu wpływa na to, jak widzą ją odwiedzający. Jednakże, wysokiej jakości obrazy mogą spowalniać czas ładowania i wydajność witryny. Korzystając z poniższych metod, możesz zrównoważyć pracę z zasobami wizualnymi, aby osiągnąć szybką odpowiedź i nie stracić atrakcyjności wizualnej witryny w oczach odwiedzającego.

  • Podejście lazy load. Tak, to rzadki przypadek „powoli, a daleko”. Technika lazy loading oznacza, że ładowanie niektórych komponentów strony, często obrazów, jest opóźnione do momentu, aż staną się niezbędne, czyli do momentu, gdy użytkownik zacznie z nimi wchodzić w interakcję. Adobe Experience Manager domyślnie obsługuje lazy loading. Odbywa się to za pośrednictwem komponentu obrazu z komponentów rdzeniowych AEM. Wystarczy wybrać tę opcję w oknie dialogowym projektu (w sekcji Zasady).
  • Optymalizacja formatu. Spośród wielu dostępnych dziś formatów obrazów, niektóre lepiej odpowiadają określonym warunkom. Na przykład, pliki SVG można zmieniać rozmiar bez utraty jakości.
  • Techniki adaptacyjne. Użytkownicy mobilni nie potrzebują takiej samej jakości obrazów, jaką widzą odwiedzający Twoją stronę na komputerze. AEM obsługuje metodę Dynamic Media, która oszczędza więcej zasobów w porównaniu ze starą metodą renderowania.
  • Buforowanie obrazów. Kategoryzuj obrazy na swojej stronie pod kątem częstotliwości ich rotacji. Pomoże to zrozumieć, które zasoby wizualne możesz przechowywać w pamięci podręcznej przez dłuższy czas.

Minifikacja kodu

Metoda ta polega na eliminowaniu niepotrzebnych lub przestarzałych danych bez wpływu na przetwarzanie strony internetowej przez przeglądarkę. Podczas procesu minifikacji usuwane są komentarze do kodu i formatowania, nieużywany kod, stosowane są krótsze nazwy zmiennych i funkcji itd.

Zmniejsza to rozmiar zasobów (JavaScript) i, co najważniejsze dla nas, poprawia czas ładowania strony. AEM obsługuje minifikację plików JavaScript poprzez generowanie minifikowanego kodu dla zmian semantycznych.

Fragmenty doświadczeń i treści

Z założenia funkcje Fragmentów Treści i Fragmentów Doświadczeń (CF i XF) zostały wprowadzone w celu uproszczenia zarządzania treścią i jej ponownego wykorzystania, ale mogą być również używane do opracowywania przydatnych strategii buforowania.

Buforowanie i renderowanie

Omówiliśmy już temat buforowania w optymalizacji wydajności AEM. Teraz zagłębimy się w niego bardziej. Odpowiednia strategia buforowania i renderowania pomoże Ci w pełni wykorzystać implementację AEM. Powinna ona uwzględniać Twoje zasoby i wymagany poziom wydajności.

Optymalizacja renderowania w AEM

Na początek, zajmijmy się koncepcjami renderowania po stronie klienta (CSR) i renderowania po stronie serwera (SSR). Kluczowa różnica między CSR a SSR polega na tym, gdzie odbywa się renderowanie. W CSR klient odpowiada za renderowanie. Serwer dostarcza jedynie pusty plik HTML. Stamtąd przeglądarka zajmuje się resztą procesu renderowania. W przypadku renderowania po stronie serwera (SSR) serwer renderuje stronę przed wysłaniem jej do klienta.

W przypadku bogatych w treść aplikacji jednostronicowych warto rozważyć renderowanie po stronie serwera dla niektórych treści, aby przyspieszyć początkowe ładowanie strony. Chociaż AEM w pełni wspiera funkcję SSR w takich przypadkach, zaleca się dokładne rozważenie, czy wysiłek jest wart korzyści, zwłaszcza biorąc pod uwagę długoterminową konserwację.

SSR staje się szczególnie przydatne, jeśli Twoja witryna potrzebuje wsparcia w jednej z tych dziedzin:

  • SEO: Czy SSR jest niezbędne do prawidłowego indeksowania Twojej witryny przez wyszukiwarki? Pomimo postępów, wyszukiwarki mogą być kapryśne w stosunku do JavaScriptu. Dlatego SSR może nadal być najlepszym przyjacielem Twojej witryny (i nie zapomnij przestrzegać najlepszych praktyk AEM SEO).
  • Szybkość strony: Jak SSR wpływa na szybkość w rzeczywistych środowiskach i doświadczenie użytkownika? Jeśli Twoi użytkownicy są niecierpliwi i wymagający (a kto dziś nie jest?), to jest to ważny punkt do rozważenia.

Optymalizacja buforowania AEM

Rola Dispatcher Cache odgrywa tu kluczową rolę. Jedną z najlepszych praktyk optymalizacji wydajności AEM jest buforowanie stron lub fragmentów AEM w dispatcherze AEM. W tym przypadku Dispatcher Cache działa jako bufor odwróconego proxy, który znajduje się między AEM a przeglądarką użytkownika końcowego. Pamięć podręczna przechowuje kolejne kopie treści, które mogą być żądane bezpośrednio z pamięci podręcznej, a nie z samego AEM.

To, co czyni tę funkcję jeszcze bardziej atrakcyjną, to fakt, że użytkownicy mogą skonfigurować Dispatcher Cache do buforowania określonych typów treści, takich jak obrazy lub pliki JavaScript, lub do buforowania w warstwach, od stron po sekcje witryny.

Testowanie i optymalizacja

Jesteś już prawie na mecie. Pozostał tylko mały element układanki — sprawdźmy, czy wszystkie zaimplementowane metody działają prawidłowo. Istnieją różne metody i narzędzia do testowania wydajności i dostrajania AEM, dostępne niezależnie lub komercyjnie.

Testowanie wydajności AEM

Testowanie może być przeprowadzane na instancjach Publisher, instancjach Author lub na obu, w zależności od wymagań. Istnieje wiele strategii i metodologii, ale należy stosować te, które jak najdokładniej naśladują rzeczywiste warunki.

  • Symulacja rzeczywistości. To oczywisty warunek udanego testowania, ale nie zawsze łatwy do spełnienia. Używaj ilości treści podobnych do produkcyjnych. Testuj kod, sprzęt i konfigurację sieci przygotowywaną do produkcji.
  • Cele testowania. Przed rozpoczęciem testowania musimy określić obciążenia i akceptowalne czasy odpowiedzi. Jeśli ma miejsce migracja, czas odpowiedzi musi być co najwyżej zgodny z obecnym środowiskiem produkcyjnym. Jeśli chodzi o poziom obciążenia, dobrą praktyką jest ustawienie go na dwukrotność rzeczywistego obciążenia szczytowego.
  • Narzędzia. Dostępnych jest wiele komercyjnych narzędzi do testowania. Na przykład Tough Day firmy Adobe może przeprowadzać testy obciążeniowe różnych instancji AEM i zbierać dane dotyczące wydajności. Do testowania witryn mobilnych lub responsywnych użyj narzędzi symulujących wolne połączenia, takie jak 3G lub Edge. 

Optymalizacja wydajności AEM

Dobrym początkiem optymalizacji Twojej strony internetowej jest porównanie jej z normami branżowymi i czołowymi konkurentami. Zapewnia to zgodność z aktualnymi standardami branżowymi i daje jasny obraz technologii, które będziesz musiał wdrożyć w najbliższej przyszłości, aby wyprzedzić konkurencję.

Niektóre płatne usługi pozwalają porównać wydajność i ranking Twojej witryny z witrynami konkurencji. SimilarWeb, Ahrefs i Semrush to dobre przykłady takich usług. Alternatywnie, możesz ręcznie analizować wydajność witryn konkurencji, porównując ich metryki ze standardami branżowymi i wydajnością własnej witryny.

Wśród wewnętrznych zasobów i narzędzi przydatnych do ostatecznego dostrajania wydajności są Monitorowanie Wydajności i Tryb Deweloperski. Monitorowanie Wydajności to zestaw dokumentacji, która pomaga w diagnozowaniu problemów i identyfikowaniu możliwości optymalizacji. Przełączenie na Tryb Deweloperski w interfejsie użytkownika Author UI pozwoli Ci sprawdzić czasy renderowania dla każdego komponentu strony oraz ślady stosu błędów.

Podsumowanie

Optymalizacja wydajności AEM to złożone zagadnienie. Wymaga wieloaspektowego podejścia i wielu zasobów, jak pokazano powyżej. Ustrukturyzowane informacje zawarte w tym artykule powinny przygotować Cię do rozwiązania tego zadania krok po kroku. 

Jednakże, jeśli masz zrozumiałą chęć delegowania tego zadania profesjonalistom, taka opcja jest również dostępna. Doświadczeni konsultanci AEM posiadają wiedzę i zasoby, aby w pełni wykorzystać Twoją implementację AEM i zapewnić metody precyzyjnego dostrajania, dopasowane do Twoich celów biznesowych. 

    Porozmawiajmy o Twoim projekcie!
    / 2
    Wszystkie pola oznaczone gwiazdką są obowiązkowe
    Wszystkie pola oznaczone gwiazdką są obowiązkowe
    All fields marked with an asterisk are required
    All fields marked with an asterisk are required
    Check the box
    Success!
    We will contact you by email