何かが私の画像の読み込みを「ブロック」しています。Apache の設定、nginx、キャッシュ ヘッダーなどを試しましたが、何も変わりません。

Question

問題: 私のサイトの画像の読み込みには少し時間がかかります...何かがブロックされているようですが、何なのか特定できない原因かもしれません。

PHP 8 / 最新のWHM

実例:https://www.stubfeed.com/crypto

試したこと [.0A.] : Web ホスティング会社を変更 => 変化なし、Web コードに何か問題があります...

試したこと [.0B.] : CentOS 7を使用していましたが、CentOS 8に変更しました => それでも同じです

試したこと [.0C.] : php-fpm を無効にする => かなり役立ちましたが、イメージを待つ時間はまだ残っています。

試したこと [.0D.] : 出力バッファのオン/オフ => 結果は同じ

試したこと [.1.] : すべての .css と .js を少数のファイルにマージします (複数ではなく 2.css 2.js) // font-display:swap も追加しました。

試したこと [.2.] : Apache 用の nginx リバース プロキシ (オンまたはオフ => cloudflare は CDN として機能するため変更なし...)

試したこと [3] : Apacheの設定

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 品質 60 (iMageMagick を使用) です => サイズは大幅に削減されました ;) ==>> それでも問題は解決しませんでした。

私が試したこと [6] : Google Chrome コンソールで => 「キャッシュを空にしてハード再読み込み」 => 通常の読み込みよりも速くなったようです???

私が試したこと [7] : Google Chromeコンソールで=>ネットワークタブ=>キャッシュから読み込まれているのがわかりますが、どういうわけか私の目にはメニューは非常に速く見えますが、他のすべての画像は表示されるまで1〜2秒待ちます

私が試したこと [8] : cloudflareにページルールを追加するhttps://www.stubfeed.com/media/* ブラウザ キャッシュ TTL: 1 年、キャッシュ レベル: すべてをキャッシュ、エッジ キャッシュ 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 awaitに変更しました。

    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% に達すると、花火のアニメーションが追加されます)