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

 We wrześniu 2022 roku strona santander.pl zajęła pierwsze miejsce w rankingu najszybciej ładujących się stron internetowych polskich banków. Dla porównania, w lutym 2021 znajdowała się na czwartym miejscu ( w oparciu o Web Vitals Leaderboard).

 Strony głównych produktów ładują się o 250-300% szybciej (według pomiarów WebPageTest i PageSpeed Insights).

 Ślad węglowy zmalał o 75%.

Santander Bank Polska SA. od lat konsekwentnie realizuje strategię odpowiedzialnej bankowości i zrównoważonego rozwoju. Redukcja śladu węglowego produkowanego przez bank to jeden z czynników tej strategii. Projekt przyspieszenia portalu pozwolił zmniejszyć ślad węglowy produkowany przy pojedynczej odsłonie stron portalu o 75%. To znaczący postęp w realizacji strategii banku.

Źródło: https://www.websitecarbon.com/

Konwersja wzrosła średnio o 10%.

Konwersja, liczona jako stosunek wejść w proces („Biorę kredyt”, „Otwieram konto”), do liczby odsłon strony to kluczowy czynnik mający wpływ na sprzedaż z portalu. W dużym skrócie pokazuje, jaki odsetek użytkowników odwiedzających daną stronę, decyduje się na zakup produktu. Szybkość ładowania strony ma zasadniczy wpływ na taką konwersję – analizy wykonane przez zespół Santander Bank Polska SA. pokazały, że po przyspieszeniu portalu konwersja na wybranych stronach stale wzrosła aż o ok. 10%.

 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.