캐시 된, 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 스크립트가 원본 이미지를 메모리에 가져 와서 축소하고 작은 축소판을 출력해야하기 때문에 속도가 느려질 수 있습니다.

귀하의 웹 사이트 URL을 찾았으며 홈페이지에서 개별 jpg 파일을 확인했습니다. 로딩 시간은 현재 합리적이지만 (161ms) 126ms를 기다리고 있습니다.

마지막으로 수정 된 헤더는 모두 토요일, 2011 년 1 월 1 일 12:00:00 GMT로 설정되어 있습니다.

캐시 제어는 "public, max-age = 14515200"이므로 임의의 마지막 수정 헤더는 168 일 후에 문제를 일으킬 수 있습니다.

어쨌든 이것이 지연의 실제 이유는 아닙니다.

썸네일이 이미 존재할 때 썸네일 생성기가 수행하는 작업과 사진을 확인하고 전달하는 데 너무 많은 시간이 소요되는 것을 확인해야합니다.

xdebug를 설치할 수 있습니다 를 하여 스크립트를 프로파일 링하고 병목 현상의 위치를 ​​확인할 수 있습니다.

아마도 전체가 프레임 워크를 사용하거나 데이터베이스에 아무것도 연결하지 않을 수도 있습니다. 일부 서버에서는 mysql_connect ()가 매우 느리다는 것을 알았습니다. 대부분의 서버는 소켓이 아닌 TCP를 사용하여 연결하고 때로는 DNS 문제가 있기 때문입니다.

유료 생성기를 여기에 게시 할 수 없지만 가능한 문제가 너무 많이있을 것으로 알고 있습니다.

정말로 좋은 이유가 없다면 (보통 그렇지 않은) 이미지가 PHP 인터프리터를 호출해서는 안됩니다.

파일이 파일 시스템에있는 경우 이미지를 직접 서버로 제공하는 웹 서버의 다시 쓰기 규칙을 작성하십시오. 그렇지 않은 경우 PHP 스크립트로 리디렉션하여 이미지를 생성하십시오. 이미지를 편집 할 때 캐시 된 버전을 가진 사용자가 새로 편집 한 이미지를 가져 오도록 이미지 파일 이름을 변경하십시오.

적어도 작동하지 않으면 이제 이미지를 만들고 확인하는 방법과 관련이 없습니다.

PHP의 세션 데이터 사용법을 조사하십시오. 이미지 생성 PHP 스크립트가 세션 데이터를 잠그려고 대기 중일 수 있습니다. 세션 데이터는 여전히 렌더링되는 기본 페이지 또는 다른 이미지 렌더링 스크립트에 의해 잠겨 있습니다. 브라우저가 서버를 기다리고 있기 때문에 모든 JavaScript / 브라우저 최적화는 거의 관련이 없습니다.

PHP는 세션 처리가 시작되는 순간부터 스크립트가 끝나는 시점 또는 session_write_close ()가 호출 될 때까지 실행중인 모든 스크립트에 대한 세션 데이터를 잠급니다. 이것은 효과적으로 일을 직렬화합니다. 같은 세션에 특히 의견을 PHP 페이지를 확인 이 하나 .

코드를 보지 못했기 때문에 이것은 야생의 추측 일뿐입니다. 세션이 여기서 역할을하고 있다고 의심됩니다. 다음은 PHP Manual 항목에 있습니다 session_write_close().

세션 데이터는 일반적으로 session_write_close ()를 호출 할 필요없이 스크립트가 종료 된 후에 저장되지만 동시 쓰기를 방지하기 위해 세션 데이터가 잠기므로 한 번에 하나의 스크립트 만 세션에서 작동 할 수 있습니다. 세션과 함께 프레임 세트를 사용하는 경우이 잠금으로 인해 프레임이 하나씩로드됩니다. 세션 변수에 대한 모든 변경이 완료되는 즉시 세션을 종료하여 모든 프레임을로드하는 데 필요한 시간을 줄일 수 있습니다.

내가 말했듯이, 나는 당신의 코드가 무엇을하는지 알지 못하지만 그 그래프는 이상하게 보입니다. 멀티 파트 파일 제공 기능을 코딩 할 때 비슷한 문제 가 있었고 동일한 문제가 발생했습니다. 큰 파일을 제공 할 때 멀티 파트 기능이 작동하지 않거나 다운로드가 완료 될 때까지 다른 페이지를 열 수 없었습니다. 호출 session_write_close()고정 모두 내 문제.

PHP에서 생성 한 썸네일을 일반 이미지로 바꾸어 차이가 있는지 확인 했습니까? 문제는 주변에있을 수 있습니다-PHP 서버의 버그로 인해 각 서버 호출시 썸네일이 재생성됩니다-시계 문제와 관련된 코드 지연 (sleep ()?)-매우 나쁜 경쟁 조건을 유발하는 hardrive 문제 모든 썸네일이 동시에로드 / 생성되기 때문입니다.

나는 썸네일 생성기 스크립트 를 사용하는 대신 TinySRC 를 제공해야 한다고 생각 합니다. 에 빠르고 빠른 클라우드 호스팅 썸네일 생성을 시도 . 매우 간단하고 사용하기 쉬운 API가 있으며 다음과 같이 사용할 수 있습니다.

http://i.tinysrc.mobi/ [height] / [width] /http://domain.tld/path_to_img.jpg

[폭] (선택 사항) :-이것은 픽셀 단위의 너비입니다 (적응 형 또는 가족 용 크기를 재정의 함). 접두사가 '-'또는 'x'인 경우 결정된 크기에서 빼거나 ​​백분율로 축소됩니다.

[신장] (선택 사항) :-너비가있는 경우 높이입니다 (픽셀 단위). 또한 적응 또는 가족 크기를 무시하고 접두사 '-'또는 'x'를 사용할 수 있습니다.

여기 에서 API 요약을 확인할 수 있습니다

자주하는 질문

tinySrc의 비용은 얼마입니까?

아무것도.

tinySrc를 언제 시작할 수 있습니까?

지금.

서비스는 얼마나 신뢰할 수 있습니까?

우리는 tinySrc 서비스에 대해 보증하지 않습니다. 그러나 주요 분산 클라우드 인프라 에서 실행되므로 전 세계적으로 고 가용성을 제공합니다. 모든 요구에 충분해야합니다.

얼마나 빠릅니까?

tinySrc는 크기가 조정 된 이미지를 메모리와 데이터 저장소에 최대 24 시간 동안 캐시 하며 매번 원본 이미지를 가져 오지 않습니다. 이를 통해 사용자의 관점에서 서비스가 엄청나게 빠릅니다 . (그리고 부작용으로 서버로드를 줄입니다.)

행운을 빕니다. u는 우리에게 코드를 보여주지 않기 때문에 제안 :

일부 브라우저는 도메인 당 2 개의 병렬 다운로드 만 다운로드 하므로 2 ~ 3 개의 다른 호스트 이름을 통해 요청 을 분할하기 위해 추가 도메인을 추가 할 수 없습니다 . 예 : 1.imagecdn.com 2.imagecdn.com

우선 If-Modified-SinceJames가 말한 것처럼 요청을 적절하게 처리해야합니다 . 이 오류는 "마지막으로 이미지가 수정되었는지 서버에 물어 보면 간단한 예 / 아니오 대신 전체 이미지를 보냅니다"라고 말합니다.

연결과 첫 번째 바이트 사이의 시간은 일반적으로 PHP 스크립트를 실행하는 데 걸리는 시간입니다. 해당 스크립트가 실행되기 시작할 때 어떤 일이 일어나고있는 것은 분명합니다.

1. 프로파일 링을 고려 했습니까? 문제가있을 수 있습니다.
2. 위의 문제와 함께 스크립트가 필요 이상으로 여러 번 실행될 수 있습니다. 이상적으로 는 원본 이미지가 수정되고 다른 모든 요청에 ​​대해 캐시 된 엄지 손가락을 보내는 경우에만 엄지 손가락을 생성해야합니다 . 스크립트가 이미지를 불필요하게 생성하고 있는지 확인 했습니까 (예 : 각 요청마다)?

응용 프로그램을 통해 적절한 헤더를 생성하는 것은 약간 까다 롭고 서버에서 덮어 쓸 수 있습니다. 캐시가없는 요청 헤더를 보내는 사람은 썸네일 생성기가 지속적으로 실행되고로드가 증가하므로 악용 될 수 있습니다. 따라서 가능하면 생성 된 엄지 손가락을 저장하고 저장된 이미지를 페이지에서 직접 호출하고에서 헤더를 관리하십시오 .htaccess. 이 경우 .htaccess서버가 올바르게 구성되어 있으면 서버에 아무것도 필요하지 않습니다 .

이 외에도, 전체적으로 좋은 SO 질문의 성능 부분에서 밝은 최적화 아이디어 중 일부를 웹 사이트를 올바른 방법으로 수행하는 방법에 적용 할 수 있습니다 (예 : 리소스를 쿠키가없는 하위 도메인으로 분할하는 등). 로드하는 데 1 초가 걸리지 않아야합니다. 이는 그래프의 다른 항목과 비교할 때 분명합니다. 최적화하기 전에 문제점을 찾아보십시오.

이미지 및 스타일 시트와 같은 정적 데이터를 제공하기 위해 NGINX 웹 서버 에서 여러 개의 하위 도메인을 설정하려고 했습니까 ? 이 주제에서 이미 유용한 정보를 찾을 수 있습니다 .

지연된 썸네일에 대해서는 썸네일 생성 스크립트에서 header () 를 마지막으로 호출 한 직후 flush ()를 호출 하십시오. 완료되면 워터 폴 그래프를 재생성하고 지연이 헤더 대신 본문에 있는지 확인하십시오. 그렇다면 이미지 데이터를 생성 및 / 또는 출력하는 논리를 오래 살펴 봐야합니다.

썸네일을 처리하는 스크립트는 원하는 종류의 캐싱을 사용하여 제공하는 이미지에 수행되는 모든 작업이 반드시 필요한 경우에만 발생하도록해야합니다. 일부 고가의 작업이 당신이 지연되는 축소판 될 때마다 발생하는 것 같습니다 모든 스크립트에서 (헤더 포함) 출력을.

느린 문제의 대부분은 TTFB (Time to First byte)가 너무 높다는 것입니다. 이것은 서버 구성 파일, 코드 및 기본 하드웨어에 친밀하지 않고 해결하기가 어렵지만 모든 요청에서 만연한 것을 알 수 있습니다. 너무 많은 녹색 막대 (나쁜)와 매우 작은 파란색 막대 (좋은)가 있습니다. 그 분야에서 많은 일을했다고 생각하기 때문에 프론트 엔드 최적화를 조금 중단하고 싶을 수도 있습니다. " 최종 사용자 응답 시간의 80 % -90 %가 프론트 엔드에 소비된다 "는 속담에도 불구하고, 귀하의 의견 이 백엔드에서 발생하고 있다고 생각합니다.

TTFB 는 출력 및 핸드 쉐이킹 이전의 백엔드 항목, 서버 항목, 사전 처리입니다.

느린 데이터베이스 쿼리, 함수 / 메서드 진입 및 종료 시간과 같은 느린 것을 찾기 위해 코드 실행 시간을 정하십시오. PHP를 사용한다면 Firephp를 사용해보십시오 . 때로는 세션 정보를 가져 오거나 인증 확인 및 그렇지 않은 것과 같이 시작 또는 초기화 중에 하나 또는 두 개의 느린 쿼리가 실행되는 경우가 있습니다. 쿼리를 최적화하면 성능이 향상 될 수 있습니다. 때때로 코드는 php prepend 또는 spl autoload를 사용하여 실행되므로 모든 것에서 실행됩니다. 다른 경우에는 아파치 conf를 잘못 구성하고 조정하여 하루를 절약 할 수 있습니다.

비효율적 인 루프를 찾으십시오. 디스크 드라이브 결함이나 디스크 공간 사용량으로 인해 캐시의 페치 호출이 느리거나 I / O 작업이 느리게 진행되는지 확인하십시오. 메모리 사용량과 사용중인 내용 및 위치를 찾으십시오. 동일한 위치가 아닌 전 세계의 다른 위치에서 첫 번째보기 만 사용하여 단일 이미지 또는 파일에서 10 회의 웹 페이지 테스트 반복 테스트를 실행하십시오. 액세스 및 오류 로그를 읽으면 너무 많은 개발자가이를 무시하고 출력 된 화면 오류에만 의존합니다. 웹 호스트가 지원한다면 도움을 요청하십시오. 어쨌든 정중하게 도움을 요청하지 않으면 아프지 않을 것입니다.

http://html5boilerplate.com/docs/DNS-Prefetching/ 에서 많은 도메인 및 리소스와 싸우기 위해 DNS 프리 페칭을 시도 할 수 있습니다 .

서버가 좋은 / 좋은 서버입니까? 때로는 더 나은 서버가 많은 문제를 해결할 수 있습니다. 나는 기회와 돈이 서버를 업그레이드하는 경우 ' 하드웨어는 싸고, 프로그래머는 비싸다 '라는 정신 의 팬입니다 . 및 / 또는 maxcdn 또는 cloudflare 와 같은 CDN을 사용하십시오 .

행운을 빕니다!

(ps 나는이 회사들 중 누구에게도 일하지 않습니다. 또한 위의 cloudflare 링크는 TTFB가 그렇게 중요하지 않다고 주장 할 것입니다.

죄송합니다. 데이터를 거의 제공하지 않습니다. 그리고 당신은 이미 좋은 제안을했습니다.

그 이미지들을 어떻게 제공하고 있습니까? PHP를 통해 스트리밍하는 경우 이미 생성 된 경우에도 매우 나쁜 일을하고 있습니다.

PHP로 이미지를 스트리밍하지 마십시오. 사용 방법에 관계없이 서버 속도가 느려집니다.

의미있는 URI를 사용하여 액세스 가능한 폴더에 넣으십시오. 그런 다음 실제 URI로 직접 호출하십시오. 즉석 생성이 필요한 경우 요청 이미지가 누락 된 경우에만 생성기 php-script로 리디렉션되는 .htaccess를 images 디렉토리에 넣어야합니다. (캐시 요청시 캐시 전략이라고 함).

그렇게하면 PHP 세션, 브라우저 프록시, 캐싱, ETAGS를 한 번에 수정합니다.

WP-Supercache는 올바르게 구성된 경우이 전략을 사용합니다.

나는 이것을 얼마 전에 썼다 ( http://code.google.com/p/cache-on-request/source/detail?r=8 ), 마지막 개정판이 깨졌지만 8 개 이하가 작동해야한다고 생각합니다. .htaccess를 예제로 사용하여 테스트 해보십시오 (예전보다 .htaccess를 구성하는 더 좋은 방법이 있지만).

이 블로그 게시물 ( http://www.stefanoforenza.com/need-for-cache/ ) 에서 전략을 설명했습니다 . 아마도 잘못 쓰여졌을 수도 있지만 명확하게 설명하는 데 도움이 될 수 있습니다.

추가 자료 : http://meta.wikimedia.org/wiki/404_handler_caching