Skip to content

검색엔진 최적화를 위한 길: 성능을 중점으로

hyodori edited this page Dec 16, 2022 · 3 revisions

검색엔진 최적화가 필요한 이유

image 우리팀의 서비스는 사용자들이 모의 면접을 쉽게 진행하게 하는 것이 가장 중요한 가치이다. 이에 모의면접을 많이 이끌어 내기 위해서는 검색 엔진에 노출 되는것이 필요하였다. 따라서 우리는 포탈 사이트에 검색하여 우리 서비스의 모집 글을 찾을 수 있게 하는 것을 목적으로 하였다.

최적화를 어떻게 할까?

image 구글에 의하면 SEO에 가장 중요한 요소중 하나가 페이지 성능이라고 한다. 사용자가 경험에 페이지 성능이 크게 영향을 미치기 때문이다. 페이지 성능은 Lighthouse 측정으로 계산된다. 따라서 우리는 Lighthouse 기반의 성능으로 우리 페이지 사이트를 최적화 시켜나갔다.

SSR vs CSR

페이지 렌더링은 크게 두가지로 나뉜다. 바로 SSR과 CSR방식이다. 어떤 방식을 사용하느냐에 따라 기술스택부터 구현 방식까지 크게 달라지기 때문에 우리는 구현 전에 분석을 진행할 필요가 있었다. 약 100개의 리스트를 렌더링하는 코드를 똑같이 구현한뒤 성능을 측정하였다.

SSR

image image

CSR

image image

결과

SSR방식이 CSR방식보다 lighthouse 스코어가 높음을 확인하였다. 또한 사용자에게 중요한 지표인 FP(First Paint)가 SSR에서 빨랐다. 이러한 원인으로는 두가지 이유로 분석했다. 첫번째는 서버 성능이 클라이언트 성능 보다 우수한것이다. 이로 인해 서버에서 html을 작성하는 작업이 클라이언트에서 html을 작성하는 작업보다 빠르다. 두번째는 SSR에서 이미 채워진 HTML으로 인하여 First Paint가 빨라지기 때문이다. 따라서 우리는 SSR방식으로 서비스를 구현하였다.

프로젝트에서 Lighthouse 개선하기

image image

프로젝트에서 Lighthouse를 개선하였다. 측정결과 예상보다 점수가 좋지 않았는데, 이는 LCP의 문제가 컸다. 계산기를 통해 확인해 보면 LCP를 개선하여 점수를 많이 올릴 수 있음을 확인했다. 문제 상황을 확인하기 위해 진단 탭을 보았는데, 폰트 로드동안 렌더링이 블락되는 것을 확인하였다. 이는 서비스에서 기본 폰트가 아닌 다른 폰트를 사용하는데, 이 폰트가 CSS에서 로드가 된다. 그러면 HTML파싱 이후 CSS파싱 시점에서 폰트를 로드하게 되는데 폰트를 로드하는 동안 렌더링이 블락되기 때문에 LCP가 길어지는 것이였다. 우리에게는 두가지 해결책이 있었다.

  1. Font-display : swap 이 옵션을 주면, 폰트가 로드되기 전에는 기본 폰트로 렌더링 하고 이후 폰트 업데이트에 따라 글꼴을 바꿔준다. 폰트가 업데이트 되면 글꼴이 바뀌기 때문에 화면도 미세하게 바뀌는 느낌을 받을 수 있다.

  2. <link rel="preload” /> head에 폰트를 미리 불러오는 옵션을 줄수 있다. 이 옵션을 사용하면 CSS파싱 과정에서 폰트를 요청하는 것이 아니라, html파싱 과정에서 빠르게 폰트를 요청할 수 있다.

1번의 방법의 경우 반짝거림이 발생하기 때문에 2번의 방법을 사용하였다.

개선결과

image image

LCP를 개선하여 점수를 크게 개선할 수 있었다. SSR과 CSR 방식도 중요하지만, SSR 안에서 어떤 방식으로 구현하는지 또한 중요함을 알 수 있었다.

최종결과

image

검색엔진에 4번째 페이지에 위치했다!!!

Clone this wiki locally