Dzięki ponad 140-letniej historii publikowania Nikkei należy do najbardziej wiarygodnych firm medialnych w Japonii. Oprócz drukowanych gazet odnotowują one też ponad 450 milionów wizyt w witrynach cyfrowych miesięcznie. Aby zapewnić użytkownikom lepsze wrażenia i przyspieszyć działalność w internecie, w listopadzie 2017 roku firma Nikkei wprowadziła progresywną aplikację internetową (PWA) – https://r.nikkei.com. Teraz dzięki nowej platformie dostrzegają one niesamowite wyniki.
Wzrost wydajności – 2 razy lepszy indeks szybkości – 14 sekund szybszego czasu do pełnej interaktywności – O 75% szybsze wczytywanie z wyprzedzeniem
Wpływ na firmę – 2,3 raza więcej ruchu bezpłatnego – 58% więcej konwersji (subskrypcji) – o 49% więcej aktywnych użytkowników dziennie – 2 razy więcej wyświetleń stron na sesję
Pobierz studium przypadku w formacie PDF
Informacje o firmie
Wyzwanie
Firma Nikkei odnotowała gwałtowny wzrost liczby wizyt w starszej wersji witryny z urządzeń mobilnych, ponieważ smartfony stały się głównym punktem dostępu do internetu dla wielu użytkowników. Jednak korzystanie z Lighthouse – narzędzia kontrolnego, które skanuje stronę internetową i wyświetla rekomendacje dotyczące jej ulepszania w wielu kategoriach, zapewnia, że jej witryna nie jest w pełni zoptymalizowana pod kątem urządzeń mobilnych na wielu obszarach i bardzo wolno się wczytuje.
Ciągła interaktywność strony trwała około 20 sekund, a na indeksie prędkości średnio 10 sekund. Wiedząc, że 53% użytkowników urządzeń mobilnych porzuci stronę, jeśli wczytuje się ona dłużej niż 3 sekundy, firma Nikkei chciała skrócić czas jej wczytywania, aby zapewnić sobie większy komfort i przyspieszyć swoją działalność w internecie.
Szybkość jest niewątpliwa, zwłaszcza w przypadku wiadomości finansowych. Szybkość to jeden z naszych podstawowych wskaźników, a nasi klienci docenią tę zmianę.
Taihei Shigemori, menedżerka ds. strategii cyfrowej
Wyniki
Firma Nikkei osiągnęła imponujący wzrost skuteczności. Ocena ich latarni morskiej wzrosła z 23 do 82. Ich czas do interakcji poprawił się o 14 sekund. Wzrosły również ruch bezpłatny, szybkość, współczynnik konwersji i liczba aktywnych użytkowników dziennie.
Jest to aplikacja wielostronicowa (MPA), która zmniejsza złożoność interfejsu i jest oparta na języku Vanilla JavaScript. Pięcioro inżynierów interfejsu pracował nad osiągnięciem takiej wydajności przez rok.
Inżynierowie interfejsu Nikkei udowodnili, że świetny interfejs użytkownika przekłada się na lepsze wyniki biznesowe. Angażujemy się w dalszą pracę nad wprowadzaniem w internecie nowego poziomu jakości.
Hiroyuki Higashi, menedżer produktu, Nikkei
Rozwiązanie
Firma Nikkei opracowała i wprowadziła progresywną aplikację internetową, korzystając z projektowania responsywnego, waniliowego JavaScriptu oraz architektury wielostronicowej. Skupiła się na zapewnianiu użytkownikom doskonałych wrażeń. Dodanie skryptu service worker pozwala uzyskać przewidywalną wydajność niezależnie od sieci. Dzięki temu najważniejsze artykuły są zawsze dostępne i wczytywane niemal natychmiast, ponieważ są przechowywane z wykorzystaniem pamięci podręcznej. Dodano plik manifestu aplikacji internetowej, który w połączeniu z skryptem service worker pozwala użytkownikom zainstalować PWA, dzięki czemu jest on łatwo dostępny. Aby mieć pewność, że ich wydajność ma pełną kontrolę, firma zoptymalizowała kod JavaScript firmy zewnętrznej.
Sprawdzone metody
- Popraw szybkość ładowania i interaktywność dzięki wykorzystaniu nowoczesnych interfejsów API w internecie oraz metod kompresji i optymalizacji kodu.
- Stopniowo ulepszaj wrażenia użytkowników, dodając funkcje PWA takie jak obsługa offline i dodawanie do ekranu głównego.
- Wbudowanie budżetów skuteczności w strategię skuteczności.
Szczegóły techniczne
Szybkość ma znaczenie
Szybkość jest ważniejsza niż kiedykolwiek. Gdy smartfony stały się głównym urządzeniem do przeglądania internetu, firma Nikkei odnotowała gwałtowny wzrost ruchu mobilnego w swojej usłudze. Jednak dzięki Lighthouse zauważyli, że starsza witryna nie jest w pełni zoptymalizowana pod kątem urządzeń mobilnych – wskaźnik szybkości trwa średnio 10 sekund, bardzo wolne wstępne wczytywanie i duży pakiet JavaScriptu. Nadszedł czas, aby firma Nikkei przebudowała witrynę i zastosowała sprawdzone metody zwiększania wydajności witryny. Oto wyniki i najważniejsze sposoby optymalizacji wydajności w nowej aplikacji PWA.
Wykorzystanie interfejsów API internetowych i sprawdzonych metod do przyspieszenia wczytywania
Wstępnie wczytuj żądania klucza
Ważne jest, aby traktować priorytetowo wczytywanie ścieżki krytycznej. Dzięki zastosowaniu HTTP/2 serwera push mogą one traktować priorytetowo kluczowe pakiety JavaScript i CSS, których będą potrzebować w przypadku użytkownika.
Unikaj wielokrotnych, kosztownych podróży w obie strony do dowolnego miejsca wylotu
Witryna musiała wczytywać zewnętrzne zasoby do śledzenia, reklam i wielu innych zastosowań. Wykorzystał on <link rel=preconnect> do wstępnego uzgadniania połączenia DNS/TCP/SSL i negocjowania procesu negocjowania dla tych kluczy zewnętrznych źródeł.
Dynamiczne pobieranie następnej strony z wyprzedzeniem
Gdy miał pewność, że użytkownik przejdzie na określoną stronę, nie czekał tylko na tę nawigację. Nikkei dynamicznie dodaje element <link rel=prefetch> do elementu <head> i pobiera z wyprzedzeniem następną stronę, zanim użytkownik faktycznie kliknie link. Umożliwia to błyskawiczną nawigację po stronie.
Wbudowany CSS ścieżki krytycznej
Ograniczenie renderowania kodu CSS blokującego renderowanie to jedna ze sprawdzonych metod przyspieszających wczytywanie treści. Strona wbudowana jest w najważniejsze elementy CSS za pomocą arkuszy stylów blokujących renderowanie bez użycia kodu. Ta optymalizacja skróciła pierwsze znaczące wyrenderowanie o ponad 1 sekundę.
Optymalizuj pakiety JavaScript
W poprzedniej wersji pakiety JavaScript Nikkei były zbyt duże i ważyły łącznie ponad 300 KB. Dzięki przerobieniu kodu vanilla JavaScript i nowoczesnym optymalizacjom pakietów, np. fragmentacji opartym na trasach czy potrząsaniu drzew, firmie udało się usunąć te elementy. W ramach rozwiązania o pełnym zakresie rozmiar pakietu JavaScript został zmniejszony o 80% i zmniejszony do 60 KB.
Inne sprawdzone metody
- Kompresja: Gzip/Brotli wszystkie skompresowane zasoby za pomocą Fastly CDN
- Pamięć podręczna: włącz buforowanie HTTP, buforowanie wewnętrzne
- Optymalizacja obrazu: do optymalizacji i wykrywania formatu obrazu używaj imgix.
- Leniwe ładowanie zasobów niekrytycznych: aby wczytywać fragmenty w części strony widocznej po przewinięciu, użyj interfejsu Intersection Observer API.
- Stosuj strategię ładowania czcionek internetowych: nadawaj priorytet korzystaniu z czcionki systemowej
- Optymalizuj pierwsze wyrenderowanie: renderuj treści po stronie serwera treści.
- Stosuj budżety wydajności: utrzymuj krótki czas transmisji oraz analizy i kompilacji JavaScriptu.
Optymalizacja kodu JavaScript innych firm
Chociaż optymalizacja zewnętrznych skryptów JavaScript w porównaniu z własnymi skryptami nie jest tak łatwa, Nikkei udało się zminifikować i połączyć wszystkie skrypty związane z reklamami, które są teraz wyświetlane z własnej sieci dystrybucji treści (CDN). Tagi związane z reklamami zawierają zwykle fragment kodu służący do uruchamiania i wczytywania innych wymaganych skryptów, które często blokują renderowanie strony. Poza tym wymagają one dodatkowego czasu przetwarzania przez sieć w przypadku każdego z pobranych skryptów. Dzięki zastosowaniu następującego podejścia firma Nikkei przyspieszyła inicjowanie o 100 ms i zmniejszyła rozmiar pliku JS o 30%:
- Połącz wszystkie wymagane skrypty za pomocą pakietu SDK JS (np. pakiet internetowy)
- Wczytuje się skrypt asynchronicznie w taki sposób, aby nie blokował renderowania strony
- Dołącz obliczony baner reklamowy do modelu Shadow DOM (w porównaniu z elementem iframe)
- Stopniowe ładowanie reklam podczas przewijania strony przez użytkownika za pomocą interfejsu Intersection Observer API
Stopniowe ulepszanie strony internetowej
Oprócz tych podstawowych optymalizacji firma Nikkei wykorzystała plik manifestu aplikacji internetowych i pracowników usługowych, aby umożliwić zainstalowanie witryny i działanie w trybie offline. Dzięki zastosowaniu strategii priorytetowej na podstawie pamięci podręcznej w skrypcie service worker wszystkie podstawowe zasoby i najważniejsze artykuły są przechowywane w pamięci podręcznej i można ich używać nawet w sytuacjach awaryjnych, takich jak niestabilne działanie sieci lub offline, co zapewnia spójną, zoptymalizowaną wydajność.
Zhakuj Nikkei
Działająca od ponad 140 lat tradycyjna agencja prasy codziennej skutecznie przyspieszyła digitalizację dzięki potędze internetu i PWA. Inżynierowie interfejsu Nikkei udowodnili, że świetny interfejs użytkownika przekłada się na lepsze wyniki biznesowe. Firma będzie nadal wprowadzać w internecie nowy poziom jakości.