140년 이상의 발행 이력을 보유한 니케이는 일본에서 가장 권위 있는 미디어 비즈니스 중 하나입니다. 인쇄 신문과 함께 월 4억 5천만 회가 넘는 디지털 부동산을 방문하고 있습니다. Nikkei는 더 나은 사용자 환경을 제공하고 웹에서 비즈니스를 가속화하기 위해 2017년 11월에 프로그레시브 웹 앱(PWA)인 https://r.nikkei.com을 출시했습니다. 이제 새로운 플랫폼에서 놀라운 결과를 얻고 있습니다.
성능 향상 - 속도 지수 2배 향상 - 14초 더 빠른 Time-to-Interactive(TTI) - 미리 로드로 75% 더 빠른 로드
비즈니스 영향 - 자연 트래픽 2.3배 증가 - 전환수(구독) 58% 증가 - 일일 활성 사용자 49% 증가 - 세션당 페이지 조회수 2배 증가
비즈니스 개요
도전과제
Nikkei는 스마트폰이 많은 사용자의 웹 접속의 주요 수단이 되면서 기존 웹사이트의 모바일 트래픽이 급증하는 것을 확인했습니다. 하지만 웹페이지를 검사하고 여러 카테고리에서 개선 방법을 제안하는 감사 도구인 Lighthouse를 사용해 보니 사이트가 여러 영역에서 모바일에 완전히 최적화되지 않았으며 로드 속도가 매우 느린 것으로 확인되었습니다.
웹사이트가 일관되게 대화형 상태가 되기까지 약 20초가 소요되었으며 Speed Index에서 평균 10초가 소요되었습니다. 로드하는 데 3초 이상 걸리면 모바일 사용자의 53%가 환경을 포기한다는 사실을 알고 있는 Nikkei는 로드 시간을 줄여 더 나은 환경을 제공하고 웹에서 비즈니스를 가속화하고자 했습니다.
속도의 가치는 타당한 것이며, 특히 금융 뉴스의 경우에는 더욱 두드러집니다. 속도를 핵심 측정항목으로 삼았으며 고객들은 이러한 변화를 높이 평가했습니다.
다이헤이 시게모리, 디지털 전략 관리자
결과
Nikkei는 실적을 크게 개선했습니다. Lighthouse 점수는 23점에서 82점으로 상승했습니다. Time-to-Interactive(TTI) 측정값이 14초 개선되었습니다. 자연 트래픽, 속도, 전환율, 일일 활성 사용자도 모두 증가했습니다.
PWA는 Vanilla JavaScript로 빌드된 멀티페이지 앱(MPA)으로, 프런트엔드 복잡성을 줄입니다. 5명의 핵심 프런트엔드 엔지니어가 1년 동안 이 성능을 달성하기 위해 노력했습니다.
Nikkei의 프런트엔드 엔지니어는 우수한 UX가 비즈니스 성능을 향상한다는 것을 증명했습니다. Google은 웹의 품질을 새로운 차원으로 끌어올리기 위한 노력을 이어가기 위해 최선을 다하고 있습니다.
히가시 히로유키 Nikkei 제품 관리자
솔루션
Nikkei는 반응형 디자인, 표준 JavaScript, 멀티페이지 아키텍처를 사용하여 프로그레시브 웹 앱을 만들고 출시했으며, 만족도 높은 사용자 환경을 구축하는 데 중점을 두었습니다. 서비스 워커를 추가하여 네트워크와 관계없이 예측 가능한 성능을 제공할 수 있었습니다. 또한 인기 도움말은 캐시 저장소를 사용하여 저장되므로 항상 사용할 수 있고 거의 즉시 로드됩니다. 웹 앱 매니페스트를 추가했으며 서비스 워커와 함께 이를 통해 사용자가 PWA를 설치할 수 있으므로 쉽게 액세스할 수 있습니다. 또한 성능을 완전히 제어할 수 있도록 서드 파티 JavaScript를 최적화했습니다.
권장사항
- 최신 웹 API, 압축, 코드 최적화 사례를 사용하여 로드 속도와 상호작용을 개선합니다.
- 오프라인 지원, 홈 화면에 추가와 같은 PWA 기능을 추가하여 UX를 점진적으로 개선합니다.
- 실적 전략에 실적 예산을 포함합니다.
기술 심층 분석
속도가 중요함
속도가 그 어느 때보다 중요해졌습니다. 스마트폰이 많은 사용자의 기본 탐색 기기가 되면서 Nikkei의 서비스에서 모바일 트래픽이 급증했습니다. 하지만 Lighthouse를 사용해 보니 기존 웹사이트가 모바일에 완전히 최적화되지 않았습니다. 속도 색인이 평균 10초이고 초기 로드 속도가 매우 느리며 JavaScript 번들이 큽니다. Nikkei는 웹사이트를 재구축하고 웹 성능 권장사항을 적용해야 했습니다. 다음은 새 PWA의 결과와 주요 성능 최적화입니다.
웹 API 및 권장사항을 활용하여 로드 속도 높이기
키 요청 미리 로드
중요한 경로의 로드에 우선순위를 두는 것이 중요합니다. HTTP/2 서버 푸시를 사용하면 사용자가 필요할 것으로 알고 있는 중요한 JavaScript 및 CSS 번들의 우선순위를 지정할 수 있습니다.
출발지로의 여러 번의 왕복 이동으로 인한 비용 절감
웹사이트에서 추적, 광고, 기타 여러 사용 사례를 위해 서드 파티 리소스를 로드해야 했습니다. <link rel=preconnect>를 사용하여 이러한 주요 서드 파티 출처의 DNS/TCP/SSL 핸드셰이크 및 협상을 사전 확인했습니다.
다음 페이지를 동적으로 미리 로드
사용자가 특정 페이지로 이동할 것이라고 확신되면 탐색이 실행될 때까지 기다리지 않았습니다. Nikkei는 사용자가 실제로 링크를 클릭하기 전에 <head>에 <link rel=prefetch>를 동적으로 추가하고 다음 페이지를 미리 가져옵니다. 이렇게 하면 즉각적인 페이지 탐색이 가능합니다.
중요한 인라인 CSS 경로
렌더링을 차단하는 CSS를 줄이는 것은 로드 속도를 높이기 위한 권장사항 중 하나입니다. 웹사이트에서 렌더링 차단 스타일시트 0개로 모든 중요한 CSS를 인라인 처리합니다. 이 최적화로 인해 유의미한 첫 페인트가 1초 이상 줄었습니다.
JavaScript 번들 최적화
이전 경험에서 Nikkei의 JavaScript 번들은 총 300KB가 넘는 부피가 컸습니다. 표준 JavaScript로 재작성하고 경로 기반 청크 처리 및 트리 쉐이킹과 같은 최신 번들 최적화를 통해 이러한 부풀림을 줄일 수 있었습니다. RollUp을 사용하여 JavaScript 번들 크기를 80% 줄이며 60KB로 줄였습니다.
구현된 기타 권장사항
- 압축: Fastly CDN을 사용하여 압축 가능한 모든 리소스에 Gzip/Brotli 사용
- 캐싱: HTTP 캐싱, 에지 측 캐싱 사용 설정
- 이미지 최적화: 최적화 및 이미지 형식 감지에 imgix를 사용합니다.
- 중요하지 않은 리소스 지연 로드: intersection observer API를 사용하여 스크롤해야 볼 수 있는 부분에 있는 프래그먼트 로드
- 웹 글꼴 로드 전략 수립: 시스템 글꼴 사용 우선
- 유의미한 첫 페인트 최적화: 콘텐츠를 서버 측에서 렌더링합니다.
- 성능 예산 적용: 자바스크립트 전송 및 파싱/컴파일 시간을 낮게 유지
서드 파티 JavaScript 최적화
서드 파티 JavaScript는 자체 스크립트에 비해 최적화하기가 쉽지 않지만, Nikkei는 모든 광고 관련 스크립트를 축소 및 번들로 묶어 자체 콘텐츠 전송 네트워크(CDN)에서 게재하도록 했습니다. 광고 관련 태그는 일반적으로 다른 필수 스크립트를 시작하고 로드하는 스니펫을 제공하며, 이는 페이지 렌더링을 차단하는 경우가 많고 다운로드된 각 스크립트에 추가 네트워크 처리 시간이 필요합니다. Nikkei는 다음 접근 방식을 사용하여 초기화 시간을 100ms 개선하고 JS 크기를 30% 줄였습니다.
- JS 번들러 (예: Webpack)
- 번들 스크립트를 비동기식으로 로드하여 페이지 렌더링을 차단하지 않음
- 계산된 광고 배너를 Shadow DOM에 연결(iframe과 비교)
- Intersection Observer API를 사용하여 사용자 스크롤 시 광고 점진적 로드
웹사이트 점진적 개선
이러한 기본적인 최적화 외에도 Nikkei는 웹 앱 매니페스트와 서비스 워커를 활용하여 웹사이트를 설치 가능하고 오프라인에서도 작업할 수 있도록 했습니다. 서비스 워커에서 캐시 우선 전략을 사용하면 모든 핵심 리소스와 인기 도움말이 캐시 저장소에 저장되고 불안정한 네트워크나 오프라인 네트워크와 같은 예기치 않은 상황에서도 재사용되므로 일관되고 최적화된 성능을 제공할 수 있습니다.
닛케이 해킹
140년 이상의 역사를 지닌 기존 일간지 회사는 웹과 PWA의 힘을 통해 디지털화를 성공적으로 가속화했습니다. Nikkei의 프런트엔드 엔지니어들은 우수한 UX가 강력한 비즈니스 성능을 제공한다는 것을 증명했습니다. Google은 웹에 새로운 수준의 품질을 제공하기 위한 여정을 계속 이어갈 것입니다.