어떻게 해결할지 알려면, 문제를 제대로 아는것이 중요하겠죠

• 이전 글에서 , 구글 검색 랭킹 기준이 바뀌었다고 이야기 드린적이 있습니다. 그래서 SEO의 방법도 변화가 있다고 말씀드렸는데요.

• 로드성능, 상호작용, 페이지의 시각안정성에 주목해보세요

• 아래 세가지의 기준으로 웹사이트를 측정하고, 이에 따라 검색결과에 차등을 주는 방식입니다.

• https://letspl.me/quest/884

• - 로드성능(LCP -Largest Contentful Paint): 최대 콘텐츠 렌더링 시간

사용자가 URL을 요청한 시점부터 표시 영역에 가장 큰 시각 콘텐츠 요소를 렌더링하는 데 걸린 시간입니다.

가장 큰 요소는 일반적으로 이미지 또는 동영상이거나 큰 블록 수준의 텍스트 요소입니다.

• - 상호작용(INP- Interaction to Next Paint) : 다음 페인트까지의 상호작용

페이지에서 사용자의 페이지 방문 전체 생애 주기 동안 발생하는 모든 클릭, 탭,

키보드 상호작용에 반응하기까지 걸리는 시간을 관찰하여 사용자 상호작용에 대한 페이지의 전반적인 반응성을 평가하는 측정항목입니다.

• - 페이지의시각적안정성(CLS-Cumulative Layout Shift) : 누적 레이아웃 이동

CLS는 페이지의 전체 수명 동안 발생하는 모든 예상치 못한 레이아웃 변화의 모든 개별적인 레이아웃 변화 점수의 총 합계를 측정합니다.

점수는 0부터 시작하며 양수인 수입니다.

약자에다가 개념도 생소하니 좀 각각 확인할 필요가 있습니다.

먼저 출제자의 의도를 파악해봅시다. 아래는 구글에서 상세 링크로 걸어놓은 문서입니다.

이 문서를 이해하면서 , 어떻게 해결할지 파악하는 것이 좋겠죠.

(바이탈) https://web.dev/articles/vitals?hl=ko

(로드 성능) https://web.dev/articles/lcp?hl=ko

(상호작용) https://web.dev/articles/cls?hl=ko

(시각적 안정성) https://web.dev/articles/inp?hl=ko

- 로드성능(LCP -Largest Contentful Paint): 최대 콘텐츠 렌더링 시간

페이지내 가장 큰 요소를 의미한다고 합니다. 꼭 이미지는 아니며 단락이나 문장일 수도 있다고 하네요

이미지든, 텍스트든 블락으로 구성해서, 이것을 하나의 컨텐츠로 정의하는 것을 볼 수 있습니다.

예시를 보면, 로딩 시간이 지날 수록, 최대 크기의 콘텐츠가 시시각각 변경됩니다.

이는 처음 것이 나중에도 똑같이 유지될 수도 있고, 아닐 수도 있지만 , 사용자가 페이지에 들어왔을 때 로딩되는 구성요소를 확인해봐야합니다.

뭐가 됬든지 간에, 사용자가 들어왔을때 2.5초이내로로 가장 큰 컨텐츠가 로딩완료가 되어야 한다는 것을 의미합니다.

사실상 가장 큰 건 이미지나 비디오입니다.

• <img> 요소 (첫 번째 프레임 프레젠테이션 시간은 GIF, 애니메이션 PNG와 같은 애니메이션 콘텐츠에 사용됨)

• <svg> 요소 내의 <image> 요소

• <video> 요소 (포스터 이미지 로드 시간 또는 동영상의 첫 프레임 프레젠테이션 시간 사용 중 더 빠른 시간 적용)

• url() 함수를 사용하여 로드된 배경 이미지가 있는 요소(CSS 그라데이션과 반대)

• 텍스트 노드 또는 다른 인라인 수준 텍스트 요소 하위 요소를 포함하는 블록 수준 요소.

렛플의 퀘스트 글은 , 붉은색의 영역의 이미지와 글(텍스트) 이겠죠.

해결 방안은 다음과 같습니다.

• 1) 이미지를 최소화해야합니다. 사용자가 200kb/sec로 로딩한다고 하면, 2.5초내에 로딩을 해야하니 이미지당 500kb 바이트가 넘어가면 안되겠죠.

• 2) URL pre-fetch합니다. 사용자가 해당 URL을 클릭하기 전에, 미리 페이지를 로딩합니다.

• 3) 특정 URL에서 불러오는 이미지를 최적화를 해줍니다.

• 특히 외부에서 불러오는 이미지의 경우 모두 최적화는 힘들겠지만, S3나, 네이버, 카카오에서 불러오는 이미지들은 최적화 대상으로 삼아서 설정해줍니다.

• 4) 텍스트 단위를 잘게 쪼갭니다. 단락을 <div>등으로 잘게 쪼개서, 큰 덩어리로 생각되지 않도록 합니다.

• 5) 혹시 모르니, 페이지에서 한눈에 보이는 것들은 서버사이드렌더링으로 한꺼번에 불러오고, 연산이 오래걸리면 분리합니다.

• (연산이 비싼 SUM ,COUNT 등은 순차적 호출로 분리합니다)

저희는 next.js를 쓰고 있어서 URL에서 불러오는 이미지 최적화는 아래와 같이 적용해놨습니다.

const nextConfig = {
  images: {
    formats: ["image/avif", "image/webp"],
    remotePatterns: [
      {
        protocol: "https",
        hostname: "letspl.s3.ap-northeast-2.amazonaws.com",
        port: "",
        pathname: "/images",
      },
      {
        protocol: "https",
        hostname: "graph.facebook.com",
        port: "",
        pathname: "/",
      },
      {
        protocol: "https",
        hostname: "phinf.pstatic.net",
        port: "",
        pathname: "/",
      },
    ],
  },
....
}

• - 상호작용(INP- Interaction to Next Paint) : 다음 페인트까지의 상호작용

  저는 개인적으로 이게 무슨 말인가 가장 헷갈리더라구요.

• 내용을 보면, 유저가 뭔가 액션(클릭, 터치)를 했을 때 바로 그다음단계의 UX를 보여줘라라는 말입니다.

예를 들면 마우스 hover를 한다거나, 클릭을 했을 때

• 이와 관련한 UX가 바로 떠야 하는데, 이게 늦게 뜨면 사용자 경험이 좋지 않으니 , 검색점수를 하향 조정하겠다라는 뜻입니다.

사실 HTML의 이슈라기 보다는, 조금 더 성능의 이슈같기도 하구요.

저희가 같이 로그인 기반의 사이트의 경우, 로그인하지 않았을 경우 모두 회원가입 버튼을 띄우고 있기 때문에

개선할 사항이 많지는 않아 보입니다.

그러나 회원가입 필요없이 볼 수 있는 페이지들은 개선이 필요합니다.

예를 들면 아래 프로젝트화면의 퀘스트 메뉴의 경우, 총 139개의 데이터를 불러오게 되는데요.

예전에는 139개를 다 그리고나서 화면전환을 시켰는데

지금은 일단 화면 전환을 시키고, 139개를 불러오는 방식으로 구성을 변환했습니다.

이러면 사용자가 바로 반응이 있다고 체감이 되기 때문에, 좋은 점수로 전환될 수 있습니다.

• - 페이지의시각적안정성(CLS-Cumulative Layout Shift) : 누적 레이아웃 이동

이 내용은 조금 더 쉬운데요. 웹페이지에서 갑툭튀하지 말라는 말입니다.

사용자는 로딩이 다 완료되었다고 생각했는데, 갑자기 레이아웃을 바꾸면 , 낮은 점수를 주겠다는 의미입니다.

예를 든다면, 구글애드같은 경우, 갑자기 노출되는 경우들이 있죠.

이러면 구글애드가 노출되면서, 레이아웃이 하단에 밀리게 됩니다. 이러면 점수가 대폭 하락하게 됩니다.

갑툭튀 없애기

AI 진단결과의 경우, 나중에 추가된 기능이다보니까, 프로젝트를 로딩 후 , 다시 그리는 방식으로 진행했습니다.

다만 유저분들이 보시면, 로딩 다 된줄알았는데 뭔가 추가되었는데 라고 생각하실 수 있습니다.

이러면 점수가 하락합니다.

이런 경우에는

1) 한번에 그릴내용들은 로딩시 한번에 다 불러오거나,

2) 나중에 불러오신다면, 미리 빈칸으로 화면 내에 위치를 잡아놔야 합니다.

숫자애니메이션 주의

아래와 같이 숫자 애니메이션을 주는 경우에도 감점요인이 될 수 있습니다.

숫자가 바뀌면서 너비가 넓어지는데, 이러면 구글이 봤을때는 안정적이지 않게 됩니다.

그래서 이번에는 고정너비값을 줘서, 전체 레이아웃이 변하지 않도록 변경하였습니다.

폰트 미리(내부에서) 불러오기

CDN으로 불러오게 되면, 폰트 로딩 후에 , 글자크기나 형태가 바뀌면서 레이아웃에 영향을 줍니다.

이런 경우도 다 마이너스 요인입니다.

그러니 웹사이트 내부에 폰트를 저장해서, 외부에서 불러오지 않도록 구성하고,

처음부터 변하지 않는 글자체를 보여줄 필요가 있습니다.

import { Noto_Sans_KR } from 'next/font/google'

const notoSans = Noto_Sans_KR({
  subsets: ['latin'],
  display: 'swap',
  weight: ['100', '200', '300', '400', '500', '600'],
})

<style jsx global>{`
         
html {
  font-family: ${notoSans.style.fontFamily};
}
 `}</style>

그래서 결론은,

이번 개선을 통해서 PC기준으로 전체 웹사이트가 좋음으로 100% 변경되었습니다.

검색 순위에 반영되는건 시간이 걸릴 것 같네요. 다만 2024년 5월부터는 이전과 동일한 수준 혹은 더 많은 노출이 되지 않을까 기대하고 있습니다.