Firma Nikkei ma ponad 140-letnią historię wydawniczą i jest jedną z najbardziej autorytatywnych firm medialnych w Japonii. Oprócz wersji drukowanej gazety, ich zasoby cyfrowe mają ponad 450 milionów wyświetleń miesięcznie. Aby zapewnić lepsze wrażenia użytkownika i przyspieszyć rozwój firmy w internecie, w listopadzie 2017 r. Nikkei wprowadziła progresywną aplikację internetową (PWA) – https://r.nikkei.com. Obecnie uzyskują dzięki niej znakomite wyniki.
Wzrost wydajności: - 2 razy lepszy wskaźnik szybkości - skrócenie o 14 sekund czasu do interakcji - wczytywanie o 75% szybsze dzięki wstępnemu pobieraniu
Wpływ na działalność firmy: – ruch bezpłatny zwiększony 2,3 raza – o 58% więcej konwersji (subskrypcje) – o 49% więcej aktywnych użytkowników dziennie – liczba wyświetleń stron na sesję zwiększona 2 razy
Pobierz studium przypadku w formacie PDF
Informacje o firmie
Wyzwanie
Firma Nikkei zaobserwowała gwałtowny wzrost ruchu mobilnego na swojej starszej stronie internetowej, ponieważ smartfony stały się głównym punktem dostępu do internetu dla wielu użytkowników. Jednakże za pomocą Lighthouse, narzędzia kontrolnego, które skanuje stronę internetową i podpowiada, jak ulepszyć strony w różnych kategoriach, firma zauważyła, że witryna nie jest w pełni zoptymalizowana pod kątem urządzeń mobilnych w wielu obszarach i wczytuje się bardzo wolno.
Nawigacja po stronie zajmowała około 20 sekund, a średni czas wczytywania wynosił 10 sekund według wskaźnika szybkości. Firma Nikkei wiedziała, że 53% użytkowników mobilnych porzuca witrynę, jeśli wczytywanie trwa dłużej niż 3 sekundy. Dlatego chciała skrócić czas wczytywania, aby zapewnić lepsze wrażenia i przyspieszyć działanie witryny.
Szybkość jest bezcenna, zwłaszcza w przypadku wiadomości finansowych. Szybkość jest jednym z naszych podstawowych wskaźników i klienci doceniają tę zmianę.
Taihei Shigemori, menedżer ds. strategii cyfrowej
Wyniki
Nikkei osiągnął imponujący wzrost wydajności. Jego wynik Lighthouse wzrósł z 23 do 82. Czas do interakcji skrócił się o 14 sekund. Również ruch organiczny, szybkość, współczynnik konwersji i liczba aktywnych użytkowników dziennie wzrosły.
PWA to wielostronicowa aplikacja (MPA), która zmniejsza złożoność interfejsu użytkownika. Jest ona napisana w czystym JavaScript. Pięć kluczowych inżynierów front-endowych pracowało przez rok, aby osiągnąć taką wydajność.
Inżynierowie front-endowi Nikkei udowodnili, że świetny UX przekłada się na dobre wyniki biznesowe. Jesteśmy w pełni zaangażowani w dalsze ulepszanie jakości usług internetowych.
Hiroyuki Higashi. Product Manager, Nikkei
Rozwiązanie
Nikkei stworzyła i wprowadziła progresywną aplikację internetową, wykorzystując elastyczne projektowanie, waniliowy JavaScript i architekturę wielostronicową. Skupiała się na dostarczaniu użytkownikom doskonałych wrażeń. 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 instalację PWA, dzięki czemu jest ona łatwo dostępna. Aby mieć pewność, że w pełni kontrolować wydajność, firma zoptymalizowała zewnętrzny JavaScript.
Sprawdzone metody
- Zwiększ szybkość wczytywania i interaktywność, korzystając z nowoczesnych interfejsów API, kompresji i optymalizacji kodu.
- Stopniowo zwiększaj wygodę użytkowania, dodając funkcje PWA, takie jak obsługa offline i Dodaj do ekranu głównego.
- Uwzględnij budżety skuteczności w strategii skuteczności.
Szczegóły techniczne
Szybkość ma znaczenie
Szybkość jest teraz ważniejsza niż kiedykolwiek. Gdy wielu użytkowników korzysta ze smartfonów, serwis Nikkei zaobserwował gwałtowny wzrost ruchu mobilnego. Jednak dzięki użyciu narzędzia Lighthouse firma ta odkryła, że jej starsza witryna nie została w pełni zoptymalizowana pod kątem urządzeń mobilnych. Wskaźnik szybkości Lighthouse wynosił średnio 10 sekund, a wczytywanie witryny było bardzo powolne i zawierała ona duży pakiet JavaScript. Nadszedł czas, aby Nikkei ponownie utworzyć witrynę i zastosować sprawdzone metody zwiększania wydajności witryn internetowych. Oto wyniki i kluczowe optymalizacje wydajności w nowej aplikacji PWA.
Korzystanie z interfejsów API i sprawdzonych metod, aby przyspieszyć wczytywanie
Wstępne wczytywanie żądań kluczy
Wczytywanie ścieżki krytycznej jest ważne. Dzięki funkcji HTTP/2 Server Push mogą nadawać priorytet pakietom JavaScript i CSS, których użytkownik będzie potrzebować.
Unikaj wielu, kosztownych lotów w obie strony do dowolnego punktu początkowego
Witryna musiała wczytywać zasoby innych firm na potrzeby śledzenia, reklam i wielu innych zastosowań. Za pomocą <link rel=preconnect> można było wstępnie rozwiązać uzgadnianie połączenia DNS/TCP/SSL i negocjowanie tych kluczy zewnętrznych.
Dynamicznie pobieraj z wyprzedzeniem następną stronę
Gdy byli pewni, że użytkownik przejdzie na określoną stronę, nie czekali, aż nastąpi przekierowanie. Nikkei dynamicznie dodaje <link rel=prefetch> do <head> i pobiera z wyprzedzeniem następną stronę, zanim użytkownik kliknie link. Umożliwia to natychmiastową nawigację po stronie.
Wbudowany kod CSS ścieżki krytycznej
Zmniejszanie kodu CSS blokującego renderowanie to jedna ze sprawdzonych metod szybkiego wczytywania. W witrynie znajdują się wszystkie najważniejsze elementy CSS i zawiera ona 0 arkuszy stylów blokujących renderowanie. Ta optymalizacja skróciła pierwsze istotne wyrenderowanie o ponad 1 sekundę.
Optymalizowanie pakietów JavaScript
Jak do tej pory, pakiety JavaScript firmy Nikkei były rozrosłe i ważyły łącznie ponad 300 KB. Dzięki przeredagowaniu kodu do standardowego JavaScriptu i zastosowanie nowoczesnych optymalizacji z użyciem pakietów, takich jak dzielenie na części na podstawie ścieżek i usuwanie niepotrzebnych elementów drzewa, udało im się ograniczyć rozrost kodu. Zespół ten zmniejszył rozmiar pakietu JavaScript o 80%, redukując go do 60 KB dzięki funkcji RollUp.
Wdrożone inne sprawdzone metody
- Kompresja: wszystkie kompresowane zasoby Gzip/Brotli korzystające z Fastly CDN
- Pamięć podręczna: włączanie pamięci podręcznej HTTP i pamięci podręcznej po stronie urządzenia końcowego.
- Optymalizacja obrazu: użyj imgix do optymalizacji i wykrywania formatu obrazu.
- Leniwe wczytywanie niekrytycznych zasobów: użyj interfejsu API IntersectionObserver do wczytywania fragmentów widocznych po przewinięciu.
- Opracuj strategię ładowania czcionek internetowych: skoncentruj się na używaniu czcionki systemowej.
- Optymalizacja pierwszego wyrenderowania treści: treści renderuj po stronie serwera.
- Stosuj budżety wydajności: utrzymuj krótki czas przesyłania i analizowania/kompilowania kodu JavaScript.
Optymalizacja kodu JavaScriptu zewnętrznego
Zoptymalizowanie kodu JavaScript należącego do innych firm jest trudniejsze niż własne skrypty, ale Nikkei udało się zminimalizować i związać wszystkie skrypty związane z reklamami, które są teraz wyświetlane z własnej sieci dostarczania treści (CDN). Tagi związane z reklamami zwykle zawierają fragment kodu służący do inicjowania i ładowania innych wymaganych skryptów, które często blokują renderowanie strony i wymagają dodatkowego czasu przetwarzania przez sieć dla każdego pobranego skryptu. Firma Nikkei zastosowała następujące podejście i poprawiła czas inicjalizacji o 100 ms oraz zmniejszyła rozmiar kodu JS o 30%:
- Utwórz pakiet wszystkich wymaganych skryptów za pomocą narzędzia do tworzenia pakietów JS (np. Webpack)
- Ładuj pakietowy skrypt asynchronicznie, aby nie blokował renderowania strony.
- Dołączanie obliczonych banerów reklamowych do Shadow DOM (zamiast do iframe)
- Ładowanie reklam stopniowo podczas przewijania 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 oraz skrypty service worker, aby zapewnić możliwość instalacji witryny, a nawet działania offline. Dzięki strategii cache-first w usługach workerów wszystkie podstawowe zasoby i najpopularniejsze artykuły są przechowywane w miejscu na dane w pamięci podręcznej i używane ponownie nawet w nieoczekiwanych sytuacjach, takich jak niestabilna sieć lub sieć offline, co zapewnia spójną i zoptymalizowaną wydajność.
Hack the Nikkei
Ta tradycyjna firma zajmująca się wydawaniem codziennych gazet, która istnieje od ponad 140 lat, przyspieszyła cyfryzację dzięki możliwościom internetu i aplikacji internetowych. Inżynierowie front-endowi Nikkei udowodnili, że świetny UX przekłada się na dobre wyniki biznesowe. Firma będzie nadal dążyć do zapewnienia najwyższej jakości w internecie.