Something is blocking my images to load fast

Hi,

I’m using cloudflare since a while.

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

LIVE EXAMPLE : StubFeed

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

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”

WHAT I TRYED [5] : convert ALL my images in webp -quality 60 (with iMageMagick) => it reduced the size a lot :wink: ==>> 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 upxt

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 see with my eyes (wait 1 sec, then images appears…) [the speed testers says …]

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/


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

That’s not what my waterfall view looks like.

1 Like

Hi,

from my end here is the lighthouse report

It’s interesting why I can get a much higher performance score, but not a 100 on Best Practices:

if from your end you have better performance, it makes me happy :wink:

maybe it’s my mac :frowning: I tryied firefox, opera too…

it’s like “doctor, It makes me hurt when I touch here, and touch here, and touch here” and the doctor answers, you have a broken finger…

my computer would be my broken finger…

1 Like

Hi,

I now understand what was happening and I fixed it

the feeds was loaded via a ajax call that gets triggerred only when page fully loaded…

since I use php to generate my pages, I can include a few feeds right away and then call an ajax to load more ONLY if the users scrolls the page… it’s way more faster that way :slight_smile:

https://gtmetrix.com/reports/www.stubfeed.com/zBzpkuLQ/

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.