웹마스터 팁
홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법]
2004.04.29 11:31
로딩속도를 높히는 10가지방법
★ 이미지는 반드시 싸이즈를 지정 ★
이미지의 WIDTH와 HEIGHT를 입력하여 주면 로딩속도가 빨라집니다.
이미지를 삽입시 가령 sample.gif (width=200, height=60 크기) 라는
이미지를 올린다면
<img scr="sample.gif" width=200 height=60 alt="샘플">
이와같이 이미지의 폭과 높이를 모두 넣어 주는 것이
로딩에 도움을 줍니다.
또한 alt 태그를 이용하여 이미지에 대한 설명을 주면
방문객들에게 친절한 서비스를 제공하는 것이며
네스캐이프나 익스플로러 이외에 다른 텍스트 브라우저를
쓰는 사람들에게 많은 도움이 되겠죠
★ 다음 페이지의 이미지를 미리 받습니다 ★
다음페이지로 연결되는 페이지라면 다음 페이지의 이미지를
미리 받아 캐시 메모리에 저장시켜두는 것이 다음페이지의
로딩속도를 빠르게 합니다.
예를 들어
다음 페이지에 sample2.gif라는 큰 이미지가 있다면
앞 페이지의 하단에 다음 태그를 넣습니다.
(앞페이지를 보는 동안 뒷 페이지 이미지를 받음)
<img src="sample2.gif" width=1 height=1>
이와같이 가로 세로를 1픽셀로 잡아 미리 받아놓으면
캐시 메모리에 이미지가 저장되어 다음페이지 로딩시에
빠르게 이미지를 받게 됩니다
그리고 width와 height를 1로 잡았기 때문에
현재 페이지의 스크린에는 보이지 않습니다.
앞페이지 맨 하단부에 넣는 이유는 문서의 이미지는
위쪽 것부터 로딩되기 때문
★ 배경 이미지를 고정시킴 ★
대부분 같은 배경 이미지가 홈페이지 전체에 이어지는 경우가 많죠
이것이 통일성도 있고 혼란을 줄이는 방법이 되기도 하니까요
이럴땐 다음 태그를 삽입시켜 주세요
배경이미지가 로딩되는 시간을 절약합니다.
<body bgproperties="fixed">
다음 페이지에서 부터는 배경 이미지가 스크롤 되지 않습니다.
★ 이미지의 숫자는 4개 이하로 ★
대부분의 웹서버는 문서를 불러올 때
동시에 네개의 GIF파일을 호출합니다.
따라서 이미지 숫자가 세개인 것과 네개인 것에는
로딩속도에 큰 차이가 없지만 네개와 다섯 개는
속도의 차이가 매우 큽니다.
이미지 숫자가 다섯개 이상이 되면 로딩이 훨씬 느려지겠죠
야후와 같은 검색엔진에서는 절대 한페이지에
이미지를 네개 이상의 이미지를 쓰지 않는다고 합니다.
한 페이지에는 네개 이하의 이미지를 사용합시다
★ 적절한테이블의사용 ★
이미지를 가능하면 줄이고 테이블을 이용함으로써
깔끔하고 산뜻한 효과를 볼 수 있습니다.
지금 보시고 계신 이 페이지도 테이블만을 이용하여 구성되었습니다.
표나 셀의 테두리선 속성, 바탕색 속성등을 이용하여
html문서만으로도 충분히 깔끔한 페이지를 작성할 수 있습니다.
테이블로 이미지화일에 비해서는 훨씬 빠르지만
로딩을 느리게 하는 원인이 되기도 하는데
지나치게 복잡한 테이블은 자제하는 것이 좋겠습니다.
또 세로로 길게 이어지는 테이블보다는
가로로 긴 테이블이 훨씬 로딩이 빠릅니다.
태그가 훨씬 절약되고 브라우저가 읽기 쉽죠
★ 이미지를 줄여줄여 ★
아까 웹 서버는 동시에 4개의 이미지를 읽는 다고 하였죠.
그렇다면 페이지에 커다란 이미지가 하나 있을 경우에는
4개로 자르면 훨씬 로딩 속도가 빨라지지 않을까요?
물론 훨씬 로딩이 빨라집니다.
이미지를 조각내서 올린후 웹상에서 붙여지도록 합시다.
해상도가 중요한 경우가 아니라면 이미지를 작게 만든후에
웹상에서 이미지 사이즈를 지정하여
확대시키는 방법도 생각할 수 있겠죠.
이미지의 질을 손상시키지 않는 범위에서 jpg 보다는 gif를 쓰며
색의 종류도 불필요하게 많이 넣지 마세요
또 이미지의 색상을 줄이면 이미지 용량이 줄어듭니다.
따라서 불필요한 색을 없애고 투명 이미지를 적극 활용해 봅시다.
★ 특수문자활용하기 ★
쓸데없이 목록 표시등에 이미지를 붙이는 것보다는
특수문자를 잘 활용하면 이미지 못지 않은 효과를 줄 수 있습니다.
▲ ☆ ▩ ♣ ☞ ◈
어때요 예쁘지 않은가요?
항상 이용자의 입장에서 생각해 봅시다.
내가 만든 페이지가 손님들에게 짜증을 주지는 않는지...
★ 반복적인이미지를사용 ★
동일한 이미지를 여러차례 사용하는 경우
매번 새로 이미지를 불러들이지 않게 해야 합니다
서로 다른 페이지에서라도 동일한 그림을 쓸 경우
새로 로딩을 받지 않고 캐쉬에 저장된 이미지를 불러들여 사용합니다.
물론 이렇게 되면 속도가 훨씬 빠르죠.
이렇게 하기 위해서는 여러차례 사용되는 이미지는
특정한 폴더에 넣고 계속 같은 폴더에 링크시켜 사용해야 합니다.
★ 애플릿은 신중하게 ★
아무리 잘 짜진 애플릿이라고 하더라도 애플릿은 속도가 느립니다.
더구나 중간에 중단도 안 되지요..
이러한 싸이트는 절대 다시 안 옵니다.
로딩에만 1,2분씩 걸리는데 열받구 화나구 씩씩대면서
구석의 × 표시만 수도없이 누르고 있습니다.
꼭 쓰고 싶으신 분은 반드시 로딩속도도 확인하시고
여러개 집어넣지 말아주세요..
홈페이지는 자기 개인의 만족만을 위한 것이 절대 아닙니다.
상업적 목적의 홈페이지에서는 애플릿을 안 쓰잖아요.
자바스크립트로도 웬만한건 다 할 수 있습니다.
★ 다른방법들 ★
① 섬네일 이미지
큰 사진 같은걸 올릴땐 섬네일
(작은 이미지를 먼저 보여주고 원하면 클릭해서 큰 사진을 보여주는)
을 사용하는 것이 에티켓이라고 합니다.
② CGI 선택시 속도를 고려
CGI는 애플릿과 더불어 인터넷 속도를 잠식하는 주범중의 하나입니다.
CGI 선택시 속도를 살펴보고 제대로 프로그래밍 된 것을
선택하는 것도 훌륭한 생각일 것입니다.
③ 포토샵 에서는 이미지 저장시 Save For Web으로
색상 수를 줄여 저장하면 이미지 용량이 줄어듭니다.
★ 이미지는 반드시 싸이즈를 지정 ★
이미지의 WIDTH와 HEIGHT를 입력하여 주면 로딩속도가 빨라집니다.
이미지를 삽입시 가령 sample.gif (width=200, height=60 크기) 라는
이미지를 올린다면
<img scr="sample.gif" width=200 height=60 alt="샘플">
이와같이 이미지의 폭과 높이를 모두 넣어 주는 것이
로딩에 도움을 줍니다.
또한 alt 태그를 이용하여 이미지에 대한 설명을 주면
방문객들에게 친절한 서비스를 제공하는 것이며
네스캐이프나 익스플로러 이외에 다른 텍스트 브라우저를
쓰는 사람들에게 많은 도움이 되겠죠
★ 다음 페이지의 이미지를 미리 받습니다 ★
다음페이지로 연결되는 페이지라면 다음 페이지의 이미지를
미리 받아 캐시 메모리에 저장시켜두는 것이 다음페이지의
로딩속도를 빠르게 합니다.
예를 들어
다음 페이지에 sample2.gif라는 큰 이미지가 있다면
앞 페이지의 하단에 다음 태그를 넣습니다.
(앞페이지를 보는 동안 뒷 페이지 이미지를 받음)
<img src="sample2.gif" width=1 height=1>
이와같이 가로 세로를 1픽셀로 잡아 미리 받아놓으면
캐시 메모리에 이미지가 저장되어 다음페이지 로딩시에
빠르게 이미지를 받게 됩니다
그리고 width와 height를 1로 잡았기 때문에
현재 페이지의 스크린에는 보이지 않습니다.
앞페이지 맨 하단부에 넣는 이유는 문서의 이미지는
위쪽 것부터 로딩되기 때문
★ 배경 이미지를 고정시킴 ★
대부분 같은 배경 이미지가 홈페이지 전체에 이어지는 경우가 많죠
이것이 통일성도 있고 혼란을 줄이는 방법이 되기도 하니까요
이럴땐 다음 태그를 삽입시켜 주세요
배경이미지가 로딩되는 시간을 절약합니다.
<body bgproperties="fixed">
다음 페이지에서 부터는 배경 이미지가 스크롤 되지 않습니다.
★ 이미지의 숫자는 4개 이하로 ★
대부분의 웹서버는 문서를 불러올 때
동시에 네개의 GIF파일을 호출합니다.
따라서 이미지 숫자가 세개인 것과 네개인 것에는
로딩속도에 큰 차이가 없지만 네개와 다섯 개는
속도의 차이가 매우 큽니다.
이미지 숫자가 다섯개 이상이 되면 로딩이 훨씬 느려지겠죠
야후와 같은 검색엔진에서는 절대 한페이지에
이미지를 네개 이상의 이미지를 쓰지 않는다고 합니다.
한 페이지에는 네개 이하의 이미지를 사용합시다
★ 적절한테이블의사용 ★
이미지를 가능하면 줄이고 테이블을 이용함으로써
깔끔하고 산뜻한 효과를 볼 수 있습니다.
지금 보시고 계신 이 페이지도 테이블만을 이용하여 구성되었습니다.
표나 셀의 테두리선 속성, 바탕색 속성등을 이용하여
html문서만으로도 충분히 깔끔한 페이지를 작성할 수 있습니다.
테이블로 이미지화일에 비해서는 훨씬 빠르지만
로딩을 느리게 하는 원인이 되기도 하는데
지나치게 복잡한 테이블은 자제하는 것이 좋겠습니다.
또 세로로 길게 이어지는 테이블보다는
가로로 긴 테이블이 훨씬 로딩이 빠릅니다.
태그가 훨씬 절약되고 브라우저가 읽기 쉽죠
★ 이미지를 줄여줄여 ★
아까 웹 서버는 동시에 4개의 이미지를 읽는 다고 하였죠.
그렇다면 페이지에 커다란 이미지가 하나 있을 경우에는
4개로 자르면 훨씬 로딩 속도가 빨라지지 않을까요?
물론 훨씬 로딩이 빨라집니다.
이미지를 조각내서 올린후 웹상에서 붙여지도록 합시다.
해상도가 중요한 경우가 아니라면 이미지를 작게 만든후에
웹상에서 이미지 사이즈를 지정하여
확대시키는 방법도 생각할 수 있겠죠.
이미지의 질을 손상시키지 않는 범위에서 jpg 보다는 gif를 쓰며
색의 종류도 불필요하게 많이 넣지 마세요
또 이미지의 색상을 줄이면 이미지 용량이 줄어듭니다.
따라서 불필요한 색을 없애고 투명 이미지를 적극 활용해 봅시다.
★ 특수문자활용하기 ★
쓸데없이 목록 표시등에 이미지를 붙이는 것보다는
특수문자를 잘 활용하면 이미지 못지 않은 효과를 줄 수 있습니다.
▲ ☆ ▩ ♣ ☞ ◈
어때요 예쁘지 않은가요?
항상 이용자의 입장에서 생각해 봅시다.
내가 만든 페이지가 손님들에게 짜증을 주지는 않는지...
★ 반복적인이미지를사용 ★
동일한 이미지를 여러차례 사용하는 경우
매번 새로 이미지를 불러들이지 않게 해야 합니다
서로 다른 페이지에서라도 동일한 그림을 쓸 경우
새로 로딩을 받지 않고 캐쉬에 저장된 이미지를 불러들여 사용합니다.
물론 이렇게 되면 속도가 훨씬 빠르죠.
이렇게 하기 위해서는 여러차례 사용되는 이미지는
특정한 폴더에 넣고 계속 같은 폴더에 링크시켜 사용해야 합니다.
★ 애플릿은 신중하게 ★
아무리 잘 짜진 애플릿이라고 하더라도 애플릿은 속도가 느립니다.
더구나 중간에 중단도 안 되지요..
이러한 싸이트는 절대 다시 안 옵니다.
로딩에만 1,2분씩 걸리는데 열받구 화나구 씩씩대면서
구석의 × 표시만 수도없이 누르고 있습니다.
꼭 쓰고 싶으신 분은 반드시 로딩속도도 확인하시고
여러개 집어넣지 말아주세요..
홈페이지는 자기 개인의 만족만을 위한 것이 절대 아닙니다.
상업적 목적의 홈페이지에서는 애플릿을 안 쓰잖아요.
자바스크립트로도 웬만한건 다 할 수 있습니다.
★ 다른방법들 ★
① 섬네일 이미지
큰 사진 같은걸 올릴땐 섬네일
(작은 이미지를 먼저 보여주고 원하면 클릭해서 큰 사진을 보여주는)
을 사용하는 것이 에티켓이라고 합니다.
② CGI 선택시 속도를 고려
CGI는 애플릿과 더불어 인터넷 속도를 잠식하는 주범중의 하나입니다.
CGI 선택시 속도를 살펴보고 제대로 프로그래밍 된 것을
선택하는 것도 훌륭한 생각일 것입니다.
③ 포토샵 에서는 이미지 저장시 Save For Web으로
색상 수를 줄여 저장하면 이미지 용량이 줄어듭니다.
댓글 20
-
＃피터팬증후군
2004.06.23 23:16
윤미쩜넷에서 본거다.. ㅇ_ㅇ.. -
惡鬼。
2004.05.01 21:34
최고입니다~ 잘 참고할게요` -
이덕형
2004.04.29 18:56
예전에 초고속 인터넷이 보급되지 않았을 당시... 예를 들자면 56K 모뎀으로 인터넷을 하던 시절...그때는 이런 원칙들을 잘 지켰었는데 이젠 이런 규칙들이 별로 의미가 없는 듯 합니다. (딴지는 아니구요...그냥 그렇다는 거죠..) -
愛のつむじ風
2004.04.29 22:13
내일을 향하여 간다 // 무슨 말씀인지 모르겠네요. 말도 못 알아 듣겠고 앞뒤도 안맞고. -_-; -
DaiSeuKi
2004.04.29 13:18
이미지 사이즈 지정.
적절한 테이블의 사용.
애플릿은 신중하게.
이 세가지 만큼은 현재도 고려해야 할 사항에 속하겠지만..
나머지 것들은 옛날 옛적의 이야기 입니다..
(이와 똑같은 글을 벌써 몇년전에 본건지-_-)
다른 나머지 사항들에 신경쓰면 시대에 뒤떨어지는 요인이 되리라 봅니다만.. -
9000㎒
2004.04.29 13:32
CGI 부분에 대해서는 PHP는 그리 신경쓰지 않아도 됩니다. (Perl이 아닌 이상) -
2004.04.29 14:42
이미지 싸이즈를 조정하는것은 아무리 저사양이래도 컴퓨터가 거뜬히 처리해 냅니다.(233Mhz) 너무 복잡한 페이지가 아닌이상.
그리고 컴퓨터가 너무 고사양이 되어서... 다른것은 필요 없고 자바 애플릿에만 신중하게 하면 될것같습니다.(뒤 떨어지죠.) -
내일을 향하여 간다
2004.04.29 16:07
애플렛을 하게되면 좋긴 좋죠 그런데 에러코딩이 발생되면 웹상에 뛰울때 좀 느릴수가 있죠 근데 cgi 또는 php로하게 되면좋죠 php로 히게 되면 누가 소스를 훔쳐볼 염려는 없어서 좋죠 참.. -
lefthander
2004.04.29 16:26
alt 태그는 사실 이미지에 대한 설명을 적는 용도가 아니라,
텍스트 브라우저를 사용하는 등, 이미지를 볼 수 없는 브라우징 환경을 위함입니다.
따라서 이미지에 링크가 되어있는 경우를 제외하고는 남용하지 않는 것이 좋다고 할 수 있겠습니다. -
얼라라
2004.05.06 17:09
자유로운 싸이즈~
무한대 테이블~
대충 애플릿~
... 그럼에도 걱정없는줄~ 알았지유 ㅜ_ㅠ -
┏ⓩZion┛
2004.05.28 01:38
; 저도; 요즘은 괜찮다 싶어 걱정없이 이미지를 날려대었는데;
학교 컴퓨터나; 한 3년 정도 된 컴터에서 띄워보니; 로딩속도가 장난이 아니구만유~;
아직 조금은 고려가 필요할듯~; -
┏ⓩZion┛
2004.05.28 01:38
이미지 4개씩 로딩은 첨 알았네요; 감사합니다; -
천상원
2004.06.04 22:28
PHP는 PERL의 단점을 고려해서 만들어졌습니다. 부하가 적죠.....
Perl 스크립트를 올바르지않게 코딩해서 불러들이면 무한루프가 돌수도 있습니다..;;;;;;
잘못된걸 자꾸 시도하다보면 서버를 잡아먹을수도있으니... -
신유진
2004.09.06 12:51
사실 조금 옛날 이야기들 같네요. 요즘 인터넷 속도가 얼마나 빠른데...
그리고 ALT의 가장 큰 이유는 시각 장애인을 위해서라죠. 그러니 꼭 필요함. 꼭 지정해주세요! -
김윤회
2004.09.07 12:00
가장확실한방법..
가장비싼 도매인을 이용한다; -
에지
2004.09.25 16:02
신유진// 시각장애인은 눈이 안보이는데 alt로 넣은 텍스트를 어떻게 본단 말씀이시죠? -
예뜨락
2004.10.07 03:39
시각 장애인을 위한 프로그램들이 있으니 아마 거기서 받아 들이나 보죠 ^^;;; -
김희석
2004.10.15 02:00
앞의분들 요즘 컴퓨터가 빠르니까 인터넷이 빠르니까 필요없다고들 하십니다. 하지만 이것은 인터넷 환경이 빠른 우리나라 안에서만 해당하는 내용입니다. 유럽등 다른 나라에서 접속할 경우 특히 국내 사이트를 해외에서 접속할 경우 상당히 로딩속도가 느려 보기가 어려운 경우가 있습니다. 글로벌시대에 국내에서만 한정되어 사용하는 오만은 버려야 겠죠... 또한 얼마전 인터넷 종량제가 최악의 경우 실제로 적용이 된다면 바로 위와 같은 내용이 철칙으로 적용되어 홈페이지를 만들어야 할 것입니다. 종량제 실제로 적용되지 않기를 바라며... -
보쌈하림♬
2005.01.19 22:43
아주 좋은 팁이네요.저도 이중 한두가지는 하고 있는데요,배경고정이랑 크기조절 하고 있어요,ㅎㅁㅎ// -
내일은사랑
2006.04.04 23:18
좋은팁 잘보고 갑니다..^^ 많은 도움이 되겠네요~
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 동영상과 함께 자막 재생하기. [4] | 세강:D | 2004.08.16 |
| 도메인 포워딩 하기 [4] | 나준혁 | 2004.07.27 |
| 이미지에 필터만으로 그림자주기.. [15] | Simsim | 2004.07.07 |
| 어쩌다 나온 깔끔한 그레이 스크롤바.. 흠흠.. [11] | ☺심심 | 2004.06.06 |
| relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... [1] | PHASE | 2004.06.03 |
| 처음올립니다;ㅂ; 너무 신기한 거 발견;; [19] | 올리못™ | 2004.05.30 |
| 아이프레임 가로스크롤바 없애기 [3] | 백승창 | 2004.05.28 |
| 아기창 뜨고 부모창 닫기 [6] | 임소식 | 2004.05.19 |
| 플래시 swf파일 배경 투명하게 하기 ~~~ [8] | kim's | 2004.05.09 |
| 자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] | ☺심심 | 2004.05.02 |
| 홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법] [20] | kim's | 2004.04.29 |
| [tip]간단한 반투명 필터 적용법 [2] | 드래군 | 2004.04.21 |
| 제로보드에서 손쉽게 복사하는 소스 (아래보다 더 편함..) [2] | Danggn™ | 2004.04.17 |
| (For 초보)폼안에 내용을 자동선택+자동복사해줍니다. [6] | 쉬드 | 2004.04.10 |
| 모든 스킨에서 중국어 간체 볼 수 있도록 해주는 법... [6] | 학몽 | 2004.03.09 |
| 스타일 시트파일을 만들기 .. [4] | 박종익 | 2004.03.07 |
| 간단하게, 색깔있는 밑줄 긋기. [4] | naughtykidd | 2004.02.27 |
| 몇 가지 팁..( 좀 깁니다.. 어느 정도 안다고 생각하시는 분들, 추천 ) [3] | naughtykidd | 2004.02.26 |
| 스타일시트를 이용한 텍스트박스 스타일 제어(밑줄,점선) [8] | 01CODE.com | 2004.02.26 |
| 전송버튼의 테두리를 없애 BoA요 >_< [7] | 플로렐라 | 2004.02.14 |