[php] 캐시 된, PHP 생성 썸네일이 느리게로드됩니다

질문 파트 A ▉ (100 bountys, award)
주요 질문은이 사이트를 어떻게 만들고 더 빠르게로드 하는가였습니다. 먼저 우리는이 폭포를 읽을 필요가있었습니다. 폭포 판독 분석에 대한 제안에 감사드립니다. 여기에 표시된 다양한 폭포 그래프에서 분명한 주요 병목은 PHP로 생성 된 썸네일입니다. 데이비드가 조언 한 CDN에서 프로토콜이없는 jquery 로딩은 사이트 전체의 3 % 만 빠르지 만 사이트의 주요 병목 현상은 해결하지 못했지만 현상금을 받았습니다. 내 질문을 명확히 할 시간과 또 다른 현상금 :

Question Part B ▉ (100 bountys, award)
새로운 촛점은 6 개의 jpg 이미지가 가지고있는 문제를 해결하는 것이 었습니다. 이 6 개 이미지는 PHP 생성 된 작은 썸네일, 만 3 ~ 5킬로바이트하지만 로딩 상대적이다 매우 느리게. 다양한 그래프 에서 ” time to first byte “를 확인하십시오. 문제는 미해결 남아 있지만, 현상금은 RedBot가있는 헤더 오류를 고정 제임스에 갔다 밑줄 : “.는 IF가 수정 한-때문에 조건부 요청이 변경되지 않은 전체 내용을 반환” .

질문 파트 C ▉ (마지막 현상금 : 250 포인트)
불행히도 REdbot.org 헤더 오류가 수정 된 후에도 PHP로 생성 된 이미지로 인한 지연은 그대로 유지되었습니다. 이 작은 겁쟁이 3 ~ 5Kb 썸네일은 지구상에서 무엇을 생각하고 있습니까? 모든 헤더 정보는 로켓을 달과 뒤로 보낼 수 있습니다. 이 병목 현상에 대한 모든 제안은 이미 7 개월 동안이 병목 현상 문제에 갇혀 있기 때문에 가능한 답변으로 처리되어 매우 높이 평가됩니다. 미리 감사드립니다.

[내 사이트의 일부 배경 정보 : CSS가 맨 위에 있습니다. 맨 아래 JS (Jquery, JQuery UI, 메뉴 awm / menu.js 엔진, 탭 js 엔진, 비디오 swfobject.js 구매) 두 번째 이미지의 검은 색 선은로드 할 내용을 보여줍니다. 화난 로봇은 내 애완 동물 “ZAM”입니다. 그는 무해하고 더 행복합니다.]


폭포 폭포 : 연대기 | http://webpagetest.org
여기에 이미지 설명을 입력하십시오


병렬 도메인 그룹화 | http://webpagetest.org
여기에 이미지 설명을 입력하십시오


현장 성능 폭포 | http://site-perf.com
여기에 이미지 설명을 입력하십시오


Pingdom Tools 폭포 | http://tools.pingdom.com

여기에 이미지 설명을 입력하십시오


GTmetrix 폭포 | http://gtmetrix.com

여기에 이미지 설명을 입력하십시오




답변

먼저 이러한 여러 도메인을 사용하려면 몇 가지 DNS 조회가 필요합니다. 요청을 분산시키는 대신 많은 이미지를 스프라이트로 결합하는 것이 좋습니다 .

둘째, 페이지를로드하면 all.js에서 대부분의 차단 (~ 1.25 초)을 볼 수 있습니다. jQuery (이전 버전)로 시작하는 것을 알았습니다. 로드 시간 을 줄이면서 HTTP 요청을 완전히 하려면 Google CDN에서이를 참조해야합니다 .

특히, 최신 jQuery 및 jQuery UI 라이브러리는 다음 URL에서 참조 할 수 있습니다 ( 이를 생략 한 이유에 관심이있는 경우이 게시물 참조 http:).

//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js

기본 jQuery UI 테마 중 하나를 사용하는 경우 CSS 및 이미지를 Google CDN에서 가져올 수도 있습니다 .

JQuery와 최적화 호스팅, 당신은 또한 결합해야 awmlib2.js하고 tooltiplib.js하나의 파일로.

이러한 문제를 해결하면 크게 개선 될 것입니다.


답변

며칠 전에 비슷한 문제가 있었고 head.js를 찾았 습니다 . 모든 JS 파일을 병렬로로드 할 수있는 Javascript 플러그인입니다. 희망이 도움이됩니다.


답변

나는 전문가와는 거리가 멀지 만 …

이와 관련하여 : “If-Modified-Since 조건부 요청은 전체 내용을 변경하지 않고 반환했습니다.” 그리고 내 의견.

썸네일을 생성하는 데 사용 된 코드는 다음을 확인해야합니다.

  1. 캐시 된 버전의 썸네일이 있습니까?
  2. 캐시 된 버전이 원본 이미지보다 최신 버전입니다.

이들 중 하나가 거짓이면 썸네일이 생성되어 무엇이든 반환되어야합니다. 둘 다 참이면 다음을 확인해야합니다.

  1. HTTP_IF_MODIFIED_SINCE 헤더가 있습니까
  2. 캐시 된 버전의 마지막 수정 시간이 HTTP_IF_MODIFIED_SINCE와 동일합니까?

이들 중 하나가 거짓이면 캐시 된 썸네일이 반환되어야합니다.

둘 다 참이면 304 http 상태가 리턴되어야합니다. 필요한지 확실하지 않지만 개인적으로 Cache-Control, Expires 및 Last-Modified 헤더를 304와 함께 반환합니다.

GZipping과 관련하여 GZip 이미지가 필요하지 않으므로 내 의견의 해당 부분을 무시하십시오.

편집 : 귀하의 게시물에 추가 한 내용을 보지 못했습니다.

session_cache_limiter('public');
header("Content-type: " . $this->_mime);
header("Expires: " . gmdate("D, d M Y H:i:s", time() + 2419200) . " GMT");
// I'm sure Last-Modified should be a static value. not dynamic as you have it here.
header("Last-Modified: " . gmdate("D, d M Y H:i:s",time() - 404800000) . " GMT");

또한 코드에서 HTTP_IF_MODIFIED_SINCE 헤더를 확인하고 이에 대응해야합니다. 이 헤더와 .htaccess 파일을 설정하면 필요한 결과를 얻을 수 없습니다.

나는 당신이 이와 같은 것을 필요로한다고 생각합니다 :

$date = 'D, d M Y H:i:s T'; // DATE_RFC850
$modified = filemtime($filename);
$expires = strtotime('1 year'); // 1 Year

header(sprintf('Cache-Control: %s, max-age=%s', 'public', $expires - time()));
header(sprintf('Expires: %s', date($date, $expires)));
header(sprintf('Last-Modified: %s', date($date, $modified)));
header(sprintf('Content-Type: %s', $mime));

if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
    if(strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) === $modified) {
        header('HTTP/1.1 304 Not Modified', true, 304);
        // Should have been an exit not a return. After sending the not modified http
        // code, the script should end and return no content.
        exit();
    }
}
// Render image data


답변

와우, 그 이미지를 사용하여 설명하는 것은 어렵습니다. 그러나 여기, 일부 시도는 :

  • 33-36 파일은 swf 내에 동적으로로드되기 때문에 늦게로드되며 swf (25)는 추가 내용을로드하기 전에 먼저 완전히로드됩니다.
  • (20) 파일 및 (21)은 아마 (내가 코드를 모르기 때문에 내가 모르는) all.js (11)에 의해로드 된 라이브러리 만 (11)는 실행하기가 전체 페이지를 기다립니다 (자산) 로드 (domready로 변경해야 함)
  • 22-32 파일은이 두 라이브러리에 의해로드됩니다.

답변

이런 종류의 분석에는 많은 A / B 테스트가 필요하기 때문에 간단히 추측 할 수 있습니다. .ch 도메인은 도달하기 어려운 것 같습니다 (첫 번째 바이트가 도착하기 전에 긴 녹색 대역).

이는 .ch 웹 사이트가 제대로 호스팅되지 않았거나 ISP가 적절한 경로를 가지고 있지 않음을 의미합니다.

다이어그램을 고려할 때 이는 큰 성능 저하를 설명 할 수 있습니다.

참고로, 리소스 로딩 순서에 따라 항목을 정렬하는 데 도움 이되는이 멋진 도구 cuzillion 이 있습니다.


답변

사이트 / 페이지에서 Y! Slow 및 Page Speed ​​테스트를 실행하고 가능한 성능 병목을 정렬하기위한 지침을 따르십시오. Y! Slow 또는 Page Speed에서 더 높은 점수를 얻으면 성능이 크게 향상됩니다.

이 테스트는 무엇이 잘못되었고 무엇을 변경해야하는지 알려줍니다.


답변

따라서 PHP 스크립트는 모든 페이지로드에서 축소판을 생성합니까? 우선, 축소판 그림이 표시되는 이미지가 자주 변경되지 않는 경우 페이지를로드 할 때마다 파싱하지 않아도되도록 캐시를 설정할 수 있습니까? 둘째, PHP 스크립트 imagecopyresampled()가 썸네일을 만드는 것과 같은 것을 사용하고 있습니까? 그것은 사소한 다운 샘플이며 PHP 스크립트는 축소가 끝날 때까지 아무것도 반환하지 않습니다. imagecopymerged()대신 사용 하면 이미지의 품질은 떨어지지 만 프로세스 속도는 빨라집니다. 그리고 얼마나 줄어드는가? 이 썸네일이 원본 이미지의 5 % 또는 50 %입니까? 원본 이미지의 크기가 크면 PHP 스크립트가 원본 이미지를 메모리에 가져 와서 축소하고 작은 축소판을 출력해야하기 때문에 속도가 느려질 수 있습니다.