웹페이지의 속도 올리고 높이기 (How to speed up my homepage ?!)

아래의 내용은 한컴 온라인 매거진의 '97.4.1일자 특집기사인 웹 속도 올리고 높이기를 요약한 것이다.

1. Navigation icon의 사용과 위치선택

Navigation icon이란 site의 각 항목으로 들어갈 수 있도록 만든 일종의 menu 그림으로 경 우에 따라 navigation bar, navigator 또는 menu bar 등으로도 불린다. 일반적으로 자신의 web site에 navigation icon image를 사용하면 user로 하여금 더욱 쉽게 site 전체의 구조를 알 수 있게 하는데 모든 page에 navigation icon이 있는 경우 그 위치가 매우 중요하게 된 다. 일반적으로 browser는 화면의 위부터 아래로 순차적으로 보여주는데 navigation icon이 상단에 위치하면 cache의 영향으로 다른 page로 이동시 즉각 상단의 navigation icon이 나 타나게 된다. 이는 심리적으로 매우 빠른 display effect를 주기 때문에 많은 web site들이 이런 방법을 채택하고 있다.

Fig 1 : Yahoo의 navigation icon

Fig 2 : 넷퀘스트 21의 navigation icon

2. Table을 쓸때는 반드시 table내의 image size를 지정하라.

경계선 없는 table을 사용하면 인쇄물을 보는 것같은 화려한 느낌을 주는데 다단 구성의 page작성시 가장 중요한 것은 table내의 images에 모두 width와 height를 지정해 주는 것이 다.

3. Page 마다 내용의 중복이 많은 경우 frame을 사용하라.

동일한 화면요소 - 예를 들어 앞서 말한 navigator menus - 가 web page 마다 존재할 경 우 이를 frame으로 대체할 수 있다. 여러개의 menu를 가지고 있을 경우 frame을 사용하면 항상 고정적으로 나타나는 항목을 다시 display 하지 않아도 된다는 장점이 있다. 그러나 frame을 사용하는 경우 가뜩이나 비좁은 browser의 화면이 분힐되어 깨끗한 느낌을 주지 못하는 경우가 있는데 이런 것을 고려하여 대부분의 web site에서는 경계선이 없는 frame 을 사용하는 추세이다.

Fig 3 : Border가 없는 frame을 활용한 MSN

4. Image와 table background color를 적절히 활용하라.

Table의 tag 중 <TD>에는 여러가지 option이 있다. 그 중 background option을 유용하게 활용하면 graphic적인 effect를 나타내게 할 수 있다. Background option은 각각의 그림으로 표현하는 겻과 비슷한 효과를 얻을 수 있으면서, 동시에 전송시간의 대폭적인 절약에도 큰 역할을 한다.

5. Page의 길이를 줄여라.

일반적으로 users은 긴 문서를 읽으려 하지 않는다. 문서가 길어지면 마우스의 이동을 통해 스크롤바를 움직이는 육체적 노동이 필요해지기 때문이다. 또한 문서의 download에 걸리는 시간이 많이 소요된다.

6. 빠른 display를 위한 image technique

GIF - 만화나 일러스트 등의 적은 color를 사용하는 image. Gif89의 형식은 윤곽을 미리 보여준 상태에서 서서히 이미지를 완성해 나가는 방식의 interlace를 지원한다. 256 color 지원.
JPEG - 고해상도의 image나 많은 수의 색상을 포함한 image. Progressive JPEG라는 새로운 format이 마치 interlace GIF처럼 순차적으로 image를 완성시키는 기능을 내장하고 있다. True color 지원.

Image를 압축한다.

색상수를 줄인다.

Interlace GIF를 활용하라.

Image의 size를 반드시 포함한다.
Image tag인 <img> tag의 option 중 하나인 width와 height는 image의 size를 지정해주는 option이다. 이 option을 사용하면 browser가 image의 공간을 미리 확보하고 나머지 요소들을 모두 display 한다는 차이점을 가지게 된다. Image에 가로와 세로 size를 입력하면, web browser가 그 크기만큼의 space을 비워둔 채 나머지 요소들 (text)을 보여줌으로써, 결국 page의 모든 layout을 빠르게 보여줄 수 있으며 users 또한 원하는 내용이 있는지를 빨리 확인할 수 있다. Users은 미리 display된 text 부분을 읽어가며 동시에 차근차근 전송되어 오는 image를 보게 되는 것이다. Download 받으며 뜨게 되는 image를 볼 수 있게 되는 것이다. 이 option은 기본적인 webpage 내에서도 그 효과를 느낄 수 있지만 그 진가는 table 안에서 사용할 때 확실히 나타난다. Table을 사용한 page의 경우 그 table 내의 모든 구성요소를 전송받은 후 한꺼번에 display 되는 특성을 가지고 있다. 그렇기 때문에 다단구성으로 이루어진 webpage 들을 접속할 때 한참 동안은 하얗게 비어있는 화면만을 볼 때가 있다. Table 내에 image가 사용될 경우 반드시 size를 지정해주는 것이 좋다. 이렇게 하면 table로 구성된 webpage라 할지라도 table내의 image를 제외한 모든 text가 순식간에 뜨게 된다. 물론 image는 그 크기만큼의 여유 공간을 가지고 있다.

ALT로 image의 설명을 달자

커다란 그림을 사용해야 한다면 쪼개지 말고 하나로 사용하고 low tag를 사용하여 전송시간을 줄인다.

Background image를 사용할때는 그 size를 최소화한 상태에서 사용하며 되도록 background image를 쓰지 않는 것이 이상적이다. 만약 써야 한다면 가장 적절한 background image의 size는 100*100을 넘지 않아야 한다고 전문가들은 말한다. Background image의 전송속도는 일반적으로 JPEG형식의 image가 GIF보다 조금 빠르다고 알려져 있다.

Image map의 사용
너무 큰 image map를 사용하지 말고 반드시 text link도 page의 하단에 첨부하는 것이 좋다.

1 pixel GIF의 사용
HTML로 만드는 webpage는 word processor의 그것과 달라 줄간격이나 text 장식이 매우 불편한 것이 사실이다. 특히 한글의 경우 줄간격이 영어에 비해 상대적으로 좁게 느껴져 이를 보기 좋게 하기 위한 여러가지 방법들이 사용되고 있다. Netscape에서는 <Space>라는 tag를 지원하고 있어 이를 사용하면 가로 세로로 적당한 크기의 공백을 쉽게 만들 수 있다. 하지만 이 tag는 아쉽게도 MS Explorer에서 지원되지 않는다. &nbsp라는 tag도 빈 공백을 만들기 위해 사용되지만, 한칸밖에 공백을 만들지 않아 좌우여백을 크게 설정해주기 위한 방법으로 투명한 GIF image를 사용하기도 한다. 그렇다고 여백만큼의 크기를 가지는 이미지를 만들면 괜히 file size만 커져 효과적이지 못할 때가 있다. 이럴 때, 유용하게 쓰일 수 있는 방법이 바로 1 pixel 짜리 GIF image를 이용하는 것이다. 1 pixel 짜리 image는 file size가 적어 빠르게 전송될 수 있고, 그 size를 마음대로 조정할 수 있다는 장점을 가진다.

일반적으로 web site의 page에 image를 담을 때 전체 image file의 합이 50 KB를 넘지 않는 것이 좋다고 한다.

7. 빠른 web surfing을 위한 browser 설정

Cache size를 늘린다.
Netscape 사용자라면 'Options-Network Preferences' menu에 있는 Cache tab을 열어 memory cahce와 disk cache 설정값을 변경할 수 있는데 cache 총량이 10MB를 넘지 않도록 하고 RAM cache는 자기 RAM 용량의 1/8 정도로 설정하면 최적의 성능을 발휘할 수 있다. Explorer를 사용한다면 'View-Option' Advanced Tab에서 cache값을 변경할 수 있는데 hard disk 용량의 약 1/100 정도로 설정하는 것이 좋다.

Image 자동 불러오기를 선택하지 않는다.

Image 불러오는 방식을 바꾼다.
'While Loading'보다 'After Loading'을 선택하는 것이 조금 더 browsing시간을 절약하는 방법이지만 그 차이가 그리 큰 것은 아니다. 다만 text를 읽고 나서 그림 file 등 기타 file을 불러오는 browser특성상 이 option을 선택하면 text가 먼저 화면에 뿌려지므로 내용을 검토하고 바로 다음 page로 넘어가는 방식으로 시간을 절약할 수 있는 것이다.

Network socket 수를 늘린다.
Socket이란 computer와 network간에 file을 주고 받는 통로를 말한다. 보통 기본값으로 socket 4개를 열도록 하고 있는데 이 말은 한번에 file 4개만 받아올 수 있다는 것이다. System이 허락한다면 이 값을 늘려잡는 것도 시간을 절약할 수 있는 한 방법이다. HTML 문서를 불러올 때 그 speed는 socket수에 비례하는데 netscape 사용자라면 'Options -Network Preferences' Connection tab에 있는 'Number of Connections' 항목에서 변경할 수 있다. 최대 20개 socket까지 지정할 수 있지만 28.8Kbps 이하 모뎀 접속자라면 10개 정도가 안정적이다. Explorer에서는 socket수를 변경할 수 없다.

Java, Java script를 불러오지 않는다.