웹 페이지의 무게를 줄이는 10가지 빠르고 간단한 방법

지금 블로그에 게시하는 글의 원본은 사이트포인트닷컴의 해당 기사에 있습니다.

원본 클릭 

2013년에 웹 페이지의 크기는 32퍼센트나 증가했다고 합니다. 거의 모든 사이트의 무게(페이지의 크기) 가 증가한 것인데요. 사실 이렇게 사이트의 무게가 커지면 커질 수록 사용자들과 전체 인터넷에는 악영향을 끼치게 됩니다. 사이트의 무게가 증가함에 따라 전체적인 인터넷의 속도가 느려지게 되고, 사용자들 또한 인터넷이 느려짐에 따라 일 처리를 하거나, 영화를 보거나, 기타 인터넷과 관련된 모든 행위 자체에 영향을 미칠 수 밖에 없습니다. 

요즘은 모바일 인터넷 사용자 수 또한 많은데요, 인터넷 사이트의 무게가 커지면 커질 수록 모바일 인터넷 사용자들은 느린 로딩 시간과 트래픽 양이 많아짐에 따른 요즘 증가 등 이런 폐단들이 발생하게 됩니다.

개발자의 입장에서도 사이트의 무게가 커지게 되면 많은 코드를 사용하게 되고, 그에 따른 업데이트와 유지 보수 시간이 늘어나게 되는 것입니다. 이제 간단하고 빠른 방법으로 인터넷 사이트이 무게를 줄일 수 있는 10가지 방법을 소개합니다.

1. GZIP 압축을 사용하자.

W3Techs.com 에 의하면 거의 절반이 넘는 사이트 들이 압축 옵션을 사용하지 않는다고 합니다. 서버의 GZIP 압축만으로도 아주 좋은 효과를 발생한다고 하니, 웹 호스팅 회사 또는 서버 관리자에게 이런 사항을 요구해 보시기 바랍니다.

2. 브라우저 캐시를 장려하자.

브라우저는 캐시 기능이 있습니다. 즉 브라우저를 이용해서 사이트를 접속했는데, 동일한 이미지가 있는 경우에는, 두번 다시 해당 이미지를 다운로드 할 필요가 없습니다. 서버의 HTTP 헤더 부분에 이미지 부분에 대해서 10일 또는 한달 정도로 동일한 이미지를 다운로드 받지 않게 세팅을 한다면, 인터넷이 훨씬 빨라질 것입니다. 

3. 콘텐츠 전송 네트워크(CDN)를 사용하자.

CDN을 사용하게 되면 웹 서버의 부담을 엄청나게 줄일 수 있습니다. 특히 동영상이나, 파일 다운로드 등 여러가지 웹 사이트에서 사용되는 요소들 중 가장 크기가 많이 나가는 부분은 CDN을 이용하여 분산 가능합니다.

단 중형급 웹 사이트가 않을 경우 CDN 비용이 더 많이 발생할 수도 있습니다.

4. 사용하지 않는 자산(Asset)을 제거

더 이상 웹 사이트에 사용되지 않는 이미지, CSS, 자바스크립트 파일들을 제거해 주는 것도 웹 사이트를 가볍게 만드는데 도움이 됩니다.

이런 쓸데없는 자산들을 제거하는 도구로는  Chrome’s Audit Developer Tool, JSLint, Dust-Me Selectors, CSS Usage, unused-css.com 등이 있습니다.

5. CSS크기를 작게 

CSS 파일인 경우 사이트 초기에는 고려할 요소들이 많기 때문에 개발자가 알 수 있게 작성하는 것이 중요하지만, 사이트가 안정화가 되기 시작하면 몇몇 요소들은 거의 수정할 핋요가 없습니다. 이런 경우 해당 코드를 최소화 하는 작업을 통해 코드의 크기를 줄일 수 있습니다.

직접 에디터를 이용해서 작업을 할 수도 있지만, 온라인 CSS의 minifier -   cssminifier.com , CSS 압축기 및 Minifier 또는 CSS 압축기를 사용하여 처리할 수 있습니다.

또한 여러개의 CSS 파일들은 윈도우에서는 "copy  file1.css + file2.css file.css" 명령을 이용해서 

맥이나 리눅스에서는 "cat file1.css file2.css > file.css" 를 이용해서 처리할 수 있습니다. 이 명령들은 윈도우에서는 cmd.exe 를 통해서 맥은 터미널을 이용해서 처리해야 합니다.

6.자바 스크립트의 크기를 작게 처리

자바스크립트의 크기를 작게 하는다는 의미는 자바스크립트 또한 압축할 수 있기 때문에  더 이상 수정할 일이 없는 자바스크립트 인 경우 최소화 작업을 통해 1KB라도 더 작게 만들 수 있습니다.

7. 올바른 이미지 형식을 사용하자

잘못된 이미지 형식을 사용함으로써 웹 사이트가 쓸데 없이 커질 수 있습니다. 일반적으로 웹 사이트에서 사진이미지는 JPG 포맷을 사용합니다. 그리고 사진을 제외한 아이콘이나 사이트 로고등은 PNG 파일 또는 GIF 파일을 사용해야 합니다.

8. 큰 이미지를 크기 조정

일반적으로 웹 디자인 시 웹 사이트이 폭은 1024px를 넘지 않습니다. 따라서 웹 사이트에 사용되는 이미지인 경우 사이드에 포함된 메뉴를 감안했을때 800px를 넘지 않는 것이 좋습니다. 요즘 디지털 카메라인 경우 화소수가 엄청나기 때문에 촬영한 이미지를 그대로 쓰기에는 이미지의 크기가 너무 큽니다. 따라서 이미지의 크기를 800px 에서 최대한 1024px를 넘지 않게 하는 것이 좋습니다.

9. 또한 이미지를 압축

이미지의 크기도 중요하지만, 이미지를 압축하는 것도 좋습니다. 특히 JPG 이미지의 경우 사용하는 방법에 따라 여러 압축 방법이 존재하며, PNG 파일인 경우에도 24비트로 처리할 것인지 8비트로 처리할 것인지에 따라 이미지의 용량에서 많은 차이를 보이기 때문에 사이트의 효율성에 적합하게 이미지를 압축하는 것이 조ㅓㅎ습니다.

10. 불필요한 글꼴을 삭제하라

CSS3에서 웹 폰트를 사용할 수 있게 됨에 따라 이전에 그래픽 이미지로 처리했던 글꼴을 이젠 웹 폰트를 이용해서 처리할 수 있게 되었습니다만, 웹 폰트의 크기도 생각보단 크게 작용하기 때문에 웹 사이트에서는 필요한 글꼴 2개 에서 3개 정도만 사용하는 것이 가장 좋습니다.