잡담 - 제가 RB를 사용하는 방식(?)

· 댓글 : 2 조회 : 3054 · 7

방식이라고 얘기하기엔 좀 모하지만....

 

베이스를 잡으시는 분들에게 필요하지 않을까 싶어 끄적거려 봅니다.

이미 베이스 프레임을 만드신 분들에겐 의미가 없겠지만요. ^^

 

수많은 블로그와 사이트들에 적혀있는 내용이지만

몇번을 강조해도 부족하지 않습니다.

 

1. 코드의 위치

css는

와 사이에

javascript는 최 하단에..

 

w3c에서는 자바스크립트 역시 head에 넣으라고 되어있는 것으로 알고 있지만

실제로는 위 처럼 하는 것이 좋습니다.

 

이유는 단순하죠.

 

일단 모양을 먼저 뿌려주고 처리할 것은 뒤로 넘겨버림으로서

사이트의 속도를 증가시켜줄 수 있습니다.

 

단! jQuery와 같은 프레임웍은 head에 불러줘야 에러가 나지 않겠죠.

 

2. css 구문을 사용할 때는 import를 사용하지 않습니다.

import는 속도를 느리게 하는 주범중 하나입니다.

 

3. 최소한의 커넥션을 만들어주는 것이 좋습니다.

각종 이미지,css,스크립트등을 가능한 최소의 개수로 묶어줌으로서 커넥션의 수를 줄여줄 수 있습니다.

 

 

머....이 정도는 많이들 적혀있으니...

그러면 위의 사항들에 대하여 제가 사용하는 RB의 방식을 끄적거려보자면.

 

css와 자바스크립트를 위치에 맞게 해주고 싶지만

각종 위젯들로 인하여 위치가 왔다갔다 맘대로죠.

 

전 그래서 사알짝 번거로울 수도 있는 방법을 사용합니다.

$WidgetsScript와 $WidgetsCss라는 배열을 선언한 후

 

WidgetsScript 변수에 각 위젯에서 직접 값을 추가해줍니다.

 

이 WidgetsScript변수에 담긴 위젯들에 대하여 최 하단에서 script를 호출하게 되면

모든 스크립트는 최 하단으로 내려가게 됩니다.

 

CSS는 사용할 css를 레이아웃에서 _common.php라는 항목에서 미리 선언해주는 것으로서

head 사이에 넣어 사용하고 있고요.

 

이로서 위치는 조절이 됩니다.

 

( 좀..두서가 없네요..ㅋㅋㅋ..... 술기운이 사알짝... )

 

그러면 커넥션의 수를 줄이는 방법은

css와 script 그리고 이미지에 따라 다릅니다.

 

css와 script의 경우 max-age=365d를 이용하여 최대한의 캐시를 지정한 후

include후 필터링 시켜줍니다.

 

이렇게 할 경우

많은 css와 javascript 파일들이 단 1개의 css와 단 1개의 javascript 파일이 됩니다.

 

이미지의 경우 모든 페이지에 공통으로 사용되는 것과

페이지별 별개로 사용되는 것

이렇게 2종류로 나누어 이미지를 합쳐줍니다.

 

이렇게 할 경우 사용하는 이미지는 수십개이지만  불러오는 이미지는 단 1개로서

크기 자체는 늘어나있지만 커넥션 자체가 줄어들어있기에 훨씬 빠른 속도로 불러오게 됩니다.

 

이미지를 예로 들면

레벨의 경우 1~30까지의 이미지를 단 1개의 이미지로 만든 후

background-position을 통하여 제어함으로서 커넥션을 30개에서 -> 1개로 줄이게 되는 결과가 되지요.

 

이러한 방식을 사용하여

현재 제가 사용하는 사이트는

RB 전체를 불러오는데 있어서

 

2개의 CSS - RB 기본 CSS,레이아웃+위젯

2개의 Script - jQuery, 기타 모든 script

만을 호출합니다.

 

이미지 역시 갤러리등의 이미지파일들을 제외하곤

3개의 파일만을 호출합니다.

 

물론 실제 사용하는 파일은

script도 css도 각각 10개 이상입니다.

 

통계분석을 위해 매체별 전용URL 사용해주세요.
수이님의 포스트
최근 리스트
리스트가 없습니다.