티스토리 블로그 모바일 최적화 방법(구글 SEO 진단결과)

 

지난 시간에 내가 운영하는 블로그가 구글 검색 노출을 위해 진단할 수 있는 평가사이트에 대해 알아보았습니다.

 

구글 SEO 활용하여 블로그 조회수 높이기(SEO 점수 체크 사이트)

 

검색결과, 해당 블로그는 모바일에 최적화가 필요하다는 결과를 받아, 오늘은 이와 관련하여 평가에서 제안한 사항들로 어떻게 개선해 나가면 좋을지 체크해 보는 시간을 가져보고자 합니다.

 

 

 

목차

 

 

구글 모바일 성능 높이기

 

PageSpeed Insights 페이지를 통해 진단 중 '성능'에 해당하는 부분이 매우 낮은 점수를 받았습니다. 해서 이를 위해 개선사항들을 짚어보며 수정해야 하는데, 제 블로그의 경우 개선해야 할 점들이 너무나도 많았습니다.

 

 

'복리라이프' 티스토리 블로그의 PageSpeed Insights 모바일 성능 결과로, 개선되어야 할 사항들이 전체대비 약 2/3 이상을 차지합니다.

 

 

1. 모바일 자동 연결 해제

 

최근에는 모바일 사용자가 PC 사용자 대비 많아지면서 모바일 최적화에 신경을 써야 합니다. 티스토리를 포함하여 블로그 운영하면서 모바일에서 로딩속도 0.1초 개선은 사용자가 웹페이지에서 특정 행동(체류시간증가, 광고 및 링크 클릭 등)할 확률을 무려 8.4%나 높여준다고 합니다. 

 

이를 위해 티스토리 블로그 관리탭에서 [꾸미기] - [모바일] 탭으로 이동 후 티스토리가 모바일 자동연결을 '사용하지 않습니다'로 변경합니다.

 

 

 

위의 설명대로라면 최적화를 위해 '모바일 자동연결을 활성화해야 성능에 개선되는 것 아닌가?'라고 생각하실 수 있습니다. 하지만, 티스토리는 블로그 접속 후 첫 화면(메인페이지)으로 이동 시 대표 프로필 이미지가 매우 크게 확대되어 나오는데, 여기의 이미지 크기 및 용량에 속도 영향을 받을 수 있기 때문에 자동연결 사용을 해제하는 것이 좋습니다.

 

또한, 자동연결 사용 시, 모바일 도메인(/m) 사이트맵 주소가 별도 추가되면서 구글에서 콘텐츠 중복으로 인식되어 최적화에 부정적인 영향을 줍니다.

 

이와 관련하여 프로필 대표 이미지 용량이 모바일 최적화에 영향을 줄 수 있어서, 블로그 본문에 들어가는 이미지 포함하여 대표 프로필 이미지 용량 줄이기를 통해 줄여서 사용해 줍시다.

 

 

 

2. 이미지 파일 확장자 변경

 

블로그 운영하면서 이미지 크기가 속도에 영향을 받기 때문에 높은 화질의 PNG 보다 JPG 파일로 사용하면 좋다고 알고 계실 겁니다. 최근에는 JPG보다는 웹피(WebP)라는 확장자파일로 사용할 것을 권장하는데, 이는 손실/비손실 압축 이미지 파일을 위한 이미지 포맷으로 기존의 이미지 확장자 파일 대비 몇 가지 장점들을 갖추고 있습니다.

 

• SEO 개선 : WebP 사용 시, PC와 모바일 페이지에서 UI/UX 및 검색엔진(SEO)에 긍정적인 영향을 주어 웹사이트 점수를 높이는 데 도움이 됩니다.
• 브라우저 호환성 : 웹이미지 전용 확장자 파일인 만큼, 구글 크롬(Google Chrome)이나 마이크로소프트 에지(Microsoft Edge) 등 웹 브라우저와의 호환성이 높습니다.
• 압축률 : WebP를 사용하는 가장 큰 장점으로 이미지 품질이 같을 때 WebP의 파일 크기가 다른 포맷에 비해 용량이 훨씬 작기 때문에 랜딩 페이지 속도에 영향을 줍니다.
• 고품질 이미지 : 위의 압축률에서 설명한 것에 이어, WebP 파일은 고화질인 PNG 파일 대비 약 20~80% 까지의 압축률을 자랑하지만, 압축되었다고 해서 품질은 떨어지지 않아 고화질 이미지로 사용이 가능합니다.

 

그러므로 블로그 본문에 이미지 사용 시 jpg 보다 Webp 이미지로 변환하여 사용하시기 바랍니다. 단, 프로필 이미지의 경우 WebP 이미지 사용은 불가하니 jpg로 사용해 주시기 바랍니다.

 

 

3. 사이드바 최소화

 

마지막으로 건드려 볼 사항으로는 블로그 내 사이드바 항목입니다. 사이드바 역시 티스토리 블로그 페이지 속도에 영향을 줄 수 있으므로 불필요한 메뉴는 빼주시면 됩니다.

 

사이드바 메뉴 변경은 블로그 관리페이지에서 [꾸미기] - [사이드바]에서 메뉴 추가 또는 삭제가 가능합니다.

 

 

오늘은 티스토리 블로그 운영하면서 모바일 최적화를 위해 시도해야 할 몇 가지 방법에 대해 소개해 드렸습니다. 저도 오늘은 기점으로 블로그 포스팅 시 이미지 최적화 등에 대해 신경 써서 작성을 시도해 보고 한 두 달 후에 구글 유입량 변화를 다시 체크해 보겠습니다.

 

 

같이 읽으면 도움 되는 글

 

구글 부계정 여러개 PC, 스마트폰에서 만드는 방법(feat. 전화번호 인증 없이)

 

 

구글 계정 해킹 방지 예방 방법(2단계 인증, 알 수 없는 소스 차단)