IT

구글 SEO, 티스토리 댓글 프로필 이미지를 뺀 이유

블로그한경닷컴은 티스토리에서 무료로 제공하는 북클럽 스킨을 사용한다. 수년 동안 #1 스킨을 고집해 오다가 이 스킨으로 넘어 온 지 한 달이 채 안됐다. 계속해서 조금씩 커스터마이징을 하면서 최적화를 진행하고 있다. 블로그 스킨을 조금 손을 보다가 몇 가지 테스트를 거쳐 과감하게 댓글 영역에서 프로필 이미지를 제거했다. 텍스트만 있으면 다소 밋밋한 영역이라 이미지가 있으면 훨신 시각적인 효과가 좋을 텐데라는 아쉬움도 남는 것이 사실이지만 프로필 이미지 제거를 아주 잘 했다는 판단이 든다.

댓글 영역에 프로필 이미지를 빼버린 이유

구글은 게속적으로 빠른 인터넷을 추구한다. 그래서 웹페이지 로딩 시간도 SEO에 중요한 영항을 미친다. 우리나라 환경만 생각해서는 안된다. 우리나라야 20년도 훨씬 전브터 인터넷이 보급되기 시작해 초고속 인터넷이 보편화 됐다. 우니나라 같이 작은 규모에 인프라 구축은 유럽이나 미주 같이 대륙을 국가들보다 유리할 수 밖에 없다. 여전히 세계 인터넷망 속도는 느리다. 이 속도를 끓어 올리는 건 막대한 비용이 든다. 그래서 구글은 웹사이트 최적화를 빠른인터넷의 해결책으로 꼽았다. 자체 서버 플랫폼 OS(Openlitespeed, OLS)를 공가한 이유도 같은 이유다.

 

페이지 로딩 시간을 줄이려면 불필요한 파일의 로딩을 줄이거나 중복 파일을 없애야한다. 또 과도하게 용량이 큰 이미지의 사용도 줄여야한다. 실제로 구글에서 이미지 용랑을 줄이는데 앞장서고 있다. 새로운 이미지 포멧을 공개하거나 앞축율이 높은 차세대 이미지 사용을 적극 권장하고 있다. 특히, 사이트에 고정적으로 노출되는 이미지의 해상도나 압축률을 높여서 사용하도록 권장하고 있다. 이를테면, 로고, 티스토리에서는 프로필 이미지가 그 대표적이다. 콘텐츠에 지장을 주지 않은 요소들을 가급적 최소화해 불필요한 데이터 사용을 줄여 로딩 속도를 향상시키는 게 SEO에서도 우위를 차지한다.

 

이에 착안해서 블로그한경닷컴도 몸집을 줄이기에 힘쓰고 있다. 최근 스킨을 변경하면서 썸네일도 작은 걸로 변경하고 스크립크나 css, html는 코드를 압축했다. 프로필 이미지의 사이즈도 줄이고 압축률을 높인 이미지를 사용하고 있다. 디자인 요소로 글자 몇 자 때믄에 불필요하게 웹폰트를 불러와 데이터를 소모하는 부분을 과감히 버렸다. 바로 블로그 타이틀 부분이다. 같은 취지로 폰트 설정도 모바일이나 윈도우 맥에 내장된 폰트로 변경했다. 아직도 몸집을 더 줄여야 한다. 다른 북클럽 스킨을 사용하는 블로그와 로딩 속도를 비교했을 때, 훨씬 쾌적하게 로딩 되는 경험을 제공하기 위해서 계속해서 진행중이다.

 

댓글 영역 프로필 이미지 삭제

최근 또 작업한 부분이 바로 댓글 영역에 프로필 이미지다. 이 부분은 각 에디터들(티스토리 이용자들, 블로거)이 지정한 프로필 이미지가 로드 되기 때문에 리사이즈나 파일 압축에 손을 쓰기 어렵다. 그래서 원본이 그대로 로딩이 된다. 얼마전, 블로그 내 한 포스트를 로딩을 할 때 가끔 지연, 먹통 되는 현상을 확인했다. 그래서 원인을 들여다 봤더니 전체 페이지 데이터를 합친거보다 이미지 용량이 더 큰게 로딩이 되고 있었다. 이 이미지 하나가 페이지 로드를 지연시키고 있었다. 실제로 페이지에 노출 되는 사이즈는 손톱만 한데, 원본 이미지가 로드 되는 바람에 그 로딩시간을 기다리는라 지연된거였다. 어떤 블로거의 프로필 이미지가 리사이즈가 안되고 원본 그대로 업로드해 그대로 로드가 된 것이 원인이었다. 빠르게 페이지가 뜨는 걸 원하기에, 댓글 영역에 프로필 이미지는 콘텐츠에 전혀 영향을 주지 않기에 과감히 빼기로 결정했다. 데스크탑에서는 큰 차이가 안났지만 모바일에서는 은근히 영향이 크다. 국내 이용자들도 모두다 무제한을 사용하고 있지 않는 현실을 생각해보면 크다.

 

이 일환으로 앞으로 스크립트의 빈 공간을 줄여 바이트를 줄여주는, 이른비 스크립트 압축을 해주는 곳을 몇 곳 소개하는 포스팅을 이어서 할 예정이다.

Related Posts

사이트 주소에 WWW 포함 여부, 현대 웹사이트 주소의 트렌드와 선택 기준

사이트 주소에 WWW 포함 여부, 현대 웹사이트 주소의 트렌드와 선택 기준

웹사이트 도메인 주소에 “WWW”를 포함시키거나 포함시키지 않는 결정은 사용자 경험과 웹사이트 운영 측면에서 고려될 수 있는 전략이다. 최근의 트렌드는 기술적 중요성보다는 사용자의 편의성과 브랜드의 식별성을 중시하는 방향으로 나아가고…

SKT 다이렉트 플랜 요금제 결합할인 유의사항

SKT 다이렉트 플랜 요금제 결합할인 유의사항

통신비 부담을 줄이고 싶은데, 데이터 사용량은 줄이고 싶다. “SKT 통신비 다이어트, T 다이렉트 플랜”이 바로 그 해답을 제시한다. 조금만 잘 찾아보면 데이터 사용은 그대로 유지하면서 통신비는 줄일 수…

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

선택약정할인제도 선택약정할인제도는 단말 지원금을 받지 않는 고객에게 요금 할인 혜택을 제공하는 제도이다. 이 제도는 지급 단말, 중고 단말, 신규 단말 이용 고객 모두에게 적용되며, 요금 상품 선택과 12/24개월의…

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

취업, 이직 준비나 정부 지원금 신청 할 때, 문서 작업시 대부분 이름과 서명란이 있다. 매번 느끼지만 디지털과 아날로그의 경계에 있는 듯한 느낌이다. 서명란에 싸인이나 도장을 삽입하는 과정은 간단해…

GitHub 콘솔 git add, git commit, git push 명령어 정리

GitHub 콘솔(명령줄 인터페이스)에서 커밋하는 방법은 여러 단계로 구성된다. 여기서는 Git을 사용하여 변경사항을 커밋하고 GitHub 저장소에 푸시하는 기본적인 절차를 안내한다. 이 과정을 시작하기 전에, 로컬 컴퓨터에 Git이 설치되어 있어야…

알리익스프레스 Windows Hello 내돈내산 웹카메라 구매 후기 및 설치 드라이버

알리익스프레스 Windows Hello 카메라 내돈내산 후기 및 드라이버

필자가 가지고 있는 랩탑 레노버 씽크패드 P14S에서는 Windows Hello 기능이 지문과 얼굴인식으로 되어 전원을 켜거나 브라우저에서 로그인할 때, PIN번호를 누르지 않아도 지문 또는 얼굴인식으로 간단히 해결 할 수…

This Post Has 5 Comments

  1. 광고를 여러 개 달고 있으면
    느려지겠죠? 하나라도 빼야 되나 싶네요.
    새 에디터에서 바로 사진 올릴때 첫째줄의
    사진 클릭하고 올리면 둘째줄의 파일 클릭하고
    올리는것 보다 용량 작게 올라가는게 맞는지
    궁금합니다. 줄인 사이즈대로 올라간다고 누가
    그래서요..

    1. 본문 삽입 이미지는 괜찮아요 ㅎ 리사리즈 돼서 나옵니다. 본문에 넣는건 크게 신경 안쓰셔도 됩니다.

  2. 앞으로도 좋은 정보 부탁드립니다!
    티스토리 하는 입장에서는 정말 모르는 것들이 너무 많아서 어렵더라구요 ㅠㅠ

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다