워드프레스 테마를 원래 사용하던 Resonar에서 Creatio2로 변경했다. Resnonar템플릿의 데스크탑 화면이 CLS 이슈를 발생시켰기 때문.

구글 서치 콘솔과 CLS 이슈

몇년 전에 블로그를 워드프레스닷컴으로 옮기면서 별도 SEO를 안 했는데, 며칠 전 갑자기 생각 나서 구글 서치 콘솔에 이 사이트를 등록했다. 구글은 사이트의 core web vitals라는, UX에 영향을 미치는 지표들을 계산해서 검색에 활용하는데, 이 지표 계산에서 내 블로그의 데스크탑 화면에 문제가 있다는 진단을 받았다.진단명은 CLS ^{Cumulative Layout Shift} 이슈. 화면이 뜰 때 한 번에 팍 뜨는 게 아니라 글자들 위치가 변하기 때문에 사용자에게 나쁜 경험을 준다는 의미. 모바일 화면에서는 문제가 없는데 데스크탑 화면에만 문제가 있었다. 대충 살펴보니 데스크탑 화면 상단에 크게 노출되는 Featured Image 때문인 걸로 추정됐으나 이걸 수정할 수가 없었다.

그래서 내 선택은 테마를 바꾸는 것. 내 워드프레스닷컴 요금제에서 무료로 사용할 수 있는 테마들을 여러 개 살펴보고 이 블로그에 어울리는 Creatio2로 변경했다.

Creatio2 테마

컴퓨터에서 Creatio2 테마로 변경 작업을 할 때만 해도 몰랐는데 폰으로 접속을 하니 안 보이던 문제가 발견됐다. 예전 글들의 사진이 자동으로 리사이즈 되지 않고 문서 폭보다 넓게 표시되는 것. 이 문제를 해결하기 위해 다양한 검색을 해봤으나 해결할 방법을 찾지 못했다. 워드프레스를 사용하기 전 티스토리, 무버블타입 사용할 때 작성한 글에 포함된 이미지, 플리커로 삽입했던 이미지 등등이 문제가 되는 것 같다. 지금 생각해보면 원래 쓰던 Resonar 테마에서는 이 문제가 발생하지 않은 것이 신기하다. 기껏 설정을 다 마쳤는데 다시 테마를 변경하기는 너무 귀찮아서 틈 날 때마다 문제가 되는 이미지들의 html 코드를 일일이 수작업으로 바꿔주는 걸로…