Nikkei to jedna z najbardziej opiniotwórczych firm medialnych w Japonii, która działa na rynku wydawniczym od ponad 140 lat. Oprócz gazety w wersji drukowanej mają ponad 450 milionów wizyt miesięcznie w swoich zasobach cyfrowych. Aby zapewnić lepsze wrażenia użytkownikom i przyspieszyć rozwój firmy w internecie, w listopadzie 2017 r. firma Nikkei wprowadziła progresywną aplikację internetową (PWA) – https://r.nikkei.com. Dzięki nowej platformie osiągają teraz niesamowite wyniki.
Wzrost wydajności - 2-krotnie lepszy indeks szybkości - 14 sekund krótszy czas do interaktywności - 75% szybsze wczytywanie dzięki wstępnemu pobieraniu
Wpływ na firmę - 2,3-krotny wzrost ruchu bezpłatnego - 58% więcej konwersji (subskrypcji) - 49% więcej aktywnych użytkowników dziennie - 2-krotny wzrost liczby wyświetleń stron na sesję
Pobierz studium przypadku w formacie PDF
Informacje o firmie
Wyzwanie
Gdy smartfony stały się dla wielu użytkowników głównym sposobem dostępu do internetu, firma Nikkei odnotowała gwałtowny wzrost ruchu mobilnego w swojej starszej witrynie. Jednak dzięki Lighthouse, narzędziu do audytu, które skanuje stronę internetową i podaje zalecenia dotyczące ulepszeń w różnych kategoriach, dowiedzieli się, że ich witryna nie jest w pełni zoptymalizowana pod kątem urządzeń mobilnych w wielu obszarach i bardzo wolno się wczytuje.
Ich witryna potrzebowała około 20 sekund, aby stać się w pełni interaktywna, a średni indeks szybkości wynosił 10 sekund. Firma Nikkei wiedziała, że 53% użytkowników mobilnych opuszcza stronę, jeśli wczytuje się ona dłużej niż 3 sekundy. Dlatego chciała skrócić czas wczytywania, aby zapewnić lepsze wrażenia i przyspieszyć rozwój swojej działalności w internecie.
Szybkość jest bezdyskusyjnie ważna, zwłaszcza w przypadku wiadomości finansowych. Szybkość stała się jednym z naszych podstawowych wskaźników, a klienci docenili tę zmianę.
Taihei Shigemori, menedżer ds. strategii cyfrowej
Wyniki
Nikkei osiągnął imponujące wzrosty wydajności. Wynik w Lighthouse wzrósł z 23 do 82. Czas do interaktywności skrócił się o 14 sekund. Wzrosły też ruch z wyszukiwarki, szybkość, współczynnik konwersji i liczba aktywnych użytkowników dziennie.
Jest to aplikacja wielostronicowa (MPA), która zmniejsza złożoność interfejsu użytkownika i jest zbudowana w czystym JavaScript. Pięciu głównych inżynierów front-endu pracowało nad tym przez rok.
Inżynierowie interfejsu Nikkei udowodnili, że świetna jakość obsługi klienta przekłada się na dobre wyniki biznesowe. Zależy nam na dalszym podnoszeniu jakości internetu.
Hiroyuki Higashi. Product Manager, Nikkei
Rozwiązanie
Firma Nikkei stworzyła i wdrożyła progresywną aplikację internetową, która wykorzystuje elastyczny projekt, czysty JavaScript i architekturę wielostronicową. Skupiła się na zapewnieniu użytkownikom jak największej wygody. Dzięki dodaniu skryptu service worker udało im się zapewnić przewidywalną wydajność niezależnie od sieci. Dzięki temu najpopularniejsze artykuły są zawsze dostępne i wczytywane niemal natychmiast, ponieważ są przechowywane w pamięci podręcznej. Dodali plik manifestu aplikacji internetowej, który wraz ze skryptem service worker umożliwia użytkownikom zainstalowanie progresywnej aplikacji internetowej, dzięki czemu jest ona łatwo dostępna. Aby mieć pełną kontrolę nad skutecznością, zoptymalizowali skrypt JavaScript innej firmy.
Sprawdzone metody
- Zwiększ szybkość ładowania i interaktywność, korzystając z nowoczesnych interfejsów API, kompresji i optymalizacji kodu.
- Stopniowo ulepszaj UX, dodając funkcje PWA, takie jak obsługa offline i dodawanie do ekranu głównego.
- Włącz budżety skuteczności do strategii skuteczności.
Szczegóły techniczne
Szybkość ma znaczenie
Szybkość jest teraz ważniejsza niż kiedykolwiek wcześniej. Gdy smartfony stały się dla wielu użytkowników głównym urządzeniem do przeglądania internetu, firma Nikkei odnotowała gwałtowny wzrost ruchu mobilnego w swojej usłudze. Dzięki Lighthouse odkryli, że ich starsza witryna nie jest w pełni zoptymalizowana pod kątem urządzeń mobilnych. Średni indeks szybkości wynosił 10 sekund, początkowe wczytywanie było bardzo powolne, a pakiet JavaScript – duży. Nadszedł czas, aby Nikkei przebudował swoją witrynę i dostosował ją do sprawdzonych metod zwiększania wydajności w internecie. Oto wyniki i kluczowe optymalizacje wydajności w nowej progresywnej aplikacji internetowej.
Wykorzystywanie interfejsów API i sprawdzonych metod w celu przyspieszenia ładowania
Wstępne wczytywanie żądań kluczy
Ważne jest, aby priorytetowo traktować ładowanie krytycznej ścieżki. Dzięki funkcji HTTP/2 Server Push mogą one nadawać priorytet kluczowym pakietom JavaScript i CSS, które użytkownik będzie potrzebować.
Unikaj wielokrotnych, kosztownych podróży w obie strony do dowolnego miejsca początkowego.
Witryna musiała wczytywać zasoby innych firm na potrzeby śledzenia, reklam i wielu innych zastosowań. Używali oni
<link rel=preconnect>
do wstępnego rozpoznawania uzgadniania połączenia DNS/TCP/SSL i negocjowania połączenia z tymi kluczowymi źródłami zewnętrznymi.
Dynamiczne wstępne pobieranie następnej strony
Gdy mieli pewność, że użytkownik przejdzie na określoną stronę, nie czekali, aż to nastąpi. Nikkei dynamicznie dodaje <link rel=prefetch> do <head> i pobiera z wyprzedzeniem następną stronę, zanim użytkownik kliknie link. Umożliwia to natychmiastowe przechodzenie między stronami.
Wbudowany CSS ścieżki krytycznej
Ograniczenie blokującego renderowanie kodu CSS to jedna ze sprawdzonych metod przyspieszania wczytywania. Witryna umieszcza w kodzie wszystkie krytyczne style CSS, a arkusze stylów blokujące renderowanie nie występują. Dzięki tej optymalizacji czas pierwszego wyrenderowania elementu znaczącego skrócił się o ponad sekundę.
Optymalizowanie pakietów JavaScript
W poprzedniej wersji pakiety JavaScript firmy Nikkei były przeładowane i ważyły łącznie ponad 300 KB. Dzięki przepisaniu kodu na czysty JavaScript i nowoczesnym optymalizacjom pakowania, takim jak dzielenie na fragmenty na podstawie trasy i usuwanie nieużywanego kodu, udało się zmniejszyć ten nadmiar. Dzięki RollUp zmniejszyli rozmiar pakietu JavaScript o 80% do 60 KB.
Inne wdrożone sprawdzone metody
- Kompresja: kompresja wszystkich zasobów za pomocą gzip/Brotli przy użyciu sieci CDN Fastly.
- Buforowanie: włącz buforowanie HTTP, buforowanie po stronie krawędzi.
- Optymalizacja obrazów: używaj imgix do optymalizacji i wykrywania formatu obrazu.
- Leniwe ładowanie niekrytycznych zasobów: używaj interfejsu Intersection Observer API do ładowania fragmentów widocznych po przewinięciu.
- Opracuj strategię wczytywania czcionek internetowych: priorytetowo traktuj używanie czcionki systemowej.
- Optymalizacja pierwszego wyrenderowania elementu znaczącego: renderowanie treści po stronie serwera
- Wprowadź budżety wydajności: utrzymuj niski czas przesyłania i parsowania/kompilowania kodu JavaScript.
Optymalizacja JavaScriptu pochodzącego od firm zewnętrznych
Optymalizacja skryptów JavaScript innych firm nie jest tak prosta jak optymalizacja własnych skryptów, ale firmie Nikkei udało się zminimalizować i zgrupować wszystkie skrypty związane z reklamami, które są teraz wyświetlane z jej własnej sieci dostarczania treści (CDN). Tagi związane z reklamami zwykle zawierają fragment kodu, który inicjuje i wczytuje inne wymagane skrypty. Często blokują one renderowanie strony i wymagają dodatkowego czasu oczekiwania na odpowiedź sieci w przypadku każdego pobranego skryptu. Firma Nikkei zastosowała poniższe podejście i skróciła czas inicjowania o 100 ms, a rozmiar kodu JS zmniejszyła o 30%:
- Połącz wszystkie wymagane skrypty za pomocą narzędzia do łączenia plików JS (np. Webpack)
- Asynchroniczne wczytywanie skryptu pakietu, aby nie blokował renderowania strony
- Dołączanie obliczonego banera reklamowego do modelu Shadow DOM (zamiast do elementu iframe)
- Stopniowe wczytywanie reklam podczas przewijania strony przez użytkownika za pomocą interfejsu Intersection Observer API
Stopniowe ulepszanie witryny
Oprócz tych podstawowych optymalizacji firma Nikkei wykorzystała plik manifestu aplikacji internetowej i skrypty service worker, aby jej strona internetowa była instalowalna i działała nawet w trybie offline. Dzięki zastosowaniu w usłudze Service Worker strategii cache-first wszystkie podstawowe zasoby i najpopularniejsze artykuły są przechowywane w pamięci podręcznej i wykorzystywane ponownie nawet w sytuacjach awaryjnych, takich jak niestabilna lub niedostępna sieć. Zapewnia to spójną i zoptymalizowaną wydajność.
Hack the Nikkei
Tradycyjna firma wydająca dziennik z ponad 140-letnią historią skutecznie przyspieszyła cyfryzację dzięki wykorzystaniu internetu i PWA. Inżynierowie front-endu z Nikkei udowodnili, że świetny UX przekłada się na dobre wyniki biznesowe. Firma będzie kontynuować swoją misję, czyli podnoszenie jakości internetu.