HTML 페이지 최적화의 예에 대한 자세한 설명

1. HTTP 요청 수를 줄입니다.

(1) JS 파일과 CSS 파일을 병합합니다.

(2) 프레임 이미지와 상대적으로 변화가 적은 이미지를 하나로 병합하고, CSS 배경 커팅을 통해 렌더링을 완성합니다.

(3) 로컬 캐시를 적절하게 사용하여 JS/CSS/IMAGE를 캐시합니다.

2. 요청한 파일의 크기를 줄이고 요청한 데이터가 차지하는 네트워크 대역폭을 줄입니다.

(1) JS 볼륨 압축: JS에서 빈 줄 바꿈, 주석, 난독화를 삭제하고 긴 변수를 짧은 변수로 대체합니다.

(2) CSS 크기 압축: CSS 주석을 삭제하고 최대한 약어를 사용합니다.

(3) (X)HTML+CSS를 사용하여 웹사이트 구조를 구축하고 CSS 재사용성을 제공하여 (X)HTML 파일 크기를 줄입니다.

(4) 서버 측 GZIP을 사용하여 JS/CSS 파일을 압축하여 전송되는 파일의 크기를 줄입니다.

3. 버전 관리를 통해 클라이언트 캐시를 제어합니다.

캐시된 파일을 적시에 업데이트하는 방법은 무엇입니까? 간단한 구성을 통해 이러한 파일을 다시 요청해야 하며 브라우저 캐시의 데이터를 계속 사용하지 않도록 JS 버전을 수정하여 적시에 브라우저에 알릴 수 있습니다. 여러 가지 해결 방법이 있습니다.

(1) 이러한 JS의 파일 이름을 수동으로 변경합니다.

(2) 이러한 JS의 경로를 수동으로 변경합니다.

(3) URL 재작성을 통해 JS 경로를 재배치합니다.

(4) 이 페이지에 링크해야 하는 JS 파일을 고응답 서버의 JS 구성을 통해 페이지에 알립니다.

(5) 대형 버전은 그대로 유지되고, 소형 버전은 지속적으로 추가되며, 캐시를 효율적으로 활용하기 위해 일정 기간 이후 균일하게 업데이트됩니다.

4. 페이지의 체중 감량을 도와주세요.

5. 페이지에서 불필요한 콘텐츠를 일부 삭제하세요.

주로 중복되는 공백, 탭, 빈 줄, 큰따옴표, 작은따옴표, 주석 등을 나타냅니다.

6. 웹페이지 코드에서 빈 문장을 삭제하세요.

예:

<span style=&#39;font-family:宋体&#39;>你好<span lang=EN-US><o:p></o:p></span></span>

분명히 "Hello" 뒤의 문장은 아무런 효과가 없으므로 삭제할 수 있습니다.

7. HTML의 기본 속성을 삭제합니다.

HTML 언어에는 정렬, 글꼴, 색상 등과 같은 많은 기본 속성이 있지만 웹 페이지 제작 소프트웨어는 이러한 쓸모없는 코드를 추가합니다. 예를 들어 align 속성의 기본값은 왼쪽 정렬이므로 왼쪽 정렬 시 "align=left"라고 쓸 필요가 없습니다.

8. CSS를 최적화하세요.

예: 축약된 CSS를 사용하세요.

또는:

<p class="decorated">1</p>
    <p class="decorated">2</p>
    <p class="decorated">3</p>
    <p class="decorated">4</p>

p를 사용하여 다음을 포함할 수 있습니다.

  <p class="decorated">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </p>

9 가시성은 디스플레이보다 빠릅니다.

10. 동일한 URL에 대해 대소문자를 일관되게 유지하세요.

Internet Explorer의 버퍼는 대문자와 소문자 문자열도 다르게 처리합니다. 따라서 웹 개발자는 동일한 링크에 대한 URL 문자열의 대문자 사용을 다른 위치에서도 일관되게 유지해야 한다는 것을 기억해야 합니다. 그렇지 않으면 동일한 위치의 다른 파일 백업이 브라우저의 버퍼에 저장되므로 동일한 위치에서 콘텐츠를 다운로드하라는 요청 수도 늘어납니다.

11. 마크에 시작과 끝이 있게 하세요.

12. 전체 페이지 콘텐츠를 테이블에 채우지 마세요.

모든 콘텐츠를 추가한 후에 테이블이 표시되기 때문에 일부 콘텐츠에 접근할 수 없는 경우 전체 페이지의 접근 속도가 지연됩니다. 올바른 접근 방식은 콘텐츠를 하나의 테이블에 모두 담는 대신 동일한 형식의 여러 테이블로 나누는 것입니다.

13. iframe을 사용하여 다른 페이지를 중첩하세요.

광고 코드를 삽입해야 하고 속도에 영향을 주지 않으려면 iframe을 사용하는 것이 가장 적합합니다. 페이지 표시는 광고 코드 지연으로 인해 영향을 받지 않습니다.

14. JavaScript를 HTML 파일 끝으로 이동합니다.

JavaScript는 처리 중에 후속 페이지 표시를 차단하고 HTML 요청도 차단하기 때문입니다.

15. 친근한 링크에 대한 지식.

(1) 텍스트 링크만 만드세요. 텍스트 링크를 만들어도 웹페이지 속도가 느려지지 않습니다.

(2) 모든 링크를 별도의 페이지 영역에 넣은 다음 홈페이지의 페이지로 링크합니다.

(3) 꼭 친근한 링크가 홈페이지에 나와야 한다면, 페이지는 위에서 아래로 한 줄씩 표시되기 때문에 링크가 있는 표 전체를 페이지 하단에 넣어주세요.

(4) 친근한 링크의 로고 이미지를 먼저 다운로드한 후 자신의 웹 공간에 업로드하세요.

16. 이미지 최적화.

(1) 사진 수 줄이기: 불필요한 사진을 제거합니다.

(2) 이미지 품질 감소: JPG 형식의 사진의 경우 5% 축소된 사진은 크게 달라진 것 같지는 않지만 파일 크기가 크게 달라집니다.

(3) 적절한 형식을 사용하십시오. JPG는 일반적으로 풍경, 인물 및 예술 사진의 사진 작품을 표시하는 데 사용되며 때로는 컴퓨터 스크린샷에 사용됩니다. GIF는 색상이 적고 색상 요구 사항이 없는 곳에서 사용할 수 있습니다. 웹사이트 로고, 버튼, 이모티콘 등과 같은 높음. PNG 형식은 투명한 배경을 제공할 수 있으며 일반적으로 투명한 배경 표시가 필요하거나 더 높은 이미지 품질 요구 사항이 있는 웹 페이지에 사용됩니다.

17. URL 뒤에 슬래시를 추가하세요.

서버가 이러한 주소를 수신하면 이 주소의 파일 형식을 확인하는 데 시간이 걸립니다. 220이 디렉터리인 경우 URL 뒤에 추가 슬래시를 추가하면 서버가 디렉터리의 인덱스 또는 기본 파일에 액세스하려고 한다는 것을 한눈에 알 수 있으므로 시간이 절약됩니다.

18. 높이와 너비를 표시하세요.

설정이 없으면 브라우저는 이미지를 다운로드하는 동안 크기를 계산합니다. 이미지가 많으면 브라우저는 페이지를 지속적으로 조정해야 하며 이는 속도뿐만 아니라 탐색 경험에도 영향을 미칩니다. 브라우저가 높이와 너비를 알고 있으면 이미지를 표시할 수 없더라도 페이지에 이미지를 위한 공간을 만들고 다음 콘텐츠를 계속 로드합니다. 결과적으로 로드 속도가 빨라지고 검색 환경이 더 좋아졌습니다.

위 내용은 HTML 페이지 최적화의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!