Speeding up image heavy site

Support
1

After seeing all the warnings about using Cloudflare and heavy image sites, I decided to take on that challenge for a small pet project I’ve been working on. While I’ve been mostly successful with Cloudflare, I am having trouble figuring out why I can’t get my theme images to load before the JS execution finishes (seems to be a non CDN issue)…

Is there a way to get images to load earlier (simultaneously with js/css, or just during the js execution) or is this a hard no? Could this a necessary prioritization?

Below is my webpagetest.org results, my focus is the large gap between ~2.3s when the last js script finishes loading and ~3.4 when the images start their download…

image
image1098×1514 328 KB

Theme layout:

image
image1859×1488 466 KB

Configuration
Link: https://investorcommunity.org
Theme: Graceful
Server: DO Droplet (no additional caching or s3)
CDN: Cloudflare (free version, with “Rocket Loader” disabled for js interference). Of note, disabling Cloudflare doesn’t seem to affect this particular issue.

Appreciate any ideas anyone has…

2

That gap is the JS execution period, when we finish downloading the Discourse EmberJS app and start it up. We have multiple people working on modernizing the EmberJS app and we will starting heaping the benefits of this work this year.

But as a Javascript application there will always be some JS execution going on, so I wouldn’t really worry too much about this if you are already set on using Discourse for your community.

1 Like
3

Makes sense… thanks for the explanation.

Is there a way to initiate the theme image transfers in parallel with that script initializing, so that the images will be preloaded and display as soon as the js completes? Or is the js script a hard prereq for knowing which images to pull I’m the first place?

Excited to hear about EmberJS - looking forward to the great improvements you guys keep putting out!

1 Like