오늘 게시할 내용은 웹페이지 속도에 관련된 이야기입니다.

작거나 큰 웹 사이트를 운영하는 웹마스터분들이 고려하는것은 여러가지가 있습니다. 그 중 사용자(클라이언트)의 페이지 이용 품질은 큰 고려사항입니다. 이용 품질이라 말은 거창하지만 결국 '속도'가 문제입니다. 사용자, 특히 한국인은 3초이내에 홈페이지가 보여지지 않으면 그대로 꺼버린다는 말이 있을정도로 웹페이지가 사용자눈에 무언가를 단시간내에 보여줘야하는것은 기본이 되어버린 시대입니다. PC통신이나예전이야 홈페이지정도 떠주는데 10초정돈 기다려주는게 인지상정이었지만 요즘은 빨리안뜨면 새로고침을 연타하죠. ㅎㅎ...

여튼 홈페이지를 가볍게 만드는 요소는 여러가지가 있습니다. 기획부터 시작해서 프론트엔드단, 백엔드단에서도 여러 고려방법이 존재합니다. 그리고 SEO 전문가 또한 속도는 중요한 요소 중 하나입니다. 오늘 포스트에는 이런 속도를 내기 위한 방법보다는 체크를 하기위한 방법을 소개하고자 합니다.

가장 쉽게 확인할 수 있는 방법은 페이지 인스펙터를 열어보는것 입니다.

위의 사진은 사파리의 인스펙터 입니다. 네트워크 탭을 클릭하고 페이지 새로고침을 한번 하면 페이지를 여는 모든 리소스의 다운/실행 속도와 크기가 나옵니다. 여기서 Transfer Size 탭을 보면 파일 사이즈가 적혀있는것은 서버에서 직접 받아온 정보이고 (memory) 사이즈가 적혀있는것은 이미 캐싱된 자료라는 의미입니다. (클라이언트 브라우저의 데이터 이용)

퍼블리셔나 개발자는 이 페이지에서 각자의 클라이언트에서의 네트워크 부하/성능을 테스트를 진행합니다. 단 이 인스펙터는 브라우저, 컴퓨터상태에 따라서 신뢰할 수 없는 정보를 보여주기도 합니다. 그래서 좀 더 범용적인 테스터를 사용하는 경우도 많은데 그 중 괜찮다고 생각하는 구글의 PageSpeed Insights 도 알아보겠습니다.

윗 링크를 타고 검사를 하고싶은 페이지 url 정보를 입력하면 해당 페이지에 대해 데스크탑/모바일 봇이 페이지에 대한 속도/성능 측정을 해준후 아래와 같이 레포트를 제공합니다.

상단 탭에서 모바일/데스크탑 환경을 나누어 레포트를 확인할 수 있으며 여러 기준에 따른 데이터를 정리해 점수 체계로 보여줍니다. 레포트를 보면 사용자가 홈페이지에 접근했을 때 유의미한 정보를 얼마나 빨리보여주냐가 큰 점수의 비중을 차지합니다. 특히 모바일은 데스크탑보다 컴퓨팅파워가 낮다라는 가정하라서 점수 컷트라인이 빡빡합니다. 결국 모바일은 일부 리소스의 품질은 포기하고 고려하라는 의미가 크긴한것 같네요.

참고로 위의 사이트는 구글 봇이 접근하는 사이트이므로 인트라넷시스템이나 회원가입제 페이지는 테스트할 수 없습니다. 이용권한이 있는 페이지는 직접 인스펙터의 정보를 보고 클라이언트의 속도를 유추해 환경개선을 할 수 밖에 없는것 같네요.