Welcome to Centmin Mod Community
Become a Member

Xenforo Attachment images make the page slow without CDN

Discussion in 'Forum software usage' started by Amin Sabet, Dec 4, 2016.

  1. Amin Sabet

    Amin Sabet Member

    47
    6
    8
    Nov 8, 2015
    Ratings:
    +13
    Local Time:
    12:56 AM
    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.
     
  2. Amin Sabet

    Amin Sabet Member

    47
    6
    8
    Nov 8, 2015
    Ratings:
    +13
    Local Time:
    12:56 AM
    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.
     
  3. eva2000

    eva2000 Administrator Staff Member

    28,942
    6,570
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +9,751
    Local Time:
    2:56 PM
    Nginx 1.13.x
    MariaDB 5.5
    • your geographic location ? your ip ?
    • server geographic location ? your server ip ?
    • cdn's geographic location ? cdn ip for served images ?
    • ping times between you and server + you and cdn ip ?
    cdn's generally are faster if their edge location geographically is closer to you than your origin server

    your webpagetest results side by side here

    but at 6-7MB page size it will be slow either way !
     
  4. Amin Sabet

    Amin Sabet Member

    47
    6
    8
    Nov 8, 2015
    Ratings:
    +13
    Local Time:
    12:56 AM
    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.
     
  5. eva2000

    eva2000 Administrator Staff Member

    28,942
    6,570
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +9,751
    Local Time:
    2:56 PM
    Nginx 1.13.x
    MariaDB 5.5
    Are you doing Chrome tests with cleared browser cache/disabled cache ?

    FYI, your ngx_pagespeed version 1.11.33.2 is outdated too 1.11.33.4 beta is latest so I'd also ask if you're using latest Nginx 1.11.6 ?

    I can only see in Chrome your CDN version so not much I can see from here. Centmin Mod is provide as is, so short of scripted related bugs or issues, any further optimisation to the web stack components - nginx, php-fpm, mariadb mysql, csf firewall etc or web app specific configurations are left to the Centmin Mod user to deal with. So I do not provide any free support for such.

    However, Centmin Mod users are free to help each other out and ask questions or give answers on this community forum. My hopes are that this community forum evolves so that more veteran long time Centmin Mod users help new Centmin Mod users out :)
     
  6. eva2000

    eva2000 Administrator Staff Member

    28,942
    6,570
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +9,751
    Local Time:
    2:56 PM
    Nginx 1.13.x
    MariaDB 5.5
    also speed of your ISP net connection versus your members ? and your member's location ? where member locations get further from origin, the CDN will be always faster for those members.

    example of 3g fast vs 3g slow in same location dulles = 32 vs 73 seconds to load that same page WebPagetest - Visual Comparison

    upload_2016-12-4_15-1-57.png

    If you want faster page loads reduce page size from 6-7MB to under 1MB per page.

    in chrome on 3g throttled connection that page took 1 minute to load !

    upload_2016-12-4_15-6-37.png
     
    Last edited: Dec 4, 2016
  7. Amin Sabet

    Amin Sabet Member

    47
    6
    8
    Nov 8, 2015
    Ratings:
    +13
    Local Time:
    12:56 AM
    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?
     
  8. eva2000

    eva2000 Administrator Staff Member

    28,942
    6,570
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +9,751
    Local Time:
    2:56 PM
    Nginx 1.13.x
    MariaDB 5.5
    maybe change your posts per thread from 20 to 10 to halve number of posts shown per thread page ? and if you limit number of attachments per post, you can spread those many images over more pages ?
     
  9. Amin Sabet

    Amin Sabet Member

    47
    6
    8
    Nov 8, 2015
    Ratings:
    +13
    Local Time:
    12:56 AM
    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.
     
  10. Matt

    Matt Moderator Staff Member

    680
    314
    63
    May 25, 2014
    Sheffield, UK
    Ratings:
    +433
    Local Time:
    5:56 AM
    1.7.1
    MariaDB 10
    It's a tough one Amin. We've worked a lot on this, and looking at it again, I personally wouldn't be hosting all the images yourself, as it seems to be causing a lot of issues.

    I spend quite a lot of time on POTN and they have some really strict rules on images

    IMAGE POSTING RULES (READ BEFORE YOU POST!) -- Kids & Family in photography-on-the.net forums

    Almost every decent photographer used Flickr, so I would ask that they use their flickr images and have those embedded, rather than re-hosting them.
     
    • Informative Informative x 1
  11. eva2000

    eva2000 Administrator Staff Member

    28,942
    6,570
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +9,751
    Local Time:
    2:56 PM
    Nginx 1.13.x
    MariaDB 5.5
    Probably also need to tweak and tune ngx_pagespeed settings too so consult the ngx_pagespeed documentation :)

    I created a test forum at Testing Forum | Centmin Mod Community if @Amin Sabet wants to create and replicate one of your threads and see what happens here for you and your visitors.

    definitely not optimal at all ! slow mobile connections would probably timeout !
     
  12. Matt

    Matt Moderator Staff Member

    680
    314
    63
    May 25, 2014
    Sheffield, UK
    Ratings:
    +433
    Local Time:
    5:56 AM
    1.7.1
    MariaDB 10
    What are your attachment limits? These are Amin's

    upload_2016-12-5_10-29-2.png
     
    • Informative Informative x 1
  13. eva2000

    eva2000 Administrator Staff Member

    28,942
    6,570
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +9,751
    Local Time:
    2:56 PM
    Nginx 1.13.x
    MariaDB 5.5
    ah that would make it harder to replicate heh

    max attachment file size = 1024kb (50MB is crazy large) forum attachments were never really designed for such !

    max 35 attachments per message

    and 1920x1920 dimensions and thumbnails 100x100
     
  14. Amin Sabet

    Amin Sabet Member

    47
    6
    8
    Nov 8, 2015
    Ratings:
    +13
    Local Time:
    12:56 AM
    @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.
     
    • Like Like x 1
  15. Amin Sabet

    Amin Sabet Member

    47
    6
    8
    Nov 8, 2015
    Ratings:
    +13
    Local Time:
    12:56 AM
    @eva2000 - I keep getting this if I try to quote a message:
     

    Attached Files:

  16. eva2000

    eva2000 Administrator Staff Member

    28,942
    6,570
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +9,751
    Local Time:
    2:56 PM
    Nginx 1.13.x
    MariaDB 5.5
    ah sucuri cloudproxy doesn't like it hmmm

    what size attachment did you try uploading ?
     
  17. Matt

    Matt Moderator Staff Member

    680
    314
    63
    May 25, 2014
    Sheffield, UK
    Ratings:
    +433
    Local Time:
    5:56 AM
    1.7.1
    MariaDB 10
    That's good to hear. I'll double check the server when I get home tonight, and make sure PageSpeed has been updated (I thought it was set to use the latest version per the Centmin build).
    Good old Sucuri !
     
    • Funny Funny x 1
  18. Matt

    Matt Moderator Staff Member

    680
    314
    63
    May 25, 2014
    Sheffield, UK
    Ratings:
    +433
    Local Time:
    5:56 AM
    1.7.1
    MariaDB 10
    Pagespeed updated. I'd got the version hard coded in the custom.inc file :banghead:
     
    • Like Like x 2
  19. eva2000

    eva2000 Administrator Staff Member

    28,942
    6,570
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +9,751
    Local Time:
    2:56 PM
    Nginx 1.13.x
    MariaDB 5.5
    yeah pros and cons of a persistent config file :D
     
    • Agree Agree x 1