수학방

검색엔진 최적화 (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

블로그 로딩 속도를 빠르게하는 시리즈 세 번째입니다. 블로그 로딩속도를 빠르게 - CSS Tidy, 블로그 로딩 속도 빠르게 하기 - javascript 압축

앞서 했던 두 가지는 한 번만 해놓으면 계속 그 효과를 유지할 수 있는 데 반해, 이 글에서 소개할 사진 용량를 줄이는 방법은 매 이미지마다 해줘야하는 작업이라서 약간 귀찮을 수 있어요.

하지만 효과가 가장 두르러지게 나타나는 방법이기때문에 꼭 알고 있어야 합니다. 방법이 어려지 않으니 잘 보세요.

블로그 로딩속도를 빠르게

포스트를 쓸 때마다 모든 이미지에 사용하기 어렵다면 최소한 스킨에 사용하는 이미지만이라도 아래 방법을 적용해놓으세요. 확실한 효과가 나타날 겁니다.

이미지 용량 줄이기

이미지의 화질을 떨어뜨리지 않고, 용량을 줄일 수 있다면 그렇게 하는 게 좋겠죠? 용량이 작으면 아무래도 다운받는 속도가 줄어들테니까요.

이미지의 용량을 간단한 방법으로 줄일 수 있는 사이트가 있습니다.

Yahoo! Smush.it

사용법은 간단해요. 파일을 선택해서 업로드하기만 하면 끝이에요.

과정이 다 끝나면 얼마나 용량이 줄었는지 표로 결과를 보여주니까 확인할 수 있어요. 용량을 줄인 파일을 압축파일로 다운받아서 사용하세요.

사이트 말고 여러가지 용량을 줄여주는 프로그램들이 있는데, 대부분 commandline tool이라서 사용하기가 번거롭죠. 저는 사진 용량 줄이기라는 글에 있는 걸 사용하는데, 웹사이트에 접속하는 것보다는 편하네요.

이미지 크기 줄이기, 크기 지정하기

블로그 로딩 속도를 빠르게하는 두 번째는 사진의 크기를 줄이는 거예요. 내가 필요한 사진의 크기가 100x100이라면 실제 이 크기의 사진을 사용하는 거죠. 500x500짜리 사진을 가져다가 100x100으로 줄여서 보여준다면 낭비잖아요.

사진의 크기를 줄이는 건 알씨나 XnView같은 대부분의 사진 편집 프로그램에서 제공하는 기능이므로 생략할께요.

또 img 태그를 사용할 때 사진의 크기를 지정해주면 지정해주지 않는 것보다 속도가 더 빠르다고 하네요. 사진의 크기가 100x100이라면 html 소스에 아래처럼 적는 거지요.

<img src="./images/test.png" width="100" height="100" alt="테스트 이미지" />

사진 여러 개를 하나로 묶어서 사용하는 CSS Sprites도 로딩 속도를 빠르게 해주는데, 이건 좀 어려운 거라서 따로 글을 쓸께요.

요즘에는 인터넷 속도가 빠르니까 사진을 다운받는 건 금방일 수 있어요. 하지만 모바일 버전을 고려한다면 작은 용량이라도 줄여야 하죠. 용량 줄이는 효과를 가장 많이 볼 수 있는 곳이 이미지이므로 조금만 부지런하면 좀 더 나은 블로그를 만들 수 있을 거예요.

함께 보면 좋은 글

블로그 로딩속도를 빠르게 - CSS Tidy
블로그 로딩 속도 빠르게 하기 - javascript 압축
구글 페이지랭크 (Google PageRank) 알아보기
블로그 속도 측정 - Google PageSpeed Insights
애드센스 최적화 배치 도움되는 곳