Najszybsza strona bankowa w polskim internecie

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.

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 prac

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.

Efekty

 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).

 Skrócenie ładowania stron o 300%

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 skrócenie czasu ładowania nawet o 300% (według pomiarów WebPageTest i PageSpeed Insights).

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ż.

 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.

 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.

 Przed: 

 Po: 

 Zaobserwowaliśmy także istotny wzrost wartości wskaźników FCP i LCP.

Możemy pomóc również Tobie. Napisz do nas, a my przeprowadzimy analizę Twoich potrzeb biznesowych i ustalimy, co możemy zrobić, aby poprawić doświadczenia pracowników i klientów Twojej firmy.

Porozmawiajmy. Napisz do nas.