웹페이지 속도 빠르게 하는 방법 10가지

31367 
Created at 2007-06-21 06:40:09 
490   0   0   0  
1. 이미지는 반드시 싸이즈를 지정

이미지의 WIDTH와 HEIGHT를 입력하여 주면 로딩속도가 빨라집니다. 이미지를 삽입시 가령 sample.gif (width=200, height=60 크기) 라는 이미지를 올린다면
[img scr="sample.gif" width=200 height=60 alt="샘플">
이와같이 이미지의 폭과 높이를 모두 넣어 주는 것이 로딩에 도움을 줍니다. 또한 alt 태그를 이용하여 이미지에 대한 설명을 주면 방문객들에게 친절한 서비스를 제공하는 것이며 네스캐이프나 익스플로러 이외에 다른 텍스트 브라우저를 쓰는 사람들에게 많은 도움이 되겠죠.

2. 다음 페이지의 이미지를 미리 받습니다

다음페이지로 연결되는 페이지라면 다음 페이지의 이미지를 미리 받아 캐시 메모리에 저장시켜두는 것이 다음페이지의 로딩속도를 빠르게 합니다. 예를 들어 다음 페이지에 sample2.gif라는 큰 이미지가 있다면

이와같이 가로 세로를 1픽셀로 잡아 미리 받아놓으면 캐시 메모리에 이미지가 저장되어 다음페이지 로딩시에 빠르게 이미지를 받게 됩니다.
그리고 width와 height를 1로 잡았기 때문에 현재 페이지의 스크린에는 보이지 않습니다. 설마 alt 태그로 여기에 설명을 붙이는 사람은 혹시 없겠죠?

3. 배경 이미지를 고정시킴

대부분 같은 배경 이미지가 홈페이지 전체에 이어지는 경우가 많죠.
이것이 통일성도 있고 혼란을 줄이는 방법이 되기도 하니까요.
이럴 땐 다음 태그를 삽입시켜 주세요 배경이미지가 로딩되는 시간을 절약합니다. 다음 페이지에서 부터는 배경 이미지가 스크롤 되지 않습니다.

4. 이미지의 숫자는 4개 이하로

대부분의 웹서버는 문서를 불러올 때 동시에 네개의 GIF파일을 호출합니다. 따라서 이미지 숫자가 세개인 것과 네개인 것에는 로딩속도에 큰 차이가 없지만 네개와 다섯 개는 속도의 차이가 매우 큽니다.
이미지 숫자가 다섯개 이상이 되면 로딩이 훨씬 느려지겠죠.
야후와 같은 검색엔진에서는 절대 한페이지에 이미지를 다섯개 이상의 이미지를 쓰지 않는다고 합니다. 한 페이지에는 네개 이하의 이미지를 사용합시다. (4개 까지만 사용)

5. 적절한 테이블의 사용

이미지를 가능하면 줄이고 테이블을 이용함으로써 깔끔하고 산뜻한 효과를 볼 수 있습니다. 표나 셀의 테두리선 속성, 바탕색 속성등을 이용하여 html문서만으로도 충분히 깔끔한 페이지를 작성할 수 있습니다.
테이블로 이미지화일에 비해서는 훨씬 빠르지만 로딩을 느리게 하는 원인이 되기도 하는데 지나치게 복잡한 테이블은 자제하는 것이 좋겠습니다. 또 세로로 길게 이어지는 테이블보다는 가로로 긴 테이블이 훨씬 로딩이 빠릅니다. 태그가 훨씬 절약되고 브라우저가 읽기 쉽죠.

6. 이미지 다이어트

아까 웹 서버는 동시에 4개의 이미지를 읽는 다고 하였죠. 그렇다면 페이지에 커다란 이미지가 하나 있을 경우에는 4개로 자르면 훨씬 로딩 속도가 빨라지지 않을까요? 물론 훨씬 로딩이 빨라집니다.
이미지를 조각내서 올린후 웹상에서 붙여지도록 합시다.
해상도가 중요한 경우가 아니라면 이미지를 작게 만든후에 웹상에서 이미지 사이즈를 지정하여 확대시키는 방법도 생각할 수 있겠죠. 이미지의 질을 손상시키지 않는 범위에서 jpg 보다는 gif를 쓰며 색의 종류도 불필요하게 많이 넣지 마세요. 또 이미지의 색상을 줄이면 이미지 용량이 줄어듭니다. 따라서 불필요한 색을 없애고 투명 이미지를 적극 활용해 봅시다.

7. 특수문자 활용하기

쓸데없이 목록 표시등에 이미지를 붙이는 것보다는 특수문자를 잘 활용하면 이미지 못지 않은 효과를 줄 수 있습니다.
▲ ☆ ▩ ♣ ☞ ◈
어때요 예쁘지 않은가요? 항상 이용자의 입장에서 생각해 봅시다.
내가 만든 페이지가 손님들에게 짜증을 주지는 않는지...

8. 반복적인 이미지의 사용

셀의 바탕화면 이미지를 모두 같은 것으로 해서 위에 텍스트를 입히는 겁니다. 직접 글씨를 이미지로 제작하려면 타이틀 숫자만큼 이미지가 필요하겠지만 셀 바탕그림 하나만 로딩시키고 글자는 위에 입힙니다.
그렇게 함으로써 충분히 보기 좋으면서도 용량은 1/10로 줄일 수가 있겠죠.

9. 제발 애플릿 만은 신중하게

꼭 쓰고 싶으신 분은 반드시 로딩속도도 확인하시고 여러개 집어넣지 말아주세요.. 홈페이지는 자기 개인의 만족만을 위한 것이 절대 아닙니다. 애플릿은 더구나 중간에 중단도 안 되지요.. 이러한 싸이트는 절대 다시 안 옵니다. 로딩에만 1,2분씩 걸리는데 열받구 화나구 씩씩대면서 구석의 × 표시만 수도없이 누르고 있습니다. 상업적 목적의 홈페이지에서는 애플릿을 안 쓰잖아요. 아마 보안에도 문제가 있다는 말을 들은적이 있습니다. 자바스크립트로도 웬만한건 다 할 수 있습니다.

10. 그외 다른 방법들

+섬네일 이미지
큰 사진 같은걸 올릴땐 섬네일 (작은 이미지를 먼저 보여주고 원하면 클릭해서 큰 사진을 보여주는) 을 사용하는 것이 에티켓이라고 합니다.

+불필요한 태그는 삭제합시다.
나모나 위지웍 방식의 에디터를 쓸 경우 불필요한 태그가 자동으로 생성되거나 본의 아니게 제작중 생성됩니다. 제작후 확인하여 불필요한 태그를 삭제시키는 것이 용량을 줄여 줍니다.


Tags: 웹사이트최적화 윈도우즈 최적화 포탈최적화 Share on Facebook Share on X

◀ PREVIOUS
글자 깜빡이게 하기
▶ NEXT
시간 알아내는 함수 gmtime
  댓글 0
로그인을 하시면 댓글을 등록 할 수 있습니다.
SIMILAR POSTS

온톨로지(ontology)란 무엇인가? (created at 2007-07-11)

OWL(One World Language)은 무엇인가? (created at 2007-07-11)

OWL(One World Language)의 다른 종류 (created at 2007-07-11)

UTF-8로 인코딩된 문자열을 EUC-KR로 바꾸는 방법 (created at 2007-05-29)

UPnP 네트워크의 예 (created at 2007-05-27)

UPnP 프로토콜 개요 (created at 2007-05-27)

UPnP 네트워크의 구성요소 (created at 2007-05-27)

UPnP의 작동 방법 (created at 2007-05-27)

DLNA, UPnP 개요 (created at 2007-05-27)

원격 부팅(Wake on-LAN : WOL) (created at 2007-05-27)

유즈 케이스(Use Case)를 활용한 UML 표기법 입문 (created at 2007-05-26)

소켓 프로그래밍 기본 흐름 - Socket Programming Basic Flow (created at 2007-07-16)

백줄 글보다 낫다「다이어그램 작성 프로그램」 (created at 2007-05-26)

UML은 무엇을 위해 있는 것일까? (created at 2007-05-26)

소켓을 생성하여 CSocket에 Attach하는 방법 (created at 2007-07-19)

MFC에서 디스크 포멧(Disk Format)하기 (created at 2007-07-20)

PC 부팅할때 Num Lock 키 해제하는 방법 (created at 2007-07-21)

Exchange Server 인증서 때문에 Windows Mobile 디바이스와 ActiveSync가 되지 않는 경우 해결법 (created at 2007-07-24)

타임아웃 시간줄이기 (created at 2007-05-18)

XP 윈도우 창 속도 높이기 (created at 2007-05-18)

Windows XP에서 윈도우 창이 뜨는 속도를 높이는 방법 (created at 2007-05-18)

Windows XP Shutdown(윈도우종료) 빠르게 하기 (created at 2007-05-18)

내컴퓨터의 <공유문서>를 보이지 않게 하려면? (created at 2007-05-18)

자신의 Windows XP 정품 인증 확인 방법 (created at 2007-05-18)

프로그램 목록에서 지워지지 않는 목록 지우기 (created at 2007-05-18)

PC가 점점 느려지고 있다면 바탕화면에 있는 단축 아이콘이 점유하는 메모리 용량을 되찾아라 (created at 2007-05-18)

폴더 창 실행 속도 끌어올리기 (created at 2007-05-18)

윈도의 묵묵부답! '무응답 시간' 단축하기 (created at 2007-05-18)

리아(RIA)가 온다...리아를 주목하라... (created at 2007-05-16)

초창기 윈도우즈 (created at 2007-05-16)

WindowsXP 부팅시 부팅 로고 안나오게 하는 방법 (created at 2007-05-14)

노턴 고스트 2005 (9.0) 설치 및 사용방법 (created at 2007-05-13)

특정 폴더의 특정 파일만 파일명으로 지우기 (created at 2007-05-07)

ShellExecuteEx를 이용한 커맨드라인 기반 어플리케이션 실행 (created at 2007-05-07)

듀얼모니터를 쓸때 태스크바가 하나 밖에 없어서 불편했던 사람들을 위한 - 듀얼모니터용 프로그램 울트라몬 (UltraMon) (created at 2007-08-08)

한글을 유니코드 또는 UTF-8포멧으로 변환하는 방법 (created at 2007-08-09)

델파이에서 URL Encoding 하는 방법 (created at 2007-08-09)

쓰기 불편해 XP로 U턴하는 이용자 늘어, 윈도비스타 '징검다리 OS' 되나 (created at 2007-08-09)

비스타에 이은 마이크로소프트 윈도우 차기 버전「윈도우 7」 (created at 2007-08-09)

마이크로소프트 윈도우7 (WIndows 7) 미공개 바탕화면 (created at 2007-08-09)

TComboBox Readonly로 만드는 방법 (created at 2007-08-09)

블로그를 쉽게 할 수 있도록 도와주는 블로깅툴 - Windows Live Writer (created at 2007-10-10)

PC에서 동영상 삭제가 안될때. (created at 2007-02-14)

대문자, 소문자 변환 함수 (created at 2007-02-14)

Apple iPod Remote Control Protocol (created at 2007-02-06)

훅 인스턴스의 생성과 해제 (created at 2007-02-06)

virtual와 override 문의 사용법에 대해서 (created at 2007-02-06)

델파이로 긁어오는 HTML 페이지 (created at 2007-02-06)

마우스 커서 모양바꾸기 (created at 2007-01-28)

Windows95/98 암호 알아내기 (created at 2007-01-28)

OTHER POSTS IN THE SAME CATEGORY

비스타에 이은 마이크로소프트 윈도우 차기 버전「윈도우 7」 (created at 2007-08-09)

쓰기 불편해 XP로 U턴하는 이용자 늘어, 윈도비스타 '징검다리 OS' 되나 (created at 2007-08-09)

델파이에서 URL Encoding 하는 방법 (created at 2007-08-09)

한글을 유니코드 또는 UTF-8포멧으로 변환하는 방법 (created at 2007-08-09)

듀얼모니터를 쓸때 태스크바가 하나 밖에 없어서 불편했던 사람들을 위한 - 듀얼모니터용 프로그램 울트라몬 (UltraMon) (created at 2007-08-08)

Exchange Server 인증서 때문에 Windows Mobile 디바이스와 ActiveSync가 되지 않는 경우 해결법 (created at 2007-07-24)

PC 부팅할때 Num Lock 키 해제하는 방법 (created at 2007-07-21)

MFC에서 디스크 포멧(Disk Format)하기 (created at 2007-07-20)

소켓을 생성하여 CSocket에 Attach하는 방법 (created at 2007-07-19)

소켓 프로그래밍 기본 흐름 - Socket Programming Basic Flow (created at 2007-07-16)

Java로 구현하는 간단한 Client & Server 프로그램 (created at 2007-07-16)

OWL(One World Language)의 다른 종류 (created at 2007-07-11)

OWL(One World Language)은 무엇인가? (created at 2007-07-11)

온톨로지(ontology)란 무엇인가? (created at 2007-07-11)

시간 알아내는 함수 gmtime (created at 2007-06-27)

글자 깜빡이게 하기 (created at 2007-06-05)

PHP에서 URL Open시 에러가 날때 (created at 2007-06-05)

UTF-8로 인코딩된 문자열을 EUC-KR로 바꾸는 방법 (created at 2007-05-29)

UPnP 네트워크의 예 (created at 2007-05-27)

UPnP 프로토콜 개요 (created at 2007-05-27)

UPnP 네트워크의 구성요소 (created at 2007-05-27)

UPnP의 작동 방법 (created at 2007-05-27)

DLNA, UPnP 개요 (created at 2007-05-27)

원격 부팅(Wake on-LAN : WOL) (created at 2007-05-27)

유즈 케이스(Use Case)를 활용한 UML 표기법 입문 (created at 2007-05-26)

백줄 글보다 낫다「다이어그램 작성 프로그램」 (created at 2007-05-26)

UML은 무엇을 위해 있는 것일까? (created at 2007-05-26)

타임아웃 시간줄이기 (created at 2007-05-18)

XP 윈도우 창 속도 높이기 (created at 2007-05-18)

Windows XP에서 윈도우 창이 뜨는 속도를 높이는 방법 (created at 2007-05-18)

UPDATES

자리 마음에 안든다고 6급 공무원 패는 농협 조합장 (created at 2024-03-26)

85세 딸 짜장면 사주는 102세 어머니 (created at 2024-03-26)

1990년대 감각파 도둑 (created at 2024-03-26)

치매에 걸린 69살의 브루스 윌리스가 전부인 데미무어를 보고 한 말 (updated at 2024-03-22)

일제강점기가 더 살기 좋았을지도 모른다는 조수연 국민의힘 후보 - 친일파? (updated at 2024-03-14)

성일종 인재육성 강조하며 이토 히로부미 언급 - 인재 키운 선례? (updated at 2024-03-13)

경제는 대통령이 살리는 것이 아닙니다 라던 윤석열대통령 - 상황 안좋아지자 여러 전략을 펼쳤지만, 부작용 속출했던 2024년의 봄 (updated at 2024-03-13)

극빈의 생활을 하고 배운것이 없는 사람은 자유가 뭔지도 모를 뿐 아니라 왜 개인에게 필요한지에 대한 필요성을 못느낀다는 윤석열 대통령 (updated at 2024-03-08)

조선일보를 안본다는 사람들이 말하는 그 이유 - 천황폐하, 전두환 각하, 김일성 장군 만세? (created at 2024-03-07)

광폭타이어를 장착하면 성능이 좋아질거라는 착각 (updated at 2024-03-03)

면허시험장에서 면허갱신하면 하루만에 끝나나? (updated at 2024-03-03)

신한은행/신한투자증권 금융거래 종합보고서 다운로드 방법 (updated at 2024-02-26)

100년 된 일본 장난감 회사가 내놓은 변신 기술에 난리난 과학계 (created at 2024-02-26)

알리에서 발견한 한글 지원하는 가성비 쩌는 무선 기계식키보드 (updated at 2024-02-25)

쌍팔년도가 1988년인줄 알았던 1인 (updated at 2024-02-23)

이쁜 색으로 변신한 테슬라 사이버트럭 (created at 2024-02-23)

2024년 카타르 아시안컵 4강전 전날 한국 대표팀 내부에 있었던 이강인의 폭주 (updated at 2024-02-21)

강릉 맛집 지도 (updated at 2024-02-20)

간이 안좋을 때 나타나는 증상 20가지 (updated at 2024-02-20)

배설물을 이용하여 일본에 저항했던 독립운동가 조명하 (updated at 2024-02-20)

요건 몰랐지롱? 이순신을 사랑한 외국인 (created at 2024-02-20)

원빈도 머리빨 (created at 2024-02-19)

대표적인 대한민국의 미남배우 중 하나인 원빈 (created at 2024-02-19)

백제의 건국 시조 온조왕 (updated at 2024-02-19)

700년동안 대한민국 고대국가의 한축이었던 백제시대 (created at 2024-02-19)

대머리들에게 주는 대머리의 조언 (created at 2024-02-17)

일본의 여성 락그룹 프린세스 프린세스의 "다이아몬드" (created at 2024-02-17)

결혼식 직전 연락두절된 신랑 (created at 2024-02-17)

대한민국 축구팀 파문으로 인해 중국 소셜미디어까지 등장한 탁구 전도사 이강인 (updated at 2024-02-16)

조국의 반격으로 흥미진진하게 흘러가는 한국의 정치판 - 데뷰와 동시에 한동훈 장관에게 던진 4개의 질문 (updated at 2024-02-15)

2024년 카타르 아시안컵 4강전 전날 내분사태로 갑자기 회자되는 이승우선수의 친화력 (created at 2024-02-15)

카카오뱅크 금융거래종합보고서/잔액증명서/거래내역서 발급 방법 (created at 2024-02-14)

아이가 최고의 스승이었다 (created at 2024-02-13)

이제는 국민 유행어로 등극한 한동훈의 "싫으면 시집가" (updated at 2024-02-13)

설 연휴 잔소리 메뉴판 - 이제 잔소리 하기전에 요금부터... (updated at 2024-02-10)

로버트 드니로의 70년 전 모습 (created at 2024-02-08)

카메라 어플로 만들어본 슈퍼걸 - 엄... 최종 작품은 왠지... (created at 2024-02-08)

앞트임 하고 새롭게 태어난 대한민국의 젊은 용사 (created at 2024-02-08)

비가 억수로 내리던 2024년의 2월 어느날 캘리포니아의 밤 카니예 웨스트와 그의 아나 비앙카 센소리 (updated at 2024-02-08)

스케방형사 1화 - 수수께끼의 전학소녀사키 (created at 2024-02-05)

백제와 일본의 교류가 가장 활발했던 시기는 근초고왕 시대 (created at 2024-02-05)

일에 찌들은 아빠가 꿈에서 깨어나지 않자 구출해주는 짱구 (created at 2024-02-03)

이제는 할아버지가 된 휴 그랜트(Hugh Grant)가 블랙핑크 콘서트에 다녀온 후 소감 (created at 2024-02-03)

다시 한번 감상해보는 추억의 날리면 패러디 (updated at 2024-02-01)

25년간 노예로 살다가 돌아온 남동생 (created at 2024-02-01)

가까우면서도 멀게 느껴지는 나라 일본 (created at 2024-02-01)

친구와 비교하다가 이혼하게 된 부부 (created at 2024-02-01)

요꼬 미나미노의 바람의 마도리걸(風のマドリガル) (created at 2024-01-30)

옛날 어린이들이 신문을 챙겨봤던 이유 (created at 2024-01-30)

Remaster된 요꼬 미나미노(南野陽子)의 판도라의 연인(パンドラの恋人) (updated at 2024-01-30)