압축 HTML의 작동 방식과 필요한 이유

압축 HTML의 작동 방식과 필요한 이유

웹 사이트를 운영하는 경우 이미 방법을 알고 있어야 합니다. 올바른 이미지 형식 사용 웹용으로 이미지를 최적화합니다. 그러나 이미지 압축은 잘 알려진 관행이지만 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
    • 웹 개발
    저자 소개 조엘 리(1524개의 기사 출판)

    Joel Lee는 2018년부터 MakeUseOf의 편집장입니다. 그는 학사 학위를 받았습니다. 컴퓨터 과학 및 9년 이상의 전문적인 글쓰기 및 편집 경험.

    조엘 리가 참여한 작품 더보기

    뉴스레터 구독

    뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!

    구독하려면 여기를 클릭하세요.