Strona korporacyjna na Umbraco zoptymalizowana dla 6-krotnie szybszego ładowania 

Profil klienta 

Klient, The Instant Group, to globalna agencja nieruchomości, która od 1999 roku rewolucjonizuje rynek wynajmu powierzchni biurowych. Oprócz posiadania opartej na Sitecore platformy cyfrowej do wyszukiwania i wynajmu powierzchni biurowych online, klient posiada również inne rozwiązanie – korporacyjny portal informacyjny na Umbraco, open-source’owym ASP.NET Core CMS.  

Wyzwanie 

Klient nie był zadowolony z wydajności swojego portalu informacyjnego opartego na Umbraco. Czas ładowania strony wynosił 5,5 sekundy, a witryna, choć responsywna, zawierała błędy podczas przeglądania na urządzeniach mobilnych. Co więcej, użytkownicy różnych przeglądarek wciąż z niej korzystali ze względu na problemy z kompatybilnością między przeglądarkami i brak obsługi wielu języków.  

Rozwiązanie 

Ponieważ zespół SaM Solutions wykazał się już wysokimi kompetencjami w innym projekcie z The Instant Group – modernizacji i utrzymaniu The Instant Group Real-Estate Marketplace, klient zdecydował się powierzyć nam swój korporacyjny portal informacyjny oparty na Umbraco. Zespół składał się z dwóch programistów back-end, dwóch programistów front-end i inżyniera QA, pracujących nad projektem w ramach Agile z wydaniami co cztery do sześciu miesięcy.  

Refaktoryzacja i migracja do React 

Zespół rozpoczął projekt od analizy kodu i architektury strony internetowej. Po odkryciu ciężkiego podejścia do kodowania opartego na wolno działających, przestarzałych technologiach, zespół postanowił przeprowadzić pełną refaktoryzację rozwiązania. Po przeprojektowaniu i optymalizacji back-endu Umbraco, nasz zespół przeniósł również interfejs użytkownika ze starszego jQuery do nowoczesnego rozwiązania opartego na React i był w stanie zachować podstawową logikę biznesową. Nasi eksperci zdecydowali się wykorzystać renderowanie po stronie serwera za pomocą React, WebPack i TypeScript. 

Optymalizacja UI 

Zgodnie z życzeniem klienta, SaM Solutions dodał również projektanta UI/UX do zespołu projektowego i ukończył pełny redesign strony internetowej. W trakcie przeprojektowywania nasi specjaliści przeprowadzili audyt struktury treści, który ujawnił, że renderowanie dużych plików graficznych przeciążało witrynę i znacznie ją spowalniało. Zespół SaM Solutions nie tylko przeprowadził automatyczną konwersję wszystkich istniejących obrazów do formatu WebP, minimalizując ich rozmiar, ale także stworzył i zainstalował niestandardową wtyczkę do przesyłania obrazów. 

Migracja do Umbraco 8 i optymalizacja back-endu 

Początkowo witryna klienta posiadała angielską wersję w USA i Wielkiej Brytanii z dwoma niemal identycznymi drzewami treści. Klient wyraził zamiar wprowadzenia większej liczby wersji językowych, ale z Umbraco 7 jako rdzeniem jego strony internetowej, wsparcie dla wielu języków było ograniczone. Aby rozwiązać ten problem, SaM Solutions przeprowadził migrację witryny do Umbraco 8 – wersji Umbraco, która obsługuje różne wersje językowe. Podczas procesu migracji nasz zespół dokonał migracji treści i zoptymalizował strukturę drzewa treści, aby uniknąć kopii, zaktualizował niezbędną logikę kodu, a także skonfigurował wszystkie krytyczne przekierowania. 

Continuous Development 

W ramach ciągłego rozwoju swojej strony internetowej, klient regularnie prosił o rozwój i wdrażanie nowych funkcjonalności. Przez lata współpracy nasi eksperci zrealizowali następujące zadania 

• Opracowanie nowych szablonów stron i komponentów stron. 
• Wdrożenie nowego mechanizmu wyszukiwania na stronie internetowej. 
• Integracja z systemem Salesforce klienta. 
• Opracowanie modułu analityki marketingowej dla wszystkich typów formularzy. 

Technologie 

Umbraco 7, Umbraco 8, Courier, uSync, React, Webpack, TypeScript, jQuery, JavaScript, JSON, ASP.NET MVC, Node.js. 

Sukces 

Dzięki kompleksowemu podejściu do optymalizacji i rozwoju rozwiązań, zespół SaM Solutions do tej pory 

• Skrócił czas ładowania strony z 5,5 sekundy do zaledwie 0,9 sekundy. 
• Naprawiono wszystkie problemy z kompatybilnością przeglądarki i widokiem mobilnym, a także zmodernizowano projekt, aby wydłużyć czas sesji odwiedzających. 
• Pomogliśmy wprowadzić cztery nowe wersje językowe strony. 

Klient nadal polega na pomocy SaM Solutions w dalszym rozwoju swojej strony internetowej.