정적 HTML 사이트에서 로딩 시간을 어떻게 개선 할 수 있습니까?
https://stackoverflow.com/questions/673655
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
우리는 웹 사이트에서 작업하고 있으며 GIF 이미지 (100KB -200KB)가 매우 느리게로드되고 있음을 알았습니다.
이 사이트는 CSS/HTML이있는 정적 사이트입니다.
왜 이미지가 천천히로드되는지에 대한 포인터가 있습니까?
JPG를 사용하면 성능이 향상됩니까?
해당 이미지의 HTML 코드는 다음과 같습니다.
<div><img src="images/mainImg_3.gif">
해결책
그들은 거대하기 때문에 느리게로드하고 있습니다. 200KB는 매우 큰 이미지 파일입니다. 웹 이미지에 대한 권장 사항이 무엇인지 정확히 모르겠지만 50k 미만을 유지하는 것이 매우 좋습니다.
GIF 이미지는 사진 이미지에 효율적이지 않습니다. JPG 및 PNG와 같은 다른 형식을 실험하여 파일 크기가 작은 것으로 동일한 품질을 얻을 수 있는지 확인해야합니다. 품질을 유지하면서 파일 크기를 상당히 줄일 수 있어야합니다.
또 다른 속임수 : 썸네일을 사용하십시오. 각 이미지의 두 가지 버전을 저장하십시오. 하나는 다른 이미지의 크기 (25% 크기)를 저장하십시오. 사이트 방문자는 더 많은 것을보고 싶다면 썸네일을 클릭 할 수 있습니다. 로딩 시간 속도 속도가 빨라지고 대역폭 청구서를 줄입니다.
다른 팁
다음 기사를 읽으십시오 웹 사이트 속도를 높이기위한 모범 사례:
이미지 크기가 올바르게 있습니까? 웹 페이지에 300x300 픽셀로 표시하는 경우 원본 이미지가 동일한 크기인지 확인하십시오.
이를 통해 2 배, 하나의 데이터가 적은 데이터를 다운로드 할 수 있으며 2 브라우저가 크기를 조정할 수있는 추가 처리 전력이 필요하지 않습니다. 또한 정확한 크기가 있으면 이미지가 더 선명 해 보입니다.
GIF와 JPG의 차이에 관한 한 (JPG를 지원하지 않는 투명성을 제외하고) 이미지가 포함 된 내용으로 요약됩니다. GIF는 컬러 테이블과 해당 컬러 테이블의 맵을 사용하여 이미지를 저장하는 반면 JPG는 압축 알고리즘을 사용합니다. 따라서 이미지에 색상 변형이 거의 포함되지 않으면 GIF에서 더 작은 파일 크기가 나타납니다. 반대로, 색상 변형이 많은 사진이 있으면 JPG를 사용해야합니다.
또한 살펴보십시오 yslow
귀하의 사이트를 분석하고 병목 현상이 어디에 있는지 알려줍니다.
이미지 파일의 캐싱 활성화 (아래 예제는 CSS 및 JS 캐싱도 추가)로 사용자가 파일을 두 번 다운로드하지 않도록합니다. Apache 1.3 또는 2를 사용하는 경우 :
ExpiresActive On
<FilesMatch "\.(ico|gif|jpe?g|png|js|css)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>
HTML 및 CSS에 대한 GZIP 압축을 가능하게하는 것은 합리적인 아이디어 일 것입니다. Apache 2에서 :
SetOutputFilter DEFLATE
그리고 Apache 1.3에서 :
mod_gzip_on Yes
이미지가 얼마나 큰지, 100KB에서 벽지 크기의 이미지를 표시하는 경우별로 나쁘지 않습니다. 이 크기의 축소판을 표시하는 경우 문제가 있습니다.
JPEG 이미지는 손실이지만 쉽게 압축 할 수 있습니다. 선택한 압축의 양에 따라 JPEG로 이미지 크기를 줄일 수 있습니다.
IMG 태그의 높이 및 너비 속성을 지정해야합니다. 왜이를 수행 해야하는지에 대한 W3C 학교에 대한 설명은 아래를 참조하십시오. 추가 정보는 참조하십시오 http://www.codinghorror.com/blog/archives/000807.html 더욱 급진적 인 기술을 위해.
팁 : 이미지의 높이와 너비 속성을 모두 지정하는 것이 좋습니다. 이러한 속성이 설정되면 이미지에 필요한 공간이 페이지를로드 할 때 예약됩니다. 그러나 이러한 속성이 없으면 브라우저는 이미지의 크기를 알지 못하며 적절한 공간을 예약 할 수 없습니다. 효과는 로딩 중에 페이지 레이아웃이 변경되는 동안 (이미지로드).
팁 : 높이와 너비 속성이있는 이미지를 리 스케일하지 마십시오! 높이와 너비 속성으로 큰 이미지를 축소하면 사용자가 큰 이미지를 다운로드해야합니다 (페이지에서 작게 보이더라도). 올바른 방법은 프로그램을 사용하여 이미지를 페이지에서 사용하기 전에 재생하는 것입니다.
이것은에서 복사되었습니다 http://www.w3schools.com/tags/att_img_height.asp
가장 빠른로드 리소스는 항상 전혀로드 할 필요가없는 리소스입니다. 즉, 이미지를 합리적인 크기로 축소하는 것 외에도 HTTP 캐싱에 대해 읽어야합니다.
사용자 에이전트가 로컬 캐시 버전을 재사용 할 수 있도록 적절한 캐싱 정보로 응답을 전달하도록 웹 서버에게 지시해야합니다.
마크 노팅엄은 썼다 HTTP 캐싱에 대한 튜토리얼. 좋은 출발점입니다. 그리고 이것은 튜토리얼입니다 http chaching의 apache 구성 정보.
무료 도구를 살펴보십시오. 흠뻑 젖어!
그것은 Stoyan Stephanov, Nicole Sullivan (야후!)이 공동 개발했으며 yslow (야후!)와 야후 개발자 네트워크 결과.
이미지를 분석하고 서버 사이드 도구 세트에서 최적의 이미지 유형 (예 : PNG8, PNG24, GIF, JPG 등)을 결정하고 최적화 된 이미지를 만듭니다. 그것은 PNG 이미지이며, 그것을 압축하는 가장 좋은 방법을 찾고, 가능한 가장 작은 파일 크기로 "smush"를 찾을 수 있습니다.
그런 다음 출력 이미지를 찍은 다음 A에서 제공합니다.쿠키가없는 도메인) 할 수있는 경우, 바람직하게는 a cdn, 와 함께 먼 연료는 헤더를 만료합니다, 와 함께 GZIP 압축.
