대역폭이 증가함에 따라 웹 페이지에 개체가 점점 더 많아지기 때문에 웹 페이지 열기 속도를 높이는 것은 여전히 중요한 문제입니다. 웹 페이지 열기 속도를 높이는 방법에는 세 가지가 있습니다. 하나는 네트워크 대역폭을 늘리는 것이고, 다른 하나는 사용자의 로컬 컴퓨터를 최적화하는 것이고, 세 번째는 웹 사이트 디자이너가 웹 페이지를 어느 정도 최적화하는 것입니다. 이 기사는 웹사이트 디자이너의 관점에서 작성되었으며 웹페이지 로딩 속도를 최적화하기 위한 몇 가지 팁을 공유합니다.
1. 이미지 최적화
이미지가 없는 웹페이지는 거의 없습니다. 56K 고양이 시대를 경험해본 사람이라면 사진이 많은 웹사이트를 좋아하지 않을 것이다. 그러한 웹 페이지를 로드하는 데는 많은 시간이 걸리기 때문입니다.
지금도 네트워크 대역폭은 많이 향상되었으며 56K 고양이는 점차 사라지고 있습니다. 웹 페이지 속도를 높이려면 여전히 이미지 최적화가 필요합니다.
이미지 최적화에는 이미지 수 감소, 이미지 품질 감소, 적절한 형식 사용이 포함됩니다.
1. 사진 수를 줄입니다: 불필요한 사진을 제거합니다.
2. 이미지 품질 감소: 필요하지 않은 경우 이미지 품질을 낮추십시오. 특히 jpg 형식의 경우 품질을 5% 낮추는 것은 큰 변화처럼 보이지 않을 수도 있지만 파일 크기의 변화는 상대적으로 큽니다.
3. 적절한 형식을 사용하십시오. 다음 사항을 참조하십시오.
따라서 업로드하기 전에 이미지를 편집해야 합니다. 포토샵이 너무 번거롭다고 생각되면 온라인 이미지 편집 도구를 사용해 볼 수 있습니다. 편집하기에는 너무 게으른데 사진에 특수 효과를 주고 싶으십니까? 이미지 효과를 얻으려면 자바스크립트를 호출해 보세요.
2. 이미지 형식 선택
웹 페이지에는 일반적으로 jpg, png, gif 세 가지 이미지 형식이 사용됩니다. 세 가지 형식의 구체적인 기술 지표는 이 기사의 내용이 아닙니다. 웹 페이지의 로딩 시간을 줄이기 위해 사용됩니다.
1. JPG: 일반적으로 풍경, 인물, 예술 사진 등의 사진 작품을 표시하는 데 사용됩니다. 때때로 컴퓨터 스크린샷에 사용됩니다.
2. GIF: 제공하는 색상 수가 적고, 웹 사이트 로고, 버튼, 이모티콘 등 색상 요구 사항이 높지 않은 곳에 사용할 수 있습니다. 물론 gif의 중요한 응용 분야는 애니메이션 사진입니다. 루나픽으로 만든 반사사진 같아요.
3. PNG: PNG 형식은 투명한 배경을 제공할 수 있으며 웹 페이지 표시를 위해 특별히 고안된 이미지 형식입니다. 일반적으로 투명한 배경 표시 또는 높은 이미지 품질 요구 사항이 필요한 웹 페이지에 사용됩니다.
3. CSS 최적화
CSS 캐스케이딩 스타일 시트는 웹페이지를 보다 효율적으로 로드하고 탐색 경험을 향상시킵니다. CSS를 사용하면 테이블 레이아웃을 폐기할 수 있습니다.
그러나 때때로 우리는 CSS를 작성할 때 다음 문장과 같이 좀 더 장황한 문장을 사용합니다:
margin-top: 10px;
오른쪽 여백: 20px;
여백 하단: 10px;
margin-left: 20px;
다음과 같이 단순화할 수 있습니다:
margin: 10px 20px 10px 20px;
또는 다음 문장:
<p class="장식">장식된 텍스트 단락</p>
<p class="장식">두 번째 문단</p>
<p class="장식">세 번째 문단</p>
<p class="장식">네 번째 문단</p>은
div에 포함될 수 있습니다:
<div class="장식">
<p>장식된 텍스트 단락</p>
<p>두 번째 문단</p>
<p>세번째 문단</p>
<p>넷째 문단</p>
</div>
CSS를 단순화하면 중복 속성을 제거하고 운영 효율성을 높일 수 있습니다. CSS를 작성한 후 단순화하기에는 너무 게으른 경우 CleanCSS와 같은 일부 온라인 단순화된 CSS 도구를 사용할 수 있습니다.
4.예를 들어 서버가 이러한 주소 요청을 받으면
URL 뒤에 슬래시를 추가합니다
.이 주소의 파일 형식을 결정하는 데 시간이 걸립니다. 웹이 디렉터리인 경우 URL 뒤에 추가 슬래시를 추가하여 /로 변경할 수도 있습니다. 그러면 서버가 디렉터리의 인덱스나 기본 파일에 액세스하려고 한다는 것을 한눈에 알 수 있습니다. 로딩 시간.
5. 높이와 너비를 표시하는
것은 매우 중요하지만 게으름이나 기타 이유로 항상 무시하는 사람들이 많습니다. 웹 페이지에 이미지나 표를 추가할 때 높이와 너비, 즉 높이와 너비 매개변수를 지정해야 합니다. 브라우저가 이 두 매개변수를 찾지 못하면 이미지를 다운로드하는 동안 크기를 계산해야 합니다. 이미지가 많으면 브라우저는 페이지를 지속적으로 조정해야 합니다. 이는 속도에 영향을 미칠 뿐만 아니라 탐색 경험에도 영향을 미칩니다.
다음은 비교적 친숙한 이미지 코드이다:
<img id="moon" height="200" width="450" src=" />
이미지를 표시할 수 없더라도 브라우저가 높이와 너비 매개변수를 알고 있는 경우 일시적으로 페이지는 이미지 공간을 확보한 후 다음 콘텐츠를 계속 로드합니다. 결과적으로 로딩 시간이 더 빨라지고 탐색 환경이 더 좋아집니다.
6.
뷰어가 열릴 때
.웹 페이지의 경우 브라우저는 많은 개체 요청(이미지, 스크립트 등)을 실행하며, 네트워크 지연에 따라 각 개체가 지연될 수 있습니다. 웹 페이지에 개체가 많으면 시간이 많이 걸릴 수 있습니다. 따라서
http 요청에 대한 로드를 줄이는 방법은 무엇입니까?
2. 두 개의 인접한 이미지를 하나로 결합합니다.
3.
다음 코드를 로드해야 합니다.
<link rel="stylesheet" type="text/css" href="/body.css" />
<link rel="stylesheet" type="text/css" href="/side.css" />
<link rel="stylesheet" type="text/css" href="/footer.css" />
이를 하나로 결합할 수 있습니다:
<link rel="stylesheet" type="text/css" href="/style .css" />
로 인해 http 요청이 줄어듭니다.
7. 기타 팁(번역자가 추가한 내용)
1. 불필요한 추가 기능을 제거합니다.
2. 웹페이지에 다른 웹사이트의 위젯이 삽입되어 있는 경우, 선택의 여지가 있다면 반드시 속도가 빠른 위젯을 선택하세요.
3. 플래시 대신 사진을 사용해 보세요. SEO에도 좋습니다.
4. 일부 콘텐츠를 정적으로 만들 수 있는 경우 정적으로 만들어 서버의 부하를 줄입니다.
5. 통계 코드는 페이지 끝에 있습니다.