수학방

검색엔진 최적화 (SEO) 두 번째 입니다. 첫번째에서는 메타 태그 사용에 관한 내용이었다면 이번에는 사이트의 속도를 빠르게 하여 검색엔진 최적화를 하는 방법입니다.

페이지가 열리는 시간은 검색엔진 최적화를 위해서만이 아니라 사용자들을 위해서도 꼭 필요한 내용입니다. 페이지 열리는 시간은 해당 사이트와 만나는 첫인상이라고 할 수 있으니까요.

또, 페이지가 열리기 전에 나가버리면 이탈률에도 상당히 영향을 미치고요. 이래 저래 사이트 운영에 있어서 중요한 요소가 바로 페이지 로딩 속도지요.

검색엔진 최적화 - 사이트 속도를 빠르게

이번 글 역시 검색엔진 최적화를 측정할 수 있는 SEOCert에서 수학방 블로그를 측정한 결과에 나오는 내용들을 발번역한 겁니다.

Loading Time

사이트 속도는 중요한 요소입니다. 속도가 늦은 것은 사용자들의 큰 불만사항 중 하나입니다. 로딩 시간이 너무 길면 서버나 네트워크, 코드, 구조를 살펴볼 필요가 있습니다.

• 1초 미만의 시간이 이상적이고, 사이트를 여는데 5초가 넘으면 사용자들과 검색엔진은 인내심이 다할 겁니다.
• 크기를 작게 하고 서버 응답을 더 빠르게 함으로써 웹사이트를 최적화하여 SEO를 향상시키세요.

이 내용이 중요하지 않다고 생각하는 사람은 없을 겁니다. 그 방법이 중요하겠죠. 블로그를 처음 시작할 때는 여러 가지 위젯도 넣어보고, 꾸미기도 했지만 이제는 그냥 필요한 것들만 남기고 다 지웠어요. 속도가 빠른 것이 보기에도 쾌적하더라고요.

page size

페이지의 크기는 웹사이트의 속력에 영향을 줍니다.

• 페이지 크기를 30kb ~ 150kb 사이로 유지하세요.
• 분리된 별도의 파일에 javascript와 style sheet를 넣고, 메인 페이지로 링크시키세요.
• 웹에 최적화된 이미지를 사용하고 다운로드을 할 때 gzip으로 다운로드 하도록 서버를 설정하세요.

너무 많은 이미지를 사용하거나 불필요한 스크립트 파일을 넣는 건 피해야 합니다.

그리고 많은 티스토리 블로거들이 블로그의 속도를 빠르게 하기위해서 gzip으로 압축하는 코드를 skin.html에 넣는데, 단순히 skin.html에 넣는다고 적용되는 건 아닙니다. 사용자가 할 수 있는 부분이 아니거든요. 그리고 그 코드를 넣지 않아도 되는데, 티스토리 자체적으로 gzip으로 압축하도록 설정되어 있어요. 측정사이트에서 측정을 해보면 해당 코드를 넣었을 때와 넣지 않았을 때 모두 gzip으로 압축되어 있다고 나옵니다.

script

스크립트들을 메인 페이지와 같은 파일에 넣는 것보다는 하나로 합쳐서 외부파일로 링크시키세요.

• in-page-scripts 사용을 줄이고, 별도의 분리된 파일로 만들어서 링크시키세요.
• 외부 스크립트 파일의 수를 줄이는 것은 브라우저가 서버로 부터 http 요청 수를 줄이는데 도움을 줄 것입니다.
• 스크립트 파일을 최적화하고 압축하면 크기를 줄이고, 로딩을 빠르게 할 수 있습니다.

이 내용은 script뿐 아니라 css에도 똑같이 적용되는 내용이에요. 하지만 티스토리에는 기본적으로 너무 많은 외부 스크립트 파일과 css 파일이 있어서 사용자가 할 수 있는 부분이 별로 없습니다.

그렇다고 그냥 내버려 둬서는 안돼요. 사용자가 직접 추가하는 script나 css에는 꼭 적용하세요. 블로그 로딩속도를 빠르게 - CSSTidy와 블로그 로딩 속도 빠르게 하기 - javascript 압축에 자세히 설명되어 있습니다.

함께 보면 좋은 글

검색엔진 최적화(SEO) 1 - meta 태그, title, keywords, description
검색엔진 최적화(SEO) 3 - 도메인, 텍스트 편
검색엔진 최적화, SEO를 위한 meta, title, desciption, keywords 사용법
블로그 로딩속도를 빠르게 - 이미지 용량 줄이기
블로그 로딩속도를 빠르게 - CSS Tidy
블로그 로딩 속도 빠르게 하기 - javascript 압축
블로그 속도 측정 - Google PageSpeed Insights

블로그 페이지가 늦게 열리면 방문자가 보지도 않고 나가는 경우가 있으니까 블로그 로딩 속도는 블로거에게는 아주 중요한 항목 중의 하나에요.

내 블로그가 어느 정도로 빨리 열리는 지를 알아보고 싶을 때 사용할 수 있는 사이트인 Google PageSpeed Insights를 소개합니다. 측정을 하면 문제점을 알려주고, 개선할 수 있는 여러가지 방법들도 알려줍니다.

매번 글을 올릴때마다 해야하는 것도 있지만 스킨에서 한 번만 수정해놓으면 되는 것들이 대다수니까 꼭 적용해보시기 바래요.

Google PageSpeed Insights

구글에서 제공하는 속도 측정 사이트 Google PageSpeed Insights 입니다. 일반적으로 웹페이지 속도 측정 사이트라고 하면 로딩 시간을 측정해서 10초, 20초 이렇게 보여주는데요. 이곳은 시간을 측정하는 것이 아니라 속도를 빠르게하는 기술이 적용되어 있는 지를 측정해서 점수로 환산해주는 사이트에요.

Google PageSpeed Insights

일단 사이트에 접속한 다음 블로그 주소를 입력하세요.

"ANALYZE"버튼을 누르면 몇 초 후에 결과를 보여줘요. 

제일 윗줄에 100점 만점으로 환산한 점수를 보여주고, 아래에는 속도를 빠르게할 수 있는 방법들을 알려줍니다. 저는 83점 나왔네요.

왼쪽메뉴에서 해당 항목을 클릭하면 자세한 설명이 나와요.

자바스크립트 파싱 지연은 블로그를 로딩할 때, 자바스크립트를 로딩하는 동안 다른 것들을 불러드리는 걸 멈추기때문에 페이지가 보여지는 속도가 느려지는 걸 말해요. 꼭 필요한 경우가 아니라면 자바스크립트의 위치를 페이지 하단으로 옮겨서 페이지가 다 보이고 난 다음에 자바스크립트 파일을 불러올 수 있게 바꿔주면 됩니다.

CSS 파일은 html 소스에서 head에 넣고 javascript는 </body>위에 넣으면 어느 정도는 해결됩니다.

CSS 스프라이트로 이미지 통합은 이미지를 개별 파일로 하나씩 사용하는 것이 아니라 하나로 합쳐서 사용하는 건데요. css에 대해서 어느 정도 알고 있어야 사용할 수 있어요.

자바스크립트 축소, CSS 축소, HTML 축소는 줄바꿈이나 빈 칸 등으로 생기는 소스의 공백을 없애서 용량을 줄이는 겁니다.

조정된 이미지 제공은 원래 이미지의 크기가 100x100인데, 웹페이지에서는 50x50으로 보이게 하는 것처럼 이미지의 원래 크기가 아닌 다른 크기로 보이게 하는 걸 말해요. 웹페이지에서 원래 크기인 100x100으로 보여지게 하거나 아예 이미지 자체를 50x50으로 크기를 바꿔서 올리서 해결해야 합니다.

또 이미지 최적화는 화질은 그대로 두고, 용량만 줄여서 업로드 하는 것으로 이미지의 주소를 클릭하면 용량을 줄인 이미지를 다운 받을 수 있어요.

블로거가 할 수 없는 것도 있어요. 티스토리에서 자동으로 불러오는 js, css는 수정하거나 위치를 조절할 수 없으니까요. 애드센스도 빼버리면 상관없는데 이걸 포기하는 건 좀 어렵지요. 위젯이나 페이스북 플러그인 같은 것도 바꿀 수 없지요.

블로그가 할 수 있는 걸 다 한다면 70점 후반에서 80점 초반의 점수가 나오는 것 같네요. 이것 저것 다 떼버려도 90점은 안 넘더라고요.

가능하면 웹페이지를 빨리 보여주는 것이 더 많은 방문자를 모으는데도 효과적이고, 이왕 온 방문자에게 좀 더 좋은 모습을 보여줄 수 있는 방법이니까 꼭 적용해보세요.

함께 보면 좋은 글

애드센스 최적화 배치 도움되는 곳
애드센스 수익 향상 팁 - A/B 테스트
애드센스를 본문 상단 오른쪽에 넣기
본문 검색창 설치로 블로그 페이지뷰 늘리기
이탈률, 반송률, 종료율이란? 이탈률 낮추는 방법