Join Log in
Score:1
avatar Server

something is "blocking" my images from loading faster tried apache configs, nginx, cache header stuff, nothing changes

bq flag
Jintor

THE ISSUE : the images in my site takes a bit to start loading... like if something is blocking, but unable to pinpoint what could be the cause.

PHP 8 / latest WHM

LIVE EXAMPLE : https://www.stubfeed.com/crypto

WHAT I TRYED [.0A.] : changing web hosting company => no change, there is something in my web code...

WHAT I TRYED [.0B.] : I was with centos 7 and changed to centos 8 => still the same

WHAT I TRYED [.0C.] : Disabling php-fpm => it helped a lot, but still the wait for images is there.

WHAT I TRYED [.0D.] : ouput buffers on or off => still the same

WHAT I TRYED [.1.] : merge all my .css and .js in fewer files ( 2.css 2.js instead of multiple) // also added font-display:swap;

WHAT I TRYED [.2.] : nginx reverse proxy for apache (on or off => no change since cloudflare acts as a CDN...)

WHAT I TRYED [3] : apache configs

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)"

WHAT I TRYED [4] : .htaccess cache control headers

<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>

WHAT I TRYED [5] : convert ALL my images in webp -quality 60 (with iMageMagick) => it reduced the size a lot ;) ==>> but still didn't fixed the issue.

WHAT I TRIED [6] : in google chrome console => "empty cache hard reload" => seems faster to normal load ???

WHAT I TRIED [7] : in google chrome console => network tab => I see loaded from cache but somehow with my eyes, I see the menu very fast but all other images, it waits for 1 or 2 seconds before showing up

WHAT I TRIED [8] : add a page rule in 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: On

WHAT I TRIED [9] : Load 4, 6, 9, 23 images => al the same, still : what I see with my eyes (wait 1 sec, then images appears....) [the speed testers says ...]

WHAT I TRIED [10] : service worker with caching all fecth... => I turned it off because checking from cache before was terribly slower... :( you can see it there : https://www.stubfeed.com/ws.js?v=202108000021 (in cachable array I added wepb, but I removed it...)

THE RESULT WITH ALL THOSE TRIES : the menu, the .css, the .js ==>> very fast and instantaneous... but still images after 1 (some times 2) seconds...

you can see a report here : https://gtmetrix.com/reports/www.stubfeed.com/4MGVqAFv/

enter image description here enter image description here

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
100
1 + 5
djdomi avatar
za flag
djdomi
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.stubfeed.com%2F crypto says a 95 scale which is great?
0
Reply
bq flag
Jintor
@djdomi nice ;) but how can this be different when you do it from your end vs doing the same from my end with different result ? also, by checking the tries I made, do you know if something could be improved ?
0
Reply
djdomi avatar
za flag
djdomi
my internet has 1gbit, hows about yours? :P
0
Reply
bq flag
Jintor
@djdomi 77 Mbps
0
Reply
bq flag
Jintor
@djdomi turns out it was many factors, 1 => my images are in filebase.com (nice decentralized object storage solution) was not the issue 2 => my internet provider has a buffer or TTL (or not sure the right term to use) very high and during high loads, the filebase.com load balancers kicks in and provide new ips.... my internet provider points to old ip during that load balancing thing.... 3 => see my answer I was waiting for the page load to do a ajax call (that was the blocker)... I'm using php so I did include instead of ajax call...
0
Reply
Score:2
avatar Server
bq flag
Jintor

After deeper digging I found it.

It was the "steps" I had... load page then ajax...

I rethinked and did an include.

I also reshaped my ajax to be 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) );
          
    }

can later be called like this

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

// (when 100% on each topics is reached on light house, they added a fireworks animation)

enter image description here

0 + 0
ธงชาติไทย
Elon Musk
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.