티스토리 블로그를 운영한 지 6개월 차에 접어듭니다. 다른 설치형 블로그에 비해 유난히 블로그가 무겁게 느껴집니다. 구독형 블로그의 대표 격인 네이버 블로그보다 무겁게 느껴지는 것은 당연하고요. 사용 경험으로 미루어 짐작하건대 서버나 회선이 네이버보다 좋은 것 같지는 않습니다. 각종 페이지 로딩 속도를 테스트해 보아도 답답하기는 마찬가지입니다.
메인 페이지 및 페이지 이동 로딩 속도 개선
1. 차세대 형식의 이미지 사용
일단 가장 많이 사용하는 pagespeed.web.dev/analysis를 통해 테스트해 본 결과 초기 서버 응답시간이 1초가 넘습니다. 티스토리 서버환경이 어쩔 수 없나 봅니다. 그리고, 사용하지 않는 자바스크립트도 열어봤더니 대부분이 구글 애드센스 관련입니다. 이건 뭐 수익형 블로그 운영을 위해 감수하는 부분입니다. 렌더링 차단 리소스 제거 부분은 제가 아직 모르는 영역이라 패스합니다.
이제 남아있는 차세대 형식을 사용해 이미지 제공하기 부분을 확인합니다. 대부분 웹상에서 지금까지는 jpg 포맷이나 png 포맷, gif 포맷 이미지를 사용해 왔습니다. 차세대 형식의 이미지라는 표현이 좀 낯설기도 합니다. 일전에 한 번 포스팅한 적이 있는데 web picture 형식이라고 해서 확장자가 webp 포맷입니다. 다양한 유료 프로그램이 있지만, 블로그 하자고 프로그램을 구입할 수는 없는 노릇입니다. 배보다 배꼽이 커지면 안 되잖아요.
https://convertio.co/kr/jpg-webp/
무료로 변환이 가능한 사이트를 알려드립니다. 위 링크를 복사해서 주소창에 붙여 넣기 해서 들어가 보세요. 기왕이면 즐겨찾기 해 두시면 사용하기 편할 것 같습니다.
무제한은 아니고 하루에 변환할 수 있는 파일의 개수가 정해져 있으니 요령껏 조절해서 사용하세요.
2. 대표 이미지 사용
이건 사실 꼼수에 해당합니다. 검색 사용자가 특정 페이지에 이동 후 게시물을 열람할 때 위에서부터 차례로 읽어 내려갑니다. 그렇다면 상단에 첨부한 이미지는 가급적 용량이 적은 이미지를 첨부하면 페이지 로딩이 자연스러울 것 같습니다. 저의 경우에는 게시물 맨 상단에 첨부하는 이미지는 습관처럼 가로 345px 크기로 줄입니다. 어차피 모바일에서는 이 정도만 해도 충분한 크기입니다.
또한, 처음 첨부한 이미지를 대표 이미지로 선택합니다. 그러면 당연히 게시물 리스트나 포털의 검색창에서 보이는 대표 이미지는 적은 용량의 이미지이기 때문에 시간을 지체하지 않고 바로 뜨게 되겠지요.
3. 이미지 크기 줄이기
나머지 이미지들도 특별한 경우가 아니면 가로 740px로 줄입니다. 사진 관련 블로그나 보여줄 이미지의 해상도가 중요한 경우를 제외하면 대부분의 블로그는 내용을 직관적으로 보충 설명하기 위한 이미지라고 생각됩니다. 그래서 이미지가 커야 할 필요는 없다고 느껴집니다. 혹시 정말 필요하다면 이미지 첨부가 아니라 파일 첨부 방식으로 하는 편이 낫습니다. 가령 원본 사진을 내 컴퓨터가 아닌 웹에 보관한다고 할 때 이미지를 첨부할 것이 아니라 파일을 첨부하면 손실 없이 저장이 가능하니까요. 당연히 페이지 로딩에는 영향이 없겠네요.
전반적인 page speed와 cls(Cumulative Layout Shift) 속도 개선을 위해 다양한 방법을 고민 중에 있습니다. 오늘은 손쉽게 할 수 있는 이미지 변환과 대표 이미지 선택에 대해 정리해 보았습니다. 여러분의 블로그가 높은 점수를 받아서 검색 상위에 잘 반영되면 좋겠습니다. 지치지 마세요. 함께 가면 길이됩니다. 날마다 메리 크리스마스 ~
댓글