Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

HAMA 블로그

가벼운 웹사이트 만들기 본문

소프트웨어 사색

가벼운 웹사이트 만들기

[하마] 이승현 (wowlsh93@gmail.com) 2015. 12. 1. 16:07

http://jinolog.com/programming/2014/01/31/reducing-page-weight.html 펌

sitepoint에 가벼운 웹사이트 만들기 4부작 중에서 빠르고 쉬운 10가지 방법 만 정리 

나머지는 위에 링크된 싸이트를 가셔서 참고하세요.

빠르고 쉬운 10가지 방법

1. gzip 압축 활성화

간단한 서버 설정으로 컨텐츠를 압축할수 있다.

2. 브라우저 캐싱 활용

expire header, last-modified, etags 헤더등을 활용할수 있다.

아파치 .htaccess를 이용해서 jpg같은 이미지 파일에 1달 캐시를 적용하는 방법은 아래와 같다.

<IfModule mod_expires.c>
ExpiresActive On

<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>

</IfModule>

*블로그 주인 : http 헤더를 이용해서 캐싱하는 방법에 대해서는 추가로 포스팅을 할 예정이다

3. CDN 사용

브라우저는 하나의 도메인당 동시에 4~8개의 커넥션 제한을 두기 때문에 CDN을 분리하는것은 동시에 더 많은 커넥션을 맺을수 있다는 것을 의미한다. 또한 서드파티 라이브러리(jquery등)나 font 파일의 경우 외부에서 받은 리소스를 그대로 활용할수도 있고, 이미지에 특화된 CDN호스팅을 사용할수도 있다.

4. 사용하지 않는 assets 삭제

더이상 사용하지 않는 위젯이 생긴다면 그와 관련된 javascript코드와 css코드는 삭제하는 것이 좋다. 그 코드가 하나의 파일로 분리되어 있었다면 간단한 작업이 될테지만 그렇지 않다면 크롬 개발자 도구의 Audit 툴이나JSLint, Dust-Me Selectors, CSS Usage, unused-css.com 혹은 grunt-uncss 같은 빌드툴이 필요수도 있다.

5. css 병합과 최소화(minify)

하나의 css파일만 있는것이 가장 이상적이다. 유지보수를 위해 여러개의 css파일로 개발하더라도 production 서버에 올릴때에는 공백 제거등의 최소화 작업을 하는것이 좋다.

Sass나 LESS, Stylus 같은 CSS Pre-processor 들을 활용할수도 있고 Grunt.js 나 Gulp, Koala(GUI제공) 같은 빌드툴이 도움을 줄것이다.

이런 툴들을 사용하는대신 수동으로 작업하는 방법도 있다.

copy file1.css+file2.css file.css   # Windows
cat file1.css file2.css > file.css  # Mac/Linux

위 명령어를 이용해 파일들을 하나로 합친다음 최소화 작업을 위해 cssminifier.com, CSS Compressor & Minifier 혹은 CSS Compressor 같은 온라인 minifier 툴을 이용하면 된다.

최종 css를 페이지에 넣을때에는 이후에 뿌려지는 요소들을 브라우저가 어떻게 그려야할지 미리 알수있게 <head> 태그 내에 두어서, 이미 그린 요소들을 다시 그리는 일이 없도록 하자.

6. javascript 병합과 최소화(minify)

jquery같은 라이브러리들은 별도의 파일로 두게 되겠지만 직접 작성하는 javascript 코드들은 production 상에서 하나의 파일로 최소화 시키도록 해야한다. 다시한번 말하지만, 이를 도와주는 여러가지 빌드툴이 있다.YUI Compressor, Closure Compiler 그리고 개인적으로 가장 좋아하는 The JavaScript CompressorRater는 여러 압축 엔진을 사용해서 그 중에 가장 최적인것을 선택할수도 있게 한다.

올바르지 않은 코드가 있다면 압축이 실패할 것이기 때문에 자바스크립트 압축은 좀 더 신중하게 해야한다.

js파일을 페이지에 포함시키기 가장 좋은 위치는 닫는 body 태그 바로 앞이다. 이렇게 하면 자바스크립트가 다운되고 실행되기 전까지 다른 컨텐츠들의 로딩을 막지 않아서 가독성이 좋아진다.

7. 올바른 이미지 포멧 사용

올바르지 않은 이미지 포멧 사용은 사이트를 무겁게 만든다. 일반적으로

  1. 사진은 JPG
  2. 나머지는 모두 PNG를 사용한다.

드물긴 하지만, 크기가 작으면서 색이 많이 사용되지 않은 이미지인 경우 GIF가 더 좋을수도 있다. 어떤 이미지는 벡터 이미지가 더 좋을수도 있는데 이에 대해서는 추후 설명하기로 한다.

이미지 변환을 위한 프로그램이 필요할수도 있겠지만 XnView 같은 무료 프로그램도 있다. 아래와 같이 설정하는것을 기억하자

  • jpg는 0(화질 최하) 부터 100(화질 최상) 까지 화질 손상 정도를 정할수 있다. 대부분의 이미지들은 30~70 사이가 무난하겠지만, 실제 실험을 통해 허용 가능한 최저 화질을 얻어내는 것이 좋다
  • png는 256색과 24-bit색이 가능하다. 투명효과가 필요 없고 색생의 제한을 둬도 된다면 256색으로 압축하는것이 좋다.

8. 이미지 리사이징

300메가 픽셀 짜리 보급형 스마트폰으로 찍은 사진들도 웹페이지에서 보여주기에는 크기가 너무 크다. 예를 들어, 좌우 800픽셀 짜리 페이지라면 레티나 디스플레이를 고려하더라도 1600픽셀 이미지면 충분하다. 길이가 1/2으로 줄면 크기는 1/4로 줄어들게 되므로 필요한 만큼 리사이징을 하게되면 그 효과는 매우 크다.

9. 이미지를 더 압축하기

포멧도 바꾸고 리사이징까지 했지만 그래픽 분석/최적화 툴을 이용하면 이미지 용량을 좀 더 줄일수도 있다.OptiPNG, PNGOUT, jpegtran, jpegoptim 등이 있고 클라우드에서 작업할수 있는 온라인 서비스 Smush.it도 있다.

10. 필요없는 폰트 제거

커스텀 폰트는 디자인 요소로서는 매우 좋지만 수백kb의 용량을 차지한다. 단지 한줄의 제목을 위해 200kb의 폰트가 필요한지 신중히 생각해보자.


11. 웹사이트 측정 툴 사용

성능을 개선한다고 한들 모니터링을 하지 않는다면 사이트가 용량이 얼마나 줄었고 속도가 얼마나 빨라졌는지 모른다. Google Page Speed Insights 같은 툴들을 사용해보자.

웹페이지 성능 측정 도구 10가지

1. Pingdom

페이지 용량, 다운로드 속도, 코드 분석, 성능 등급, 개선점 제안 및 개선 히스토리 등 성능 개선과 관련된 대부분의 정보들을 보여준다. 단 하나의 분석툴만을 써야한다면 그것은 Pingdom이 되어야 할 것이다.




저작자표시 비영리 변경금지

'소프트웨어 사색 ' 카테고리의 다른 글

왜 스칼라를 비롯한 잡종/순수 함수형 언어가 메이져가 될수 없는가..  (0) 2016.01.11
SCADA 란? 그리고 SCADA 와 IoT  (0) 2016.01.05
JIT 잡동사니  (0) 2015.11.29
Call by value in Polyglot  (0) 2015.11.23
딥러닝 라이브러리 - Caffe (머신-비전 특화)  (0) 2015.11.18
'소프트웨어 사색 ' Related Articles more
Comments