Nikkei는 다중 페이지 PWA를 통해 새로운 차원의 품질과 성능을 달성했습니다.

140년 이상의 출판 역사를 자랑하는 Nikkei는 일본에서 가장 권위 있는 미디어 비즈니스 중 하나입니다. 인쇄 신문과 함께 월 4억 5천만 명 이상의 디지털 부동산 방문수를 기록하고 있습니다. Nikkei는 더 나은 사용자 환경을 제공하고 웹에서 비즈니스를 가속화하기 위해 2017년 11월에 프로그레시브 웹 앱 (PWA)인 https://r.nikkei.com을 출시했습니다. 이제 이들은 새로운 플랫폼에서 놀라운 성과를 얻고 있습니다.

성능 향상 - 속도 색인 2배 향상 - 상호작용까지 14초 단축 - 미리 가져오기를 통한 로드 75% 향상

비즈니스 영향 - 자연 트래픽 2.3배 증가 - 전환수 58% 증가 (구독) - 일일 활성 사용자 49% 증가 - 세션당 페이지 조회수 2배 증가

PDF 우수사례 다운로드

비즈니스 개요

당면 과제

Nikkei는 스마트폰이 많은 사용자가 웹을 이용하는 주요 지점이 되면서 기존 웹사이트로 유입되는 모바일 트래픽이 급격히 증가한 것을 확인했습니다. 그러나 웹페이지를 스캔하여 여러 카테고리에 걸쳐 개선 방법을 추천하는 감사 도구인 Lighthouse를 사용하자 사이트가 여러 영역에서 모바일에 완전히 최적화되지 않고 로드 속도가 매우 느렸습니다.

웹사이트가 지속적으로 상호작용하는 데 약 20초가 걸렸으며 속도 색인에서는 평균 10초가 걸렸습니다. 로드 시간이 3초를 넘으면 모바일 사용자의 53% 가 이 경험을 포기하게 된다는 점을 인지한 Nikkei는 로드 시간을 줄여 더 나은 경험을 제공하고 웹에서 비즈니스를 가속화하고자 했습니다.

특히 금융 뉴스에서 속도의 가치는 의심할 여지가 없습니다. 속도를 핵심 측정항목 중 하나로 만들었고 고객들은 그 변화를 높이 평가했습니다.

타이헤이 시게모리, 디지털 전략 관리자

결과

이전 사이트에서 2018년 4월에 감사 실행
감사는 2018년 4월 mw.nikkei.com에서 호스팅되는 이전 사이트에서 실행됨

Nikkei는 놀라운 실적을 거두었습니다. Lighthouse 점수는 23점에서 82점으로 급증했습니다. 상호작용까지의 시간 측정도 14초 단축되었습니다. 자연 트래픽, 속도, 전환율, 일일 활성 사용자 수도 모두 증가했습니다.

PWA는 Vanilla 자바스크립트로 빌드된 프런트엔드 복잡성을 줄이는 다중 페이지 앱 (MPA)을 제공합니다. 5명의 핵심 프런트엔드 엔지니어가 1년 동안 이러한 성능을 달성하기 위해 노력했습니다.

Nikkei 프런트엔드 엔지니어는 훌륭한 UX가 우수한 비즈니스 성과를 가져온다는 것을 입증했습니다. Google은 웹에 새로운 차원의 품질을 제공하기 위한 여정을 계속하기 위해 최선을 다하고 있습니다.

히가시 히로유키 Nikkei 제품 관리자

해결 방법

Nikkei는 즐거운 사용자 환경을 만드는 데 중점을 두고 반응형 디자인, 바닐라 자바스크립트, 다중 페이지 아키텍처를 사용하여 프로그레시브 웹 앱을 만들고 출시했습니다. 서비스 워커를 추가하여 네트워크에 관계없이 예측 가능한 성능을 제공할 수 있었습니다. 또한 상위 기사는 Cache Storage를 사용하여 저장되므로 항상 사용 가능하고 거의 즉시 로드됩니다. 웹 앱 매니페스트를 추가했고, 서비스 워커와 함께 이를 통해 사용자가 PWA를 설치할 수 있도록 했습니다. 따라서 PWA에 쉽게 액세스할 수 있습니다. 또한 성능을 전적으로 제어할 수 있도록 서드 파티 자바스크립트를 최적화했습니다.

권장사항

  • 최신 웹 API, 압축, 코드 최적화 사례를 사용하여 로드 속도와 상호작용을 개선합니다.
  • 오프라인 지원 및 '홈 화면에 추가'와 같은 PWA 기능을 추가하여 UX를 점진적으로 개선합니다.
  • 실적 예산을 실적 전략에 포함

기술 심층 분석

속도의 중요성

속도가 그 어느 때보다 중요해졌습니다. 스마트폰이 많은 사용자의 기본 탐색 기기가 되면서 Nikkei는 자사 서비스에서 모바일 트래픽이 급격히 증가한 것을 확인했습니다. 하지만 Lighthouse를 사용하면서 속도 지수가 평균 10초이고, 초기 로드가 매우 느리고, 대규모 자바스크립트 번들이 필요해 기존 웹사이트가 모바일에 완전히 최적화되지 않았다는 사실을 알게 되었습니다. Nikkei는 웹사이트를 다시 구축하고 웹 성능 권장사항을 조정해야 할 때였습니다. 다음은 새 PWA의 결과와 주요 성능 최적화입니다.

웹 API 및 권장사항을 활용하여 로드 속도 향상

주요 요청 미리 로드

주요 요청 미리 로드

중요 경로를 로드하는 데 우선순위를 두는 것이 중요합니다. 또한 HTTP/2 서버 푸시를 사용하여 사용자에게 필요하다고 판단되는 중요한 자바스크립트 및 CSS 번들의 우선순위를 지정할 수 있습니다.

출발지로 비용이 많이 드는 왕복 여러 번을 피할 수 있습니다.

서드 파티 리소스를 로드하는 중입니다.

웹사이트에서 추적, 광고, 기타 여러 사용 사례를 위한 서드 파티 리소스를 로드해야 하는 경우 또한 <link rel=preconnect>를 사용하여 이러한 키 서드 파티 출처에 대한 DNS/TCP/SSL 핸드셰이크와 협상을 사전 해결했습니다.

다음 페이지를 동적으로 미리 가져오기

동적 미리 가져오기
동적 미리 가져오기
동적 미리 가져오기

사용자가 특정 페이지로 이동할 것이라고 확신할 때 단순히 탐색이 발생하기를 기다리지 않았습니다. Nikkei는 <link rel=prefetch><head>에 동적으로 추가하고 사용자가 실제로 링크를 클릭하기 전에 다음 페이지를 미리 가져옵니다. 이렇게 하면 즉시 페이지 탐색이 가능합니다.

인라인 중요 경로 CSS

인라인 중요 경로 CSS

렌더링을 차단하는 CSS를 줄이는 것은 속도 로드의 권장사항 중 하나입니다. 이 웹사이트는 0개의 렌더링 차단 스타일시트를 사용하여 모든 중요한 CSS를 인라인으로 처리합니다. 이 최적화로 유의미한 첫 페인트가 1초 넘게 감소했습니다.

자바스크립트 번들 최적화

자바스크립트 번들 최적화

이전에는 Nikkei의 JavaScript 번들이 총 300KB가 커졌습니다. 일반적인 자바스크립트에 대한 재작성 및 경로 기반 청크 분할 및 트리 쉐이킹과 같은 최신 번들링 최적화를 통해 이러한 팽창을 줄일 수 있었습니다. RollUp으로 자바스크립트 번들 크기를 80% 줄인 후 60KB로 줄였습니다.

구현된 기타 권장사항

서드 파티 자바스크립트 최적화

자체 스크립트에 비해 서드 파티 자바스크립트를 최적화하기는 쉽지 않지만, Nikkei는 모든 광고 관련 스크립트를 최소화하고 번들로 묶었습니다. 지금은 자체 콘텐츠 전송 네트워크 (CDN)에서 이 스크립트가 제공됩니다. 광고 관련 태그는 일반적으로 다른 필수 스크립트를 시작하고 로드하는 스니펫을 제공합니다. 이러한 스크립트는 페이지 렌더링을 차단하며 다운로드된 각 스크립트에 추가 네트워크 처리 시간이 필요합니다. Nikkei는 다음과 같은 접근 방식을 취해 초기화 시간을 100ms 단축하고 JS 크기를 30% 줄였습니다.

  • JS 번들러 (예: Webpack)
  • 번들 스크립트를 비동기식으로 로드하여 페이지 렌더링을 차단하지 않습니다.
  • 계산된 광고 배너를 Shadow DOM에 연결 (iframe 대비)
  • Intersection Observer API를 사용하여 사용자 스크롤 시 광고를 점진적으로 로드

점진적으로 웹사이트 개선

이러한 기본적인 최적화 외에도 Nikkei는 웹 앱 매니페스트서비스 워커를 활용하여 웹사이트를 설치 가능하고 오프라인에서도 작동하도록 만들었습니다. 서비스 워커에서 캐시 우선 전략을 사용하면 모든 핵심 리소스와 주요 문서가 캐시 저장소에 저장되며 불안정하거나 오프라인 네트워크와 같은 비상 상황의 경우에도 재사용되므로 일관되고 최적화된 성능을 얻을 수 있습니다.

닛케이 해킹

140년 이상의 역사를 가진 전통적인 일간 신문사는 웹과 PWA를 통해 디지털화를 성공적으로 가속화했습니다. Nikkei의 프런트엔드 엔지니어는 훌륭한 UX가 강력한 비즈니스 성과를 달성한다는 것을 입증했습니다. 이 회사는 웹에서 새로운 차원의 품질을 제공하기 위한 여정을 계속할 것입니다.

추가 자료