140년 이상의 출판 역사를 자랑하는 Nikkei는 일본에서 가장 권위 있는 미디어 비즈니스 중 하나입니다. 인쇄 신문과 함께 디지털 속성 방문 횟수가 월 4억 5천만 회를 넘습니다. 더 나은 사용자 환경을 제공하고 웹에서 비즈니스를 가속화하기 위해 Nikkei는 2017년 11월에 프로그레시브 웹 앱 (PWA)인 https://r.nikkei.com을 출시했습니다. 이제 새로운 플랫폼에서 놀라운 결과를 얻고 있습니다.
성능 향상 - 속도 지수 2배 향상 - 상호작용 시간 14초 단축 - 미리 가져오기를 사용한 로딩 속도 75% 향상
비즈니스 영향 - 자연 트래픽 2.3배 증가 - 전환 (구독) 58% 증가 - 일일 활성 사용자 49% 증가 - 세션당 페이지 조회수 2배 증가
비즈니스 개요
도전과제
스마트폰이 많은 사용자의 웹 진입점이 되면서 Nikkei의 기존 웹사이트로 유입되는 모바일 트래픽이 급증했습니다. 하지만 웹페이지를 스캔하고 여러 카테고리에서 개선 방법을 추천하는 감사 도구인 Lighthouse를 사용한 결과, 여러 영역에서 사이트가 모바일에 완전히 최적화되어 있지 않고 로드 속도가 매우 느리다는 것을 알게 되었습니다.
웹사이트가 일관되게 상호작용하는 데 약 20초가 걸렸고 속도 지수는 평균 10초였습니다. 모바일 사용자의 53% 가 로드하는 데 3초 이상 걸리면 환경을 포기한다는 사실을 알고 있던 Nikkei는 더 나은 환경을 제공하고 웹에서 비즈니스를 가속화하기 위해 로드 시간을 줄이고자 했습니다.
특히 금융 뉴스에서는 속도의 가치가 명백합니다. Google은 속도를 핵심 측정항목 중 하나로 삼았으며 고객은 이러한 변화를 높이 평가했습니다.
시게모리 타이헤이, 디지털 전략 관리자
결과
Nikkei는 인상적인 실적을 달성했습니다. Lighthouse 점수가 23에서 82로 급상승했습니다. 상호작용 시간 측정값이 14초 개선되었습니다. 자연 트래픽, 속도, 전환율, 일일 활성 사용자 수도 모두 증가했습니다.
PWA는 프런트엔드 복잡성을 줄이는 다중 페이지 앱 (MPA)이며, Vanilla JavaScript로 빌드됩니다. 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로 다시 작성하고 경로 기반 청크 분할 및 트리 셰이킹과 같은 최신 번들링 최적화를 통해 이 블로트를 잘라낼 수 있었습니다. JavaScript 번들 크기를 80% 줄여 RollUp을 사용하여 60KB로 낮췄습니다.
기타 권장사항 구현
- 압축: Fastly CDN을 사용하여 압축 가능한 모든 리소스를 Gzip/Brotli로 압축
- 캐싱: HTTP 캐싱, 에지 측 캐싱 사용 설정
- 이미지 최적화: imgix를 사용하여 최적화 및 이미지 형식 감지
- 중요하지 않은 리소스 지연 로드: 교차 관찰기 API를 사용하여 스크롤해야 볼 수 있는 부분의 프래그먼트 로드
- 웹 글꼴 로드 전략이 있어야 합니다. 시스템 글꼴 사용을 우선시합니다.
- 유의미한 첫 페인트 최적화: 콘텐츠를 서버 측에서 렌더링합니다.
- 성능 예산 채택: JavaScript 전송 및 파싱/컴파일 시간을 낮게 유지
서드 파티 JavaScript 최적화
자체 스크립트에 비해 서드 파티 JavaScript를 최적화하기는 쉽지 않지만 Nikkei는 모든 광고 관련 스크립트를 최소화하고 번들로 묶어 이제 자체 콘텐츠 전송 네트워크 (CDN)에서 제공합니다. 광고 관련 태그는 일반적으로 다른 필수 스크립트를 시작하고 로드하는 스니펫을 제공하며, 이는 페이지 렌더링을 차단하는 경우가 많고 다운로드된 각 스크립트에 추가 네트워크 처리 시간이 필요합니다. Nikkei는 다음 접근 방식을 취하여 초기화 시간을 100ms 개선하고 JS 크기를 30% 줄였습니다.
- JS 번들러 (예: Webpack)
- 페이지 렌더링을 차단하지 않도록 번들 스크립트를 비동기식으로 로드합니다.
- 계산된 광고 배너를 Shadow DOM (iframe 아님)에 연결
- Intersection Observer API를 사용하여 사용자가 스크롤할 때 광고 점진적으로 로드
웹사이트 점진적 개선
이러한 기본 최적화 외에도 Nikkei는 웹 앱 매니페스트와 서비스 워커를 활용하여 웹사이트를 설치 가능하게 만들고 오프라인에서도 작동하도록 했습니다. 서비스 워커에서 캐시 우선 전략을 사용하면 모든 핵심 리소스와 인기 기사가 캐시 저장소에 저장되고 불안정하거나 오프라인 네트워크와 같은 비상 상황에서도 재사용되어 일관되고 최적화된 성능을 제공합니다.
닛케이 해킹
140년 이상의 역사를 가진 전통적인 일간 신문 회사가 웹과 PWA의 힘을 통해 디지털화를 성공적으로 가속화했습니다. Nikkei의 프런트엔드 엔지니어는 뛰어난 UX가 강력한 비즈니스 실적을 제공한다는 것을 입증했습니다. Google은 웹에 새로운 수준의 품질을 제공하기 위한 여정을 계속할 것입니다.