ПРОБЛЕМА: изображения на моем сайте начинают загружаться с задержкой... как будто что-то блокирует, ноне в состоянии определить, что именноможет быть причиной.
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.]: обратный прокси-сервер nginx для Apache (включен или выключен => никаких изменений, поскольку 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]: добавить правило страницы в CloudFlarehttps://www.stubfeed.com/media/* TTL кэша браузера: год, уровень кэша: кэшировать все, TTL кэша Edge: 14 дней, Cache Deception Armor: включено, Origin Cache Control: включено
ЧТО Я ПРОБОВАЛ [9]: Загрузить 4, 6, 9, 23 изображения => все то же самое, по-прежнему: то, что я вижу своими глазами (подождите 1 секунду, затем появляются изображения...) [тестеры скорости говорят ...]
ЧТО Я ПРОБОВАЛ [10]: service worker с кэшированием, все 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
решение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'});
// (когда на Lighthouse достигнуто 100% по каждой теме, они добавили анимацию фейерверка)
