블로그 방문수 감소 이유 분석
5월 초 일일 방문수가 거의 1,000 까지 갔다가, 최근 반으로 뚝 떨어져버렸습니다.
잠시 그런 줄 알았는데 다시 올라가지 않아서 속상...
이대로 있을 수는 없겠다 싶어서, 갑자기 감소한 이유를 분석해봤어요.
1. 애드센스
5/8, 신청 3주만에 애드센스를 승인받았습니다.
승인받고 엄청 기뻤는데 그쯤부터 방문수가 떨어지기 시작했습니다.
처음에는 사람들이 광고때문에 나가는 건가 싶었어요. 사실 저도 광고 뜨는게 보기 싫긴 하니까..
그래서 일단 사이드 레일이랑 멀티플렉스 광고 빼버리고, 상단에 광고 영역을 몇개 제외했습니다.
2. SEO 문제 (feat. CLS)
패션 위주로 포스팅하다보니 이미지를 많이 쓰는 편입니다.
얼마 전 SEO 최적화하는 방법을 찾아보다가 speed insight에서 검사해보니 이미지 용량이 너무 크다길래, 최근에는 TinyPNG로 압축해서 올리고 있습니다. (이미지 용량 70% 가량 줄일 수 있음)
그런데 애드센스 들어가니까 제가 봐도 너무 버벅거리더라구요. 게다가, 광고가 이상한 위치에 들어간다거나 게시물을 가리는 문제도 발생했습니다. 생각해보니 광고는 동적인데다가 사진보다 더 용량이 크잖아요?
뭐가 이유를 알아야 해결할 수 있으니, 일단 Google Search Console이랑 PageSpeed Insights에서 상태를 확인해봤습니다.
구글서치콘솔 - 코어 웹 바이탈에서 확인해보니, 모바일은 괜찮은데 데스크톱에서 CLS 문제: 0.1 초과가 발견되었습니다.
5/8부터 문제가 되는 URL이 증가해서, 현재 153건.. 거의 다 문제라고 봐야됩니다.
PageSpeed Insights에서 보면 더 자세히 나오는데, CLS가 0.26이네요.
구글에서는 CLS를 아래와 같이 설명하고 있습니다.
쉽게 말해서 레이아웃 이동에 관한 점수인데, CLS가 0.1 이하여야 사용하는데 문제가 없다고 합니다.
CLS(Cumulative Layout Shift)
CLS는 페이지의 전체 수명 동안 발생하는 모든 예기치 않은 레이아웃 이동에 대해 가장 큰 레이아웃 이동 점수 버스트를 뜻합니다.
레이아웃 이동은 시각적 요소가 렌더링된 프레임에서 다음 프레임으로 위치를 변경할 때마다 발생합니다.
좋은 CLS 점수
우수한 사용자 경험을 제공하려면 사이트의 CLS 점수가 0.1 이하여야 합니다. 대부분의 사용자에 대해 이 목표를 달성할 수 있도록 하려면 모바일 및 데스크톱 기기 전반에 분할된 페이지 로드의 75번째 백분위수를 측정하는 것이 바람직한 임계값입니다.
CLS 문제가 발생하는 이유는 5가지 정도인데, 일단 이미지랑 광고의 크기가 정해지지 않으면 문제가 된다는 건 알아들었습니다.
다른 건 무슨 말인지 모르겠어요.
열악한 CLS 값이 발생하는 이유
- 크기가 정해지지 않은 이미지
- 크기가 정해지지 않은 광고, 임베드 및 iframe
- 동적으로 주입된 콘텐츠
- FOIT/FOUT을 유발하는 웹 글꼴
- DOM을 업데이트하기 전에 네트워크 응답을 대기하는 작업
CLS를 개선하는 방법
- 이미지 및 비디오 요소에 항상 크기 속성을 포함하거나 CSS 가로 세로 비율 상자와 같은 방식으로 필요한 공간을 미리 확보하세요. 이러한 접근 방식을 사용하면 이미지가 로드되는 동안 브라우저가 문서에 올바른 양의 공간을 할당할 수 있습니다. unsized-media 기능 정책을 사용하여 기능 정책을 지원하는 브라우저에서 이 동작을 강제할 수도 있습니다.
- 사용자 상호 작용에 대한 응답을 제외하고는 기존 콘텐츠 위에 콘텐츠를 삽입하지 마세요. 이렇게 하면 레이아웃 이동이 발생하기 때문입니다.
- 레이아웃 변경을 트리거하는 속성의 애니메이션보다 전환 애니메이션을 사용하세요. 상태에서 상태로 컨텍스트와 연속성을 제공하는 방식으로 애니메이션 전환을 수행하는 것이 좋습니다.
일단 하나 하나 수정해봅니다.
1) 광고 사이즈 지정
티스토리 관리홈 - 수익 - 애드센스관리에 들어가서, 광고를 반응형에서 사이즈 지정으로 바꿨어요.
2) 제목 배경 이미지 제거
오디세이 스킨은 기본적으로 제목에 배경 이미지가 들어가는데, 이게 용량을 잡아먹는다고 해서 없애버렸어요.
이미지 들어간 게 예쁘긴 한데, 없애니까 뭔가 심심.. 그래도 뭐 어쩔 수 없죠.
[방법은 아래 시크릿노트님 블로그 참조]
티스토리 오디세이 스킨 제목 배경 제거 방법
티스토리 오디세이 스킨 제목 배경 제거 방법 많은 분들이 궁금해하실 것 같아서 가져왔습니다. 저는 개인적으로 티스토리의 기본 스킨인 오디세이에서 다른 건 다 마음에 드는데 유일하게 제
tistory-secret-note.tistory.com
3) 이미지 사이즈
이게 가장 중요한 것 같은데, 어떻게 하라는 건지 아무리 봐도 모르겠어서 패스
아시는 분 계시면 저 좀 가르쳐 주실래요? ㅠㅠ
4) 오프스크린 이미지 지연
lazy load라고 순서대로 이미지를 불러오는 방법이 있다길래, 일단 이것도 적용해봤습니다.
근데 도움이 되는건지는 잘 모르겠습니다.
계속 안되면 이미지를 webp 나 avif로 변환해야하나 싶어요.
호환성이 별로라는데 괜찮을까.
3. 컨텐츠 문제
제 블로그에서 가장 유입이 많은 건 종이달 관련 컨텐츠입니다.
한창 방영 중일 땐 유입이 증가했는데, 종영하면서 블로그 방문수도 급감하더라구요. 또르르....
물론 다른 드라마 패션도 리뷰하고 있지만, 이건 경쟁력이 없나봐요.
드라마 패션은 시기에 영향을 많이 받는터라, 스테디한 아이템을 찾아야겠다는 생각이 듭니다.
4. 기타
얼마 전 리캡차(reCAPTCHA) 문제를 올렸었는데, 이것도 5월 초에 시작됐어요.
다행히 일주일 뒤 사라지긴 했지만 이것도 영향이 있었나 싶네요. (이젠 그냥 다 문제같아 보임)
그리고, 블로그 주소를 숫자에서 문자로 바꾼 것도 크게 작용했습니다.
문자로 바꾸고 나서 제목을 몇 번 수정했는데, 뭐가 잘못된건지 페이지를 찾을 수 없다고 뜨더라구요.
결국 문제가 생긴 페이지는 구글서치콘솔에서 url을 삭제하고 현재 버전으로 다시 색인 요청했습니다.
문자로 하는게 SEO에 좋다길래 바꾼건데, 중간에 바꾸니 귀찮은 일이 생기네요.
이렇게 방문수 감소 문제를 분석해봤는데요.
뭐 이건 IT를 모르니 뭐가 문제인지, 어떻게 해결해야하는지 모르겠어서 난감합니다.
님들은 다 어떻게 하고 계신가요..? 저만 이렇게 힘든건가요ㅠㅠ