有些東西「阻止」我的圖片載入速度更快，嘗試了 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 而不是多個） // 也加入了 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瀏覽器控制台=>“空緩存硬重新加載”=>似乎正常加載更快？

我嘗試過的[7] ：在google chrome 控制台=> 網絡選項卡=> 我看到從緩存加載，但不知何故，用我的眼睛，我很快看到菜單，但所有其他圖像，它在顯示前等待1 或2 秒

我嘗試過的方法 [8]：在 cloudflare 中新增頁面規則https://www.stubfeed.com/media/* 瀏覽器快取 TTL：一年，快取等級：快取所有內容，邊緣快取 TTL：14 天，快取欺騙裝甲：開啟，原始快取控制：開啟

我嘗試過的[9] ：加載4、6、9、23 個圖像=> 相同，仍然：我用眼睛看到的（等待1 秒，然後圖像出現......） [速度測試儀說.. .]

我嘗試過的[10]：具有快取所有功能的服務工作者...=>我將其關閉，因為之前從快取檢查速度非常慢...:(你可以在那裡看到它：https://www.stubfeed.com/ws.js?v=202108000021（在可緩存數組中我添加了 wepb，但我刪除了它...）

所有這些嘗試的結果：選單、.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 wait

    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% 時，他們添加了煙火動畫）