1. Sytuacja
Od ponad 6 lat jesteśmy partnerem technologicznym Santander Bank Polska SA. - największego banku z kapitałem prywatnym w Polsce. W ramach stałej współpracy wspieramy rozwój i utrzymanie ich portalu informacyjnego santander.pl, zbudowanego na e-point CMS.
Zespół e-point wspólnie z Santander Bank Polska SA. utrzymuje i optymalizuje stronę na środowisku e-point Private Cloud zgodnie z duchem czasu, potrzebami technologicznymi i biznesowymi.
Strategiczna inwestycja w digital total experience
W ubiegłym roku zrealizowaliśmy przygotowaną przez Santander Bank Polska SA. wieloetapową strategię, której celem było znaczące skrócenie czasu ładowania stron portalu santander.pl, stabilne przyjęcie dwukrotnie większego ruchu i zwiększenie zapasu mocy obliczeniowej serwerów aplikacyjnych. To wszystko miało sprawić, że portal santander.pl stanie się Digital Experience Platform na miarę dzisiejszych czasów i musimy przyznać, że pomimo bardzo ambitnych celów – zrealizowaliśmy je.
"Nowoczesne zaplecze technologiczne, stabilne systemy oraz zoptymalizowany frontend to absolutna podstawa i punkt wyjściowy w rozwijaniu santander.pl. Inwestujemy w digital experience – chcemy mieć najnowocześniejszą i najszybszą platformę www na polskim rynku bankowości. Chcemy oferować naszym użytkownikom jak najlepsze doświadczenia digital".
2. Zadanie
Dwa zespoły projektowe, 12 miesięcy prac i zwinna kompozycja projektów realizowanych w różnych modelach
Wyzwanie było dość nietypowe - po pierwsze nie realizowaliśmy jednego, a kilka projektów składających się na całą strategię. Po drugie, część etapów zrealizowaliśmy w modelu Fixed Price, a część w metodologii Scrumowej. Po stronie e-point zaangażowany był interdyscyplinarny zespół składający się z: Java Developerów, Frontend Developerów, Architekta Systemów, Analityka Biznesowego, Testerów, Administratorów Sieci i Project Managera. Blisko współpracowaliśmy z zespołem ekspertów biznesowych i technologicznych z Centrum Doświadczeń Digitalowych Santander Bank Polska SA.
"Na każdym etapie ściśle współpracowaliśmy z klientem. Wieloletnia współpraca pozwoliła nam na zbudowanie zaufania i wzajemnego zrozumienia, co pozwoliło nam sprawnie realizować założenia krok po kroku".
3. Akcja
Analiza i ustalenie zakresu optymalizacji, zmiany hostingowe, backendowe i frontendowe
Wszystkie zmiany wprowadzaliśmy etapowo i na bieżąco mierzyliśmy jak przekładają się na wyniki.
ANALIZA I USTALENIE ZAKRESU PRACY
Stronę santander.pl budowaliśmy kilka lat temu, zgodnie z paradygmatem, że wszystkie biblioteki i style ładują się wraz z pierwszą stroną. To sprawia że ładuje się ona najdłużej. Na przestrzeni czasu Google zmieniał swój algorytm dotyczący pozycjonowania i indeksowania stron. Dziś najbardziej promuje te, które szybko wyświetlają się podczas pierwszego uruchomienia. Musieliśmy się do tego dostosować.
Dlatego dedykowany zespół e-point wraz z zespołem Santander Bank Polska SA., przeprowadził szczegółową analizę aplikacyjną i biznesową. Wyniki analizy wytyczyły kierunki rozwojów, które przyniosą najlepsze efekty.
ZMIANY HOSTINGOWE I BACKENDOWE
Środowisko hostingowe rozszerzyliśmy o dwa dodatkowe węzły serwerów aplikacyjnych, dwa http, rozszerzyliśmy na wszystkich serwerach pamięć operacyjną (z 6 GB na 8GB), oraz zwiększyliśmy ilość rdzeni procesów na serwerach aplikacyjnych (z 8 na 12). Dzięki temu strona bez problemu przyjmuje ruch, który zwiększył się z uwagi na przekierowanie użytkowników, wychodzących z bankowości elektronicznej na dedykowany landing page na portalu.
W samej aplikacji zoptymalizowaliśmy zużycie pamięci poprzez komponenty oraz przenieśliśmy marker raplacery z sesji do aplikacji. Dodatkowo zoptymalizowaliśmy zapytania do bazy danych i wdrożyliśmy cache’owanie danych często pobieranych z bazy.
FRONTEND
Przepisaliśmy cały kod z JavaScript na Typescript co znacznie zmniejszyło ciężar strony wyświetlanej w przeglądarce. Dostosowaliśmy grafiki do urządzeń wyświetlających portal poprzez zastosowanie formatu WebP. Zoptymalizowaliśmy szybkość ładowania contentu, grafik i wszystkich elementów z wykorzystaniem techniki Lazy Loading - oznacza to, że w danym momencie ładowane są tylko te zasoby, które są dla użytkownika najważniejsze, a dopiero potem ładowana jest reszta strony.
Ograniczyliśmy także o 50% liczbę używanych komponentów, odchodząc tym samym od paradygmatu bogactwa na rzecz efektywności i spójnego doświadczenia. Wszystkie te działania są przy okazji doskonałym podłożem pod realizowany w bieżącym roku projekt WCAG 2.1.
4. Rezultat
1. Najszybciej ładująca się strona bankowa w polskim internecie
W lutym 2021 roku, wszystkie narzędzia do pomiarów wydajności strony bezlitośnie plasowały stronę santander.pl na 4 miejscu. Po skróceniu czasu ładowania stron i zoptymalizowaniu technologii, od września 2022 roku portal banku jest nieustająco na pierwszym miejscu (w oparciu o Web Vitals Leaderboard).
2. 3x szybsze ładowanie głównych stron produktowych
Znacząco i trwale skróciliśmy czas ładowania stron. Pomiary wykonane w lutym 2021 roku pokazały, że czas ładowania strony głównej wynosił ok 6 sekund. Dzisiaj to są 2 sekundy. Strona głównego konta osobistego ładowała się aż 8 sekund, dzisiaj – niecałe 3 sekundy. Strona opisująca kredyt ładowała się ok 7 sekund. Dzisiaj ok 2 sekundy. To 3x szybsze ładowanie głównych stron produktowych (według pomiarów WebPageTest i PageSpeed Insights).
3. Stały wzrost konwersji = wyższa sprzedaż
Jak wpłynęło to na biznes? Po pierwsze – konwersja na wybranych stronach wzrosła aż o ok 10%. To trwały wzrost, utrzymujący się stabilnie od momentu wdrożenia zmian aż do dzisiaj. Konwersja rozumiana jest tutaj jako stosunek liczby użytkowników danej strony do liczby wejść w proces (czyli kliknięć w „Otwieram konto”, „Chcę kredyt”). Szybsza strona internetowa to więcej złożonych wniosków, a w konsekwencji – wyższa sprzedaż.
4. Redukcja śladu węglowego o 81%
Skrócenie czasu ładowania stron przyczyniło się do redukcji śladu węglowego generowanego przez portal aż o 81%. Nasz wynik śladu węglowego to naprawdę ścisła czołówka nie tylko w obszarze portali bankowych, ale wszystkich ogólnie.
5. Wzrost wskaźników SEO
Uzyskaliśmy wartości metryk Core Web Vitals (SEO) blisko rekomendowanych przedziałów (według specyfikacji Google). Osiągnęliśmy to dzięki przepisaniu większości komponentów Javascriptowych na Typescript wraz z usunięciem biblioteki jQuery, a także wraz z dodatkową optymalizacją elementów Waterfall w ujęciu SEO.
Wyniki dla ruchu mobilnego 3G Fast:
- redukcja czasu renderowania LCP (Largest Contentful Paint) o 65%,
- redukcja sumy długich zadań (long tasks) TBT (Total Blocking Time) o 18%,
- redukcja czasu potrzebnego do wyrenderowania pierwszych elementów na stronie o 46%,
- redukcja Speed Index, uzyskanie dynamicznego i stabilnego procesu renderowania przestrzeni Above The Fold o 43%,
- zmniejszenie całościowego rozmiaru pobieranych plików na stronie o ok. -50%
Dodatkowo osiągnęliśmy znakomite wyniki udziału adresów URL dobrej jakości.
- z 19,2 % na 50,9% - wzrost adresów url ocenianych przez Google jako „dobrej jakości” dla ruchu mobile,
- z 89,9 % na 94,3% - wzrost adresów url ocenianych przez Google jako „dobrej jakości” dla ruchu desktop.
6. Zaobserwowaliśmy także istotny wzrost wartości wskaźników FCP i LCP.
Chcesz mieć najszybciej ładującą się stronę w swojej branży? Dowiedz się, jak możemy przyspieszyć Twoją stronę internetową i zwiększyć jej efektywność.
Skontaktuj się z nami i sprawdź, jak możemy wspólnie poprawić wydajność Twojej witryny.