Xenforo Attachment images make the page slow without CDN

I am trying to figure out why serving my XenForo attachment images via any CDN is so much faster than doing so without the CDN.

This holds true even on a page where none of the images are a HIT (all are MISS) for the CDN. Just having the CDN request the images from my origin speeds up the page load.

Visually, while browsing in Chrome, it looks like images are loading sequentially (top of the page to bottom) when I don't use the CDN. When I do use the CDN, images load in parallel.

Oddly it doesn't show that way on a waterfall plot from Webpagetest.

With CDN serving images: WebPagetest Test Result - Dulles : www.mu-...read.53225/page-62 - 12/04/16 03:40:20

---

Without CDN: WebPagetest Test Result - Dulles : www.mu-...read.53225/page-62 - 12/04/16 03:41:40

Again, those data from Webpagetest don't show a performance difference. But when I disable the CDN, I can see the images loading sequentially (using Chrome), and members start to complain about page speeds and images timing out.

I'd really like to drop the CDN so I can make full use of ngx_pagespeed image optimization. Somehow I feel like the CDN is serving as a workaround for some other issue I am missing at the moment.

 

Fwiw, I am using latest versions of Centminmod, XenForo, PHP 7. Have tons of free RAM and not coming anywhere near the disk I/O limits or bandwidth limits.

 

Server IP is 104.156.56.59

Hosted on US East Coast by Hivelocity

CDN is KeyCDN.

I am on the east coast of the US, located not far from the server. Yet the pages are clearly faster when I serve the images via CDN even when every single image is a cache MISS with KeyCDN.

I know it doesn't show in the webpagetest results, but it is obvious in use. @Matt can attest to that as well. He was helping me try to get the images to show faster without the CDN, but the heaviest pages would time out no matter what we did.

 

That is the reason I want to get ngx_pagespeed working on those images. On desktop, people on my sites like to view 1600px images at jpegoptim quality 90%. That means page sizes up to 20+ MB at times since it's a photography site and there can be 50 or more images on a page.

I can't find any way to do responsive images using srcset in XenForo like WordPress does now by default. I've looked into CDNs that resize images according to user agent, and those have so far been too expensive.

ngx_pagespeed as you know can resize images for mobile, but there is no way to do that with KeyCDN since the KeyCDN servers don't have pagespeed installed. I can rewrite assets from the CDN back to my origin server, but that defeats the purpose of the CDN.

Has anyone else encountered the issue I mentioned in the OP and found a way to solve it?

 

I think my members would revolt! Also, the OP alone is often very heavy on my site.

For example, look at this page: Grand Staircase NM and Beyond | Mu-43.com - Micro Four Thirds User Group

That's a 19.9MB page, and almost all the weight is in the first 6 posts.

The ideal solution will resize and re-format images depending on screen size, pixel density, support for webp, and connection speed.

ImageEngine by ScientiaMobile comes close. Look at the difference between using KeyCDN to serve full sized images to an iPhone:

WebPagetest Test Result - Dulles : www.mu-...-and-beyond.87530/ - 11/23/16 17:34:53

And using ImageEngine to serve resized images to that same iPhone:

WebPagetest Test Result - Dulles : www.mu-...-and-beyond.87530/ - 11/23/16 17:28:30

But ImageEngine worked out to more than 50X more expensive than KeyCDN. They charge a per image fee rather than a flat bandwidth fee, and that quickly mounts for my sites.

I'm currently in talks with Fastly, who offer similar services to ImageEngine but for lower cost. Maybe that will be the solution. But I'd sure like to get it all done with ngx_pagespeed and stop using a CDN altogether if possible.

 

@Matt The current method with KeyCDN is better than the old way I think. Page weight and performance are better now than they were with most images embedded from Flickr.

So I don't regret hosting all the images, just trying to get things even more optimized. The POTN rules are very strict. I wouldn't want to limit members that much. But I do sometimes wonder whether 1600px is too high.

 

@eva2000 - I keep getting this if I try to quote a message: