소개
지금은 휴대전화나 태블릿에서 사이트를 방문했을 때 사이트가 제대로 작동하는지 확인하는 것이 가장 중요합니다. Chrome DevTools 및 Android 기기를 사용하여 모바일 브라우저에 맞게 사이트를 최적화하는 방법을 알아보세요.
모바일 웹에 맞게 최적화하는 것이 왜 중요할까요?
성능
2G 및 3G에서 4G로 전환됨에 따라 휴대기기는 더 빠른 CPU, 더 많은 RAM, 더 빠른 GPU, 더 빠른 네트워크 액세스를 얻고 있습니다. 많은 발전이 있었음에도 불구하고 휴대기기는 컴퓨터에 비해 성능이 떨어집니다. 구체적으로 말하면, 네트워크 리소스를 로드하는 데 더 오래 걸리고, 이미지 압축해제 시간이 더 오래 걸리고, 페이지 페인트가 더 오래 걸리고, 스크립트를 실행하는 데 더 오래 걸립니다. 휴대기기에서 페이지가 5~10배 느리게 실행된다고 가정해도 됩니다.
배터리
모바일 기기는 독점적으로 배터리로 작동합니다. 휴대기기 사용자는 배터리가 최대한 오래 지속되기를 원합니다. 최적화되지 않은 사이트는 필요한 것보다 훨씬 빨리 배터리를 소모합니다. 네트워크 트래픽을 최소화하고 페인트를 줄여 배터리 소모를 줄입니다. 리소스를 가져올 때 Wi-Fi나 무선 통신을 사용해야 하므로 배터리가 소모됩니다. 브라우저가 요소를 페인트하면 CPU 및 GPU 사용량이 급증하여 배터리도 소모됩니다.
참여
실적은 광고주에게 가장 중요한 측정항목을 높이기 위한 것입니다. Facebook에서는 스크롤을 중요하게 생각합니다. A/B 테스트에서는 스크롤 속도를 60fps에서 30fps로 낮췄습니다. 참여가 접혔습니다. 따라서 스크롤이 중요하므로 문제가 없습니다.
Facebook 에지 컨퍼런스
모바일 사용자는 빠르게 접속하고 종료할 수 있기를 기대합니다. 가장 빠른 사이트에서 참여도가 가장 높습니다.
성능 관리
Chrome은 훌륭한 개발자 도구와 함께 제공됩니다. 이 도움말에서는 이러한 도구를 사용하여 모바일 사이트를 프로파일링하는 방법을 설명합니다. 이미 Chrome DevTools에 익숙하다면 잘 알고 계실 것입니다. 그렇지 않다면 다음 튜토리얼을 확인하세요.
지금까지 배운 내용을 살펴봤으니 이제 DevTools로 모바일 사이트 속도를 높이는 방법을 알아보겠습니다. Android용 Chrome DevTools를 처음 사용하는 경우 도움말 하단에 있는 시작 가이드를 확인하세요.
원격으로 Chrome DevTools 사용하기
Android 기기가 컴퓨터에 테더링되어 있습니다. 데스크톱 Chrome에서 http://localhost:9222로 이동하고 Android 기기에서 사이트를 엽니다. Android 기기에 열려 있는 탭 목록으로 이동합니다. '검사 가능한 페이지' 목록에서 페이지를 선택합니다.
그러면 해당 페이지의 Chrome DevTools로 이동합니다.
익숙한 Chrome DevTools 툴바가 있습니다. 원격 Chrome DevTools에 관해 알아야 할 가장 중요한 사항은 현재 데스크톱에서 사용 중인 것과 동일한 DevTools라는 점입니다. 유일한 차이점은 Android 기기는 페이지만 담당하지만 데스크톱은 DevTools를 담당한다는 것입니다. 내부적으로 동일한 데이터가 수집되고 동일한 기능을 사용할 수 있습니다.
예를 들어 휴대전화에서 www.sfgate.com/movies에 방문했습니다. 데스크톱에서 Chrome DevTools를 사용하여 요소 도구의 div 위로 마우스를 가져가면 데스크톱에서와 마찬가지로 Android 기기에서 div가 시각적으로 강조표시됩니다.
요소 도구를 사용하여 스타일을 사용 설정하거나 사용 중지할 수도 있습니다. 이 기능은 페인트 시간을 조사할 때 유용합니다.
네트워크 접속에 대한 탐지
네트워크 성능은 매우 중요한데, 모바일 웹에서는 이것이 더욱 중요합니다. 휴대기기는 데스크톱이나 노트북 컴퓨터보다 연결 속도가 느린 경우가 많습니다. 제대로 하고 있는지 확인하려면 네트워크 도구에서 녹화를 눌러 네트워크 스냅샷을 만듭니다.
스크린샷은 Google 검색에서 발생한 네트워크 트래픽을 보여줍니다. 사이트에서 수행하는 네트워크 요청을 관찰하고 이를 최소화할 방법을 찾으세요. 사이트에서 서버에 폴링을 요청하는 경우 사용자 활동에 주의를 기울이고 사용자가 유휴 상태일 때 폴링을 방지하는 것이 좋습니다. 네트워크 도구를 사용하면 원시 HTTP 헤더를 볼 수 있으며, 모바일 네트워크에서 헤더를 전혀 변경하는 경우에 유용합니다.
페인트 시간 최적화
모바일 웹브라우저에서 발생하는 가장 큰 병목 현상 중 하나는 페이지를 그리는 것입니다. 페인팅은 지정된 스타일로 페이지에 요소를 그리는 프로세스입니다. 요소 중 하나를 페인트하는 데 비용이 많이 들면 전체 페이지의 페인트 속도가 느려집니다. Chrome은 이전에 그린 요소를 오프스크린 버퍼에서 캐시하려고 합니다. 하지만 모바일에서는 사용 가능한 GPU RAM 양이 제한되어 있어 화면 밖에서 캐시할 수 있는 요소의 수가 제한됩니다. 부작용은 페인트가 더 많고 각 페인트가 데스크톱보다 느립니다. 반응형 스크롤을 사용하려면 페인트 시간을 최소화해야 합니다.
Chrome 25에는 연속 페이지 다시 그리기 모드가 포함되어 있습니다. 연속 페이지 다시 그리기 모드는 페인트된 요소를 캐시하지 않고 대신 각 프레임의 모든 요소를 페인트합니다. 모든 요소를 각 프레임에 페인팅하면 요소와 스타일을 켜고 끄는 방식으로 페인트 시간에 대한 A/B 테스트를 실행할 수 있습니다. 프로세스는 수동으로 진행되지만 페이지의 각 요소를 페인트하는 데 드는 비용이 얼마나 높은지 추적하는 데 유용한 도구입니다. 최적화 클럽의 첫 번째 규칙은 최적화하려고 하는 기준을 측정하는 것입니다. 간단한 예를 들어 보겠습니다.
먼저 연속 페이지 다시 그리기 모드를 사용 설정합니다.
사용 설정하면 Android 기기의 오른쪽 상단에 그래프가 표시됩니다. 그래프의 x축은 시간으로, 프레임으로 나뉩니다. 그래프의 y축은 페인트 시간을 밀리초 단위로 측정합니다. 제 기기에서는 페이지를 그리는 데 14밀리초가 걸립니다 최소 및 최대 페인트 시간도 사용된 GPU 메모리와 함께 표시됩니다.
실험적으로 선택한 요소의 스타일을 display: none로 설정했습니다. 지금 페이지를 그리는 데
얼마나 드는지 살펴보겠습니다
페인트 시간이 프레임당 약 14밀리초에서 프레임당 4밀리초로 줄었습니다. 즉, 한 요소를 페인팅하는 데 약 10밀리초가 걸렸습니다. 요소와 스타일을 켜고 끄는 과정을 따르면 페이지에서 비용이 많이 드는 부분을 빠르게 좁힐 수 있습니다. 페인트 시간이 빠르면 버벅거림이 줄어들고, 배터리가 더 오래가며, 사용자의 참여도가 높아집니다. 더 자세히 알아보려면 연속 페이지 다시 그리기 모드에 관한 유용한 도움말을 참고하세요.
고급 기능
about:추적
데스크톱 Chrome에서 사용할 수 있는 고급 개발자 기능 중 상당수는 Android Chrome에서도 사용할 수 있습니다. 예를 들어 about:gpu-internals, about:appcache-internals, about:net-internals를 사용할 수 있습니다. 특히 까다로운 문제를 조사할 때는 문제의 원인을 파악하기 위해 더 많은 데이터가 필요한 경우가 있습니다. 데스크톱에서 about:tracing을 사용하고 있을 수 있습니다. about:tracing을 잘 모른다면 about:tracing 프로파일링 도구 사용 및 탐색에 관한 동영상을 시청하세요. Android Chrome에서 동일한 데이터를 캡처할 수 있습니다. 시작하려면 다음 단계를 따르세요.
- adb_trace.py 다운로드
- 명령줄에서 adb_trace.py 실행
- Android에서 Chrome 사용하기
- 명령줄에서 Enter 키를 눌러 adb_trace.py 스크립트를 종료합니다.
adb_trace.py가 완료되면 데스크톱 Chrome의 about:tracing에서 로드할 수 있는 JSON 파일이 생성됩니다.
시작 가이드
원격 Chrome DevTools의 기능을 검토했으므로 이제 원격 디버깅 세션에서 시작하는 방법을 알아보겠습니다. 이전에 사용한 적이 없다면 시작 방법에 관한 자세한 안내를 읽어보세요. 이미 사용해 봤지만 사용 방법을 정확히 잊어버렸다면 여기에 요약된 안내도 나열했습니다.
1. Android SDK 설치
웹용으로 개발할 때 Android SDK를 설치해야 하는 이유가 궁금할 수 있습니다. SDK에는 adb (Android 디버그 브리지)가 포함되어 있습니다. 데스크톱 Chrome에서 Android 기기와 통신할 수 있어야 합니다. Chrome은 Android 기기와 직접 통신하지 않고 대신 adb를 통해 통신을 라우팅합니다.
2. 기기에서 USB 디버깅 사용 설정
USB 디버깅을 사용 설정하는 옵션은 Android 설정에서 찾을 수 있습니다. 사용 설정합니다.
3. 기기에 연결
아직 연결하지 않았다면 USB를 통해 Android 기기를 데스크톱에 연결합니다. USB 디버깅을 처음 사용하는 경우 다음과 같은 메시지가 표시됩니다.
원격 디버그 세션을 자주 실행할 경우 '이 컴퓨터에서 항상 허용'을 선택하는 것이 좋습니다.
4. 기기가 제대로 연결되어 있는지 확인하기
명령 프롬프트에서 adb devices를 실행합니다. 기기가 목록에 표시됩니다.
5. Chrome에서 USB 디버깅 사용 설정
Settings > Advanced > DevTools를 열고 다음과 같이 Enable USB Web debugging 옵션을 선택합니다.
6. Android 기기에 DevTools 연결 만들기
다음 명령어를 실행합니다.
adb forward tcp:9222 localabstract:chrome_devtools_remote
adb를 통해 데스크톱 컴퓨터와 Android 기기 사이에 브리지를 만듭니다. 이때 문제가 발생하면 여기에서 자세한 설정 안내를 읽어보세요.
7. 확인 중
데스크톱에서 Chrome을 열고 http://localhost:9222로 이동하여 기기가 올바르게 연결되었는지 확인합니다. 404와 다른 오류가 발생하거나 다음과 같은 내용이 표시되지 않는 경우
여기에서 자세한 설정 안내를 읽어보세요.
결론
모바일 사용자는 시간에 쫓기는 경우가 많아 페이지에서 중요한 정보를 신속하게 얻고 싶어 합니다. 모바일 사이트 빌더는 페이지가 빠르게 로드되고 모바일에서 우수한 실적을 내도록 해야 합니다. 그러지 않으면 사용자 참여 발생 시간이 줄어듭니다. 원격 Chrome DevTools는 데스크톱 DevTools와 기능적으로 동일합니다. UI가 유사하기 때문에 새로운 도구 세트를 배울 필요가 없습니다. 즉, 워크플로가 이전됩니다. Facebook이 성능 문제에 무난한 것이 아니며 여러분의 사이트도 마찬가지입니다. 성능이 우수한 사이트는 사용자 참여도를 높입니다.