뭔가 내 이미지가 더 빠르게 시도된 Apache 구성, nginx, 캐시 헤더 항목을 로드하는 것을 "차단"하고 있으며 아무것도 변경되지 않습니다.

Question

문제: 내 사이트의 이미지가 로드되기 시작하는 데 약간의 시간이 걸립니다. 마치 무언가가 차단된 것처럼 보이지만,무엇인지 정확히 알 수 없다원인이 될 수 있습니다.

PHP 8 / 최신 WHM

실제 예:https://www.stubfeed.com/crypto

내가 시도한 것 [.0A.] : 웹 호스팅 회사 변경 => 변경 없음, 내 웹 코드에 뭔가가 있습니다...

내가 시도한 것 [.0B.] : 나는 centos 7을 사용하고 있었고 centos 8로 변경했습니다 => 여전히 동일합니다

내가 시도한 것 [.0C.]: php-fpm을 비활성화 => 많은 도움이 되었지만 여전히 이미지를 기다리는 시간이 남아 있습니다.

내가 시도한 것 [.0D.] : 출력 버퍼 켜기 또는 끄기 => 여전히 동일

내가 시도한 것 [.1.] : 모든 .css와 .js를 더 적은 수의 파일로 병합합니다(여러 파일 대신 2.css 2.js) // 또한 글꼴 디스플레이:스왑;

내가 시도한 것 [.2.]: Apache용 nginx 역방향 프록시(켜기 또는 끄기 => cloudflare가 CDN 역할을 하기 때문에 변경 없음...)

내가 시도한 것 [3] : 아파치 구성

Header set X-XSS-Protection "1; mode=block"
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
Header always set X-Content-Type-Options "nosniff"
Header always set Referrer-Policy "no-referrer"
Header always set Permissions-Policy "geolocation=(self),midi=(self),sync-xhr=(self),magnetometer=(self),gyroscope=(self),fullscreen=(self)"

내가 시도한 것 [4] : .htaccess 캐시 제어 헤더

<IfModule mod_headers.c>
    ExpiresActive On
    <FilesMatch “\.(webp|webm|flv|ico|pdf|avi|mov|mp4|m4v|m4a|ppt|doc|mp3|wmv|wav|gif|jpg|jpeg|png|apng|swf|css|js|otf|ttf|woff)$">
    Header set Cache-Control "max-age=31536000, public"
    </FilesMatch>
</IfModule>

내가 시도한 것 [5] : 변환모두webp -quality 60(iMageMagick 사용)의 내 이미지 => 크기가 많이 줄었지만 ;) ==>> 여전히 문제가 해결되지 않았습니다.

내가 시도한 것 [6]: google chrome 콘솔에서 => "빈 캐시 하드 다시 로드" => 일반 로드보다 빠른 것 같습니다 ???

시도한 것 [7] : Google Chrome 콘솔 => 네트워크 탭 => 캐시에서 로드된 것으로 보이지만 내 눈으로는 메뉴가 매우 빠르게 보이지만 다른 모든 이미지는 표시되기 전에 1~2초 정도 기다립니다.

내가 시도한 것 [8] : cloudflare에 페이지 규칙 추가https://www.stubfeed.com/media/* 브라우저 캐시 TTL: 1년, 캐시 수준: Cache Everything, 엣지 캐시 TTL: 14일, 캐시 디셉션 아머: 켜기, 오리진 캐시 제어: 켜기

내가 시도한 것 [9] : 4, 6, 9, 23 이미지 로드 => 모두 동일, 정지 : 내 눈으로 보는 것 (1초 기다리면 이미지가 나타납니다....) [속도 테스터가 말합니다 .. .]

내가 시도한 것 [10]: 모든 파일을 캐싱하는 서비스 작업자... => 이전에 캐시에서 확인하는 것이 너무 느려서 껐습니다... :( 여기에서 볼 수 있습니다.https://www.stubfeed.com/ws.js?v=202108000021(캐시 가능 배열에 webb를 추가했다가 제거했습니다...)

모든 시도의 결과: 메뉴, .css, .js ==>> 매우 빠르고 즉각적이지만... 1(때때로 2)초 후에도 여전히 이미지가 표시됩니다...

여기에서 보고서를 볼 수 있습니다.https://gtmetrix.com/reports/www.stubfeed.com/4MGVqAFv/

curl -I https://www.stubfeed.com/media/feed/2021/08/02/14463960829226.webp

HTTP/2 200 
date: Mon, 02 Aug 2021 02:13:44 GMT
content-type: image/webp
content-length: 78296
x-content-type-options: nosniff
referrer-policy: no-referrer
permissions-policy: geolocation=(self),midi=(self),sync-xhr=(self),magnetometer=(self),gyroscope=(self),fullscreen=(self)
last-modified: Mon, 02 Aug 2021 01:40:11 GMT
vary: Accept-Encoding
x-xss-protection: 1; mode=block
strict-transport-security: max-age=15552000; includeSubDomains; preload
cache-control: public, max-age=31536000
cf-cache-status: HIT
age: 1483
accept-ranges: bytes
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=QawI6BH%2FlcrvvsUxJ6VgTJzwNqvb%2BVqBRo1gbxng6JRggJe9MgZbkWhLtMjmwvwC8yB3SLaoJXT%2BvNZDuLCzya1g8HlxGFbpFMzXB%2F4p%2B9GcIGIZANk%2FjfvIx0Lu2t07QIsr"}],"group":"cf-nel","max_age":604800}
nel: {"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 6783c9ea7f3c4bd1-YUL
alt-svc: h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400, h3=":443"; ma=86400

Answer 1

좀 더 깊이 파고든 후에 발견했습니다.

그것은 내가 가진 "단계"였습니다... 페이지 로드 후 Ajax...

나는 다시 생각하고 포함을했습니다.

나는 또한 비동기 대기가되도록 Ajax를 재구성했습니다.

    async function stubajax (divid,phphat,postix = [],pend = 'html') {
    
        var pcache = (Math.floor(Math.random() * 100000000) + 1);
        
        postix["preventcache"] = pcache;
        postix["divid"] = encodeURIComponent(divid);
        postix["mojax_height"] = encodeURIComponent($(window).height());
        postix["mojax_width"] = encodeURIComponent($(window).width());

postix["cookies"] = decodeURIComponent(document.cookie); // if you need to send cookies
        
        for (var i = 0; i < localStorage.length; i++){ postix[localStorage.key(i)] = localStorage.getItem(localStorage.key(i)); }
        for (var i = 0; i < sessionStorage.length; i++){ postix[sessionStorage.key(i)] = sessionStorage.getItem(sessionStorage.key(i)); }
            
        await fetch(phphat+"?pcache="+pcache+"&fetchx="+pcache, {
          method: "POST", body: JSON.stringify(Object.assign({}, postix)), headers: {"Content-type": "application/json; charset=UTF-8"}
        }).then( response => { return response.text(); }).then( html => { 
            switch ( pend ){
                case 'append' : $("#"+divid+"_message").append(extraforml+html); break;
                case 'prepend' : $("#"+divid+"_message").prepend(extraforml+html); break;
                default : $("#"+divid+"_message").html(extraforml+html); break;
            }
        }).catch( err => console.log(err) );
          
    }

나중에 이렇게 호출될 수 있습니다

stubajax('id','...php',{'somevar1':'hello'});

// (라이트하우스에서 각 주제의 100%에 도달하면 불꽃놀이 애니메이션을 추가했습니다)