웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
웹사이트 로딩속도 높혀주는 10가지 방법
2001.07.25 07:55
1. 이미지는 반드시 싸이즈를 지정
이미지의 크기를 지정해주면 로딩속도가 빨라집니다.
WIDTH와 HEIGHT의 수치를 정해주는거죠.
예를 들어서 iris.gif (width=200, height=60 크기) 라는 이미지를
홈페이지에 삽입한다면
<img scr="sample.gif" width=200 height=60 alt="아이리스길드">
이런식으로요^^
alt="아이리스길드" 는 그 그림에 대한 설명이죠
2. 다음 페이지의 이미지를 미리 받습니다
다음페이지로 연결되는 페이지라면 다음 페이지의 이미지를 미리
받아 캐시 메모리에 저장시켜두는 것이 다음페이지의 로딩속도를
빠르게 합니다.
예를 들어
다음 페이지에 iris.gif라는 큰 이미지가 있다면
<img src="iris.gif" width=1 height=1>
이런식으로 가로 세로를 1픽셀로 잡아 미리 저장해놓으면 다음
페이지 로딩시에 빠르게 이미지를 받게 됩니다.
그리고 width와 height를 1로 잡았기 때문에 현재 페이지의
스크린에는 보이지 않습니다.
3. 배경 이미지를 고정시킴
이 앞에서 설명드렸죠? 배경고정시키는 방법요^^
배경이 줄줄 따라오면 혼란스럽고 홈페이지가 산만해 보입니다.
깔끔하게 고정시켜주는 것이 좋지요.
그리고 배경이미지가 고정되면 그만큼 로딩되는 시간도 절약된
답니다.
4. 한페이지의 이미지의 숫자는 3개까지로 제한하자
대부분의 웹서버는 문서를 불러올 때 동시에 네개의 GIF파일을 호출
한다고 해요. 사실 지도 어디서 들었어여 ^^;;
그래서 네 개까지는 속도에 별 상관이 없지만 다섯 개가 될 때는
속도가 차이가 날수도 있다는군요.
이미지 숫자가 다섯개 이상이 되면 로딩이 훨씬 느려지겠죠
5. 적절한 테이블의 사용
이왕이면 알록달록 그림만 많이 넣어서 홐을 맹글면 훨씬 이쁘겠지
하고 생각 할지도 모르지만 로딩속도를 생각한다면 이미지를 가능
하면 줄이고 테이블을 이용함으로써 이미지 못지 않은 효과를 줄수
있답니다.
테이블 맹그는 것도 이미 설명 다 드렸죠?
표나 셀의 테두리선 속성, 바탕색 속성등을 이용해보세요
그렇지만 지나치게 복잡하게 나눠진 테이블도 오히려 로딩속도를
느리게 하는 이유가 되기도 합니다.
세로로 긴 테이블 보다는 가로로 긴 테이블이 속도가 빠릅니다.
6. 큰 이미지는 작게 만들어서...
페이지에 커다란 이미지가 하나 있을 경우에는 4개로 자르면 훨씬
로딩 속도가 빨라지겠죠
할수만 있다면 이미지를 조각내서 올린후 웹상에서 붙여지도록 합시다.
해상도가 중요한 경우가 아니라면 이미지를 작게 만든후에 웹상에서
이미지 사이즈를 지정하여 확대시키는 방법도 생각할 수 있겠죠.
이미지의 질을 손상시키지 않는 범위에서 jpg 보다는 gif를 쓰며 색의
종류도 불필요하게 많이 넣지 마세요
불필요한 색을 없애고 투명 이미지를 적극 활용해 보세요.
7.특수문자 이용하기
쓸데없이 목록 표시등에 이미지를 붙이는 것보다는 특수문자를 잘
활용하면 이미지 못지 않은 효과를 줄 수 있습니다.
▲ ☆ ▩ ♣ ☞ ◈
어때요 예쁘지 않은가요?
특수문자는 어떻게 불러올수 있을까요? ^^
간단한 방법이 있죠.
키보드에서 한글로 키를 맞추어놓고 한글자판 하나랑 키보드 왼쪽
Alt옆 옆에 있는 한자 키를 같이 눌러주세요.
한글자판 + 한자키
그럼 화면 아래쪽에 특수문자가 주욱 뜹니다. 거기서 선택해서 클릭
하면 마우스 커서가 있는 부분에 특수문자가 삽입되게 되죠.
위의 문자처럼 이쁜 특수문자가 많은부분은 주로 한글 ㅁ자판 입니다.
한글 'ㅁ' 과 한자키를 같이 눌러보세요^^
8. 반복적인 이미지의 사용
셀의 바탕화면 이미지를 모두 같은 것으로 해서 위에 글자를 입히는
겁니다. 직접 글씨를 이미지로 제작하려면 타이틀 숫자만큼 이미지가
필요하겠지만 셀 바탕그림 하나만 로딩시키고 글자는 위에 입힙니다.
9. 자바 애플릿을 너무 남용하지 말자
어떤 홈페이지를 들어가보면 애플릿을 너무 많이써서 뭐가 열리고 있는
것은 같은데 뭔지는 모르겠고 그렇다고 중단도 안되고...하여튼 사람 열
받게 만드 는 홈이 있죠.
로딩이 늦는 것은 물론이고 가끔씩 다운이 되기도 합니다.
홈페이지는 자기혼자 보고 즐길려고 만드는게 아닌이상에는 방문자를
고려 해서 만들어야 합니다.
친엄마나 되면 모를까 누가 할 일없이 세월아 네월아 하면서 다 열릴때
까지 기다리고 있겠냐구여. -_-;;
이왕이면 자바스크립트를 활용하도록 합시다
10.그외 가지가지
큰 사진 같은걸 많이 올리고 싶을땐 섬네일 (작은 이미지를 먼저 보여
주고 원하면 클릭해서 큰 사진을 보여주는) 을 사용하는 것이 좋습니다
사진을 작게 만들어서 거기에 원래의 큰 사진을 링크시켜주는거죠.
그럼 로딩속도를 높일수 있습니다.
그리고 불필요한 태그는 삭제합시다.
나모나 기타 에디터를 써서 홈을 만들경우 불필요한 태그가 많이
생기게 됩니다. 자신의 잘못이 아니라 본의 아니게 제작중 생성됩니다
홈을 다 만든후에제작후 확인하여 불필요한 태그를 삭제시키는 것이
용량을 줄여 줍니다.
이미지의 크기를 지정해주면 로딩속도가 빨라집니다.
WIDTH와 HEIGHT의 수치를 정해주는거죠.
예를 들어서 iris.gif (width=200, height=60 크기) 라는 이미지를
홈페이지에 삽입한다면
<img scr="sample.gif" width=200 height=60 alt="아이리스길드">
이런식으로요^^
alt="아이리스길드" 는 그 그림에 대한 설명이죠
2. 다음 페이지의 이미지를 미리 받습니다
다음페이지로 연결되는 페이지라면 다음 페이지의 이미지를 미리
받아 캐시 메모리에 저장시켜두는 것이 다음페이지의 로딩속도를
빠르게 합니다.
예를 들어
다음 페이지에 iris.gif라는 큰 이미지가 있다면
<img src="iris.gif" width=1 height=1>
이런식으로 가로 세로를 1픽셀로 잡아 미리 저장해놓으면 다음
페이지 로딩시에 빠르게 이미지를 받게 됩니다.
그리고 width와 height를 1로 잡았기 때문에 현재 페이지의
스크린에는 보이지 않습니다.
3. 배경 이미지를 고정시킴
이 앞에서 설명드렸죠? 배경고정시키는 방법요^^
배경이 줄줄 따라오면 혼란스럽고 홈페이지가 산만해 보입니다.
깔끔하게 고정시켜주는 것이 좋지요.
그리고 배경이미지가 고정되면 그만큼 로딩되는 시간도 절약된
답니다.
4. 한페이지의 이미지의 숫자는 3개까지로 제한하자
대부분의 웹서버는 문서를 불러올 때 동시에 네개의 GIF파일을 호출
한다고 해요. 사실 지도 어디서 들었어여 ^^;;
그래서 네 개까지는 속도에 별 상관이 없지만 다섯 개가 될 때는
속도가 차이가 날수도 있다는군요.
이미지 숫자가 다섯개 이상이 되면 로딩이 훨씬 느려지겠죠
5. 적절한 테이블의 사용
이왕이면 알록달록 그림만 많이 넣어서 홐을 맹글면 훨씬 이쁘겠지
하고 생각 할지도 모르지만 로딩속도를 생각한다면 이미지를 가능
하면 줄이고 테이블을 이용함으로써 이미지 못지 않은 효과를 줄수
있답니다.
테이블 맹그는 것도 이미 설명 다 드렸죠?
표나 셀의 테두리선 속성, 바탕색 속성등을 이용해보세요
그렇지만 지나치게 복잡하게 나눠진 테이블도 오히려 로딩속도를
느리게 하는 이유가 되기도 합니다.
세로로 긴 테이블 보다는 가로로 긴 테이블이 속도가 빠릅니다.
6. 큰 이미지는 작게 만들어서...
페이지에 커다란 이미지가 하나 있을 경우에는 4개로 자르면 훨씬
로딩 속도가 빨라지겠죠
할수만 있다면 이미지를 조각내서 올린후 웹상에서 붙여지도록 합시다.
해상도가 중요한 경우가 아니라면 이미지를 작게 만든후에 웹상에서
이미지 사이즈를 지정하여 확대시키는 방법도 생각할 수 있겠죠.
이미지의 질을 손상시키지 않는 범위에서 jpg 보다는 gif를 쓰며 색의
종류도 불필요하게 많이 넣지 마세요
불필요한 색을 없애고 투명 이미지를 적극 활용해 보세요.
7.특수문자 이용하기
쓸데없이 목록 표시등에 이미지를 붙이는 것보다는 특수문자를 잘
활용하면 이미지 못지 않은 효과를 줄 수 있습니다.
▲ ☆ ▩ ♣ ☞ ◈
어때요 예쁘지 않은가요?
특수문자는 어떻게 불러올수 있을까요? ^^
간단한 방법이 있죠.
키보드에서 한글로 키를 맞추어놓고 한글자판 하나랑 키보드 왼쪽
Alt옆 옆에 있는 한자 키를 같이 눌러주세요.
한글자판 + 한자키
그럼 화면 아래쪽에 특수문자가 주욱 뜹니다. 거기서 선택해서 클릭
하면 마우스 커서가 있는 부분에 특수문자가 삽입되게 되죠.
위의 문자처럼 이쁜 특수문자가 많은부분은 주로 한글 ㅁ자판 입니다.
한글 'ㅁ' 과 한자키를 같이 눌러보세요^^
8. 반복적인 이미지의 사용
셀의 바탕화면 이미지를 모두 같은 것으로 해서 위에 글자를 입히는
겁니다. 직접 글씨를 이미지로 제작하려면 타이틀 숫자만큼 이미지가
필요하겠지만 셀 바탕그림 하나만 로딩시키고 글자는 위에 입힙니다.
9. 자바 애플릿을 너무 남용하지 말자
어떤 홈페이지를 들어가보면 애플릿을 너무 많이써서 뭐가 열리고 있는
것은 같은데 뭔지는 모르겠고 그렇다고 중단도 안되고...하여튼 사람 열
받게 만드 는 홈이 있죠.
로딩이 늦는 것은 물론이고 가끔씩 다운이 되기도 합니다.
홈페이지는 자기혼자 보고 즐길려고 만드는게 아닌이상에는 방문자를
고려 해서 만들어야 합니다.
친엄마나 되면 모를까 누가 할 일없이 세월아 네월아 하면서 다 열릴때
까지 기다리고 있겠냐구여. -_-;;
이왕이면 자바스크립트를 활용하도록 합시다
10.그외 가지가지
큰 사진 같은걸 많이 올리고 싶을땐 섬네일 (작은 이미지를 먼저 보여
주고 원하면 클릭해서 큰 사진을 보여주는) 을 사용하는 것이 좋습니다
사진을 작게 만들어서 거기에 원래의 큰 사진을 링크시켜주는거죠.
그럼 로딩속도를 높일수 있습니다.
그리고 불필요한 태그는 삭제합시다.
나모나 기타 에디터를 써서 홈을 만들경우 불필요한 태그가 많이
생기게 됩니다. 자신의 잘못이 아니라 본의 아니게 제작중 생성됩니다
홈을 다 만든후에제작후 확인하여 불필요한 태그를 삭제시키는 것이
용량을 줄여 줍니다.
댓글 32
-
박한
2001.09.29 21:54
더 빠른 로딩을 원하신다면.. 좀 더 빠른 계정을 찾거나.. 좋은 컴을 사거나.. =_= -
박한
2001.09.29 21:54
페이지 로딩 빨리하는 가장 좋은 방법은..
초고속 통신망을 설치하는 것입니다 =_= -
박한
2001.09.29 21:53
흐음..
^-^;;
위에 님.. 좋은 글 적어 주셨네여.. gif와 jpg.. -
장정주
2001.09.15 10:25
다 아시는 이야기겠지만... 모르시는 분들을 위해...
gif 와 jpg(jpeg) 이미지 포맷을 선택적으로 사용합니다.
gif 는 256 색상 이하에서 jpg 이상의 압축효과를 거둘수 있습니다.
jpg는 256 색상 이상에서 gif 이상의 압축효과를 거둘수 있습니다.
그러므로 사진이나 현란한 색상을 사용하는 그림은 jpg를,
버튼이나 카툰, 단색 이미지들은 gif를 사용하시는 것이 효과적이지요. -
장정주
2001.09.15 10:22
다 아시는 이야기겠지만... 모르시는 분들을 위해...
이미지의 색상을 줄이면 훨신 로딩속도가 빨라집니다.
쉽게 색상을 줄이는 방법은... 포토샾 6.0 부터 "웹형식으로 저장" 이 있어염... 거기서 최적의 색상, 최적의 크기로 저장을 하시면 빠르게 작업을 하실 수 있습니다. -
김의주
2001.09.15 09:56
헐 그러지들 마시구요
이런건 쓸모 없어요 요샌 거의 고속통신을 쓰기 때문에 이런건 더더욱 피료 없습니다.
이건 옛날 모뎀 쓰던 시절 얘깁니다 -
김경범
2001.08.22 00:04
ㅁㅁㅁ -
신정훈
2001.08.19 01:11
한번에 4개를 읽어오면... 5개이미지로딩이랑 8개이미지로딩이 같겠내요? -
지박사
2001.08.13 19:55
배경그림 고정은 body안에 bgproperties="fixed"를 넣음으로써 간단하게 할수 있습니다. -
-EXILE™-
2001.07.28 17:20
아니면 레이어로 잡아서 visible속성을 hidden으로 잡든지.. -
-EXILE™-
2001.07.28 17:20
width=0 height=0 으로 잡으시면 됩니다.. -
이호한
2001.07.25 12:35
2번은 아닌것 같군요. 그렇게 하면 "현재 페이지"의 로딩속도가 느려지죠. 다음을 위해 현재를 희생? -
순대
2001.07.25 16:55
이거 너무 html 에 관계된거 아닌가요.. 더 고급스러운 것은... -
상디
2001.07.25 19:42
저렇게 언제 다 지정할까요 ㅡ.ㅡ; 드림위버에 프리로드 이미지라는 기능이 있는걸로 아는데 ^^; -
-=:zr_kr:=-
2001.07.26 10:20
우와 감사합니다 -
한울
2001.07.26 16:16
더 고급스러운것? html도 안되는데, 더 고급스러운걸 찾나요? -
익스트림플래시
2001.07.27 10:04
3번은 워터마크 배경이미지를 말하는 것입니까? -
양성진
2001.07.28 13:22
아파치등의 웹서버에서는 이미지 로딩시 한번에 4개의 파일을 읽어옵니다. 그래서 5개 이상이 되면 속도차이가 납니다. ^^ -
LucK~! ~( :>
2001.10.07 02:01
홈페이지 강좌사이트서 본듯한 글인데.. -
박한
2001.09.29 21:55
하핫.. 농담이었습니닷..-_-;;
위에 장정주 님이 적어 주신것.. 특히 256색 이상의 경우, jpg 컬러수 조정하는 것..
그것을 잘 해 주시는것이 가장 큰 도움이 될 것 같습니다.
큰 이미지가 사용되지 않는다면 관계가 없겠지만, 이미지가 많이 들어가는 페이지의 경우에는.. 차이가 납니다. -
송현재
2002.01.26 09:35
라이코스 만화를 보니 전에는 다음페이지 누르고 뜰때까지 한참걸리던데 요즘은 페이지 읽을대 미리 읽어오는 방식을 이용하던지 휙휙뜨더군요..이미지를 숨겨놓고 미리 읽는것도 좋은것 같네여~대신..ㅡㅡ html 맨윗줄에 쓰면 페이지 전체가 다 이미지 뜰때까지 버벅대구 있을테니 마지막에 지정해주는게 낳겠네여~ㅎㅎ -
후니...
2001.10.27 23:20
저두여...한마디...
특수문자 쓸때 자음하구 한자키 같이 누를필여 없어여...자음하나쓰구 한자 누르구 함 되는뎅...한꺼번에 침 쬐메 어렵져^^......이상 허접이었심다 -
мАÐ∫ĸ8Ея
2001.10.20 21:14
gif 는 팔레트를 지정해서 쓰는것이기 때문에 256 이하의 색상에서는 jpg 압축보다 뛰어나고 화질도 선명합니다..^^; 그 이상이면 큰그림은 구별두 힘들구 gif 팔레트의 기본갯수도 초과하게 되어 gif 파일크기가 상대적으로 마구 커집니다 ^^; -
mysu
2002.02.21 02:59
2.다음페이지의 이미지 미리 받기는 오히려 현재 페이지의 로딩을 느리게 합니다.
3.배경을 고정시키면 보는사람의 컴퓨터가 구리고 이미지가 고화질일수록 보는사람만 버벅거립니다. -
Webme
2002.02.21 11:47
이미지 크기 width=1 height=1 로할경우 만약 배경색과 반대되는 이미지일경우는 틔가 나지않을까요? width=1 height=1로 해본적이없어서..
전 width=0 height=0 으로 미리 불러들입니다. 배경이미지가 워낙 거대해서. 미리 불러오는거죠. -
Webme
2002.02.21 11:55
mysu//이미지미리받기는 아무데서나 쓰는것이아닌.... 페이지로딩이 좀 빠른페이지에서 사용됩니다. 그냥 무자기로 이전페이지에서 받는것이아니라..
배경을 고정시키면 훨씬빠릅니다. 배경이 같이 스크롤될경우 배경이 스크롤바를 따라자연스럽게 내려가지않고 한두단계쳐져서 내려가시는걸 볼수있으실것입니다. 버벅이는거죠... -
익명
2002.02.21 09:28
초고속 통신망이라도 애플릿많고 이미지 많으면 버벅댄답니다;; -
┏ⓩZion┛
2002.05.15 17:43
2번은,, 이해가 잘 안가네요 ;; -
박진혁
2002.09.18 18:44
2번이 왜 이해가 안갈까요... 이제 html 공부하는 저도 이해가 가는데...
다음에 보게될 페이지의 이미지를 그전 페이지의 내용 하단에 안보이게 올려서
다음페이지에선 캐시된 이미지를 꺼내 창을 띄운다. 이거 아닌가요?
현재페이지의 로딩시간이 길어진다고 해봤자... 보여질건 다 보여진거고
보일 필요가 없는 다음 페이지의 이미지니깐 화면상 로딩이 덜됐다고
나타나는거 일뿐이자나염^^
글구... 이미지 싸이즈 줄여보이게 하는건 원래이미지를 작게 보이게 하는거지
크기도 줄여놓는건 아닌것두^^ 참고
허접이 오늘 말 많았네요^^
글쓴이님 감사 -
세DlCIZLOI너
2002.09.18 18:46
ㅋㅋㅋ 내이름뜨는거 보고 놀라서... 바로 바꿨당 -
은빛늑대
2003.12.17 16:05
-_-;먼 옛날 이야기인듯 -
다이스
2004.11.16 22:28
네이버에서 보고 와도-_- 꼭 엔지오랑 연결이 되어 있네.
제목 | 글쓴이 | 날짜 |
---|---|---|
(table)에서 HTML 태그를 적용시켜 보기 [16] | 정후니 | 2001.08.31 |
[1차패치] 내 msn 현재상태를 보여주자! + 캡처없앰 -ㅂ- [18] | 티르 | 2002.01.04 |
홈페이지에 Fade-in 적용하기~ [5] | remy | 2002.01.08 |
웹사이트 로딩속도 높혀주는 10가지 방법 [32] | 秀 | 2001.07.25 |
CSS에 클래스에 관한거 추가 [4] | DearMai | 2002.02.21 |
CSS 와 HTML 과 연결하기 [5] | Topy | 2002.02.21 |
▩HTML 최적화 기법 [3] | ▩윤미 | 2002.02.21 |
msn 메신저 내 홈에서 채팅창과/대화상대 추가하기를 넣어보장! [8] | 카멜롯™ | 2002.02.21 |
브라우저 입력 창에 나만의 아이콘 띄우기 [2] | Topy | 2002.02.22 |
▩(a href=#) 대신에 쓸수 있는 스타일 태그 [3] | ▩윤미 | 2002.02.22 |
페이지 스크롤 - 네개의 레이어를 이용한겁니다
[4]
![]() | choice | 2002.02.25 |
[스타일시트] 스타일 시트의 개념 [4] | 태엽감는새 | 2002.02.26 |
[HTML] 기초적인 태그모음 #1 | 태엽감는새 | 2002.02.26 |
[HTML] 기초적인 태그모음 #2 [1] | 태엽감는새 | 2002.02.26 |
[HTML] 기초적인 태그모음 #3 | 태엽감는새 | 2002.02.26 |
마퀴(Marquee)태그를 애플릿처럼 부드럽게 움직이기!! [4] | 지진;) | 2002.03.04 |
특수문자 몇백개!! [2] | 포터시네마 | 2002.03.08 |
아름지기식 홈페이지만들기1 [4] | 아름지기 | 2002.03.09 |
아름지기식 홈페이지만들기2 [1] | 아름지기 | 2002.03.09 |
아름지기식 홈페이지 만들기3 [6] | 아름지기 | 2002.03.09 |