워드프레스의 사이트에서 사이트 건강에 CLS관련 에러가 표시되었는데요. 서치콘솔의 코어웹 바이탈 메뉴에서 확인이 가능합니다.
코어웹 바이탈
구글에서 사이트를 평가하는 페이지 스피드에서 사이트 상태를 확인할 수 있는데요.
이 고셍서 문제가 있다면 서치콘솔에서도 개선이 필요함이라고 나옵니다.
저의 경우 문제는 CLS 문제였는데요.
CLS란?
CLS (Cumulative Layout Shift) 문제는 웹사이트에서 페이지 로딩 중에 발생하는 레이아웃 변화가 사용자 경험에 부정적인 영향을 미치는 문제입니다. 기본적으로 문제가 발생하는 것은 초기에 로딩하는 파일이 많아서 인데요. 코드가 꼬여있거나, 불필요한 코드가 존재하는 케이스, 그리고 서버가 느릴 경우에도 발생하게 됩니다. 구글에 설명ㅁ에 따르면 예기치 않은 레이아웃 변경으로 인한 텍스트가 갑자기 움직이면 잘못된 링크 등을 오클릭할 수 있어서 문제가 된다고 합니다.
일단 먼저 워드프레스 설정 – 페이지당 보여줄 글의수를 통해서 처음에 로딩하는 페이지의 글 수를 3개로 줄여주었습니다.
이 역시 로딩하는게 줄어들어서 조금은 속도가 빨라지게 되는데요.
그리고 두번째로 하는 것은 가장 많은 속도를 차지하는 attachmet-full을 삭제해 주는 것입니다.
추가 CSS에서 해당 내용을 통해서 워드프레스 내 썸네일 중복 표시를 해결해 줍니다.
.attachment-full {
display:none;
}여기까지만 하더라도 생각보다 빨라지는데요. 추가로 광고가 너무 많이 뜨는 경우 이 것도 없애주면 빨라지는데요. 특히 사이드레일 광고의 경우 서버에 부하가 가더라구요.
저의 경우 사이드레일 광고로 클릭도 많지 않아서 해당 설정 역시 제거하였습니다.
여기까지 설정하고 이제 다시 페이지 테스트를 해보니 기존보다는 좋은 점수가 나왔는데요.
나머지 방법은 어떻게 해야할지 조금 더 고민해봐야겠습니다. 혹시 동일한 문제를 겪으셨다가 해결하신 방법이 있다면 댓글로 알려주세요.
그럼 즐거운 하루보내세요.