웹 사이트 성능 최적화 기법 Website Performance Optimization

이번 강좌에서는 웹사이트 성능 최적화 기법에 대해서 알아보도록 하겠습니다. 기본적으로 웹사이트 성능 최적화란 웹사이트 접속 속도를 최적화하여 최대한 로드율을 빠르게함을 의미합니다.

이번 Udacity의 강좌는 부가강좌의 스타일을 띄고 있지만 왠일인지 한글자막이 달려있어서 편하게 학습한것같습니다. 누군진 모르지만 자막달아주신분에게 감사드립니다.

웹사이트를 최적화하기위해서는 먼저 내가 만든 웹사이트의 접속 속도를 채크해보는것이 가장 1순위가 될것입니다. 구글의 PageSpeed Insights를 통하여 웹사이트를 분석툴을 제공합니다. 정확하지는 않지만 기본적으로 점수를 확인할수 있으므로 내 웹사이트가 대략적으로 어느정도의 웹사이트 성능에 최적화되어있는지 시각적으로 확인이 가능합니다.

Google PageSpeed Insights 접속

자신이 만든 웹사이트 링크를 입력하면 위와같은 창이뜨면서 웹사이트를 분석하기 시작합니다. 개인적으로는 이런 분석툴들이 어떤 원리로 웹사이트들을 분석하는지 매우 궁금합니다만 알길이 없네요.

제 블로그는 위와같은 안좋은 점수를 받았습니다. 이번에 바꾼 스킨이 생각보다 로드율이 느린가봅니다. 일반적으로 한국인터넷 환경에서는 이러한 상태에서도 워낙 월등한 인터넷 속도 덕분에 속도차이를 그렇게 크게 느낄수없지만 해외로 나가보면 인터넷 속도로 인해서 확실히 웹 사이트 성능 최적화의 중요성을 깨닫게되는것같습니다. 

제 블로그의 경우 어떤 부분에서 문제가 발생하고 있나 확인을 해보았더니 글꼴 부분에서 로드 시간이 증가하여 발생하는 문제인것같습니다. 현재 사용중인 스킨에서는 나눔고딕 글꼴을 사용중인데 이 글꼴을 온라인으로 로드후 제 글에 다시 씌우려하다보니 발생할 문제같은데 지금 시점에서는 딱히 수정방안도 알수 없고 현재 속도도 만족하므로 나중에 수정해볼까합니다. 또한 이 강의를 모두 수강한후에 더 나은 웹사이트 성능 최적화 기법을 알수있을지도 모르구요.

Udacity 강좌에서는 위와 같은 Quiz를 종종 출제하곤합니다. 이번 주제가 웹 사이트 성능 최적화이다보니 본인의 목적을 기입하라고 뜨네요. 이런 답변들이 Udacity 강좌진들에게 전달되는지는 잘 모르겠습니다만 보통 이런류의 Quiz들은 그냥 의견이나 생각을 묻는것이 많은것 같습니다.

다음페이지로 넘어가니 조금 어이 없는 상황이 발생합니다. 새로운 프로젝트가 갑작스럽게 등장하네요.

프로젝트가 크게 두개로 나뉩니다. 다만 둘다 최적화 시켜서 Google PageSpeed에서 90점 이상이 나오게하는것이 목표입니다. 여기서 저는 조금 많이 당황스러웠습니다. 이유로는 정형화된 프로젝트 처럼 일단 답을 제출하는 곳이 없고 단지 Google PageSpeed에서 점수로 자가진단하는것이 다이기 때문입니다.

더욱더 당황스러웠던 점은 Optimization Tips and Tricks 란인데요. 파트별로 나누어서 소개하고있습니다. 리스트는 아래와 같습니다.

• Optimizing Performance
• Analyzing the Critical Rendering Path
• Optimizing the Critical Rendering Path
• Avoiding Rendering Blocking CSS
• Optimizing JavaScript
• Measuring with Navigation Timing. We didn't cover the Navigation Timing API in the first two lessons but it's an incredibly useful tool for automated page profiling. I highly recommend reading.
• The fewer the downloads, the better
• Reduce the size of text
• Optimize images
• HTTP caching

한글로 번역해보자면 아래와 같은 내용들을 포함하고 있습니다.

• 성능 최적화하기
• 중요 렌더링 경로 분석
• 중요 렌더링 경로 최적화
• 렌더링 차단 CSS 피하기
• 자바 스크립트 최적화
• 내비게이션 타이밍으로 측정. 처음 2 회의 레슨에서는 Navigation Timing API를 다루지 않았지만 자동화 된 페이지 프로파일 링을위한 매우 유용한 도구입니다.
• 다운로드 횟수가 적을수록 좋습니다.
• 텍스트 크기 줄이기
• 이미지 최적화
• HTTP 캐싱

위의 리스트들에 차례대로 링크가 걸려있습니다. 각각의 링크를 선택하여보면 구글 개발자 센터에서 제공되는 질좋은 자료들이 오픈됩니다. 다만 제가 당황스러웠던 부분은 물론 이러한 링크들이 매우 유용한 링크임은 맞지만 적어도 출제한 과제 부분에 대해서는 채점이나 코드 리뷰를 제공하여야한다고 생각합니다.

그저 과제목표가 Profile, optimize, measure... and then lather, rinse, and repeat. Good luck! 라고 되어있는데 굉장히 애매모호하지 않을수가 없네요. 두번째 과제의 경우에는 Udacity에서 만든 Pizza.html 파일을 최적화하는 내용인데 아무리 Instruction Note를 읽어보아도 감이 오질않더군요. 

배경에 있는 피자들이 보이시는지요? 스크롤할때마다 피자들이 좌우로 움직이는 애니메이션이 추가되어있습니다. 여기서의 목표는 프레임이 60FPS 미만으로 보이는데 코드를 개선하여 60FPS로 변환하는것입니다. 일단 이후에도 강좌가 줄줄히 많습니다. 진행해보면서 꾸준히 개발자 문서들을 읽어보아야할듯 합니다.