대역폭이 증가함에 따라 웹 페이지에는 점점 더 많은 객체가 있으므로 웹 페이지의 시작 속도를 높이는 것이 여전히 중요한 주제입니다. 웹 페이지의 시작 속도를 높이는 세 가지 방법이 있습니다. 하나는 네트워크 대역폭을 늘리는 것입니다. 두 번째는 로컬 컴퓨터에서 사용자를 최적화하는 것이며, 세 번째는 웹 사이트 디자이너에 의해 웹 페이지를 최적화하는 것입니다. 이 기사는 웹 사이트 디자이너의 관점을 기반으로하며 웹 페이지로드 속도를 최적화하기위한 몇 가지 팁을 공유합니다.
1. 그림을 최적화하십시오
사진이없는 웹 페이지가 거의 없습니다. 56K 고양이의 나이를 경험했다면 사진이 많은 웹 사이트를 좋아하지 않을 것입니다. 이러한 웹 페이지를로드하는 데 많은 시간이 걸리기 때문입니다.
지금도 네트워크 대역폭이 많이 개선되었으며 56K 고양이는 점차 사라졌으며 웹 페이지 속도를 높이기 위해 사진을 최적화해야합니다.
이미지 최적화에는 이미지 수 줄기, 이미지 품질 감소 및 적절한 형식 사용이 포함됩니다.
1. 그림 수를 줄이기 : 불필요한 그림을 제거하십시오.
2. 이미지 품질 감소 : 필요하지 않은 경우 이미지의 품질, 특히 JPG 형식을 줄이면 5% 감소하는 것은 크게 변하지 않지만 파일 크기 변경은 비교적 큽니다.
3. 적절한 형식을 사용하십시오 : 다음 지점을 참조하십시오.
따라서 사진을 업로드하기 전에 Photoshop이 너무 귀찮은 경우 온라인 이미지 편집 도구를 사용해야합니다. 편집하기에는 너무 게으르지 만 사진이 특수 효과를 갖기를 원하십니까? JavaScript를 호출하여 이미지 특수 효과를 구현하려고 시도 할 수 있습니다.
2. 이미지 형식 선택
웹 페이지에 일반적으로 사용되는 세 가지 형식, 즉 JPG, PNG 및 GIF 가이 기사에서 논의하는 것이 아닙니다. 웹 페이지의 시간.
1. JPG : 일반적으로 풍경, 캐릭터 및 예술적 사진을 표시하는 데 사용되는 사진. 때로는 컴퓨터 스크린 샷에도 사용됩니다.
2. GIF : 색상이 적고 웹 사이트 로고, 버튼, 표현식 등과 같이 색상 수요가 높지 않은 곳에서는 사용할 수 있습니다. 물론 GIF의 중요한 응용 프로그램은 애니메이션 사진입니다. Lunapic으로 만든 반사 그림처럼.
3. PNG : PNG 형식은 투명한 배경을 제공 할 수 있으며 웹 페이지 디스플레이를 위해 특별히 발명 된 그림 형식입니다. 일반적으로 투명한 배경 디스플레이가 필요하거나 높은 이미지 품질이 필요한 웹 페이지에서 사용됩니다.
3. CSS 최적화
CSS 오버레이 스타일 시트는 웹 페이지를 더 효율적으로 만들고 브라우징 경험을로드하고 향상시킵니다. CSS를 사용하면 양식 레이아웃 방법을 은퇴 할 수 있습니다.
그러나 때때로 우리가 CSS를 쓸 때, 우리는이 문장과 같은 더 이상한 문장을 사용합니다.
마진-탑 : 10px;
마진 오른쪽 : 20px;
마진 바닥 : 10px;
마진 왼쪽 : 20px;
당신은 그것을 단순화 할 수 있습니다.
여백 : 10px 20px 10px 20px;
또는이 문장 :
＜ p class = "Decorated"> 장식 된 텍스트의 단락 ＜/p>
＜ p class = "Decorated"> 두 번째 단락 ＜/p>
＜ p class = "장식"> 세 번째 단락 ＜/p>
＜ p class = "Decorated"> Forth 단락 ＜/p>
div를 사용하여 포함 할 수 있습니다.
div class = "Decorated">
＜ p> 장식 된 텍스트의 단락 ＜/p>
＜ p> 두 번째 단락 ＜/p>
＜ p> 세 번째 단락 ＜/p>
＜ p> forth 단락 ＜/p>
＜/div>
단순화 된 CSS는 중복 속성을 제거하고 운영 효율성을 향상시킬 수 있습니다. CSS를 작성한 후 단순화하기에는 너무 게으른 경우 Cleancss와 같은 온라인 단순화 된 CSS 도구를 사용할 수 있습니다.
4. URL 뒷면에 슬래시를 추가하십시오.
예를 들어, 서버가 그러한 주소 요청을 수신 할 때 일부 URL은 주소의 파일 유형을 결정하는 데 시간이 걸립니다. 웹이 디렉토리 인 경우 URL에 추가 슬래시를 추가하여 서버가 디렉토리의 인덱스 또는 기본 파일에 액세스 할 수 있도록 명확하게 알 수 있으므로로드 시간을 저장할 수 있습니다.
V. 높이와 너비를 나타냅니다
이것은 중요하지만 많은 사람들이 게으름이나 다른 이유 때문에 항상 그것을 무시합니다. 웹 페이지에 이미지 나 테이블을 추가하면 높이와 너비, 즉 높이 및 너비 매개 변수를 지정해야합니다. 브라우저 에서이 두 매개 변수를 찾지 못하면 이미지를 다운로드하면서 크기를 계산해야합니다. 이것은 속도에 영향을 줄뿐만 아니라 탐색 경험에도 영향을 미칩니다.
비교적 친근한 이미지 코드는 다음과 같습니다.
＜ img id = "moon"height = "200"width = "450"src = " />
브라우저가 높이와 너비 매개 변수를 알고있는 경우, 한동안 이미지를 표시 할 수 없더라도 이미지가 페이지에 제출되고 후속 컨텐츠가 계속로드됩니다. 따라서 로딩 시간이 더 빠르고 탐색 경험이 더 좋습니다.
6. HTTP 요청을 줄입니다
브라우저가 웹 페이지를 엽니다면 브라우저는 네트워크 지연에 따라 많은 객체 요청 (이미지, 스크립트 등)을 발행합니다. 웹 페이지에 객체가 많이 있다면 많은 시간이 걸릴 수 있습니다.
따라서 HTTP 요청에 대한 부담을 줄여야합니다. 부담을 줄이는 방법?
1. 불필요한 객체를 제거하십시오.
2. 근처의 두 그림을 하나로 결합하십시오.
3. CSS 합병
다음 코드를 살펴보면 세 가지 CSS를로드해야합니다.
link rel = "스타일 시트"유형 = "text/css"href = "/body.css"/>
link rel = "스타일 시트"유형 = "text/css"href = "/side.css"/>
＜ 링크 rel = "스타일 시트"유형 = "text/css"href = "/footer.css"/>
우리는 그것을 하나로 합성 할 수 있습니다.
link rel = "스타일 시트"유형 = "text/css"href = "/style.css"/>
이로 인해 HTTP 요청이 줄어 듭니다.
7. 기타 팁 (번역기 추가)
1. 불필요한 추가 장치를 제거하십시오.
2. 웹 페이지의 다른 웹 사이트에서 위젯을 포함 시키면 선택의 여지가있는 경우 빠른 것을 선택해야합니다.
3. Flash 대신 사진을 사용해보십시오. SEO에게도 유용합니다.
4. 일부 컨텐츠가 정적 일 수 있다면 서버의 부담을 줄이는 것이 정적입니다.
5. 통계 코드는 페이지 끝에 배치됩니다.