인터넷 대역폭이 점점 더 넓어지고 있으며, 이로 인해 웹 페이지 로딩 속도가 질적으로 도약한 것 같습니다. 실제로는 그렇지 않습니다. 왜냐하면 대역폭이 증가함에 따라 웹 페이지에 점점 더 많은 개체가 있기 때문에 웹 페이지 열기 속도를 높이는 것이 여전히 중요한 문제이기 때문입니다. 웹 페이지 열기 속도를 높이는 방법에는 세 가지가 있습니다. 하나는 네트워크 대역폭을 늘리는 것이고, 다른 하나는 사용자의 로컬 컴퓨터를 최적화하는 것이고, 세 번째는 웹 사이트 디자이너가 웹 페이지를 어느 정도 최적화하는 것입니다. 이 기사는 웹사이트 디자이너의 관점에서 작성되었으며 웹페이지 로딩 속도를 최적화하기 위한 몇 가지 팁을 공유합니다.
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
;
margin
-
left: 20px;
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.
"www.kenengba.com/220"과 같은 일부 URL의 경우 서버가 이러한 주소 요청을 받으면 이 주소의 파일 형식을 결정하는 데 시간이 걸립니다. 220이 디렉터리인 경우 URL 뒤에 추가 슬래시를 추가하여 www.kenengba.com/220/ 으로 만들 수도 있습니다. 그러면 서버가 인덱스나 기본 파일에 액세스하려고 한다는 것을 한눈에 알 수 있습니다. 디렉토리를 저장하므로 로딩 시간이 절약됩니다.
5. 높이와 너비를 표시하는
것은 매우 중요하지만 게으름이나 기타 이유로 항상 무시하는 사람들이 많습니다. 웹 페이지에 이미지나 표를 추가할 때 높이와 너비, 즉 높이와 너비 매개변수를 지정해야 합니다. 브라우저가 이 두 매개변수를 찾지 못하면 이미지를 다운로드하는 동안 크기를 계산해야 합니다. 이미지가 많으면 브라우저는 페이지를 지속적으로 조정해야 합니다. 이는 속도에 영향을 미칠 뿐만 아니라 탐색 경험에도 영향을 미칩니다.
다음은 친숙한 이미지 코드입니다:
<img id=”moon” height=”200″ width=”450″src
=”” <p class=”pictext”>alt=”moon image” />
</p>
브라우저는 높이와 너비 매개변수를 알고 있습니다. 이미지를 일시적으로 표시할 수 없더라도 페이지에 이미지를 위한 공간을 만들고 다음 콘텐츠를 계속 로드합니다. 그 결과 로딩 시간이 빨라지고 탐색 환경이 향상되었습니다.
6. http 요청을 줄입니다.
뷰어가 웹 페이지를 열면 브라우저는 네트워크 지연에 따라 많은 개체 요청을 발행합니다. 페이지에 개체가 많으면 시간이 많이 걸릴 수 있습니다.
따라서 http 요청에 대한 부담을 줄이는 것이 필요합니다. 부담을 줄이는 방법은?
1. 불필요한 개체를 제거합니다.
2. 인접한 두 장의 사진을 하나로 결합합니다.
3. CSS를 병합하려면
세 개의 CSS를 로드해야 합니다.
<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. 통계 코드는 페이지 끝에 있습니다.