Home-theater-designers
웹 사이트를 운영하는 경우 이미 방법을 알고 있어야 합니다. 올바른 이미지 형식 사용 웹용으로 이미지를 최적화합니다. 그러나 이미지 압축은 잘 알려진 관행이지만 HTML 압축은 간과되는 경향이 있습니다. 이점은 가치가 있기 때문에 안타까운 일입니다.
이 기사에서는 HTML 파일을 축소하는 두 가지 주요 방법, HTML 파일을 축소해야 하는 이유 및 해결 방법을 살펴보겠습니다.
압축 대 축소
HTML 파일을 최적화하는 한 두 가지 주요 방법이 있습니다. 압축 그리고 축소 . 표면적으로는 비슷하게 들리지만 실제로는 두 가지 별개의 기술이므로 혼동하지 마십시오.
축소
축소는 소스 코드에서 불필요한 문자와 줄을 제거하는 것으로 생각할 수 있습니다. 들여쓰기, 주석, 빈 줄 등을 생각해 보십시오. HTML에서는 이들 중 어느 것도 필요하지 않습니다. 파일을 더 쉽게 읽을 수 있도록 하기 위해 존재합니다. 이러한 세부 정보를 트리밍하면 아무 영향 없이 파일 크기를 줄일 수 있습니다.
샘플 HTML 페이지:
Your Title Here
Send me mail at support@yourcompany.com .
This is a new paragraph!
This is a new paragraph in bold and italics.
원본 크기: 354. 축소된 크기: 272. 절약: 82(23.16%).
많은 웹 개발자와 사이트 소유자는 JS 및 CSS 파일에 대해서만 축소를 예약하지만 이러한 오래된 관행은 실수입니다. HTML 축소도 중요합니다.
2000년대에는 축소 도구가 드물었습니다. 파일이 변경될 때마다 수동으로 파일을 축소해야 했습니다. HTML 파일은 JS 및 CSS 파일보다 더 자주 변경되기 때문에 매번 축소하는 것은 너무 지루했습니다. 요즘은 논점입니다.
압축
사용자가 웹사이트를 방문할 때 HTTP 프로토콜을 사용합니다. 브라우저는 특정 페이지에 대한 요청을 웹 서버에 보내고 웹 서버는 페이지를 찾은 다음 해당 페이지의 내용을 방문자의 브라우저로 다시 보냅니다.
그러나 HTTP 프로토콜이 압축을 지원하기 때문에 웹 서버는 방문자에게 보내기 전에 페이지를 압축할 수 있으며(서버 설정에서 압축이 활성화되어 있다고 가정) 방문자의 브라우저는 페이지를 원래 상태로 압축 해제할 수 있습니다.
가장 일반적인 압축 방식은 GZIP 를 사용하는 파일 형식입니다. 무손실 압축 알고리즘 DEFLATE라고 합니다.
알고리즘은 HTML 파일에서 반복되는 텍스트를 찾은 다음 이러한 반복되는 항목을 이전 항목에 대한 참조로 바꿉니다. 각 참조는 단순히 두 개의 숫자입니다. 참조가 얼마나 멀리 있고 참조하는 문자 수입니다.
다음과 같은 텍스트 문자열을 고려하십시오(GZIP 웹 사이트에서 가져온 예).
Blah blah blah blah blah.알고리즘은 다음 반복을 인식합니다.
B{lah b}{lah b}{lah b}{lah b}lah.첫 번째 항목은 참조이므로 그대로 둡니다.
Blah b{lah b}{lah b}{lah b}lah.두 번째 항목은 첫 번째 항목 뒤에 5자 뒤에 있고 5자 길이로 다시 나타납니다.
Blah b[5,5]{lah b}{lah b}lah.그러나 이 경우 알고리즘은 다음 발생이 동일한 문자 시퀀스임을 인식하므로 참조 길이를 5만큼 확장합니다.
Blah b[5,10]{lah b}lah.다시 한번:
Blah b[5,15]lah.그리고 알고리즘은 다음 3개의 문자가 참조의 처음 3개 문자라는 것을 인식할 만큼 충분히 스마트하므로 3만큼 확장됩니다.
Blah b[5,18].이제 일반적인 HTML 파일과 그 안에 얼마나 많은 반복이 존재하는지 생각해 보십시오. 다음과 같은 거의 모든 태그
, 다음과 같은 해당 닫는 태그가 있습니다.
. 또한 다음과 같은 많은 태그가 전체에 걸쳐 반복됩니다.
,
,
![]()
,
, 등. 속성은 다음을 포함하여 자주 반복됩니다.
class,
href, 그리고
src. GZIP 압축이 HTML에서 왜 그렇게 효과적인지 쉽게 알 수 있습니다.
유일한 단점은 웹 서버가 페이지가 요청될 때마다 압축을 실행하기 위해 조금 더 많은 CPU가 필요하다는 것입니다. 그러나 요즘은 CPU가 크게 문제가 되지 않기 때문에 보급형 웹 호스팅이 있더라도 GZIP을 사용하지 않는 것보다 거의 항상 GZIP을 사용하는 것이 좋습니다.
압축 및 축소해야 하는 이유
두 가지 주요 이점이 있으며 둘 다 오늘날의 모바일 중심 웹 환경에서 매우 중요합니다.
더 빠른 페이지 로드
평균적으로 HTML 축소기는 기본 설정으로 파일 크기를 약 3% 줄일 수 있습니다. 선택적 고급 설정을 사용하면 HTML 파일을 3~7% 더 줄일 수 있으며 잠재적으로 최대 10%까지 줄일 수 있습니다. 이는 직접적으로 더 빠른 페이지 로드 시간으로 변환됩니다.
더 적은 대역폭 사용
총 50KB 축소를 위해 각각 50KB에서 45KB로 축소된 10개의 파일이 있다고 가정해 보겠습니다. 그리고 귀하의 웹사이트가 매일 평균 1,000명의 방문자에게 서비스를 제공한다고 가정해 보겠습니다. 여기서 각 방문은 평균 10페이지입니다. HTML 축소만으로도 하루에 50MB(한 달에 1.5GB)로 대역폭 사용량이 줄어듭니다.
압축 + 축소
보시다시피 HTML 축소는 그 자체로 유용합니다. 특히 사이트가 커지고 파일이 커지고 트래픽이 늘어남에 따라 더욱 그렇습니다. 참고 Google의 PageSpeed 가이드라인 HTML을 축소하는 것이 좋습니다. 따라서 회의적이라면 그렇지 않다고 확신하게 하십시오.
ISO 파일을 만드는 방법 Windows 7
그러나 HTML 최적화의 장점은 축소 또는 압축을 선택할 필요가 없다는 것입니다. 둘 다 할 수 있습니다! 사실, 당신은 ~해야한다 둘 다 하세요.
평균적으로 GZIP 압축은 HTML 파일을 70~90% 축소할 수 있습니다. 압축 추정치가 있는 위의 예를 사용하면 축소된 HTML 파일이 각각 45KB에서 13.5KB로 늘어나 총 365KB가 축소됩니다. 비압축/비압축에 비해 사이트 대역폭이 이제 하루에 365MB(월 11GB) 감소합니다.
그리고 대역폭 절감 외에도 최종 사용자의 브라우저는 페이지당 50KB가 아닌 13.5KB만 다운로드하면 되므로 각 페이지가 훨씬 더 빠르게 로드됩니다.
HTML 압축 및 축소 방법
다행히도 요즘에는 그다지 어렵지 않으며 설정하는 데 많은 기술적 노하우가 필요하지 않습니다.
워드프레스 플러그인
WordPress 사이트를 운영하는 경우 플러그인 하나만 설치하면 압축과 축소의 이점을 모두 누릴 수 있습니다.
대부분의 캐싱 플러그인은 단순히 페이지를 캐시하는 것 이상을 수행합니다. 예를 들어, WP 가장 빠른 캐시 그리고 W3 총 캐시 둘 다 페이지 로드 속도를 높이고 대역폭 사용을 줄이는 다른 기능 중에서 HTML 축소 및 GZIP 압축을 켤 수 있는 원클릭 설정이 있습니다.
만약 너라면 오직 축소를 원하면 권장합니다. HTML 축소 플러그인. 간단하고 HTML/CSS/JS를 지원하며 축소 방법을 약간 조정할 수 있습니다(예:
http:그리고
https:URL에서).
정적 HTML 축소기
HTML 파일이 정적(즉, CMS 또는 웹 프레임워크에 의해 동적으로 생성되지 않음)인 경우 두 가지 HTML 파일 세트를 유지할 수 있습니다. 소스 파일을 변경할 때마다 생성합니다.
축소하려면 다음 도구 중 하나를 사용하십시오.
이것은 WordPress와 같은 CMS에서 벗어나 이제 정적 사이트 생성기를 사용하는 경우 실행 가능한 기술입니다.
GZIP 압축 활성화
GZIP 압축을 활성화하는 단계는 사용 중인 웹 서버 소프트웨어에 따라 다를 수 있습니다. Apache는 가장 널리 사용되는 옵션이므로 .htaccess를 사용하여 활성화하는 방법을 다룰 것입니다.
FTP를 사용하여 웹 서버에 연결한 다음
.htaccess루트 디렉토리에서. 다음 설정을 갖도록 .htaccess 파일을 편집합니다.
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
SetOutputFilter DEFLATE
웹사이트에서 압축이 작동하는지 확실하지 않습니까? 이 도구로 테스트 .
궁극적인 효율성을 위해서는 다음과 같이 해야 합니다. CSS를 확인, 정리 및 최적화하는 방법에 대해 알아보십시오. .
공유하다 공유하다 트위터 이메일 Windows 11로 즉시 업그레이드해야 합니까?Windows 11이 곧 출시되지만 가능한 한 빨리 업데이트해야 합니까? 아니면 몇 주를 기다려야 합니까? 알아 보자.
다음 읽기 관련 항목- 프로그램 작성
- HTML
- 웹 개발
Joel Lee는 2018년부터 MakeUseOf의 편집장입니다. 그는 학사 학위를 받았습니다. 컴퓨터 과학 및 9년 이상의 전문적인 글쓰기 및 편집 경험.
조엘 리가 참여한 작품 더보기뉴스레터 구독
뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!
구독하려면 여기를 클릭하세요.