2009-10-13 12 views
0

현재 PHP + MySQL 및 jQuery를 사용하여 웹 사이트를 개발 중입니다. 지금까지 나는 내 로컬 컴퓨터에서 해왔습니다. 페이지를 볼 때 이미지가로드되는 데 약간의 시간이 걸린다는 것을 알았습니다 (몇 번이나 볼 수 있음). 모든 이미지는 작습니다 (3KB 미만의 PNG). 이제, 페이지를로드하면 표시 할 데이터를 얻기 위해 일부 데이터베이스 연결이 발생합니다.내 웹 사이트의 이미지로드 시간을 어떻게 단축 할 수 있습니까?

로딩 시간과 관련된 문제가 이미지의 양 또는 PHP 스크립트 + DB 연결이 실행되는 시간과 관련이 있는지 확실하지 않습니다. (나는 데이터베이스에 데이터가 거의 없으므로이 경우를 가정하지 않습니다.)

제 질문은 각 페이지의 시작 부분에 모든 이미지를 미리로드하는 것이 좋은 방법입니까? 나는 jQuery와 함께 그것을 시도하고 잘 작동합니다. 나는 그것으로 얻을 수있는 단점을 확신 할 수 없다. 예를 들어 이렇게하려면 페이지 시작 부분에 jQuery 라이브러리를 포함해야합니까? 나는 그것이 나쁜 습관이라고 생각했다.

답변

1

Google에서 페이지 속도 플러그인을 사용하여로드하는 데 가장 많은 시간이 필요한 데이터를 확인해야합니다. 이미지로드 시간이 별도로 표시됩니다.

작은 png를 많이 사용하는 경우 스타일링 및 정보가 아닌 부분이므로 CSS를 배경 이미지로 결합하여 하나의 이미지로 결합하는 것이 좋습니다. 이 경우 이미지 수가 적지 만 모든 요소를 ​​통해 하나만로드되고 다시 사용됩니다. 이 경우 하나의 이미지를 사전로드하는 작업도 정말 쉽습니다.

+0

감사합니다. –

1

CSS Sprites을 사용하여 모든 이미지를 단일 다운로드로 결합 해 보셨습니까? 이 작업을 수행하는 데 도움이되는 숫자는 tools online이며 페이지에서 요구하는 HTTP 요청 수가 크게 줄어 듭니다.

이미지에 set the correct Expires header이 있는지 확인하여 캐시 할 수있게하십시오.

마지막으로 YSlow을 살펴보고 더 많은 최적화 팁을 제공 할 수 있습니다.

2

이러한 PNG가 BLOB로 데이터베이스에 저장되는 경우 — 질문에서 명확하지 않은 경우 — 그렇게하지 마십시오. PHP를 통해 DB에서 이미지를 제공하는 것은 웹 서버가 파일 시스템에서 바로 이미지를 제공하는 것만 큼 효율적이지 않습니다. 이미지가 특정 레코드에 묶여있는 경우 PNG의 행 ID 뒤에 이름을 지정하면 해당 이미지를 저장하는 디렉토리에서만 찾을 수 있습니다. PHP 코드는 디스크의 PNG 파일을 가리키는 URL을 생성하므로 웹 서버가 정적으로 보낼 수 있습니다.

동일한 페이지 내에서 이미지를 미리로드하는 것이 아무 것도 사지 않을 것이라고 생각합니다. 브라우저가 고정 된 수의 자원 (일반적으로 2-4) 만 검색 할 수 있기 때문에 의 페이지로드 시간이 모두 인 것처럼 느려질 수 있습니다. <body> 상단의 이미지를로드하면 일부 HTTP 연결 슬롯이 해제 될 때까지 기다려야하는 "스크롤없이 볼 수있는 부분"상단에 다른 것들이 있습니다. 이미지를 자연 순서대로로드하는 것이 좋습니다.

  • 이미지가 기본적으로 표시되지 않지만, 사용자가 페이지와 상호 작용으로 필요할 것으로 예상된다 :

    미리로드는 다음과 같은 두 가지 상황에서 의미가 있습니다. 좋은 예는 롤오버를위한 마우스 오버 및 클릭 상태 이미지입니다.

  • 이미지는이 페이지에서 사용되지 않지만 다음에 필요할 것입니다.좋은 예는 장바구니처럼 한 페이지에서 다음 페이지로 명확한 진행이있는 사이트입니다.

어느 쪽이든은 <body>의 매우 하단에 예압을, 그래서 처음으로 다른 모든 것들로드합니다.

두 가지 문제를 해결 한 후에 사이트에서 YSlow을 실행하십시오. Firefox 용 플러그인 인 Firebug에 대한 플러그인으로 시작되었지만 이후 IE를 제외한 모든 주요 브라우저로 포팅되었습니다.

YSlow의 장점은 확장 기능이 활성화되어있는 동안 페이지를로드하기 만하면 자동으로 일반적인 속도 저하를 감지한다는 것입니다. 그런 다음 페이지에 대한 명확한 등급을 부여하므로 최적화가 완료된 시점을 판단 할 수 있습니다. A 미만인 경우 아직 완료되지 않았습니다. :) 사이트가 D 또는 그 이상인 것으로 보이는 것은 드문 일이 아닙니다. 웹 서버의 기본 구성이 문제를 발생시키지 않도록 보수적이기 때문입니다. 일반적으로 YSlow 경고를 수정하는 것은 쉽지만 캐싱 및 기타 문제가 발생하지 않도록주의해야합니다. 이것이 기본 서버 구성이 이러한 일을하지 않는 이유입니다.

또 다른 대답은 Google PageSpeed을 제안했습니다. Chrome 및 Firefox, 서버 측 Apache 모듈 및 Google 호스팅 서비스 용 플러그인으로 사용할 수 있습니다. YSlow와 비교해 보면 어떨지 모르지만 흥미 롭습니다.

또한 리소스로드 시간의 폭포 그래프를 얻을 수있는 브라우저의 디버거를 사용하는 것이 좋습니다 : 방화범

  • 당신이 인터넷 탭이를 얻을.

  • Safari에서는 일반적으로 환경 설정에서 사용할 수없는 현상 메뉴를 통해 액세스 할 수 있습니다. 필요한 경우이를 켜고 개발> 타임 라인 기록 시작이라고 말하십시오. 그러면 Network Requests 장비가 실행됩니다. 개발> 웹 속성보기를 통해 가져올 수도 있습니다.

  • Chrome에서보기> 개발자> 개발자 도구라고 말한 다음 네트워크 탭으로 이동하십시오.

  • IE는 도구> 개발자 도구> 프로필러를 통해 매우 취약한 형태입니다. 그것은 단지 폭포수 그래프가 아닌 숫자 표를 제공하기 때문에 정보가 있지만 긴 막대를 시각적으로 스캔하여 가장 느린 자원을 찾을 수는 없습니다.

관련 문제