웹페이지 속도 최적화

속도 최적화 왜 필요한가?

akamai.com 과 Gomez 에서 다음과 같은 통계를 발표했습니다.

• 웹 사용자의 절반은 웹 사이트가 2초 이내에 로딩될 것으로 예상합니다.
• 페이지 로드 시간이 1초 지연되면 방문자 만족도가 16%감소할 수 있으며 전환율도 7%이상 떨어질 수 있습니다.
• 로드 시간은 페이지 폐기에 주요한 기여 요인이며, 로드 시간의 1초마다 삭제 비율이 증가하며, 사용자의 40%가 3초 후 페이지를 포기합니다.
• 모바일 인터넷 사용자의 73%가 기기에서 페이지 로드 시간에 문제가 있었다고 보고합니다.

배포를 할 때 웹페이지 속도 최적화 문제는 매우 중요합니다. 특히 모바일 환경이 늘어나면서 안정적인 연결상황이 아닌 경우도 종종 발생하기 때문에 속도에 신경쓸 수 밖에 없습니다. 제가 개인적으로 속도에 있어서 테스트/고려하는 부분을 살펴보겠습니다.

리소스 압축 여부

JS파일과 CSS파일을 작성하다보면 줄맞춤 때문에 빈 여백을 많이 생성하게 됩니다. 이런 빈 여백을 축소시키는 방식을 이용한다면, 보다 적은 용량으로 같은 효과를 낼 수 있습니다. 또한 웹상에서 데이터를 주고 받을 때 gzip이라는 방식을 이용하여 압축하여 데이터를 주고 받으면 웹사이트 로드 속도를 빠르게 만들 수 있습니다. 구글에서 제공하는 PageSpeed 도구를 이용하면 쉽게 어떤 파일이 최적화되지 않았는지 확인할 수 있습니다

이미지 크기 최적화 여부

HTML 문서에 이미지를 나타내다 보면, 작은 아이콘 수준의 이미지를 로드하는데 큰 용량의 이미지를 불러오게 되는 상황이 종종 발생합니다. 업로드한 이미지 크기 그대로 사용하게 되는 경우인데요, 이런 경우 페이지 로드 속도가 느리다고 사용자가 느낄 수 밖에 없습니다. 저는 이미지 스토리지 서비스를 이용해서 이런 귀찮은 작업 (이미지 크기를 축소해서 로드하는 것)을 간편하게 하고 있습니다. 마찬가지로 구글에서 제공하는 PageSpeed 도구를 이용하면 쉽게 어떤 파일이 최적화되지 않았는지 확인할 수 있습니다

캐싱

일반적으로 웹사이트를 사용하다 보면 필연적으로 같은 페이지를 다시 보게되는 경우가 발생하게 됩니다. 이럴 때 캐싱을 이용하면 효과적으로 페이지 로드 속도를 높일 수 있습니다. HTML 캐싱 / JS캐싱 / CSS 캐싱을 적극적으로 활용하기를 바랍니다.