한빛출판네트워크

많은 웹 디자이너와 개발자들은 자신의 모바일 웹 사이트의 성능에 대하여 많은 관심을 기울이지 않고 있습니다. 그런데, 우리 유저들은 거기에 관심을 두고 있죠.

모바일 웹사이트 제작자로서 어떤 내용이 성능에 위험요인이고 어떤 요소가 성능을 향상시킬 수 있는지 이해하는 것은 매우 중요한 일입니다. 더 나은 성능은 제작자에게 결국에는 더 많은 돈을 안겨줄 것이니 말입니다.

여기 모든 웹 프로젝트에서 적용 가능한 성능 최적화를 위한 테크닉의 체크리스트가 있습니다.

기본 데이터

서로 다른 소스로부터 정보를 수집하는 것은 성능이 향상되었음을 나중에 알 수 있도록 도와줄 것입니다. 

데스크탑 뷰포인트 (900 px 이상):

• 첫 바이트 도착 시간 (ms)
• 렌더링 시작 시간 (ms)
• 첫 뷰가 인덱싱 되는 속도
• Repeat view 인덱스 되는 시간
• 첫 뷰의 페이지 로드 시간
• Repeat view의 페이지 로드 시간
• 페이지 속도 인사이트 스코어

타블릿 뷰포인트 (600-800 px);

• 첫 바이트 도착 시간 (ms)
• 렌더링 시작 시간 (ms)
• 첫 뷰가 인덱싱 되는 속도
• Repeat view 인덱스 되는 시간
• 첫 뷰의 페이지 로드 시간
• Repeat view의 페이지 로드 시간

모바일 뷰포인트 (320-400 px):

• 첫 바이트 도착 시간 (ms)
• 렌더링 시작 시간 (ms)
• 첫 뷰가 인덱싱 되는 속도
• Repeat view 인덱스 되는 시간
• 첫 뷰의 페이지 로드 시간
• Repeat view의 페이지 로드 시간
• 페이지 속도 인사이트 스코어

또한, 컨텐츠를 기반으로 “첫 번째 의미있는 인터랙션을 수행하기 위해 요구되는 시간”을 계산하기 위한 여러분만의 메트릭을 정의 할 수 있는지 아는 것은 중요합니다. 본인이 그 방식에 대하여 알고 있다면, chapter five에서 다루는 API를 바탕으로 메트릭을 어떻게 계산하는지 정의하게 될 것입니다.

여러분만의 메트릭을 위해서는 다음의 내용이 필요하게 될 것입니다:

• 메트릭 이름
• 의미있는 인터랙션의 디스크립션
• 의미있는 인터랙션을 측정하기 위한 공식

네트워크 체크리스트

이제 네트워크 레이어에서 여러분이 해야 하는 몇가지에 대하여 살펴보도록 하겠습니다.

일반적으로 여러분이 구현하기 시작하는 기술은 다음의 내용으로 정리할 수 있습니다:

• TLS (HTTPS)
• HTTP/2
• 반응형 웹 디자인 (RWD)을 포함하는 기타 모바일 기술

반드시 구현해야하는 기능들로는:

• 모든 텍스트 파일을 압축 가능한 gzip
• 최소한도로 유지하기 위한 DNS 쿼리들
• Keep-alive 설정
• 리다이렉션 제한

반드시 가졌으면 하는 기능들로는:

• TLS 기능을 구현하고 있다면, HSTS를 사용하는 것
• Cookieless 도메인
• 작은 쿠키 사이즈
• 서버에서 HTML을 빠르게 flush 하기
• 시간 제한이 있는 Static content
• Static content를 위한 CDN 서비스
• HTTP/1.1 환경을 위한 도메인 샤딩
• 도메인 샤딩을 사용한다면, HTTP/2를 위해 도메인 샤딩을 제한하거나 멀티 도메인 인증을 사용하는것
• JS와 서버사이드 라이브러리를 사용하는 것
• 반응형 웹 디자인을 프로젝트의 목표로 설정하지 않는 것
• 실제 데이터를 수집하는 것에 자바스크립트 API를 활용하는 것

기본 최적화 기법

대부분의 시간을 할애해서 구현해야만 하는 최적화 방법들을 설명하고자 합니다.

첫 로딩시에 적용 가능한 팁은 다음과 같습니다:

• 커스텀 모바일 앱 배너를 사용하지 않는것
• 첫 뷰를 렌더링을 클라이언트 사이드에서 하지 않는것
• DNS를 최대한 빠르게 announce 하는 것
• Resource Hint를 사용하여 resource를 announce 하기
• CSS 를 최대한 빨리 announce 하기
• 블로킹 자바스크립트 코드를 사용하지 않는것
• 자바스크립트 코드를 간소화 하는 것
• CSS 코드를 경량화 하는 것
• 하나의 파일에 중요한 JS 내용을 담는 것
• 하나의 파일에 중요한 CSS 내용을 담는 것
• On-demand 코드를 가능하면 사용할 것
• 모든 <script> 엘리먼트의 사용 요소를 분석할 것
• 초기화를 위해 DOMContentLoaded 대신 사용할 것
• 가능하다면 HTTP/2 서버 푸시를 사용할 것

이미지를 위한 팁들은 다음과 같습니다:

• (Base 64 인코딩된) 블로킹 이미지를 사용하지 않는 것
• 디바이스를 위해서 이미지 리사이징를 할 것
• srcset 과 <picture>를 사용하여 반응형 이미지를 적용 할 것
• HTTP/1.1에서 CSS Sprites를 사용할 것
• (CSS 내부에서 혹은 prefetch 기술을 사용하여 로딩이 될 때) Base64 이미지를 사용할 것
• SVG를 가능한 사용 할 것
• 이미지를 압축할 것
• GIF를 비디오 파일로 가능하면 변환할 것
• 가장 노출이 많이 되는 이미지를 먼저 보여줄 것

웹 폰트를 위한 팁은 다음과 같습니다.

• 로더를 활용하여 웹 폰트를 사용할 것
• CDN을 사용하여 웹 폰트를 사용할 것
• Glyphs와 사용되지 않는 캐릭터들을 제거하고 웹 폰트를 최적화 할 것

반응형을 위한 팁들:

• 50ms 이하로 스크립트가 수행되는지 검증하기
• 100ms 이하로 모든 피드백이 주어지는지 검증하기
• 터치 딜레이를 줄이기 위하여 CSS 혹은 모바일 viewport를 사용하기
• 패시브 리스너와 debouncing, 또는 스로틀링을 스크롤 이벤트에 적용하기
• 오래걸리는 작업들에는 웹 워커를 사용하기
• 적은 규모의 스크롤 패널은 momentum을 적용하기
• repaint를 가능한 적게 할 수 있도록 will-change 를 적용하기 
• 쓸대 없는 재연산을 줄이기 위해 CSS containment를 활용하기
• SSE나 웹 소켓을 활용하여 특정 상황을 분석하기
• 브라우저의 개발자 도구에 있는 FPS 미터를 활용하여 60 fps를 대부분의 스크롤링이나 애니메이션 중에서 달성하고 있는지를 확인하기

네이티브 웹 솔루션을 위해서는 다음을 확인해 볼 필요가 있습니다:

• iOS에서 UIWebView 대신 WKWebView를 사용해보기
• 안드로이드에서 web view replacement로 Crosswalk를 사용해보기
• 안드로이드의 인앱 브라우징을 위해 커스텀 탭을 활용하기
• iOS의 인앱 브라우징을 위해 사파리 뷰 컨트롤러를 활용하기

극적으로 최적화하기

이제 최대의 효율을 뽑아낼 수 있도록 몇가지 극적인 테크닉을 소개하도록 하겠습니다. 하지만 이 팁들은 프로젝트의 아키텍처를 수정해야 할 수도 있습니다.

네트워크 레이어:

• 3G 상황에서 페이지 로드 시간을 1초 ATF로 가져가기
• Brotil 압축 인코딩을 구현하기
• 다른 압축 알고리즘을 사용하기

아키텍처:

• 오프라인이나 좋지않은 네트워크에 있는 유저들을 대상으로, 서비스 워커나 어플리케이션 캐시등으로 서비스를 제공하기
• ATF content를 분리하기
• ATF 컨텐츠를 (gzipping 후에) 최대 14KB까지 압축하기
• 반응형 웹 디자인을 위해서 미디어 쿼리를 사용하지 않기
• 가능하다면 AMP와 Facebook Instant Article를 생성하기
• 기본 데이터들을 바탕으로 SD/HD 기술을 적용하기
• Client Hint 플래그가 설정되기 전에 low-res version을 활성화하기
• 커스텀 캐시 생성을 분석하기
• Prefetching을 활용하여 향후 브라우징을 예측하기
• Component들을 lazy loading을 적용하기
• 공격적인 캐시 메카니즘을 위해서 서비스 워커를 활용하기
• 첫 로딩시 큰사이즈의 프레임워크 로딩을 피하기
• 클라이언트에서 프레임워크를 렌더링한다면, 서버사이드에서 기초 렌더링을 할 수 있는지 분석하기

이미지 팁:

• 서버사이드 반응형 이미지를 위해서 HTTP Client Hint를 고려하기
• HTTP Client Hint를 활용하기 위하여 서버사이드 라이브러리를 사용하기
• WebP, JPEG-XR, JPEG-2000를 이미지 포맷으로 고려해보기
• 이미지 프리뷰 기술들을 확인해보기

향상도 측정

하나의 기술을 적용하고 나면, 기본 데이터 체크리스트부터 얼마나 향상이 되었는지 데이터를 다시 수집해보는 것이 좋습니다. 여러분이 어떤 기술은 특정 시나리오에서 딱히 도움을 주지 못한다는 사실을 기억한다면, 각각의 테크닉들을 사례마다 따로따로 고려하는 것이 더 확연하게 차이를 경험할 수 있을 것입니다. 머지 않아 찾아올 여러분의 웹사이트를 맘껏 즐기십시요. 그리고 그러한 사이트를 만들기 위해서 성능상 이슈는 매우 많다는 것을 기억하십시요.

*****

원문 : Mobile web performance checklist

번역 : 김준호