2월 21일 카페24 서버를 등록했으니 워드프레스 사이트를 운영한지 1달 하고도 2주가 지났습니다. 그런데 아직 애드센스 승인을 받지 못했네요. 사이트가 다운되었거나 사용할 수 없음 정책 위반 메일을 3번 연속 받았는데 나는 접속하는데 이상이 없어서 별 문제 아닐꺼라 생각하고 그냥 재 승인 신청을 했는데 이제 더이상 사이트 검토를 요청할 수 없다는 메일을 받았습니다.
애스센스 커뮤니티 도움
사태의 심각성을 인지 하고 본격적으로 문제점을 찾아보고 있습니다. 가장 먼저 애드센스 고객센터 커뮤니티에 글을 올렸는데 고맙게도 답글이 달려서 많은 도움이 되었습니다.
내가 내 사이트에 접속할때에는 이미지나 기타 파일들이 캐쉬로 저장되어 있어서 바로바로 로딩이 잘 되어서 빠르게 접속 된다고 생각했는데 처음 접속하는 사용자의 경우에는 아주 느리게 접속 되는것 같습니다. 답변 주신분께서는 아주 느리게 접속이 된다고 힌트를 주셔서 사이트 속도를 개선하는 방향으로 수정하고 있습니다.
Lighthouse 도움말 페이지
https://developer.chrome.com/docs/lighthouse/overview?hl=ko
기타 참고 사이트
https://developer.chrome.com/docs/devtools/network?hl=ko#throttle
사실 애드센스 검수를 사람이 하는게 아니라 봇이 한다면 접속 속도가 기준 이하로 연결 된다면 사이트가 다운되었거나 사용할 수 없다고 판단 할 수도 있다는 생각이 드네요. 그동안 인터넷 검색을 해보니 이런 이유로 애드센스 심사에서 반려된 사용자가 많기에 저도 그냥 안일하게 계속 신청했던 실수를 범한것 같습니다.
사이트 속도 측정 방법
이제 내 사이트 접속 속도가 문제가 있다는걸 알았으니 얼마나 느린지 확인해보기 위해서 객관적인 속도 및 성능 체크 사이트를 알아 보았습니다.
https://pagespeed.web.dev/
가장 신뢰도가 높아 보이는 사이트 입니다. 구글에서 만든 사이트로 이 사이트로 테스트 해보면 될 것 같습니다.
개선 전에 이 사이트로 테스트를 하기 위해서 URL 을 입력했는데 사이트가 접속되지 않는다고 메시지가 뜨네요. 진짜 너무 느려서 그런 결과가 나온건지는 잘 모르겠지만 여러번 시도하니 속도 측정이 됩니다. 처음 측정 결과는 캡쳐하지 못해서 이미지가 없는데 점수가 높지는 않았습니다.
홈화면 개선
속도가 빠르다는 GeneratePress 테마를 사용하고 있는데 홈화면에 워드프레스 꾸미기 도구 아이콘들을 넣기 위해서 header 파일을 수정을 했습니다. 현재 11개의 도구들이 있는데 각 도구들에 아이콘을 붙였는데 이 아이콘 이미지 사이즈가 너무 큰 이미지를 사용한것 같습니다. 아이콘 11개 이미지를 처음부터 불러오느라 속도 저하가 발생했다는 생각에 이미지를 최소 이미지로 줄이고 webp 형식으로 바꿨습니다.
그리고 Grid 레이아웃을 사용하기 위해서 Bootstrap 를 불러서 사용했는데 이것도 css 만 사용하면 될것을 js 까지 불러서 사용하느라 속도 저하가 발생 했더라구요. 그래서 js 는 제거하고 css 도 grid 에 해당하는 css 만 불러오는걸로 수정 했습니다.
그리고 Converter for Media 플러그인을 설치해서 이미지를 WebP 로 사용하도록 수정 했습니다. 이건 얼마나 효과가 있을지 모르겠네요. 일단 설치 해 보았습니다.
크롬 개발자 도구에서 보니 wp-block-library 관련 css 가 로드되는걸 확인하고 이것도 홈화면에서는 불러오지 않도록 아래 코드를 function.php 에 추가 하였습니다.
function db_dequeue_block_styles_on_home(){
if (is_home()) {
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
}
}
add_action( 'wp_enqueue_scripts', 'db_dequeue_block_styles_on_home', 100 );
개선 후 성능 점수 확인
이정도 개선을 진행 하고 다시 점수를 확인해 보니 점수가 많이 향상 되었습니다. 다만 모바일에서는 아직 83점이네요. 좀 더 개선해야 할 사항이 많은가 보네요. 일단 오늘은 이정도로 만족하고 앞으로 계속 수정 하면서 점수를 높여갈 예정 입니다. 점수가 높아지는 개선사항이 나오면 이 글에 추가해서 계속 작성하도록 하겠습니다.
100점 완성
드디어 성능, 접근성, 권장사항, 검색엔진 최적화 부분에서 100점을 달성 했습니다. 데스크톱 부분도 ALL 100점을 달성 했습니다. 보통 데스크톱 부분 점수가 휴대전화 점수보다 높게 나오는것 같습니다.
점수 향상을 위한 노력
여러가지 시도를 통해서 점수를 향상 시켰습니다. 가장 주요했던 사항은 Bootstrap css 와 js 를 최적화 한 부분인것 같습니다. 그리고 사용하지 않은 js 와 css 를 제거하고 이미지 크기 줄이기, webP 포맷 사용등을 통해서 개선이 많이 되었습니다.
접근성 부분에서 메뉴 중 색상 대비가 부족한 부분을 일단 구글 가이드라인에 맞추어서 색상을 변경 했습니다. 사실 원래 색상이 더 마음에 들었는데 일단 점수를 높이는데 초점을 맞추어서 색상을 변경 했습니다. 나중에 애드센스 통과 후에 다시 변경 할 지에 대해서 고려해 보아야 겠습니다.
그런데 한가지 중요한 문제가 해결되지 않았습니다. 구글 애드센스와 애널리틱스를 위한 코드를 넣었더니 성능과 권장사항 부분의 점수가 낮아지는 현상이 있어서 이것도 마저 뺐더니 점수가 향상됨을 알 수 있었습니다. 이건 어쩔 수 없는 부분이라고 생각이 드네요. 특히 아직 애드센스 승인을 받기 전이라 아마 애드센스 js 가 뭔가 더 부하를 발생시키는것 같기도 하구요.
일단 이정도면 애드센스 심사에서 사이트가 다운되었다는 피드백은 받지 않을꺼라 기대하면서 다음 신청일까지 기도하는 마음으로 기다려야겠습니다.