某些東西“阻止”了我的圖像載入更快嘗試的 apache 配置、nginx、記憶體頭的東西，沒有任何變化

問題：我網站中的圖像需要一些時間才能開始載入……就像有什麼東西被阻塞了，但無法查明可能是什麼原因。

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 $$: 阿帕奇配置

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瀏覽器控制台=>“空記憶體硬重新載入”=>似乎更快到正常載入？？？ 我嘗試了什麼

$$ 7 $$：在 google chrome 控制台 => 網路選項卡 => 我看到從記憶體載入但不知何故用我的眼睛，我看到菜單非常快，但所有其他圖像，它等待 1 或 2 秒才顯示 我嘗試了什麼

$$ 8 $$: 在 cloudflare https://www.stubfeed.com/media/中添加頁面規則* Browser Cache TTL: a year, Cache Level: Cache Everything, Edge Cache TTL: 14 days, Cache Deception Armor: On, Origin Cache Control:在 我嘗試了什麼

$$ 9 $$：載入 4、6、9、23 張圖像 => 都一樣，仍然：我用眼睛看到的內容（等待 1 秒，然後出現圖像……）$$ the speed testers says … $$ 我嘗試了什麼

$$ 10 $$: 記憶體所有 fecth 的服務工作者… => 我關閉了它，因為之前從記憶體中檢查非常慢… :( 你可以在那裡看到它：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

經過深入探勘，我找到了它。

這是我的“步驟”……載入頁面然後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% 時，他們添加了煙花動畫）

引用自：https://serverfault.com/questions/1073261