최근 오픈 한 자사 사이트 보이스코드(https://voco.kr)가 검색엔진 노출에 문제가 있어 보였다. 이 사이트의 SEO(Search Engine Optimization) 측면에서 가장 큰 약점은 SPA(Single Page Application) 방식의 사이트라는 점이다.
처음에는 구글의 높은 기술을 믿고 SPA도 SEO 측면에서 잘 될 것이라 믿었다. 하지만, 검색 색인이 잘 되지 않는 것 같아 여러가지 정보를 수집해 보니 최초 로딩 속도가 문제가 있어 보였다.
SPA는 일반 웹사이트와 달리 메인 프로그램에서 JavaScript로 전체 사이트를 그리는 방식이라 프로그램 사이즈가 커지는 것은 어쩔 수 없다고 생각했다. 그러니 최초 로딩속도가 당연히 높을 것이고, 한번 로딩한 후에는 컴퓨터에 캐싱되어 그 다음부터는 크게 느리지 않으니 감수해야 할 리스크다고 생각했다.
그러나, 시간이 흘러도 검색엔진 색인이 만족스럽지 않아 다시 사이트를 살펴 보기로 했다.
Lighthouse를 통한 웹페이지 품질 측정
크롬 브라우저에는 웹페이지의 품질을 측정할 수 있는 Lighthouse라는 Application이 있다. 과거에는 구글의 최적화 테스트 사이트를 주로 이용했지만, 크롬 브라우저에 개발자 도구에 기본 내장된 이 애플리케이션을 이용하는 것이 훨씬 간편하고 품질도 우수하다.
Lighthouse는 웹페이지의 성능, 접근성, 검색엔진최적화, 권장사항, PWA등 다양한 검사를 한번에 해준다. 당연히 점수가 높을수록 사이트 품질이 좋다는 의미다.
자사의 보이스코드를 이 사이트로 품질 테스트 해 보니 완전 처참한 결과가 나왔다. 다른 부분 보다는 성능점수가 50점대로 심각성을 드러냈다.
성능을 저하시키는 리포트를 살펴보니 가장 큰 문제는 최초 콘텐츠가 화면에 드로잉 되는 시점이 3초를 넘어버리는 것이었다.
그 원인은 사용한 미디어(동영상, 이미지 등)와 메인 프로그램(JavaScript)의 용량, 다량의 기타 JavaScript들의 로딩 등이었다.
최적화를 위한 개선점
이 사이트를 만들 때 가장 큰 숙제는 일정에 맞추는 것이었다. 급하게 프로그램 하다보니 이미지 사이즈나 다른 최적화에는 눈 돌릴 세가 없었던 것이다. 이 문제는 모든 프로그래머들이 안고 있는 슬픈 현실이다. 어쨌든 지금 숙제는 검색엔진 색인에 최대한 노출되는 것이기에 무슨 수를 쓰더라도 사이트를 컴펙트하게 최적화하기로 했다.
참고로 검색엔진도 타임아웃이 있다. 최초 로딩이 오래 걸리면 타임아웃되어 색인을 포기하거나, 색인 되더라도 저품질 사이트로 낙인찍혀 검색결과 뒷쪽에 처 박아 두는 편이다.
아래는 최적화를 진행 내역이다.
mp4 동영상을 webm으로 변경
백그라운드에서 플레이 되는 동영상을 webm으로 변경하니 놀라운 압축성능이 나왔다. 약 10배는 줄어든 것 같다.
<video preload="auto" autoplay loop muted playsinline>
<source src="/images/main_background.webm" type="video/webm" />
<source src="/images/main_background.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>webm은 mp4에 비해 압축 성능이 뛰어나지만 단점은 일부 웹브라우저에서 지원하지 않는다는 것이다. 그래서 위처럼 mp4를 추가로 넣었고, 대부분의 브라우저에서는 webm이 노출되도록 하였다.
이미지 최적화
이미지가 커도 크게 문제되지 않을 것 같았지만, 큰 이미지를 다수 사용하다 보니 이 또한 품질을 저하시키고 있었다. 그래서 아래와 같이 조절 했다.
- 적당한 사이즈로 이미지 크기 조절
- (png, jpg) => ‘webp’ 로 포맷 변경
webp는 최신 브라우저에서는 모두 지원하는 포맷이라 안심하고 변경했다. 이 역시도 5배 이상의 용량 최적화를 할 수 있었다.
동적 Import 사용
보이스코드의 프론트앤드 프로그램은 Vue.Js로 만들어졌다. 사이트를 만들 때는 무턱대고 정적 import를 사용해 컴포넌트를 가져왔는데, 그러다 보니 메인 프로그램의 용량이 상당히 증가했다. 이를 해결하기 위해서는 동적 import를 사용하는 것이다.
정적 import는 최종 build 단계에서 프로그램을 하나로 합치게 되는데, 동적 import를 사용하면 프로그램 파일 단위를 나누고 필요할 때 당겨 쓴다. 둘 다 장단점은 있지만, 사이트 규모가 커지면 동적 import를 사용하는 것이 로딩시간을 줄이는 데 더 적합한 방법이다.
기타 최적화
사이트에서 사용 되는 모든 자바스크립트, CSS를 base html에서 미리 불러왔는데, 이를 필요한 곳에서만 불러오도록 조정했다. 그리고 지금 잘 기억은 안나지만 이것 저것 최적화를 시도했다. 그리고, PWA(Progressive Web Apps)도 추가했다. PWA는 웹앱을 데스크탑, 모바일 등에서 좀 더 독립적인 애플리케이션으로 사용할 수 있도록 지원하는 기능이다.
최적화 결과
최적화에 꼬박 하루를 투자했다. Lighthouse로 품질측정을 해보니 꽤 준수한 결과가 나왔다.
보이스코드 웹 품질테스트
앞선 측정에서 성능점수가 50점대였던 것에 비해 비약적인 발전을 거뒀다. 홈페이지에 동영상까지 들어간 것 치고는 모든 면에서 좋은 점수가 나왔다.
이 점수가 어느 정도 수준인가 비교해 보기 위해, 네이버, 다음, 구글 쇼핑도 측정해봤다.
네이버 첫 화면 품질테스트
다음 첫 화면 품질테스트
구글 쇼핑 품질테스트
다른 사이트와 비교해도 높은 점수가 나왔다. 물론 사이트마다 담고 있는 콘텐츠의 양과 복잡성이 달라 절대적 비교는 힘들겠지만 그래도 빵빵한 서버와 뛰어난 기술자를 보유한 유명 사이트에 비해 좋은 점수가 나왔다는게 기뻤다.
그리고, 신경을 쓰면 어떤 사이트 든 개선 할 수 있다는 점을 확인했다. 첫 드로잉이 시작되는 시점이 3초대였지만, 개선을 통해 0.8초로 낮출 수 있었고, 모든 분야에서 95점 이상의 점수가 나왔으니 만족스럽다.
이제 사이트 품질 점수를 높이기 위한 개선 포인트를 알게 된 것도 너무 기쁘다.
