구글 모바일 웹사이트 속도 테스트 도구로 모바일 최적화 진단을 해보자

모바일 마켓에 대한 시장 분위기를 나타내주는 가장 큰 변화는 모바일 퍼스트(Mobile First)에서 모바일 온니(Mobile Only)로의 변화입니다. 모바일도 중요하지만 데스크탑이 여전히 중요하다는 메세지(모바일 퍼스트)에서 데스크탑은 버려도 괜찮으니 모바일을 놓치지 말자(모바일 온니)로의 변화였기 때문입니다. 물론, 모바일 기기만 신경쓴다는 것이 합리적인지에 대해서는 갑론을박이 있겠지만 모바일을 통한 매출과 수익의 창출이 데스크탑에 신경쓰는 것에 대비하여 비용 효율적인 것은 부인하기 힘든게 사실입니다.

때문에 많은 기업들이 사례(Best Practice)와 경험을 토대로 모바일 환경에 최적화 하기 위한 개선 작업에 많은 리소스를 투입하고 있습니다. 그렇지만 엠닷으로 대표되는 사이트의 구성과 반응형 웹 사이트 구성 사이에서 갈등이 생기고, 반응형 웹 사이트 안에서도 "정말로 모바일을 위한 최적화가 되어 있는가?"로 다시 한번 여러가지 의견이 나오기도 합니다. 

구글이 제공하는 모바일 웹사이트 속도 테스트 도구는 사용자들이 인터넷으로 접근 가능한 웹 사이트에 대하여 얼마나 모바일에 최적화가 되어 있는지 살펴보고, 최적화 되어 있지 않은 부분이 있다면 어떤 부분들을 집중적으로 파고들어야 하는지에 대한 가이드를 제공해주는 역할을 해줍니다. 물론 상세한 리포트를 제공받기 위해서는 구글을 통한 컨설팅을 받아야 하지만 큰 아젠더 (예: 브라우저 캐시의 활용, 이미지의 최적화 등) 를 뽑아내는데는 무리가 없습니다.

한국의 대표적인 포털 사이트인 네이버(www.naver.com)를 이용해서 모바일 최적화가 얼마나 잘 되어 있는지 살펴보았습니다. 아래의 수치가 절대적인 것은 아니고 구글 모바일 웹사이트 속도 테스트 도구가 테스트하는 방식에도 영향을 받을 수 있기 때문에 어떤 항목들에 대하여 최적화를 하면 좋다고 가이드 하는지 살펴보는 정도로 활용하면 좋을 것 같습니다. 각 결과 페이지에 깨알같이 기술된 "상대적" 이라는 단어도 논란을 막기 위한 포석이라 생각되네요!

일단 모바일 친화성 점수는 100점 만점에 99점으로 아주 훌륭하다는 피드백입니다. 다만 모바일 속도와 데스크톱 속도 항목에서 저조한 점수를 받은 것이 다소 의외입니다. 네이버의 경우 모바일 단말에서 접근시 유저 에이전트(User-Agent)를 확인해 모바일 전용 페이지(m.naver.com)으로 리디렉트 하기 때문입니다. 이런 리디렉트 절차 까지도 점수 산정에 포함되는지는 확인하지 못했습니다.

상세한 항목을 살펴보면 일부 JS 및 CSS 로 인한 리소스 로딩 블러킹 현상이 있는 것으로 보입니다. 개발자 도구를 이용해 워터폴 차트를 살펴보면 확인해 볼 수 있는 부분으로 많은 웹 사이트에서도 발견되는 부분이긴 합니다. 이미지 최적화는 파일 포맷에 대한 것인지 혹은 유저 에이전트(=브라우저)에 따른 최적 파일 포맷(예: webp, jpeg2000 등) 미사용에 대한 부분인지 역시 불명확하긴 합니다. 상황에 따라서는 데스크탑용 이미지를 리사이즈 형태로 사용하는 것에 대해 지적하는 것일 가능성도 아주 낮지만 무시하면 안되겠습니다. 

데스크톱 속도의 경우도 비슷한 항목들이 빨간색으로 분류되었습니다. 귀차니즘이 없다면 워터폴 차트를 한번 보고 싶다는 욕망이 가득했지만 애써 마음을 누르며 늘어난 노란색 항목들을 살펴보았습니다. 모바일 속도 항곰에서는 압축(gzip), 자바스크립트 축소, HTML 축소에 대한 항목이 초록색이었는데 데스크탑 유저 에이전트에 대해서는 노란색으로 추가 수정할 사항이 있다는 권고가 나온 것이 관전 포인트 입니다. 유저 에이전트 혹은 뷰포트에 따라 어떤 형태로 텍스트, 바이너리 컨텐츠를 보여주고 제공할 것인지 잘 결정해야 하겠습니다.

마지막으로 국내 2인자를 벗어나지 못하고 있는 (그러나 제가 거주하고 있는 티스토리를 제공하는!) 다음의 메인 웹 사이트에 대한 성능 측정을 진행해 보았습니다. 페이지가 담고 있는 정보의 양에 따라 달라질 수 있는 부분이겠지만 모바일, 데스크탑 모두 네이버 메인 페이지보다 더 높은 (그러나 둘다 빤간색인...) 점수를 받았습니다. 비슷한 레인지의 점수라 유의미하진 않겠지만 나란히 빨간색으로 저조하다는 평가를 받은 것이 의외입니다.

여러분의 웹 사이트, 블로그도 구글 모바일 웹 사이트 속도 테스트 도구로 모바일 친화도, 성능 측정을 해보시기 바랍니다. 상황에 따라 달라질 수 있는 성능 지표이니 구글의 테스트 결과만으로 너무 속상해 하지 마시기 바랍니다!

구글 모바일 웹사이트 속도 테스트 도구로 성능 측정 해보기 [바로가기]

2017/04/19 - 호텔스닷컴 4월 특가대방출, 6~10% 까지 저렴하게 호텔을 예약하고 여행을 즐기세요!

2017/04/18 - 슬랙(Slack)으로 협업하기 / 11. 트렐로와 슬랙을 연동해보자!

2017/04/10 - 북유럽인테리어가구 에라드의 TV스텐드로 집안 분위기를 바꿔보세요

2017/04/06 - 유튜브TV (YouTube TV), 월 35달러로 50개 이상의 방송을 라이브로 시청하자

2017/04/03 - 페이스북(Facebook), 그룹 채팅을 위한 채팅 봇 출시 루머

2017/03/03 - 클로바(Clova), 라인과 네이버의 인공지능(AI) 콜라보레이션

2017/03/01 - 마이크로소프트 스토어에서 오피스365 학생버전을 매월 커피 한잔 값으로 이용할 수 있다면?