웹마스터 팁
[Tip]로딩속도 높이는 10가지 방법.
2002.06.28 16:58
아래 10가지 로딩속도를 높이는 팁이 얼마나 도움이 될지는 모르겠어요. 평소에 코딩을 하면서 손에 익히면 좋을 것 같기도 해서 올립니다.
1. 이미지는 반드시 size를 지정한다.
이미지의 WIDTH와 HEIGHT를 입력하여 주면 로딩속도가 빨라집니다.
이미지 삽입시 test.gif (width=100, height=50 크기)라는 이미지를 올린다면
<img scr="test.gif" width=100 height=50 alt="샘플">
이와같이 이미지의 폭과 높이를 모두 넣어 주는 것이 로딩에 도움을 줍니다.
2. 배경 이미지를 고정시키기
대부분 같은 배경 이미지가 홈페이지 전체에 이어지는 경우가 많습니다.
이것이 통일성도 있고 혼란을 줄이는 방법이 되기도 하기 때문입니다. 이럴때 다음 태그를 삽입시켜 주시면, 배경이미지가 로딩되는 시간을 절약합니다.
<body bgproperties="fixed">
3. 캐시메모리에 다음 페이지의 이미지를 미리 받습니다.
다음 페이지로 연결되는 페이지라면 다음 페이지의 이미지를 미리 받아
캐시 메모리에 저장시켜두는 것이 다음 페이지의 로딩속도를 빠르게 합니다.
예를 들어 다음 페이지에 test.gif라는 큰 이미지가 있다면 앞 페이지의
하단에 다음 태그를 넣습니다. (앞페이지를 보는 동안 뒷 페이지 이미지를 받음)
<img src="test.gif" width=1 height=1>
이와같이 가로 세로를 1픽셀로 잡아 미리 받아놓으면 캐시 메모리에 이미지가 저장되어 다음페이지 로딩시에 빠르게 이미지를 받게 됩니다. 그리고 width와 height를 1로 잡았기 때문에 현재 페이지의 스크린에는 보이지 않습니다.
4. 이미지의 숫자는 4개 이하로 줄입니다.
대부분의 웹서버는 문서를 불러올 때 동시에 네개의 GIF파일을 호출합니다.
따라서 이미지 숫자가 세개인 것과 네개인 것에는 로딩속도에 큰 차이가 없지만 네개와 다섯 개는 속도의 차이가 매우 큽니다.
이미지 숫자가 다섯개 이상이 되면 로딩이 훨씬 느려집니다. 야후와 같은 검색엔진에서는 절대 한 페이지에 이미지를 네개 이상의 이미지를 쓰지 않는다고 합니다. 한 페이지에는 네개 이하의 이미지를 사용합시다.
5. 이미지 다이어트하기.
페이지에 커다란 이미지가 하나 있을 경우에는 4개로 자르면 훨씬 로딩 속도가 빨라집니다. 물론 훨씬 로딩이 빨라집니다. 이미지를 조각내서 올린 후 웹상에서 붙여지도록 합니다.
해상도가 중요한 경우가 아니라면 이미지를 작게 만든 후에 웹상에서 이미지 사이즈를 지정하여 확대시키는 방법도 생각할 수 있습니다. 이미지의 질을 손상시키지 않는 범위에서 jpg 보다는 gif를 쓰며 색의 종류도 불필요하게 많이 쓰지 맙시다.
또 이미지의 색상을 줄이면 이미지 용량이 줄어듭니다. 따라서 불필요한 색을 없애고 투명 이미지를 적극 활용해 봅시다.
6. 반복적인 이미지의 사용
동일한 이미지를 여러차례 사용하는 경우 매번 새로 이미지를 불러들이지 않게 해야 합니다. 서로 다른 페이지에서라도 동일한 그림을 쓸 경우 새로 로딩을 받지 않고 캐쉬에 저장된 이미지를 불러들여 사용합니다.
물론 이렇게 되면 속도가 훨씬 빨라집니다. 이렇게 하기 위해서는 여러차례 사용되는 이미지는 특정한 폴더에 넣고 계속 같은 폴더에 링크시켜 사용해야 합니다.
7. 적절한 테이블의 사용
이미지를 가능하면 줄이고 테이블을 이용함으로써 깔끔하고 산뜻한 효과를 볼 수 있습니다. 표나 셀의 테두리선 속성, 바탕색 속성 등을 이용하여 html문서만으로도 충분히 깔끔한 페이지를 작성할 수 있습니다.
테이블 사용은 이미지 화일에 비해서는 훨씬 빠르지만 로딩을 느리게 하는 원인이 되기도 하는데 지나치게 복잡한 테이블은 자제하는 것이 좋겠습니다.
또 세로로 길게 이어지는 테이블보다는 가로로 긴 테이블이 훨씬 로딩이 빠릅니다. 태그가 훨씬 절약되고 브라우저가 읽기 쉬워집니다.
8. 특수문자 활용하기
특수문자를 잘 활용하면 이미지 못지 않은 효과를 줄 수 있습니다.
▲ ☆ ▩ ♣ ☞ ◈
9. 자바 애플릿 만은 신중하게
아무리 잘 만든 자바 애플릿이라고 하더라도 애플릿은 속도가 느립니다. 더구나 중간에 중단도 안되고, 잦은 에러를 유발합니다. 이러한 사이트는 절대 다시 안 옵니다.
10. 그 외 다른 방법들
1) 섬네일 이미지 사용
큰 사진 같은걸 올릴땐 섬네일 이미지(작은 이미지를 먼저 보여주고 원하면
클릭해서 큰 사진을 보여주는)를 사용하는 것이 에티켓이라고 합니다.
2) CGI 선택시 속도를 고려
CGI는 애플릿과 더불어 인터네 속도를 잠식하는 주범중의 하나입니다.
CGI 선택시 속도를 살펴보고 제대로 프로그래밍된 것을 선택하는 것도
훌륭한 생각일 것입니다.
3) Save For Web
포토샵 5.5에서는 이미지 저장시 Save For Web으로 색상 수를 줄여
저장하면 이미지 용량이 줄어듭니다.
-웹마스터 학원 포탈 사이트- 퍼온글 임다. http://www.heymaster.com/
1. 이미지는 반드시 size를 지정한다.
이미지의 WIDTH와 HEIGHT를 입력하여 주면 로딩속도가 빨라집니다.
이미지 삽입시 test.gif (width=100, height=50 크기)라는 이미지를 올린다면
<img scr="test.gif" width=100 height=50 alt="샘플">
이와같이 이미지의 폭과 높이를 모두 넣어 주는 것이 로딩에 도움을 줍니다.
2. 배경 이미지를 고정시키기
대부분 같은 배경 이미지가 홈페이지 전체에 이어지는 경우가 많습니다.
이것이 통일성도 있고 혼란을 줄이는 방법이 되기도 하기 때문입니다. 이럴때 다음 태그를 삽입시켜 주시면, 배경이미지가 로딩되는 시간을 절약합니다.
<body bgproperties="fixed">
3. 캐시메모리에 다음 페이지의 이미지를 미리 받습니다.
다음 페이지로 연결되는 페이지라면 다음 페이지의 이미지를 미리 받아
캐시 메모리에 저장시켜두는 것이 다음 페이지의 로딩속도를 빠르게 합니다.
예를 들어 다음 페이지에 test.gif라는 큰 이미지가 있다면 앞 페이지의
하단에 다음 태그를 넣습니다. (앞페이지를 보는 동안 뒷 페이지 이미지를 받음)
<img src="test.gif" width=1 height=1>
이와같이 가로 세로를 1픽셀로 잡아 미리 받아놓으면 캐시 메모리에 이미지가 저장되어 다음페이지 로딩시에 빠르게 이미지를 받게 됩니다. 그리고 width와 height를 1로 잡았기 때문에 현재 페이지의 스크린에는 보이지 않습니다.
4. 이미지의 숫자는 4개 이하로 줄입니다.
대부분의 웹서버는 문서를 불러올 때 동시에 네개의 GIF파일을 호출합니다.
따라서 이미지 숫자가 세개인 것과 네개인 것에는 로딩속도에 큰 차이가 없지만 네개와 다섯 개는 속도의 차이가 매우 큽니다.
이미지 숫자가 다섯개 이상이 되면 로딩이 훨씬 느려집니다. 야후와 같은 검색엔진에서는 절대 한 페이지에 이미지를 네개 이상의 이미지를 쓰지 않는다고 합니다. 한 페이지에는 네개 이하의 이미지를 사용합시다.
5. 이미지 다이어트하기.
페이지에 커다란 이미지가 하나 있을 경우에는 4개로 자르면 훨씬 로딩 속도가 빨라집니다. 물론 훨씬 로딩이 빨라집니다. 이미지를 조각내서 올린 후 웹상에서 붙여지도록 합니다.
해상도가 중요한 경우가 아니라면 이미지를 작게 만든 후에 웹상에서 이미지 사이즈를 지정하여 확대시키는 방법도 생각할 수 있습니다. 이미지의 질을 손상시키지 않는 범위에서 jpg 보다는 gif를 쓰며 색의 종류도 불필요하게 많이 쓰지 맙시다.
또 이미지의 색상을 줄이면 이미지 용량이 줄어듭니다. 따라서 불필요한 색을 없애고 투명 이미지를 적극 활용해 봅시다.
6. 반복적인 이미지의 사용
동일한 이미지를 여러차례 사용하는 경우 매번 새로 이미지를 불러들이지 않게 해야 합니다. 서로 다른 페이지에서라도 동일한 그림을 쓸 경우 새로 로딩을 받지 않고 캐쉬에 저장된 이미지를 불러들여 사용합니다.
물론 이렇게 되면 속도가 훨씬 빨라집니다. 이렇게 하기 위해서는 여러차례 사용되는 이미지는 특정한 폴더에 넣고 계속 같은 폴더에 링크시켜 사용해야 합니다.
7. 적절한 테이블의 사용
이미지를 가능하면 줄이고 테이블을 이용함으로써 깔끔하고 산뜻한 효과를 볼 수 있습니다. 표나 셀의 테두리선 속성, 바탕색 속성 등을 이용하여 html문서만으로도 충분히 깔끔한 페이지를 작성할 수 있습니다.
테이블 사용은 이미지 화일에 비해서는 훨씬 빠르지만 로딩을 느리게 하는 원인이 되기도 하는데 지나치게 복잡한 테이블은 자제하는 것이 좋겠습니다.
또 세로로 길게 이어지는 테이블보다는 가로로 긴 테이블이 훨씬 로딩이 빠릅니다. 태그가 훨씬 절약되고 브라우저가 읽기 쉬워집니다.
8. 특수문자 활용하기
특수문자를 잘 활용하면 이미지 못지 않은 효과를 줄 수 있습니다.
▲ ☆ ▩ ♣ ☞ ◈
9. 자바 애플릿 만은 신중하게
아무리 잘 만든 자바 애플릿이라고 하더라도 애플릿은 속도가 느립니다. 더구나 중간에 중단도 안되고, 잦은 에러를 유발합니다. 이러한 사이트는 절대 다시 안 옵니다.
10. 그 외 다른 방법들
1) 섬네일 이미지 사용
큰 사진 같은걸 올릴땐 섬네일 이미지(작은 이미지를 먼저 보여주고 원하면
클릭해서 큰 사진을 보여주는)를 사용하는 것이 에티켓이라고 합니다.
2) CGI 선택시 속도를 고려
CGI는 애플릿과 더불어 인터네 속도를 잠식하는 주범중의 하나입니다.
CGI 선택시 속도를 살펴보고 제대로 프로그래밍된 것을 선택하는 것도
훌륭한 생각일 것입니다.
3) Save For Web
포토샵 5.5에서는 이미지 저장시 Save For Web으로 색상 수를 줄여
저장하면 이미지 용량이 줄어듭니다.
-웹마스터 학원 포탈 사이트- 퍼온글 임다. http://www.heymaster.com/
댓글 8
-
박세욱☺
2002.06.28 19:56
-
Eccen
2002.06.29 14:47
추가: 좀 골치아프겠지만 모든 이미지를 플래쉬로 컨버트 한다.
아실분은 다 아실듯;; -
이건용
2002.06.29 15:58
캐쉬에 이미지를 preLoad하고 싶을때는 html tag를 쓰는 것보다
javascript를쓰는것이 좋습니다.
<script language="javascript">
img1 = new Image();
img1.src="filename.jpg";
</script>
이렇게 하시면 점같은거 상관 안하셔도 됩니다. -
루트™
2002.07.06 09:54
Eccen// 플래시의 놀라운 이미지 압축 알고리즘을 적극 활용한 방법이네요 허허..-_-;; -
대한민국™
2002.07.04 22:35
이건용// 순간 놀랐습니다. 울틴구이름 하고 같아서.. 가는 인터넷은 겜밖에 모르는데.. ^^ 이미지를 뿌리는것보다 스크립트로 처리하는게 깔끔하져..^^ -
John Sync.
2002.07.14 13:51
Eccen//
플러그인 없는 사람은 조올라- 느려지죠. -
☺Lifestory™
2002.09.07 12:07
나모에서 이미지 미리 읽기 액션을 추가하면 더 간단하지 않을까요. ^^;; -
이즈비!
2003.03.04 13:36
로딩 검색하면 똑같은거 나옵니다. 1년전에 올린것 :)
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| xmp 태그를 아시나요 [9] | 세벌사랑 | 2002.07.30 |
| Scrollbar Generator [스크롤바 색상을 쉽게 바꿀수 있게 코드생성] [6] | 문사라 | 2002.07.11 |
| 전광판? 나도 한 번 해볼까 ^^v [4] | Xynex:) | 2002.07.03 |
| [사이트제작팁]팁의 보물창고~ [7] | webdio *^-^* | 2002.07.03 |
| >> 밑줄과 글씨의 색을 다르게 [예제포함] [3] | 아미v | 2002.06.29 |
| [Tip]로딩속도 높이는 10가지 방법. [8] | HomeBox™ | 2002.06.28 |
| 마우스 오버시에 텍스트 버튼느낌 style.css 와 자동 스크롤 기능 [5] | HomeBox™ | 2002.06.27 |
| 제로보드 가입폼에 css쉽게 적용하기 | {동준짱} | 2002.06.26 |
| 로보트 검색엔진에 잘 걸리는 Meta Tag 작성법 [8] | 이성영 | 2002.06.20 |
| TEXTAREA 스크롤바 뒤집기 [4] | ZipShin | 2002.06.20 |
| 이쁜 css 파일2 [6] | HomeBox™ | 2002.06.17 |
| [re] 이쁜 css 파일2 [3] | t(T^T)t_Man. | 2005.01.07 |
| 이쁜 css 파일1 [1] | HomeBox™ | 2002.06.17 |
| Filters and Transitions .... [4] | 점퍼워니 | 2002.06.17 |
| 스크롤바 색상 변경 ...! [6] | 오빠야™ | 2002.06.17 |
| 웹강의 할떄 소스 보이기 할떄 쓰는 특수문자!! [4] | 류™ | 2002.06.16 |
| 홈페이지의 대문에서 스크롤바 없애기 [10] | keymove | 2002.06.15 |
| MSN.. 추가하기, 채팅하기.. (출처.. 수정) [11] | 하놈 | 2002.06.05 |
| ▶ 마우스 오른쪽 누르기 막힌거 뚫는법 [25] | ★쿠쿠로 | 2002.05.22 |
| Input, Textarea, Radiobutton, Checkbox등 disabled 옵션. [3] | 카멜롯™ | 2002.05.20 |
3. 캐시메모리에 다음 페이지의 이미지를 미리 받습니다.
이렇게 하면 어차피 이전 페이지 로딩이 느려지는거 아닌가요? -_-;;
그리고 가로 세로 픽셀을 1로 잡으면 아주 작은 검은색점같은걸로 나올텐데..
가로와 세로 모두 0으로 잡아도 될겁니다.
차라리 그림을 4개이상으로 나누는게 더 빠르고 효율적일듯 싶네요 ^^