모바일 최적화를 위해서 알아둬야할 것들 – 202211

2022년 10월 20일 구글에서 코어 업데이트를 하고 모바일 최적화에 대한 악영향으로 순위가 하락하는 경우가 생겼었습니다. 구글은 모바일 최적화로 인한 순위하락은 직접적 영향은 아니지만, 간접적 영향을 받는다고 말합니다.

저도 거의 1달이라는 시간을 들여서 이 문제에 대한 부분을 파악해보았지만, 답이 없었고, 결국에는 구글 서치콘솔에서 문제가 되는 요소들을 하나씩 해결을 하였을 때 조금의 실마리가 보였습니다.

모든것을 알려줄 수는 없지만, 그래도 문제를 일으키시는 분들은 조금이나마 힌트를 알수 있을 거라고 생각하네요.

결론적으로는 우리가 지금까지 알고있는 최적화의 개념을 뛰어넘어버리고 업데이트한 구글이라 생각하네요. ㅠㅠ

20221020 Google Update로 인한 순위 누락

Google: Rankings Drop After Mobile Usability Fail?

모바일 최적화를 위해서 알아둬야할 것들

워드프레스 그누보드 제로보드 사이트의 형태는 상관없습니다. 구글 서치콘솔은 이러한 것을 따지면서 평가를 하는것이 아니기에 사이트를 기본적으로 구성하는 요소들을 기준으로 보셔야합니다.

구글은 오래전부터 JS CSS 이미지 최적화를 중요시 했습니다. 그래서 SEO 최적화 프로그램들 중에 이런 JS CSS 이미지 관련 플로그인이 있었습니다.

불과 1달전만해서 지금까지 설정했던 부분들이 문제를 일으키지 않았지만, 지금은 다릅니다.

모바일 최적화가 되어 있다고 하여도, 실제 URL 테스트를 통해 내 PAGE의 문제를 얻을 수 있는 힌트가 있습니다.

모바일 최적화를 위해서 알아둬야할 것들

저는 이 실제 URL TEST를 하여 mobile usability test 즉 모바일 사용 편의성을 Check를 자주 하였습니다. 위에 실제 URL 테스트를 할 경우 아래와 같은 이미지가 나옵니다.

모바일 최적화를 위해서 알아둬야할 것들 스크린샷

왼쪽에 스크린샷에 이미지가 어떤분은 깨져서 나올 수도 있고, 저처럼 제대로 나올수도 있습니다.

위에는 제가 어느정도 서버와 CSS JS 최적화를 하였는데, 첫 로딩에서 가장 중요한 문제는 CSS 로딩을 잘해줘야 합니다.

모바일 최적화를 위해서 알아둬야할 것들 추가정보

이 문제를 찾기 위해서는 스크린샷 옆에 있는 추가정보를 확인해야합니다.

Advertisment

이게 무엇이 중요하냐??

전에는 색인을 하기 위해서 Googlebot이 들어와서 내 페이지를 일단 한번 긁어갑니다. (정보를 가지고 가고, 색인을 시킴)

그런데 이렇게 하기 위해서는 구글도 서버 용량이 많이 소비가 되는데 이 소비하는 자원의 양이 줄어든 것 같다라는 생각이 듭니다.

왜냐??? 10월 20일 후로 설정은 변한것은 없지 이 리소스를 제대로 읽지 못했거등요.

모바일 최적화 통과 못할 때 메세지
22년 10월 24일 체크하였을 때 문제

그래서 사이트 SEO 최적화에 대한 부분을 1달간 체크를 하였을 때, 구글의 모바일 사용 편의성을 통과하기 위해서는 CSS JS 로딩을 빠르게 읽혀줘야합니다.

하지만 JS 같은 경우 애드센스를 사용하시는 분들은 몇가지 문제가 걸릴 것입니다. 그렇다면 페이지 로딩을 위해서는 CSS를 가장 빠르게 로딩을 먼저 시켜줘야합니다.

이 부분은 정형화해서 이것을 이렇게 수정하세요라고 말은 못하겠네요. 어떤 플로그인 어떤 형태의 사이트냐에 따라 조치 방법이 다 틀려지기 때문입니다.

그래도 조치를 하기 위해서는 아래의 순서로 확인을 해보세요.

모바일 최적화를 위해 가장 먼저 봐야할 것들

CSS 최적화

WP Rocket과 같은 플로그인을 사용했거나 수작업으로 압축 합병 인라인을 시켰다면 일단은 다 풀고 하나씩 원인을 찾아보시기 바랍니다. 이론적으로는 압축, 합병, 인라인이 사이트를 가속화 시켜주지만 캐싱과 맞물리다보면 충돌이 일어날수가 있습니다.

Advertisment

물론 저 3가지를 하였을 때 사이트가 깨지는지도 확인하셔야 하고요.

JS 최적화

CSS와 마찬가지로 JS 역시 비슷한 방법으로 원인을 찾아야 합니다. 사이트마다 원인은 다양하기에 하나하나 찾아보셔야합니다.

CACHE 확인

가장 애먹었던 부분입니다. 캐시가 중요해지면서 적용이 많이 되어 있는 것이 캐시입니다. 하지만 이러한 캐시를 너무 많이 사용하면, 오히려 악영향을 끼칠 수 있습니다. 그래서 백앤드 ,프론트앤드를 나누어서 시간을 두면서 TEST를 해보시는 것이 좋습니다.

알게모르게 가장 문제가 되는 부분이 이 캐시 부분이라고 생각하네요.


문제가 되는 요소는 대부분 속도를 빠르게 하려하였던 요소에서 문제가 일어나므로 이 부분을 가장먼저 확인하시는 것이 좋습니다.

그리고 이미지를 크게 사용하시는 분들은 반드시 이미지 최적화하는 부분을 찾으셔서 하시는 것을 권장드립니다. 과거나 지금이나 사이트 로딩의 가장 큰 피해를 주는 것은 이미지죠.

도움이 되시길 바랍니다.

SEO 최적화
Advertisment

사이트맵으로 글 찾기

링크쥬스